28220 sujets

CSS et mise en forme, CSS3

Background sur <body>

Bonjour,

j'ai actuellement un petit souci sur la propriété background appliqué à l'élément body : 


body {
 position:absolute;
 top:0;
 left:50%;
 margin:0 0 0 -390px;
 padding: 0;
 color: #666;
 background: #fff;
 font-size: 10pt;
 font-family:Tahoma;
 width:780px;
 border:1px solid #CCC;
 background:url('images/menu.gif') repeat-y 12px 0px;	
 }


Vous pouvez voir ce que ca donne ici.

Si le problème n'apparait pas, un screenshot ici.

J'utilise le background du menu sur le body pour que le menu fasse 100% de la hauteur sans hack du markup.

Et donc, le problème est que la valeur left du background, qui doit être définie par rapport au bord gauche du conteneur est ici défini par rapport à l'élément html, et non body Smiley eek !
Je ne suis pas sûr d'avoir bien saisi ce que tu cherches à faire et ce que tu cherches à éviter, mais dans tous les cas, l'élément <body> étant le bloc conteneur initial en HTML (et en XHTML traité comme du HTML, ce qui semble bien être ton cas), il n'est pas positionnable.

Donc, ne pas compter là-dessus, pour commencer.
Ce que je voudrais, c'est positionner le background du body par rapport au bord gauche de ce même body Smiley cligne !

J'ai essayé de placer le body dans le html via des marges auto, ou en absolute, cela revient au même ...........
Ben en fait, je l'utilise déjà, mais en lui donnant des valeurs : 


background:url('tonimage.jpg') x y z;


où x est la marge par rapport au bord du haut, y la valeur par rappport à la marge de gauche, et z la valeur du repeat Smiley cligne !
Pour simplifier, tu n'aurais pas une image de ce que tu veux obtenir ?

Parce que positionner le background du body par rapport au bord gauche de ce même body, c'est ce qui se passe par défaut.

Et J'utilise le background du menu sur le body pour que le menu fasse 100% de la hauteur, là... je renonce à saisir.
Voilà ce que je voudrais que ca obtienne (obtenu en rétrécissant le html via EditCSS lol).

a écrit :

Et J'utilise le background du menu sur le body pour que le menu fasse 100% de la hauteur, là... je renonce à saisir.


Je voudrais simplement que le background de mon menu (les deux barres verticales parallèles) descendent jusqu'en bas du menu, que mon menu descendent jusqu'en bas donc Smiley cligne ! Ou au moins son background, pour en donner l'impression Smiley cligne !
j'ai pas récup toutes les images du site donc je sais pas si ca marche au poil mais essaie d'ajouter:
#menu{background-image:url(images/menu.gif);}

Modifié par ocb2b (27 Mar 2005 - 18:05)
Merci , mais encore une fois, c'est à côté, désolé ... ca, c'était la valeur qu'il y'avait avant, maiiiiiiiis, le problème, c'est que du coup, le menu ne prends pas toute la hauteur du body =/ !
Voila :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Document sans nom</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
html {
 width:100%;
 height:100%;
 }

body {
 position:absolute;
 top:0;
 left:50%;
 margin:0 0 0 -390px;
 padding: 0;
 color: #666;
 background: #fff;
 font-size: 10pt;
 font-family:Tahoma;
 width:780px;
 border:1px solid #CCC;
 }
 
#header {
  background:url('images/header.gif') no-repeat;
  height: 207px;
  margin:0;
  } 
  #header a { display:block; width:100%; height:100%; }
    #header a span { display:none; }
  
  #conteneur{
  background-image:url(images/menu.gif);
  background-repeat:repeat-y;
  background-position:11px 0px;
  
  }
#menu {
  margin:-104px 0 0 11px;
  width: 220px;
  padding-bottom: 50px;
  }
#menu ul {
  margin-top: 0px;
  padding-top: 15px;
  }
#menu ul li {
  margin:0;
  background:url('images/btn.gif') no-repeat;
  height: 33px;
  list-style-type: none;
  margin-left: -31px;
  padding-left: 2px;
  padding-top: 6px;
  }
#menu ul li a {
  color: #ffffff;
  text-decoration: none;
  }
#menu h2 { /* edito */
  margin:0px;
  background:url('images/grille.gif') repeat-x;
  width: 206px;
  height: 25px;
  margin-left: 9px;
  font-size: 10pt;  
  padding-top: 4px;
  }
#menu h2 span { /* le carre blanc ds la grille .. */
  margin-left: 18px;
  color: #c00;
  background: #fff;
  padding: 5px;
  }
#menu h3 {
  margin: 0px;
  margin-top: 15px;
  margin-left: 18px;
  font-size: 10pt;
  text-decoration: underline;
  color: #444;
  }
#menu p {
  margin: 0px;
  margin-left: 18px;
  text-align: left;
  width: 190px;
  font-size: 9pt;
  }
#bandeau {
  background:url('images/bandeau.gif') top left no-repeat;
  height: 89px;
  width: 549px;
  margin: 0px;
  margin-left: 231px;
  margin-top: 15px;
  }
#page { 
  float: right;
  width: 540px;
  padding:0 5px 0 0;
  text-align: justify;
  margin-top: 20px;
  }
#page h3 {
  margin: 0px;
  padding: 0px;
  margin-top: 10px;
  font-size: 11pt;
  text-decoration: underline;
  color: #444;
  }
#page p {
  padding: 0px;
  margin: 0px;
  font-size: 10pt;
  }
#footer {
  margin:0 0 10px 231px;
  background:url('images/footer.gif') top left repeat-x;
  height: 17px;
  width: 544px;
  color:#FFF;
  text-align:right;
  padding:10px 5px 0 0;
  clear:both;
  }

-->
</style>
</head>

<body>

<h1 id="header"><a href="http://adressedusite.com/"><span>Bebopallula</span></a></h1>
   
   <div id="conteneur">
   <div id="bandeau">&nbsp;</div>
	   <div id="page">
		<h3>Lorem ipsum</h3><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p><h3>Lorem ...</h3><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
		<h3>Lorem ipsum</h3><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p><h3>Lorem ...</h3><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
		<h3>Lorem ipsum</h3><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p><h3>Lorem ...</h3><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
		<h3>Lorem ipsum</h3><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p><h3>Lorem ...</h3><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
	   </div>
	
	   <div id="menu">
		<ul>
		 <li><a href="#" title="Lien">Lien 1</a></li>
		 <li><a href="#" title="Lien">Lien 2</a></li>
		 <li><a href="#" title="Lien">Lien 3</a></li>
		 <li><a href="#" title="Lien">Lien 4</a></li>
		</ul>
		
	   <h2><span>Edito</span></h2>
	   <h3>Lorem ipsum</h3>
	   <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
	  </div>
	  <h6 id="footer">Une creation de R&eacute;aktif - © 2004 -</h6>
	  
  </div>
  
</body>
</html>
Bon j'ai pris "bandeau", "menu" et "footer" et les ai mis dans un div "conteneur". J'ai mis un background-image à conteneur et voilà. Reste un piti probleme, le deux traits ne vont pas jusqu'au fond de la page sous ie.
En fait, j'aimerais justement utiliser cette technique mais SANS utiliser de conteneur, juste utiliser le body ... ou au moins savoir POURQUOI cela ne fonctionne pas avec body !

Pourquoi ta page a une DOCTYPE HTML 4 Smiley langue ?
C'est le doctype par defaut quand je crée une page sur Dreamweaver. Puis je maitrise absolument pas les doctype Smiley decu
Personnelement je pense que ca provient de ton positionnement absolu du body.
Modifié par ocb2b (27 Mar 2005 - 18:49)
Kevin a écrit :
Merci , mais encore une fois, c'est à côté, désolé ... ca, c'était la valeur qu'il y'avait avant, maiiiiiiiis, le problème, c'est que du coup, le menu ne prends pas toute la hauteur du body =/ !


arf ! J'ai fini par saisir ce que tu veux faire.

Au plus simple :
- placer les divers éléments normalement, sans s'occuper de ces histoires d'arrière-plan.
- mettre ton image en arrière-plan de body, sans fixed, juste en repeat vertical.
- imposer des arrières-plans blancs opaques partout où tu ne veux pas que cette image apparaisse.
- laisser ton menu avec un arrière-plan transparent.

S'il doit y avoir un décalage latéral, l'intégrer dans l'image.
remplace
body{}
par 
#global{}
et met tout ton code qui se trouve entre les balises <body> dans un div dont l'id est global, enfin le décalage du background est pas 12px mais 11px.
Modifié par ocb2b (27 Mar 2005 - 18:53)
ocb2b a écrit :
C'est le doctype par defaut quand je crée une page sur Dreamweaver. Puis je maitrise absolument pas les doctype Smiley decu
Personnelement je pense que ca provient de ton positionnement absolu du body.


Tu peux choisir l'option "Faire une page conforme XHTML" , un truc comme ça, et t'auras la Doctype XHTML Smiley cligne !

Bref, merci Laurent-Denis, j'vais quand même utiliser la solution d'OCB2B , merci bien ^^ !
Sujet clos
Aller à