pb fenêtre navigateur - Forum HTML / CSS / XHTML

La Communauté Webmaster

  Forum-webmaster
  Technique - programmation
  HTML / CSS / XHTML (Modérateurs: Shain, Netah, Lilian, lauryv, ToToMaStEr)
  pb fenêtre navigateur

« Précédent Suivant »

Pages: [1]

Auteur

Sujet: pb fenêtre navigateur (Lu 1667 fois)

pb fenêtre navigateur
« sur: le 02-04-2012 a 12:28:11 »

Elfy75
Membre récent

Hors-Ligne

Sexe: Femelle

Messages: 69

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>
</div>
</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

Rapporter au modérateur

Re:pb fenêtre navigateur
« Répondre #1 sur: le 02-04-2012 a 13:44:38 »

WebVitrine
Superactif

Hors-Ligne

Sexe: Male

Messages: 639

Critique Mastery Max level !

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).

Rapporter au modérateur

Prestataire Web / Création de site Internet. Visitez notre site WebVitrine
Suivez-nous sur Google+, ou Facebook
Siret : 512 796 889 00016

Re:pb fenêtre navigateur
« Répondre #2 sur: le 02-04-2012 a 14:18:35 »

Elfy75
Membre récent

Hors-Ligne

Sexe: Femelle

Messages: 69

Code:
[quote author=WebVitrine link=board=3;threadid=27613;start=0#msg109342 date=1333367078]
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).
[/quote]
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
Merci

Rapporter au modérateur

Re:pb fenêtre navigateur
« Répondre #3 sur: le 02-04-2012 a 14:27:45 »

WebD
Superactif

Hors-Ligne

Sexe: Male

Messages: 938

Je pense que tu as mal utilisé le width car c'est la solution.
Peux-tu nous transmettre l'url de ton site?

Olivier.

Rapporter au modérateur

Agence Web | Sticker MacBook | Lunettes personnalisées

Re:pb fenêtre navigateur
« Répondre #4 sur: le 02-04-2012 a 14:30:30 »

Elfy75
Membre récent

Hors-Ligne

Sexe: Femelle

Messages: 69

Citation de: 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.
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

Rapporter au modérateur

Re:pb fenêtre navigateur
« Répondre #5 sur: le 02-04-2012 a 14:33:48 »

WebD
Superactif

Hors-Ligne

Sexe: Male

Messages: 938

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

Rapporter au modérateur

Agence Web | Sticker MacBook | Lunettes personnalisées

Re:pb fenêtre navigateur
« Répondre #6 sur: le 02-04-2012 a 14:39:46 »

Elfy75
Membre récent

Hors-Ligne

Sexe: Femelle

Messages: 69

Citation de: 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
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>
<h1> J**** H*******</h1>
<h2> Personnalités - Studio - Infos - Contact</h2>
</div>
   </div>
</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

Rapporter au modérateur

Re:pb fenêtre navigateur
« Répondre #7 sur: le 03-04-2012 a 09:46:02 »

Elfy75
Membre récent

Hors-Ligne

Sexe: Femelle

Messages: 69

Toujours rien après plusieurs test, je ne comprends pas du tout. Quelqu'un à une idée?
Bonne journée

Rapporter au modérateur

Re:pb fenêtre navigateur
« Répondre #8 sur: le 03-04-2012 a 10:50:36 »

WebD
Superactif

Hors-Ligne

Sexe: Male

Messages: 938

Met ton site en ligne et on pourra t'aider.

Rapporter au modérateur

Agence Web | Sticker MacBook | Lunettes personnalisées

Re:pb fenêtre navigateur
« Répondre #9 sur: le 03-04-2012 a 11:03:09 »

seoreference
Membre récent

Hors-Ligne

Sexe: Male

Messages: 55

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...

Rapporter au modérateur

Referenceurs, retrouvez toute l'actualité du référencement sur notre site internet seoreference.fr

Re:pb fenêtre navigateur
« Répondre #10 sur: le 03-04-2012 a 11:04:29 »

dandreaweb
P'tit nouveau

Hors-Ligne

Sexe: Male

Messages: 124

dandreaweb

Bonjour,
Dans votre code html vous avez une fin de balise </div>, 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.

Rapporter au modérateur

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

Re:pb fenêtre navigateur
« Répondre #11 sur: le 03-04-2012 a 11:23:26 »

Elfy75
Membre récent

Hors-Ligne

Sexe: Femelle

Messages: 69

Citation de: dandreaweb le le 03-04-2012 a 11:04:29
Bonjour,
Dans votre code html vous avez une fin de balise </div>, 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