Sujet Précédent Sujet Suivant

Problème css

Résolu/Fermé
Sn4k3r - 7 avril 2008 à 11:25
 Sn4k3r - 7 avril 2008 à 14:32
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>

2 réponses

Réponse 1 / 2
guimton Messages postés 89 Date d'inscription jeudi 27 mars 2008 Statut Membre Dernière intervention 10 avril 2008 10
7 avril 2008 à 11:41
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 ;)

@+
0
Sn4k3r
7 avril 2008 à 11:53
Merci pour ta réponse rapide j'ai fait ça :

<!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.
0
Réponse 2 / 2
guimton Messages postés 89 Date d'inscription jeudi 27 mars 2008 Statut Membre Dernière intervention 10 avril 2008 10
7 avril 2008 à 11:55
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;
}
0
guimton Messages postés 89 Date d'inscription jeudi 27 mars 2008 Statut Membre Dernière intervention 10 avril 2008 10
7 avril 2008 à 11:56
et tu n'aurais pas un lien que je visualise ce que tu as fait ?

ce sera plus facile ;)
0
Sn4k3r > guimton Messages postés 89 Date d'inscription jeudi 27 mars 2008 Statut Membre Dernière intervention 10 avril 2008
7 avril 2008 à 13:32
ça ne passe tjs pas! Je suis désolé je n'ai pas de lien car je développe en interne dans une société donc je n'ai pas d'aperçu mais si vous copiez coller mon code vous aurez l'aperçu sans les images.

Avec le relative tout par sur la droite.
0
Sn4k3r > guimton Messages postés 89 Date d'inscription jeudi 27 mars 2008 Statut Membre Dernière intervention 10 avril 2008
7 avril 2008 à 14:05
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
0
guimton Messages postés 89 Date d'inscription jeudi 27 mars 2008 Statut Membre Dernière intervention 10 avril 2008 10 > Sn4k3r
7 avril 2008 à 14:19
essaye: include("menu.htm");
0
Sn4k3r > guimton Messages postés 89 Date d'inscription jeudi 27 mars 2008 Statut Membre Dernière intervention 10 avril 2008
7 avril 2008 à 14:27
ça change rien! j'ai l'impression que c'est n'y fait ni à faire ce que j'ai fait :s
0

Discussions similaires

trait horizontal avec du css
tipi75 -
tipi75 -

8 réponses
[CSS] Forcé retour à la ligne
aKuma59 -
zigoss -

33 réponses
HTML - définir taille bouton
Diva -
Utilisateur anonyme -

14 réponses
[CSS] Mettre un objet au premier plan
Achillion -
tiran58 -

2 réponses
Enlever le soulignement sous les liens en HTML/CSS
baissaoui -
baissaoui -

0 réponse