affichage titre - Forum HTML / CSS / XHTML

La Communauté Webmaster

  Forum-webmaster
  Technique - programmation
  HTML / CSS / XHTML (Modérateurs: Shain, Netah, Lilian, lauryv, ToToMaStEr)
  affichage titre

« Précédent Suivant »

Pages: [1]

Auteur

Sujet: affichage titre (Lu 2958 fois)

affichage titre
« sur: le 04-04-2012 a 19:45:47 »

Elfy75
Membre récent

Hors-Ligne

Sexe: Femelle

Messages: 69

Bonjour à tous,
Je rencontre de nouveau un problème d'affichage (pour ceux qui m'ont aidé il y a quelques jours )

Lorsque je réduis ou augmente la fenêre de mon navigateur, mon contenu (photos) bouge comme je le souhaitais, par contre mon titre qui se trouve à droite de mes photos ne suit pas le mouvement. et par conséquent passe au dessus de mes photos quand j'augmente ma fenêtre

Je voudrais tout simplement que tout bouge de la même façon je j'augmente ou réduise cette fenêtre.
Voici tout mon code.
Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Jules Egger</title>
</head>
<link rel="stylesheet" media="screen" type="text/css" title="style css" href="style.css" />

<body>
   <div id="site">
   <div id="vignettes">
     <a href="series/jules_egger_1.html"><img src="vignettes/fede_0375.jpg" width="160" height="103" style="padding-right:15px;"/></a>
<img src="vignettes/2949-45.jpg" width="160" height="103" style="padding-right:15px;"/>
<img src="vignettes/WITCH2app.jpg" width="160" height="103" style="padding-right:15px;"/>
<img src="vignettes/photo_Jules_Egger_220.jpg" width="160" height="103" style="padding-right:15px;"/>
<br />
<a href="series/jules_egger_2.html"><img src="vignettes/07egtirag.jpg" width="160" height="103" style="padding-right:15px; padding-top:15px" />
<img src="vignettes/fourcade01.jpg" width="160" height="103" style="padding-right:15px; padding-top:15px" />
<img src="vignettes/1390-54BG.jpg" width="160" height="103" style="padding-right:15px; padding-top:15px" />
<img src="vignettes/0442-45DP.jpg" width="160" height="103" style="padding-right:15px; padding-top:15px" />
   <br />
<a href="series/jules_egger_3.html"><img src="vignettes/faretra0__0789.jpg" width="160" height="103" style="padding-right:15px; padding-top:15px" />
<img src="vignettes/icd __0127-4.jpg" width="160" height="103" style="padding-right:15px; padding-top:15px" />
<img src="vignettes/PLS380.jpg" width="160" height="103" style="padding-right:15px; padding-top:15px" />
<img src="vignettes/bacon.jpg" width="160" height="103" style="padding-right:15px; padding-top:15px" />
<br />
<a href="series/jules_egger_4.html"><img src="vignettes/2997-54.jpg" width="160" height="103" style="padding-right:15px; padding-top:15px" />
<img src="vignettes/0486-42.jpg" width="160" height="103" style="padding-right:15px; padding-top:15px" />
<img src="vignettes/04R2.jpg" width="160" height="103" style="padding-right:15px; padding-top:15px" />
<img src="vignettes/fourcade01.jpg" width="160" height="103" style="padding-right:15px; padding-top:15px" />
<br />
<a href="series/jules_egger_5.html"><img src="vignettes/0402-44.jpg" width="160" height="103" style="padding-right:15px; padding-top:15px" />
<img src="vignettes/386-54.jpg" width="160" height="103" style="padding-right:15px; padding-top:15px" />
<img src="vignettes/0954.jpg" width="160" height="103" style="padding-right:15px; padding-top:15px" />
<img src="vignettes/2184-52.jpg" width="160" height="103" style="padding-right:15px; padding-top:15px" />

</div>
<h1> J***** V****r</h1>
<h2> <a href="personnalites.html">Personnalités</a> - <a href="studio.html">Studio</a> - <a href="infos.html">Infos</a> - <a href="contact.html">Contact</a></h2>
</div>
   </div>
</body>
</html>

Code:

#site {
width:1200px;
height:800px;
margin-left:auto;
margin-right:auto;
overflow:auto;
}

body {
width:100%;
background-color:#FFF;
background-repeat:repeat;
margin:auto;
}

#vignettes {
   width:800px;
   margin-left:90px;
   margin-top:90px;
   margin-bottom:90px;
}

h1 {
   width:1200px;
   color:#000;
   font-size:30px;
   font-family:Arial, Helvetica, sans-serif;
   letter-spacing:4px;
   position:absolute;
   left:900px;
   top:475px;

}

h2 {
   width:1200px;
   color:#000;
   font-size:20px;
   font-family:Arial, Helvetica, sans-serif;
   position:absolute;
   left:900px;
   top:525px;
}

a {
   color:#000000;
   text-decoration:none;
}

a:hover {
text-decoration:underline;
}

Voilà, j'ai pourtant essayé plusieurs choses mais rien n'y fais
Si quelqu'un peut m'éclairer se serait gentil.
Bonne soirée à tous,
Charlotte

Rapporter au modérateur

Re:affichage titre
« Répondre #1 sur: le 05-04-2012 a 10:00:14 »

dandreaweb
P'tit nouveau

Hors-Ligne

Sexe: Male

Messages: 124

dandreaweb

Bonjour Charlotte,

Je vous ai donné la solution pour votre problème précédent, mais il y a une chose que je ne comprends pas. Dans un autre poste vous dites :

"Personnellement j'ai suivi une formation à distance via l'université de Strasbourg, cette formation est vraiment complète avec de très bon enseignement.
Voici le lien de leur site: http://www.eformation-webmaster.net/".

Cette formation ne doit pas être si complète si vous n'arrivez pas à régler les problèmes que vous avez actuellement pour votre site. Je me trompe ?
Cordialement

Rapporter au modérateur

Réalisation de sites internet , localisation : 69
dandreaweb.com
siren:534146618

Re:affichage titre
« Répondre #2 sur: le 05-04-2012 a 10:42:58 »

Elfy75
Membre récent

Hors-Ligne

Sexe: Femelle

Messages: 69

Citation de: dandreaweb le le 05-04-2012 a 10:00:14
Bonjour Charlotte,

Je vous ai donné la solution pour votre problème précédent, mais il y a une chose que je ne comprends pas. Dans un autre poste vous dites :

"Personnellement j'ai suivi une formation à distance via l'université de Strasbourg, cette formation est vraiment complète avec de très bon enseignement.
Voici le lien de leur site: http://www.eformation-webmaster.net/".

Cette formation ne doit pas être si complète si vous n'arrivez pas à régler les problèmes que vous avez actuellement pour votre site. Je me trompe ?
Cordialement

Bonjour,
La formation que j'ai suivi via l'université de Strasbourg était comme je l'ai dit vraiment complète avec de très bon enseignants, un très bon suivi. Cette formation à duré un an, avec de nombreux séminaires, c'était assez rythmé, donc beaucoup de théorie mais très peu de pratique pour ma part travaillant à côté. D'autres on très bien pu allier les deux, et on aujourd'hui un excellent niveau. La qualité de la formation de l'université de Strasbourg n'est donc pas à remettre en cause .

La solution que vous m'aviez donné à très bien fonctionné et vous en remercie, cependant après plusieurs manipulations sur mon titre, je ne parviens pas à obtenir le résultat souhaité.

Charlotte

Rapporter au modérateur

Re:affichage titre
« Répondre #3 sur: le 05-04-2012 a 11:36:13 »

KB
Superactif

Hors-Ligne

Messages: 613

1°. ton appel a ta feuille de style dois etre dans le <head>
2° pouquoi donner des largeurs aussi grande à tes h1 et h2?

Rapporter au modérateur

Re:affichage titre
« Répondre #4 sur: le 05-04-2012 a 11:46:02 »

Elfy75
Membre récent

Hors-Ligne

Sexe: Femelle

Messages: 69

Citation de: KB le le 05-04-2012 a 11:36:13
1°. ton appel a ta feuille de style dois etre dans le <head>
2° pouquoi donner des largeurs aussi grande à tes h1 et h2?

Bonjour,
Erreur de débutante pour le placement de la feuille de style, merci
Mes largeurs sont aussi grandes car mon titre est positionné à droite de mes vignettes ( choix de mon ami), il est bien positionné là ou je le voulais mais ne suis pas mon contenu lorsque je réduis ou augmente la taille de ma fenêtre. Je ne trouve pas mon erreur.

Rapporter au modérateur

Re:affichage titre
« Répondre #5 sur: le 05-04-2012 a 11:53:51 »

KB
Superactif

Hors-Ligne

Messages: 613

La largeur na rien a voir avoir le positionnement....
et chez moi, sur IE et FF, ton texte est toujours a droite des photos.

Si tu avais fait plus simple en créant 2 div l'une à coté de l'autre, le tout dans une div container, tu aurais évité bien des soucis

Rapporter au modérateur

Re:affichage titre
« Répondre #6 sur: le 05-04-2012 a 12:01:41 »

Elfy75
Membre récent

Hors-Ligne

Sexe: Femelle

Messages: 69

Citation de: KB le le 05-04-2012 a 11:53:51
La largeur na rien a voir avoir le positionnement....
et chez moi, sur IE et FF, ton texte est toujours a droite des photos.

Si tu avais fait plus simple en créant 2 div l'une à coté de l'autre, le tout dans une div container, tu aurais évité bien des soucis

Autant pour moi, je mélange tout, je croyais que tu me parlais de la largeur de ma position absolute, je suis tellement préoccupée par ce truc là.
une largeur de 800 px suffit?
Merci pour ton aide