Pourquoi ma div s'étire ???

Question

pan

24 Nov 2008 à 15:36

Bonjour,

D'après vous est-il normal qu'une div ayant une largeur fixe (900px) s'étire quand on lui applique un padding Smiley eek

?

Merci

yodaswii

24 Nov 2008 à 16:15

Difficile de répondre à ta question sans code et avec ton explication ...

Sinon à savoir : une largeur fixe s'entend sans les marges (internes et/ou externes). Donc un élément de 900px en width et avec un padding aura une largeur de 900px + le padding exprimé. Smiley cligne

Jihel

24 Nov 2008 à 16:18

Bonjour,

Oui, c'est normal : l'espace occupé par un bloc est égal à la somme des bordures + paddings + largeur.

Tu devrais trouver une explication détaillée sur cette page qui traite des décalages et marges. Smiley cligne

pan

24 Nov 2008 à 16:51

Merci pour vos réponses.

Dans mon cas, (voici mon code) comment dois-je faire pour que mon #header s'adapte à mon #site sans rien étirer ?
J'ai tenté le #header à 100% mais j'obtiens le même résultat

#site {	
	width: 1020px;
	margin: 0px auto;
	height: auto;
	background: url(../images/fond.jpg) repeat-y;	
	
}

#header {
	width: 100%;
	height: 161px;
	background: url(../images/header.jpg) no-repeat;
	margin: 0px;
	padding: 0px 15px;
	border: #FF0000 1px solid;	
}

et

<body>
	<div id="site">
          	<div id="header">
                    	Tralala
                    </div>
                    <div id="topmenu"></div>
                    <div id="content"></div>
                    <div id="footer"></div>
          </div>

</body>

Merci

Raphael

Administrateur

24 Nov 2008 à 16:57

Hello,

A quoi te sert de spécifier width 100% à "header" ? Y-a t'il une raison précise ?

Parce que là effectivement la largeur est de 100% + 30px. Donc mieux veut ne pas préciser la largeur.
Modifié par Raphael (24 Nov 2008 - 16:57)

pan

24 Nov 2008 à 17:03

Raphael a écrit :
Hello,

A quoi te sert de spécifier width 100% à "header" ? Y-a t'il une raison précise ?

Parce que là effectivement la largeur est de 100% + 30px. Donc mieux veut ne pas préciser la largeur.

En fait il doit s'étirer sur toute la largeur (d'où le 100%). Si je ne spécifie pas de taille il devient invisible Smiley decu

Jihel

24 Nov 2008 à 17:31

Alors il doit y avoir d'autres interactions que celles que tu nous donne. Le plus simple serait peut-être que tu nous mettes une page de démo en ligne... Smiley smile

Raphael

Administrateur

24 Nov 2008 à 18:09

Jihel a écrit :
Alors il doit y avoir d'autres interactions que celles que tu nous donne.

Oui parce que par défaut, un bloc comme <div> occupe de toute façon toute la largeur :
http://css.alsacreations.com/Bases-et-indispensables/Comprendre-le-positionnement-des-balises-en-CSS

pan

24 Nov 2008 à 18:55

Je suis au courant que le div occupe toute la place c'est bien pour ça que ça m'interpelle...

Je viens de refaire un test et si je ne spécifie pas de taille la div disparait...

Je n'ai pas de code particulier en amont si ce n'est

body {	
	background: url(../images/fond.jpg) no-repeat top center;
	width: 100%;
	height: 100%;
	font-family: "Trebuchet MS";
	color: #ffffff;
	}

Qu'en pensez vous ?

knarf

24 Nov 2008 à 19:30

Bonjour pan,

En testant le bout de code donné dans un environnement complet et valide (doctype and co) cela fonctionne très bien, Le header sa bordure et le texte son visible sans donner de largeur.

C'est pour cela que la page complète utilisée pour ton test (html+css) est nécéssaire.
Modifié par knarf (24 Nov 2008 - 19:30)

pan

24 Nov 2008 à 22:36

Ok voici mon code css

/* © 2008 index */

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, font, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, fieldset, form, label, legend {
	margin: 0px;
	padding: 0px;
	border: 0;
	outline: 0;
	vertical-align: baseline;
}
/* remember to define focus styles! */
:focus {
	outline: 0;
}
body {
	background: #3b0327 url(../images/fond.jpg) no-repeat top center;
	width: 100%;
	height: 100%;
	font-family: "Trebuchet MS";
	color: #ffffff;
}
a {
	color: #ffffff;
	text-decoration: none;
}
a:hover {
	color: #ffffff;
	text-decoration: underline;
}
img {
	border: none;
}
ul {
	padding:10px 0px 5px 30px;
	margin:0px;
}
li {
	padding:0px;
	margin:0px;
}
table {
	padding:0px;
	margin:0px;
}
h1 {
	font-size: 20px;
	color: #1b3c6e;
	margin: 0px 0px 5px 0px;
	padding: 0px;
	font-weight: lighter;
}
h2 {
	font-size: 12px;
	color: #612200;
	margin: 0px !important;
	padding: 5px 0px 5px 0px;
}
h3 {
	float: right;
	font-size:12px;
	color: #612200;
	margin: -50px 0px 0px 0px !important;
	padding-bottom: 5px;
}
h4 {
	font-size:12px;
	color: #233c7e;
	margin: 0px !important;
	padding: 0px;
}
/* hack FF pour masquer les contours pointillé sur les liens
-------------------------------------------------------*/
a {
	outline: none;
}
:focus {
	-moz-outline-style: none;
}
/*################################################*/

#site {
	position: relative;
	width: 1020px;
	margin: 0px auto;
	height: auto;
	background: url(../images/content-etirable.jpg) repeat-y;
}
#header {
	float: left;
	width: 1020px;
	height: 161px;
	background: url(../images/header.jpg) no-repeat;
	margin: 0px;
	padding: 0px;
	font-size: 9px;
}
#headerPrint {
	display: none;
}
#date {
	position: absolute;
	top: 5px;
	left: 20px;
	width: auto;
	height: 15px;
	margin: 0px;
	padding: 0px;
}
#contact {
	position: absolute;
	top: 5px;
	left: 200px;
	background: url(../images/fleche-fond-gris.gif) no-repeat 0 60%;
	width: auto;
	height: 15px;
	margin: 0px;
	padding: 0px 0px 0px 15px;
}
#newsletter {
	position: absolute;
	top: 5px;
	left: 520px;
	background: url(../images/fleche-fond-gris.gif) no-repeat 0 60%;
	width: auto;
	height: 15px;
	margin: 0px;
	padding: 0px 0px 0px 15px;
}
#logo {
	position: absolute;
	left: 20px;
	top: 46px;
	width: 331px;
	height: 115px;
	margin: 0px;
	padding: 0px;
}
#topDroit {
	position: absolute;
	left: 520px;
	top: 46px;
	width: 468px;
	height: 60px;
	margin: 0px;
	padding: 0px;
}
#topDroitSub {
	float: left;
	width: auto;
	height: auto;
	margin: 10px 0px 0px 0px;
	padding: 0px;
}
#recherche {
	float: right;
	width: auto;
	height: auto;
	margin: 0px 0px 9px 0px;
	padding: 0px;
}
#topMenu {
	float: left;
	background: url(../images/menu.jpg) no-repeat;
	width: 1020px;
	height: 33px;
	margin: 0px;
	padding: 0px;
}
#topMenu ul {
	float: left;
	margin: 0px 0px 0px 45px !important;
	margin: 0px 0px 0px 22px;
	padding: 2px 0px 0px 0px;
	font-size: 16px;
	font-weight: lighter;
}
#topMenu li {
	display: inline;
}
#topMenu li a {
	padding: 0px 14px;
	margin: 0px;
}
/*----------------------------------------------------------------------*/
/* debut - gestion contenu */
/*----------------------------------------------------------------------*/




#content {
	float: left;
	width: 1020px;
	height: 767px;
	min-height: 400px;
	margin: 0px;
	background: url(../images/fond-content.jpg) no-repeat;
}

/* --------------- 1 Contenu principal--------------- */
#contenuPrincipal {
	float: left;
	width: 648px;
	height: auto;
	margin: 2px 0px 0px 0px;
	padding: 0px;
}
/* --------------- 2 Colonne de droite --------------- */

/*----------------------------------------------------------------------*/
/* fin */
/*----------------------------------------------------------------------*/

/*----------------------------------------------------------------------*/
/* debut - formulaire */
/*----------------------------------------------------------------------*/


form {
	float:left;
	margin:0px;
	width: auto;
	width: auto !important;
	height: auto;
	height: auto !important;
}
form input {
	margin: 0px 5px;
	border: 0px;
	height: 12px;
	font-size: 9px;
	color: #333333;
}
#recherche form input {
	margin: 0px 5px 0px 0px;
	border: 0px;
	height: 30px;
	font-size: 26px;
	color: #666666;
}
fieldset {
	float:left;
	display:block;
	margin:0px;
	padding:0px;
	text-align:left;
}
label {
	float:left;
	margin: 0px;
	padding: 0px;
}
/*----------------------------------------------------------------------*/
/* fin - formulaire */
/*----------------------------------------------------------------------*/

/*----------------------------------------------------------------------*/
/* debut - gestion footer */
/*----------------------------------------------------------------------*/


#footer {
	float: left;
	width: 1020px;
	height: 206px;
	background: url(../images/footer.jpg) no-repeat;
	padding: 0px;
	margin: 0px;
	font-size: 12px;
	color: #68aec5;
}

#footer h1{
	color: #77dc00;
	font-size: 18px;
	font-weight: lighter;		
}

#footer ul{
	margin: 0px;
	padding: 0px;
}

#footer li{
	list-style-type: none;
	margin: 0px;
	padding: 0px;
}
#footer a {
	color: #68aec5;
	font-size: 12px;
	text-decoration: none;
}
#footer a:hover {
	text-decoration: underline;
	color: #9fe5fc;
}
#footerRubriques {
	float: left;
	width: 178px;
	height: auto;
	margin: 5px 0px 0px 30px !important;
	margin: 2px 0px 0px 15px;
}
#footerNews {
	float: left;
	width: 166px;
	height: auto;
	margin: 5px 0px 0px 5px !important;
	margin: 2px 0px 0px 2px;
}
#footerLiens {
	float: left;
	width: 166px;
	height: auto;
	margin: 5px 0px 0px 5px !important;
	margin: 2px 0px 0px 2px;
}
#footerMentions {
	float: right;
	width: 280px;
	height: auto;
	margin: 5px 30px 0px 0px !important;
	margin: 2px 15px 0px 0px;
}
#footerPrint {
	display: none;
}

/*----------------------------------------------------------------------*/
/* fin - gestion footer */
/*----------------------------------------------------------------------*/

et html


<!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>Document sans nom</title>
<link href="css/default.css" rel="stylesheet" type="text/css" media="screen" />
<link href="css/menu.css" rel="stylesheet" type="text/css" media="screen" />
<link href="css/print.css" rel="stylesheet" type="text/css" media="print" />
</head>
<body>
<div id="site">
      <div id="header">
            <div id="date">Mercredi 11 novembre 2008</div>
            <div id="contact"><a href="#">Contact</a></div>
            <div id="newsletter">
                  <form>
                        <fieldset>
                        <label>Newsletter</label>
                        <input name="news" type="text" size="20" />
                        <a href="#">OK</a>
                        </fieldset>
                  </form>
            </div>
            <div id="logo"><a href="#"><img src="images/logo.jpg" /></a></div>
            <div id="topDroit"><a href="#"><img src="images/pub.jpg" /></a>
                  <div id="topDroitSub"> <img src="images/fleche-fond-gris.gif" /> <a href="#">Publicité</a><br />
                        <img src="images/fleche-fond-gris.gif" /> <a href="#">pouet</a> </div>
                  <div id="recherche">
                        <form>
                              <fieldset>
                              <table cellpadding="0" cellspacing="0">
                                    <tr>
                                          <td><input name="recherche" type="text" size="20" value="RECHERCHER"/>
                                          </td>
                                          <td><a href="#"><img src="images/btn.gif" /></a></td>
                                    </tr>
                              </table>
                              </fieldset>
                        </form>
                  </div>
            </div>
      </div>
      <div id="topMenu">
            <ul>
                  <li><a href="#">Accueil</a></li>
                    | 
                  <li><a href="#">Actualité</a></li>
                    | 
                  <li><a href="#">XXXXX</a></li>
                    | 
                  <li><a href="#">DDDDD</a></li>
                    | 
                  <li><a href="#">SSSSSS</a></li>
                    | 
                  <li><a href="#">QQQQQQ</a></li>
            </ul>
      </div>
      <div id="content"></div>
      <div id="footer">
            <div id="footerRubriques">
                  <h1>SSSSSSS</h1>
                  <ul>
                  	<li><a href="#">DDDDDDDDD</a></li>
                  	<li><a href="#">FFFFFFFFFF</a></li>
                    <li><a href="#">GGGGGGGGGG</a></li>
                    <li><a href="#">EEEEEEEEEE</a></li>
                  </ul>
            </div>
            <div id="footerNews">
                  <h1>Dernières news</h1>
                  <ul>
                  	<li><a href="#">SSSSSSS</a></li>
                  	<li><a href="#">FFFFFFFF</a></li>
                    <li><a href="#">GGGGGGGGG</a></li>
                    </ul>
            </div>
            <div id="footerLiens">
            <h1>Nos liens</h1>
            <ul>
                  	<li><a href="#">SSSSSSSSS</a></li>
                  	<li><a href="#">tralala.fr</a></li>
                    <li><a href="#">truc.com</a></li>
                    <li><a href="#">SSSSSSSSSS</a></li>
                  </ul>
                  
            </div>
            <div id="footerMentions">
            dfgfgfdgfgfd
            </div>
      </div>
</div>
</body>
</html>

et si par la même occasion vous pouvez me conseiller sur le code produit c'est cool Smiley ravi

Merci

Jihel

25 Nov 2008 à 11:46

En fait ta div #header n'est pas visible si tu ne définis pas de valeurs de hauteur et largeur car elle est flottante (float: left) et tout son contenu est hors du flux (car positionné en absolu).

Pour qu'elle adopte automatiquement la largeur de son conteneur il faut supprimer la largeur et le flottement. La hauteur peut s'avérer nécessaire pour occuper physiquement l'espace occupé visuellement par tes éléments date, contact, logo etc.

Ces derniers éléments n'occupent aucun espace "physique" dans la page. Le lien que Raphaël t'a indiqué donne beaucoup de détails sur le positionnement. Je pense qu'il serait judicieux de bien le parcourir.
Cela te permettra notamment d'alléger un peu ta CSS qui est chargée en propriétés pas toujours souhaitables. C'est notamment le cas des flottants que tu déclares et qui ne sont pas toujours adaptés Smiley cligne

Enfin pour ton code, voici quelques petits avis perso :

- autant que possible, essaye de remplacer les div par des éléments plus sémantiques (<p> par exemple pour la date et le contact, <ul> pour le contenu de #footer (donc sur 2 niveaux)) ou de supprimer celles qui n'ont pas vraiment de raison d'être (autour du formulaire de recherche ou de newsletter, dans ce cas mets l'id sur le <form>)

- pense à passer ton code au validateur, il reste quelques petites erreurs (par ex les pipes ("|") entre les <li> du #topMenu)

J'espère avoir été clair dans les explications et t'avoir aidé à avancer Smiley biggrin

fvsch

25 Nov 2008 à 12:14

Une remarque en passant pour moi aussi: une largeur de 1020px, c'est une connerie monumentale. Je te laisse deviner pourquoi. Smiley smile

Sujet clos

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

Pourquoi ma div s'étire ???