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

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : [CSS] hauteur automatique de <div> imbriquées [resolu]

brains

In riding I trust !

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 :

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"> 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

Publicité

FlorentG

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 ?

brains

In riding I trust !

FlorentG a écrit :

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

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

sdubs

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;
}

sdubs

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

gm_superstar

Appelez-moi Super

http://incongru.webdynamit.net/CentrageHorizontal

---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog

brains

In riding I trust !

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

gm_superstar

Appelez-moi Super

http://incongru.webdynamit.net/XHTML

---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog

brains

In riding I trust !

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

brains

In riding I trust !

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 :

ce que je voudrai :

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"> 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

Publicité

brains

In riding I trust !

personne ?

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

brains

In riding I trust !

fixed c'est bon

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

FORUM HardWare.fr

Programmation

HTML/CSS

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

Sujets relatifs
[Résolu] Session, mysql, class, PEAR	[RESOLU] Créer des zip en ASP
[RESOLU][linux] récupérer les fils de fils	Problème de pied en CSS.
[CSS] J'arrive pas à faire ce que je veux	[RESOLU][XSL]Creer un variable pour mettre un width="" pour un table
[C] Multiplication de polynômes. Ce code est-il OK ? [Résolu]	[JAVA] Petit problème de centrage [résolu]
Cacher une classe CSS à l'impression	[Résolu] Envoie d'un mail en PHP
Plus de sujets relatifs à : [CSS] hauteur automatique de <div> imbriquées [resolu]

Page générée en 0.053 secondes