positionnement absolue et largeur de bloc

enroc · 20 Mai 2005

Bonjour,

je cherche à centrer en CSS le contenu de ma page, et d'avoir un titre qui prend toute la largeur de la page. Cette page est composée de 3 éléments : l'entête, le contenu, et le menu.

Voici un exemple, et le code utilisé :

body {width:700px;margin:auto} 
#header {position:absolute;top:0;left:0}

Firefox affiche l'élément header sur toute la largeur, alors que IE et Opéra le calent à gauche et d'une largeur de 700px. C'est donc un javascript qui le remet à la bonne taille. Je voudrais supprimer ce javascript. Bonne idée, mais comment ? J'aimerais aussi ne pas avoir à rajouter d'élément supplémentaire, car dans ce cas je devrais rassembler le contenu de la page, et le menu du site, ce qui n'est pas très logique.

Autre question, qu'advient-il de la couleur de fond de la fenêtre, si je spécifie seulement ?

body {width:700px;background-color:white}

Si le body ne fait que 700px de large, quelle est la couleur derrière le body ?

Des remarques, corrections, propositions alternatives, solutions directes ... ?

Dans l'attente de vous lire :lol: ,

Corentin

Edit : j'ai changé le titre, qui n'était pas très explicite

Modifié 20 Mai 2005 par enroc

YannCo · 20 Mai 2005

Ne serais pas préférable de laisser le body à 100% qui part défaut est blanc puis de créer un conteneur ?

<body>
<div id="conteneur">
Le site
</div>
</body>

Voir sujets :

http://www.webmaster-hub.com/index.php?showtopic=13244

et

http://www.webmaster-hub.com/index.php?showtopic=13246

enroc · 20 Mai 2005

Euh si biensur, le coup du conteneur règle le problème n°2, la couleur de fond (mais où avais-je la tête ?). Encore un peu de code :

#container {

	width:700px;

	margin:auto;

}

#header {

	position:absolute;

	left:0;top:0;

	width:100%;

}

Pour Firefox la largeur est celle du body, pour les autres celle de container.

YannCo · 20 Mai 2005

un truc que j'utilise pour un projet en cours

body {
padding:0;
margin:0;
background: #FFF;
color: #000000;
}
#header
{
width: 760px;
height: 87px;
background-image: url("bann.jpg");
background-repeat: no-repeat;
margin-bottom: 15px;
background-color:#FFFFFF;
position:absolute;
top:0;
left:150px;
border-top:0px none #000;
border-bottom:1px solid #DDDDDD;
overflow:hidden;
color: #000000;
}

et en fait je n'ai pas containeur ça marche sous IE et Autres

Modifié 20 Mai 2005 par YannCo

Bobe · 21 Mai 2005

Pour info, la bonne interprétation est celle de Firefox.

Quand un bloc est positionné en absolu, le "bloc conteneur" comme le dit la documentation n'est plus le bloc parent mais le premier bloc ancêtre lui-même positionné en absolu, fixed ou relatif. Et s'il n'existe pas de tel bloc dans les ancêtres, c'est alors le bloc racine du document qui est utilisé comme référence.

Dans le cas qui nous occupe ici, le width: 100% déclaré pour le bloc "header" est calculé par rapport à la largeur de l'élément racine, ici "html".

Plus d'infos sur la définition de "bloc conteneur":

http://www.yoyodesign.org/doc/w3c/css2/vis...g-block-details

IE et Opera sont dans l'erreur en calculant la largeur du bloc positionné en absolu par rapport à celle du bloc parent dans tous les cas (sauf si le bloc parent est lui-même positionné autrement qu'en 'static').

Eric (11) · 22 Mai 2005

Je ne vois pas l'utilité d'utliser des position absolute (mis à part le menu d'évitement et encore !) dans cette mise en forme. Il y a un élément de tête plus des élements contenant le menu en colonne gauche et le texte en colonne droite. Il ne semble même pas nécessaire d'avoir de conteneur maître pour l'ensemble du site.

Au niveau de la tête (désolé, je prefere le français à l'anglais...), tu laissses la largeur à 100% et tu centres le texte. Pour la seconde partie, tu fixes la largeur et tu mets les marges en auto (bon IE ne reconnait pas, donc il faut que l'ensemble au niveau body soit centrer, et donc réaligner à gauche la seconde partie).

Plus d'infos et d'explication illustrées sur le site d'Alsacreations.

Eric

Modifié 22 Mai 2005 par Eric (11)

enroc · 22 Mai 2005

Merci pour vos réponses.

Le tutoriel d'Alsacréations utilise bien le positionnement absolu ! D'autre part je n'ai pas 2 parties mais 3 :

- l'entête

- le contenu de la page

- le menu du site

Le contenu et le menu n'ont donc comme conteneur commun que le body.

En appliquant le principe d'Alsacréations, voici ce que ça donne sans conteneur global, et en français :

<html>
	<head>
  <title>Test de positionnement</title>
  <style type="text/css">
 	 #contenu {
    position:absolute;
    left:50%;
    width:500px;
    margin:0 0 0 -175px; /* - moitié de la largeur - moitié de la largeur du menu = -250+75 */
 	 }
 	 #menu {
    position:absolute;
    width:150px;
    left:50%;
    margin:0 0 0 -325px; /* marge du contenu - largeur du menu = -175-150 */
    padding:0;
 	 }
 	 #entete,#contenu,#menu{border:1px solid red}
  </style>
	</head>
	<body>
  <div id="entete">
 	 <h1>Titre du site</h1>
  </div> 
  <div id="contenu">
 	 <h2>Titre de la page</h2>
 	 <p>Paragraphe</p>
  </div>
  <ul id="menu">
 	 <li>Home</li>
 	 <li>Contact</li>
  </ul>
	</body>
</html>

Bémol : du fait de l'utilisation de marges négatives, si la taille de la fenêtre est inferieure à la largeur du menu + la largeur du contenu, il est impossible de tout voir, la barre de défilement latéral n'ayant aucun effet.

Eric (11) · 22 Mai 2005

Oui, pour Alsa je n'ai pas vérifié, mais il y a d'autres exemples que celui là. Pour le nombre de partie cela dépend si tu prends tete + menu + contenu ou tete + (menu et contenu). Enfin, ce n'est qu'une question d'interprétation. Mais je pense que dans ton cas, la positon absolute n'est pas nécessaire.

Petit exemple rapide :

<head>
<title>Exemple</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
body {margin: 0px; padding: 0px; text-align:center}
#tete {background:#ccc; padding:12px 0}
#tete p {margin:0}
#centre {width:700px; margin:0 auto; text-align:left; background:#eaeaea}
#menu {float:left; width:150px; background:#000; color:#fff}
#contenu {margin-left:180px;}
-->
</style>
</head>
<body>

<div id="tete">
     <p>Element de tete</p>
     <p>avec logo... </p>
</div>

<div id="centre">
     <div id="menu">
          <ul>
               <li>Item 1</li>
               <li>Item 2</li>
               <li>Item 3 </li>
          </ul>
     </div>	
     <div id="contenu">
          <p>Mon contenu, mes articles...</p>
     </div>
</div>

</body>

Eric

Modifié 22 Mai 2005 par Eric (11)

enroc · 22 Mai 2005

Oui, merci pour ta réponse. En effet en regroupant le menu et le contenu dans un conteneur il n'y a plus de problème. Je voulais éviter ceci, mais je crois que c'est ce prendre la tête pour pas grand chose (je suis le pro pour ce genre de bloquage )! Ta solution est donc celle que je vais adopter : c'est simple et compatible.

Connexion

positionnement absolue et largeur de bloc

Sujets conseillés

enroc

YannCo

enroc

YannCo

Bobe

Eric (11)

enroc

Eric (11)

enroc

Veuillez vous connecter pour commenter

Parcourir

Activité