Une <div> qui pose problème

Question

strauss

1 Apr 2007 à 18:49

Voila mon problème:

Lorsque je mets le mot "syngerciel" dans des balises <h1> une nouvelle <div> apparait (div#conteneur 1):

Par contre, lorsque "synergiciel" est dans des balises <p> il n'y a aucun problème.

Voici les codes

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
 <head>
  <title> Bienvenue sur Calendrux </title>
   <LINK rel="stylesheet" media="screen" type="text/css" title="design" href="design.css" />
   <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15" />
   <meta http-equiv="Content-Style-Type" content="text/css" />
   <meta http-equiv="Content-Language" content="fr" />
 </head>
 
 <body>

 <div id="conteneur">

  <div id="header">
   <h1>Synergiciel</h1>
    <ul class="menuheader">
     <li><a href="">Aide</a></li>
     <li><a href="">Paramètre</a></li>
     <li><a href="">Déconnexion</a></li>
    </ul>
  </div>

  <div id="gauche">
   <p class="titre">Menu</p>
   <p>largeur fixe : 150px</p>

   <ul class="menugauche">
   <li><a href="">Créer un évènement</a></li>
   <li><a href="">Menu 2</a></li>
   <li><a href="">Menu 3</a></li>
   <li><a href="">Menu 4</a></li>
   </ul>
  </div>
  

  <div id="centre">
    partie centrale qui &quot;pousse&quot; les colones vers le bas.<br />

    partie avec du contenu occupant le reste de la largeur<br />
    partie avec du contenu occupant le reste de la largeur<br />

    partie avec du contenu occupant le reste de la largeur<br />
    partie avec du contenu occupant le reste de la largeur<br />
    partie avec du contenu occupant le reste de la largeur<br />
    partie avec du contenu occupant le reste de la largeur<br />

    partie avec du contenu occupant le reste de la largeur<br />
    partie avec du contenu occupant le reste de la largeur<br />

    partie avec du contenu occupant le reste de la largeur<br />
    partie avec du contenu occupant le reste de la largeur<br />
    partie avec du contenu occupant le reste de la largeur<br />
    partie avec du contenu occupant le reste de la largeur<br />
    partie avec du contenu occupant le reste de la largeur<br />
    partie avec du contenu occupant le reste de la largeur<br />
    partie avec du contenu occupant le reste de la largeur<br />
    partie avec du contenu occupant le reste de la largeur<br />
    partie avec du contenu occupant le reste de la largeur<br />
    partie avec du contenu occupant le reste de la largeur<br />
    partie avec du contenu occupant le reste de la largeur<br />
    partie avec du contenu occupant le reste de la largeur<br />
  </div>
  
  <div id="pied">pied de page

  </div>
  
 </div>
 

 </body>
</html>

CSS:

body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 0.8em;
margin: 0;
padding: 0;
background: #dea;
}

#header {
height: 100px;
background-color: #99CCCC;
}

#conteneur {
position: absolute;
width: 100%;
background-color:#CCCCFF;
border: 2px solid #ab4;
}

#centre {
background-color:#9999CC;
margin-left: 150px;
}

#gauche {
position: absolute;
left:0;
width: 150px;
}

#droite {
position: absolute;
right:0;
width: 150px;
}

#pied {
height: 30px;
background-color: #fda959;
text-align: right;
color: #325c94;
}

.menuheader {
  list-style-type: none;
margin: 0 0 0 90%;
padding:0;
}

.menuheader li {
margin-bottom: 5px;
text-align: center;
}

.menuheader a {
margin: 0 2px;
color: #000000;
text-decoration: underline;
}

.menuheader a:hover {
text-decoration: none;
}

.menugauche {
list-style-type: none;
margin: 0;
padding:0;
}

.menugauche li {
margin-bottom: 5px;
}

.menugauche a {
margin: 0 2px;
color: #000000;
text-decoration: underline;
}

p {
margin: 0 0 10px 0;
}

Quelq'un aurait la solution à ce problème?

Merci pour votre aide.
Modifié par strauss (01 Apr 2007 - 18:59)

fvsch

1 Apr 2007 à 21:13

Bonsoir,

Voir ceci : Blocs imbriqués et fusion des marges.
Modifié par Florent V. (01 Apr 2007 - 21:13)

strauss

1 Apr 2007 à 21:56

J'ai pu régler en partie mon problème.

J'ai rajouter border-top: solid 1px black; au style #header

Par contre, les liens de ma liste de mon header descende trop bas lorsque je mets les balise <h1> ce qui n'est pas le cas avec les balises <p>.

D'après ce que j'ai pu lire dans un des tutos, il faut rajouter l'attribut float à mon style pour que les éléments de ma liste d'affiche horizontalement.

Est-ce que je me trompe?

Une fois de plus merci pour votre aide Smiley smile

Je viens de lancer ma page avec IE 7: le problème des éléments de ma liste que je voulais aligner horizontalement n'existe plus. Par contre, j'ai un soucis pou mon pied de page. Une image sera plus parlante:

Y-a-t-il une solution pour que ca marche sur les 2 navigateurs?
Modifié par strauss (01 Apr 2007 - 22:23)

fvsch

1 Apr 2007 à 23:56

strauss a écrit :
Par contre, les liens de ma liste de mon header descende trop bas lorsque je mets les balise <h1> ce qui n'est pas le cas avec les balises <p>.

Les éléments h1 et p sont des éléments de type bloc. Par défaut, ils prennent toute la largeur disponible dans leur bloc parent, quand bien même leur contenu (ici du texte) serait moins large. Bref, tu vois juste un bout de texte mais en fait l'élément que tu utilises (h1 ou p) prend toute la largeur.

Fais le test suivant : il faut rajouter à h1 ou à p une couleur de fond bien visible. Par exemple :

h1 {background: red;}

(Même test avec p si tu utilises cet élément.)

Le ul qui suit ton titre est un autre élément de type bloc. À ce stade, je crois qu'il est préférable de lire ou relire l'article suivant : La structure des balises : bloc et en-ligne. Ça aidera à bien comprendre ce qui se passe.

Une autre caractéristique des éléments de type bloc est de créer un retour à la ligne systématiquement avant et après l'élément. Ce qui permet par exemple de créer des paragraphes de texte avec l'élément p, et sans avoir besoin d'utiliser systématiquement des br (balise <br> en HTML ou <br /> en XHTML) pour faire les retours à la ligne.

Comme tu as deux éléments de type bloc à la suite (le titre et le ul), ils se placent l'un en dessous de l'autre. Si tu veux faire autrement, il n'y a en gros (et en simplifiant un peu) que trois possibilités :
- utiliser un tableau HTML à deux cellules (solution déconseillée pour diverses raisons que je ne développe pas ici) ;
- utiliser le positionnement flottant ;
- utiliser le positionnement absolu.

Je vais donner un petit exemple de code (à adapter, à priori), mais avant ça un petit rappel sur le positionnement CSS, avec pour commencer : Comprendre le positionnement des éléments en CSS.

Et pour suivre, cette initiation au positionnement CSS sur Openweb :
1. flux et position relative
2. position float
3. position absolue et fixe

Une solution possible :

[b]HTML :[/b]
<div id="header">
<h1>Synergiciel</h1>
<ul>
	<li><a href="">Aide</a></li>
	<li><a href="">Paramètre</a></li>
	<li><a href="">Déconnexion</a></li>
</ul>
</div>

[b]CSS :[/b]
div#header h1 {
	float: left;
	width: 80%;
}
div#header ul {
	margin-left: 85%;
}

Sujet clos

Sémantique web et HTML

Une <div> qui pose problème