Titre: pb fenêtre navigateur
Posté par: Elfy75 le le 02-04-2012 a 12:28:11
Bonjour à tous,
J'ai un souci sur lequel je penche depuis un moment, quand je réduis la fenêtre de mon navigateur, tout mes éléments bougent et ça ne ressemble plus à rien
Je souhaiterais que les éléments reste tels qu'ils sont comme avant de réduire la taille du navigateur.
Pas simple à expliquer sans illustrations..
Voici mes codes:
Code:
<body>
<div id="site">
<div id="vignettes">
<img src="vignettes/fede_0375.jpg" width="160" height="103" style="padding-right:15px;"/>
<img src="vignettes/2184-52.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/fede_0375.jpg" width="160" height="103" style="padding-right:15px;"/>
<br />
<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 />
<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" />
</div><!--fin div vignettes -->
</div><!--fin div site -->
</body>
</html>
|
|
Code:
#site {
width:100%;
height:100%;
margin-left:auto;
margin-right:auto;
}
body {
background-color:#FFF;
background-repeat:repeat;
margin:auto;
}
#vignettes {
width:800 px;
margin-left:90px;
margin-top:90px;
margin-bottom:90px;
}
|
|
Voilà, j'espère mettre fais comprendre, si quelqu'un à une petite idée je suis preneuse.
Merci à tous
Charlotte ??? ??? |
Titre: Re:pb fenêtre navigateur
Posté par: WebVitrine le le 02-04-2012 a 13:44:38
Juste une piste, tu utilises un width à 100%.
Donc la taille de ton site s'adapte automatiquement au 100% de la largeur de ton navigateur.
Si tu donnes une valeur de 2000px par exemple, la largeur de ta div restera fixe (que tu augmentes ou réduises ta fenêtre). |
Titre: Re:pb fenêtre navigateur
Posté par: Elfy75 le le 02-04-2012 a 14:18:35
Code:
Juste une piste, tu utilises un width à 100%.
Donc la taille de ton site s'adapte automatiquement au 100% de la largeur de ton navigateur.
Si tu donnes une valeur de 2000px par exemple, la largeur de ta div restera fixe (que tu augmentes ou réduises ta fenêtre).
|
|
merci pour ta réponse, je viens de faire quelques essais en modifiant mon calque parents, pas de changement pour l'instant avec ce code si
[code
]#site {
width:1200 px;
height:600 px;
margin-left:auto;
margin-right:auto;
overflow:auto;
} |
|
J'ai testé avec un min-width, une position également rien...
Je continue, si tu as encore un petite piste, c'est pas de refus ;D
Merci |
Titre: Re:pb fenêtre navigateur
Posté par: WebD le le 02-04-2012 a 14:27:45
Je pense que tu as mal utilisé le width car c'est la solution.
Peux-tu nous transmettre l'url de ton site?
Olivier. |
Titre: Re:pb fenêtre navigateur
Posté par: Elfy75 le le 02-04-2012 a 14:30:30
Je pense que tu as mal utilisé le width car c'est la solution.
Peux-tu nous transmettre l'url de ton site?
Olivier.
|
|
Bizarre, mon code est bon?
mon site n'est pas encore en ligne, j'aurai bien mis des captures d'écran mais je ne vois pas comment joindre une image sur le forum |
Titre: Re:pb fenêtre navigateur
Posté par: WebD le le 02-04-2012 a 14:33:48
Ce n'est pas la peine de nous mettre des impressions écran, nous voyons très bien ce qui se passe.
Le problème c'est que nous n'avons pas assez d'informations.
Essai de mettre width:100% à ton body et width:1200 px à ton #site
Olivier |
Titre: Re:pb fenêtre navigateur
Posté par: Elfy75 le le 02-04-2012 a 14:39:46
Ce n'est pas la peine de nous mettre des impressions écran, nous voyons très bien ce qui se passe.
Le problème c'est que nous n'avons pas assez d'informations.
Essai de mettre width:100% à ton body et width:1200 px à ton #site
Olivier
|
|
Toujours pas je ne comprends pas, je vous remet le code en entier avec mes changements.
Code:
<body>
<div id="site">
<div id="vignettes">
<img src="vignettes/fede_0375.jpg" width="160" height="103" style="padding-right:15px;"/>
<img src="vignettes/2184-52.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/fede_0375.jpg" width="160" height="103" style="padding-right:15px;"/>
<br />
<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 />
<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 />
<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/010 cmjn.jpg" width="160" height="103" style="padding-right:15px; padding-top:15px" />
<br />
<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/2949-45.jpg" width="160" height="103" style="padding-right:15px; padding-top:15px" />
</div><!--fin div vignettes -->
<h1> J**** H*******</h1>
<h2> Personnalités - Studio - Infos - Contact</h2>
</div><!--fin div titre -->
</div><!--fin div site -->
</body>
|
|
Code:
#site {
width:1200 px;
height:600 px;
margin-left:auto;
margin-right:auto;
overflow:auto;
}
body {
width:100%;
background-color:#FFF;
background-repeat:repeat;
margin:auto;
}
#vignettes {
width:800 px;
margin-left:90px;
margin-top:90px;
margin-bottom:90px;
}
h1 {
color:#000;
font-size:30px;
font-family:Arial, Helvetica, sans-serif;
letter-spacing:4px;
position:absolute;
top:475px;
left:850px;
}
h2 {
color:#000;
font-size:20px;
font-family:Arial, Helvetica, sans-serif;
position:absolute;
top:525px;
left:850px;
}
|
|
Voilà tout mon code au complet |
Titre: Re:pb fenêtre navigateur
Posté par: Elfy75 le le 03-04-2012 a 09:46:02
Toujours rien après plusieurs test, je ne comprends pas du tout. Quelqu'un à une idée?
Bonne journée |
Titre: Re:pb fenêtre navigateur
Posté par: WebD le le 03-04-2012 a 10:50:36
| Met ton site en ligne et on pourra t'aider. |
Titre: Re:pb fenêtre navigateur
Posté par: seoreference le le 03-04-2012 a 11:03:09
salut,
Tu dois placé tes images dans des divs:
Code:
<div class="nelDiv">
<img src="vignettes/fede_0375.jpg" width="160" height="103" style="padding-right:15px;"/>
<img src="vignettes/2184-52.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/fede_0375.jpg" width="160" height="103" style="padding-right:15px;"/>
</div>
<div class="nelDiv">
<img src="vignettes/fede_0375.jpg" width="160" height="103" style="padding-right:15px;"/>
<img src="vignettes/2184-52.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/fede_0375.jpg" width="160" height="103" style="padding-right:15px;"/>
</div>
etc... |
|
|
Titre: Re:pb fenêtre navigateur
Posté par: dandreaweb le le 03-04-2012 a 11:04:29
Bonjour,
Dans votre code html vous avez une fin de balise </div><!--fin div titre -->, je ne vois pas la balise ouvrante.
Ensuite dans le css :
#site {
width:1200 px;
height:600 px;
}
#vignettes {
width:800 px;
}
vous avez des espaces entre la valeur et px et il n'en faut pas. |
Titre: Re:pb fenêtre navigateur
Posté par: Elfy75 le le 03-04-2012 a 11:23:26
Bonjour,
Dans votre code html vous avez une fin de balise </div><!--fin div titre -->, je ne vois pas la balise ouvrante.
Ensuite dans le css :
#site {
width:1200 px;
height:600 px;
}
#vignettes {
width:800 px;
}
vous avez des espaces entre la valeur et px et il n'en faut pas.
|
|
Bonjour,
Le problème venait bien de là, je n'aurai jamais pensé à un tel détail, merci beaucoup pour votre aide.
Bonne journée à vous |
Titre: Re:pb fenêtre navigateur
Posté par: Elfy75 le le 03-04-2012 a 11:24:26
Problème résolu, merci à tous pour votre aide,
Excellente journée. |
Forum-webmaster | Actionné par YaBB SE
© 2001-2003, YaBB SE Dev Team. Tous droits réservés.
|