Problème css
Résolu
Sn4k3r
-
Sn4k3r -
Sn4k3r -
Bonjour, je réfléchie actuellement à la mise en place d'un design en css mais je me trouve confronté à un petit soucis, sur la partir droite de mon design j'ai deux zone de rubrique. Je fixe la première à 180px du top et la deuxième juste en dessous à 250px du top donc juste comme ça va va bien le soucis maintenant c'est quand je mets du texte dedans, la rubrique du haut va s'agrandir automatiquement et recouvrir celle du dessous. J'aimerais que celle du dessous glisse automatiquement avec l'agrandissement de la première. Comment faire?
Voici mon code: les classes des rubriques sont : rubrique-haut et rubrique-milieu
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document sans nom</title>
<style type="text/css">
<!--
#body-page {
background-color:white;
margin-left:auto;
margin-right:auto;
width:975px; height:auto;
border:1px solid gray;
}
#banniere-haut {
width:975px;
height:21px;
background: url(img/outils_fond.jpg) no-repeat;
}
#banniere {
margin-left:auto;
margin-right:auto;
width:975px;
height:107px;
background: url(img/ban.gif) no-repeat;
}
#rubrique-haut {
padding:3px;
top:180px;
left:845px;
width:140px;
height:auto;
overflow:visible;
position:absolute;
background-color:#CCCCCC;
}
#rubrique-milieu {
padding:3px;
top:250px;
left:845px;
width:140px;
height:auto;
overflow:visible;
position:absolute;
background-color:#CCCCCC;
}
#contenu {
top:180px;
width:825px; height:auto;
position:absolute;
background-color:white;
}
-->
</style>
</head>
<body>
<div id="body-page">
<div id="banniere-haut"></div>
<div id="banniere"></div>
<div><?php include "menu.htm"; ?></div>
<div id="contenu"><?php include "droite.html"; ?></div>
<div id="rubrique-haut">Recherche<br><input name="Recherche" type="text" size="18"/></div>
<div id="rubrique-milieu">blabla</div>
</div>
</body>
</html>
Voici mon code: les classes des rubriques sont : rubrique-haut et rubrique-milieu
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document sans nom</title>
<style type="text/css">
<!--
#body-page {
background-color:white;
margin-left:auto;
margin-right:auto;
width:975px; height:auto;
border:1px solid gray;
}
#banniere-haut {
width:975px;
height:21px;
background: url(img/outils_fond.jpg) no-repeat;
}
#banniere {
margin-left:auto;
margin-right:auto;
width:975px;
height:107px;
background: url(img/ban.gif) no-repeat;
}
#rubrique-haut {
padding:3px;
top:180px;
left:845px;
width:140px;
height:auto;
overflow:visible;
position:absolute;
background-color:#CCCCCC;
}
#rubrique-milieu {
padding:3px;
top:250px;
left:845px;
width:140px;
height:auto;
overflow:visible;
position:absolute;
background-color:#CCCCCC;
}
#contenu {
top:180px;
width:825px; height:auto;
position:absolute;
background-color:white;
}
-->
</style>
</head>
<body>
<div id="body-page">
<div id="banniere-haut"></div>
<div id="banniere"></div>
<div><?php include "menu.htm"; ?></div>
<div id="contenu"><?php include "droite.html"; ?></div>
<div id="rubrique-haut">Recherche<br><input name="Recherche" type="text" size="18"/></div>
<div id="rubrique-milieu">blabla</div>
</div>
</body>
</html>
A voir également:
- Problème css
- Css download - Télécharger - HTML
- Enlever le soulignement d'un lien css ✓ - Forum Réseaux sociaux
- Css ligne horizontale ✓ - Forum CSS
- Enlever le soulignage des lien. - Forum CSS
- Enlever soulignement lien css ✓ - Forum CSS
2 réponses
c'est normal tu dis à la deuxième d'être à 250px du top alors elle reste à 250px ;)
pour éviter ça tu dois créer une div que tu peux fixer à 180px du top et englobant tes deux div.
la première, tu lui dit qu'elle à 70px de hauteur (par défaut cela fera ton affichage souhaité) et quand il y aura du texte elle s'agrandira automatiquement, et celle qui est dessous sera décalé d'autant ;)
@+
pour éviter ça tu dois créer une div que tu peux fixer à 180px du top et englobant tes deux div.
la première, tu lui dit qu'elle à 70px de hauteur (par défaut cela fera ton affichage souhaité) et quand il y aura du texte elle s'agrandira automatiquement, et celle qui est dessous sera décalé d'autant ;)
@+
essaye ça à la place:
#rubrique-haut {
padding:3px;
top:1px;
width:140px;
height:auto;
overflow:visible;
position:relative;
background-color:#CCCCCC;
}
#rubrique-milieu {
padding:3px;
top:auto;
width:140px;
height:auto;
overflow:visible;
position:relative;
background-color:#CCCCCC;
}
#rubrique-haut {
padding:3px;
top:1px;
width:140px;
height:auto;
overflow:visible;
position:relative;
background-color:#CCCCCC;
}
#rubrique-milieu {
padding:3px;
top:auto;
width:140px;
height:auto;
overflow:visible;
position:relative;
background-color:#CCCCCC;
}
Bon sayais j'ai réussi à avoir mes rubrique qui se ralonge dynamiquement. Par contre j'ai un soucis par rapport à mon code
</head>
<body>
<div id="body-page">
<div id="banniere-haut"></div>
<div id="banniere"></div>
<div> <?php include "menu.htm"; ?> </div>
<div id="contenu"><?php include "droite.html"; ?></div>
<div id="menu-droite">
<div id="rubrique-haut">Recherche<br><input name="Recherche" type="text" size="18"/></div>
<div id="rubrique-milieu">blabla<br></div>
</div>
</div>
</body>
</html>
Ce qui est en gras n'est pas interpréte je comprend pas :s
</head>
<body>
<div id="body-page">
<div id="banniere-haut"></div>
<div id="banniere"></div>
<div> <?php include "menu.htm"; ?> </div>
<div id="contenu"><?php include "droite.html"; ?></div>
<div id="menu-droite">
<div id="rubrique-haut">Recherche<br><input name="Recherche" type="text" size="18"/></div>
<div id="rubrique-milieu">blabla<br></div>
</div>
</div>
</body>
</html>
Ce qui est en gras n'est pas interpréte je comprend pas :s
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document sans nom</title>
<style type="text/css">
<!--
#body-page {
background-color:white;
margin-left:auto;
margin-right:auto;
width:975px; height:auto;
border:1px solid gray;
}
#banniere-haut {
width:975px;
height:21px;
background: url(img/outils_fond.jpg) no-repeat;
}
#banniere {
margin-left:auto;
margin-right:auto;
width:975px;
height:107px;
background: url(img/ban.gif) no-repeat;
}
#menu-droite {
top:180px;
left:845px;
width:140px;
height:auto;
overflow:visible;
position:absolute;
background-color:#CCCCCC;
}
#rubrique-haut {
padding:3px;
top:1px;
width:140px;
height:auto;
overflow:visible;
position:absolute;
background-color:#CCCCCC;
}
#rubrique-milieu {
padding:3px;
top:auto;
left:845px;
width:140px;
height:auto;
overflow:visible;
position:absolute;
background-color:#CCCCCC;
}
#contenu {
top:180px;
width:825px; height:auto;
position:absolute;
background-color:white;
}
-->
</style>
</head>
<body>
<div id="body-page">
<div id="banniere-haut"></div>
<div id="banniere"></div>
<div> <?php include "menu.htm"; ?> </div>
<div id="contenu"><?php include "droite.html"; ?></div>
<div id="menu-droite">
<div id="rubrique-haut">Recherche<br><input name="Recherche" type="text" size="18"/></div>
<div id="rubrique-milieu">blabla</div>
<div>
</div>
</body>
</html>
Mais en faite ça passe pas aurais tu un exemple que je comprenne le principe car je n'ai jamais fait ça donc une fois que j'aurais vu et compris le principe ça ira mais la j'ai quelques difficultés.