[CSS] hauteur automatique de <div> imbriquées [resolu]

hauteur automatique de <div> imbriquées [resolu] [CSS] - HTML/CSS - Programmation

Marsh Posté le 30-04-2005 à 00:28:07    

Bonsoir à tous, :)
 
Je me suis mis depuis hier aux css pour enfin sortir de ma vieille manie de coder par 'tableaux'.
 
Ca s'appréhende relativement vite et c'est un outil très puissant. Par contre je suis confronté à un problème que j'essaie de résoudre en vain.
 
Je veux que tout mon contenu soit centré. J'ai donc écrit ma css en fonction, le resultat est bon sous firefox/opera mais sous IE
mes <div> restent désespérement à gauche. :(  
Et ce n'est pas faute d'avoir essayé !
 
Voici le code de ma css :
 

A:link{text-decoration: none; color: #606E76;}
A:visited{text-decoration: none; color: #606E76;}
A:active{text-decoration: none; color: #F09A05;}
A:hover{text-decoration: none; color: #F09A05;}
 
html,body
{
background-color : #606E76 ;
}
 
div
{
margin-left : auto;  
margin-right : auto;  
text-align : left;  
}  
 
.bandeau
{
border-left-style : solid ;
border-left-width : 1px;
border-left-color : #ffffff;
border-right-width : 1px;
border-right-style : solid ;
border-right-color : #ffffff;
background-color : #7E909A;
width : 900px;
height : 112px;
}
 
.menu
{
border-style : solid ;
border-width : 1px;
border-color : #ffffff;
background-color : #7E909A;
width : 900px;
height : 20px;
padding-left : 0px;
padding-top : 0px;
font-family: Arial, sans-serif;
font: 12px/20px arial;
color: #ffffff;
text-decoration: none;
}
 
 
.police
{
font-family: Arial, sans-serif;
color: #000000;
font-size: 12px;
text-decoration: none;
}
 


 
et le code de mon .php (qui ne comporte pas de code php pour le moment)
 

<html>
<head>
<title>bonjour</title>
<link href="css/feuille.css" rel="stylesheet" type="text/css">
</head>
 
<body topmargin="0">
 
 
<div class="bandeau"><img src="img/top.jpg"></div>
 
<div class="menu">&nbsp;liens | contact</div>
 
 
</body>


 
Meme en rajoutant dans body{width:100%;} ca n'arrange pas les choses, au contraire j'ai un scroll horizontal sous firefox.
 
merci pour votre aide


Message édité par brains le 30-04-2005 à 17:42:25

---------------
‎Débuter la moo chez les moants@HFR | Nikon D800 | On ne fait pas un calin chaste à une pute !, Lapattefolle
Reply

Marsh Posté le 30-04-2005 à 00:28:07   

Reply

Marsh Posté le 30-04-2005 à 00:33:26    

Faut mettre un doctype stricte au début.  
 
Pour faire plus simple, met-toi à l'XHTML, parce que le code HTML 3.2 mixé avec des CSS, ça fait mal...
 
Genre qu'est ce que le "topmargin" fout dans le body ?

Reply

Marsh Posté le 30-04-2005 à 00:35:29    

FlorentG a écrit :

Faut mettre un doctype stricte au début.  
 
Pour faire plus simple, met-toi à l'XHTML, parce que le code HTML 3.2 mixé avec des CSS, ça fait mal...
 
Genre qu'est ce que le "topmargin" fout dans le body ?


 
C'est quoi les spécif du XHTML ?
Quelles différences avec l'HTML tout court ? :D


---------------
‎Débuter la moo chez les moants@HFR | Nikon D800 | On ne fait pas un calin chaste à une pute !, Lapattefolle
Reply

Marsh Posté le 30-04-2005 à 09:44:20    

AJoute une div "conteneur" qui encadre le contenu du site après la balise body
Son style sera
.conteneur { /* partie globale du site qui sera centrée */
 width: 900px;
 position: absolute;
 left: 50%;
 margin-left: -450px;
}

Reply

Marsh Posté le 30-04-2005 à 09:55:17    

tu peux aussi aller voir les tutoriaux sur ce site :
http://css.alsacreations.com
 
 
 

Reply

Marsh Posté le 30-04-2005 à 09:56:35    

Reply

Marsh Posté le 30-04-2005 à 10:19:34    

Merci beaucoup à tous ca fonctionne :)
 
Je repose par contre ma seconde question : est-ce que quelqu'un aurait un lien vers les spécifs et les différence du XHTML par rapport au HTML tout court. :)


---------------
‎Débuter la moo chez les moants@HFR | Nikon D800 | On ne fait pas un calin chaste à une pute !, Lapattefolle
Reply

Marsh Posté le 30-04-2005 à 10:20:16    

Reply

Marsh Posté le 30-04-2005 à 10:24:05    

merki [:dawa]
qu'est-ce que c'est bieng hfr quand meme


---------------
‎Débuter la moo chez les moants@HFR | Nikon D800 | On ne fait pas un calin chaste à une pute !, Lapattefolle
Reply

Marsh Posté le 30-04-2005 à 16:15:52    

Je reposte car j'ai de nouveau un problème.
 
Dans mon .css j'ai crée une classe de 'fond' de manière a pouvoir afficher dessus d'autres div dans lesquels je vais avoir mon contenu. Seul problème c'est que la hauteur div du fond de s'adapte pas du tout à la hauteur des div 'au dessus'
 
Une image vaut parfois mieux qu'un long discours :
 
ce que j'ai :
http://img235.echo.cx/img235/1250/010ku.th.jpg
 
ce que je voudrai :
http://img235.echo.cx/img235/7413/029tr.th.jpg
 
 
et mon code :  
 
css

A:link{text-decoration: none; color: #606E76;}
A:visited{text-decoration: none; color: #606E76;}
A:active{text-decoration: none; color: #F09A05;}
A:hover{text-decoration: none; color: #F09A05;}
 
html,body
{
background-color : #606E76 ;
margin-top : 0px;
}
 
.conteneur  
{ /* partie globale du site qui sera centrée */
 width: 900px;
 position: absolute;
 left: 50%;
 margin-left: -450px;
}
 
div
{
margin-left : auto;  
margin-right : auto;  
text-align : left;  
}  
 
.bandeau
{
border-left-style : solid ;
border-left-width : 1px;
border-left-color : #ffffff;
border-right-width : 1px;
border-right-style : solid ;
border-right-color : #ffffff;
background-color : #7E909A;
width : 900px;
height : 112px;
}
 
.menu
{
border-style : solid ;
border-width : 1px;
border-color : #ffffff;
background-color : #7E909A;
width : 900px;
height : 20px;
padding-left : 0px;
padding-top : 0px;
font-family: Arial, sans-serif;
font: 12px/20px arial;
color: #ffffff;
text-decoration: none;
}
 
.data-background
{
border-left-style : solid ;
border-left-width : 1px;
border-left-color : #ffffff;
border-right-width : 1px;
border-right-style : solid ;
border-right-color : #ffffff;
border-bottom-width : 1px;
border-bottom-style : solid ;
border-bottom-color : #ffffff;
background-color : #d5d5d5;
width : 900px;
height : auto;
padding-left : 0px;
padding-top : 0px;
padding-bottom : 10 px;
}
 
.data-left
{
display : table-cell;
border-style : solid ;
border-width : 1px;
border-color : #BEBEBE;
background-color : #CFCFCF;
width : 180px;
height : auto;
padding-left : 0px;
padding-top : 0px;
margin-top : 20px;
margin-left : 20px;
float : left;
text-align : left;
position: absolute;
font-family: Arial, sans-serif;
font-size: 12px;
color: #000000;
text-decoration: none;
}
 
.data-right
{
display : table-cell;
vertical-align : top;
border-style : solid ;
border-width : 1px;
border-color : #BEBEBE;
background-color : #CFCFCF;
width : 660px;
height : auto;
padding-left : 0px;
padding-top : 0px;
margin-top : 20px;
margin-left : 220px;
position: absolute;
float : left;
text-align : left;
font-family: Arial, sans-serif;
font-size: 12px;
color: #000000;
text-decoration: none;
}


 
et .htm

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
 
<title>lounge 2005 | welcome</title>
<link href="css/lounge.css" rel="stylesheet" type="text/css" />
</head>
 
<body>
 
<div class="conteneur">
 <div class="bandeau"><img src="img/top.jpg" alt="bandeau lounge" title="lounge" /></div>
 
 <div class="menu">&nbsp;weblog | portfolio | réalisations | musique | liens | contact</div>
 
 <div class="data-background">
  <div class="data-left">zer</div>
  <div class="data-right">zer</div>
 
 </div>
 
 
 
</div>
</body>
</html>


 
merci pour votre aide


Message édité par brains le 30-04-2005 à 16:17:08

---------------
‎Débuter la moo chez les moants@HFR | Nikon D800 | On ne fait pas un calin chaste à une pute !, Lapattefolle
Reply

Marsh Posté le 30-04-2005 à 16:15:52   

Reply

Marsh Posté le 30-04-2005 à 16:57:34    

personne :( ?


---------------
‎Débuter la moo chez les moants@HFR | Nikon D800 | On ne fait pas un calin chaste à une pute !, Lapattefolle
Reply

Marsh Posté le 30-04-2005 à 17:42:14    

fixed c'est bon :)


---------------
‎Débuter la moo chez les moants@HFR | Nikon D800 | On ne fait pas un calin chaste à une pute !, Lapattefolle
Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed