18041 sujets

Questions générales et questions de débutants

Comportement de Bloc <div> en largeur

Bonjour (ou bonsoir Smiley langue )

Je suis débutant en css, et j'ai passé quelques tutos en revue, (ainsi qu'un livre). Je suis en train d'effectuer quelques tests avec de simples div. Et je ne comprends pas un certain point :

Soit 2 div (de comportement 'bloc')

Css:

#conteneur { 
background-color: red;
height: 20px;
}

#conteneur2 { 
background-color: blue;
width: 1600px;
height: 20px;
}


Html: 

<BODY>
<div id="conteneur">
</div>
<div id="conteneur2">
</div>
</BODY>


Si j'affiche uniquement le bloc 'conteneur', j'obtient une barre rouge qui occupe toute ma page. C'est parfait, c'est exactement ce que je souhaite. Cependant, si je rajoute le bloc container2, ma barre rouge n'occupe plus la totalité de la page, mais uniquement jusque la limite de la fenetre. Donc si je commence à scroller vers la droite, ma barre rouge cesse.

En résumé:
un bloc de largeur 'automatique'
un bloc de largeur fixe qui provoque un scroll horizontal.
Comment est ce que je peux force mon premier bloc à TJRS prendre la largeur de toute la page ?

upload/33780-ff.jpg

j'ai essayé avec des width:100%, witdth:auto; pour le container(1) mais aucun effet!

Je suis certain que la solution/explication est surement simple.. mais je ne tombe pas dessus :s
Merci d'avance pour toute aide, conseil, explication Smiley smile
Modifié par G0lgi (30 Oct 2010 - 01:53)
Hello,

Un simple


body{
width:1600px;
}


devrait résoudre ton problème.

Si tu places un bloc de 1600px de largeur dans ta première div ça marchera aussi.

Par défaut les dimensions sont celle de ta fenêtre donc 100% c'est ta fenêtre Smiley smile
Modifié par AspiGeek (30 Oct 2010 - 08:09)
Hello, Merci bcp

Donc si je comprends bien, un bloc prends toujours la taille de la fenêtre, et non de la page entière ?
Par la même occasion, quand je regarde avec l'outil Firebug, l'élément à 1600px sort du bloc body. C'est normal ?
Je pensais que le bloc body englobait toujours chaque élément, et donc d'office serrait aussi large/haut que tout les éléments du site...

En fait mon premier mon premier bloc était censé être le header de mon site, qui doit toujours prendre l'intégralité de la page.
Et le 2eme bloc, un menu dans le header. Le menu sera moins large que le header. Cependant si je réduit la fenêtre du navigateur et provoque ainsi l'apparition d'une scrollbar, mon entête ne prends plus l'intégralité de la page, mais uniquement de la fenêtre!

Mais cette solution résout temporairement mon problème Smiley smile
Cependant n'y a t'il pas un moyen plus 'dynamique' ?
Modifié par G0lgi (30 Oct 2010 - 13:32)
Non le bloc prend la largeur de son parent, dans le cas d'un body, 100% correspond à ta fenêtre.
Pour ta demande tu dois supprimer la largeur de ton deuxième conteneur simplement.
Si le contenu prend trop de place, il ira à la ligne.

Edit: Fais gaffe aussi si tu débutes aux fusions de marges et au css par défaut des navigateurs qui te rajoutent par ex. des marges sur certains éléments.

Je viens de relire ton post plusieurs fois et c'est pas clair ton histoire de page et de fenêtre... ton header doit prendre la largeur de ta page, c'est quoi la page pour toi ?
Modifié par AspiGeek (30 Oct 2010 - 16:03)
Sujet clos
Aller à