probeme css

merie-nico · 29 Mars 2007

Bonjour,

j'ai un petit soucis de mise en page ,

en effet sur cette page, j'ai deux menus qui se trouve cote a cote.

jusque la tout va bien .

mais je voudrai qu'il soit bien affiché dans #cadrecentrale or ils le sont mais en dessous.

je vous montre mes codes.

#cadredumenudroite
{

float:right;

text-align:left;

width:120px;

padding:5px;

background-color:#FBFBFF;

border-left:1px solid #000000; /* couleur du cadre */

border-right:1px solid #000000;

border-bottom:1px solid #000000;

color:#666666;

}

#cadrecentrale

{

margin-left:180px;

min-height:150px;

margin-right:140px;

border-left:1px dashed #000000;

border-right:1px dashed #000000;

border-bottom:1px dashed #000000;

border-top:1px dashed #000000;

background-color:#00FBFF;

}

#cadrecentrale ul

{

list-style-type: none;

width: 32%;

float: left;

top: 2px;

}

#cadrecentrale a

{

text-decoration: none;

}

#cadrecentrale a:hover

{

text-decoration: underline;

}

#second

{

position: relative;

top: -10px;

float: right;

background: red;

width: 100px;

}

et

<body>
<div id="entete">

<h1> site d'essai </h1>

<p> mon essai prise de tete en css </p>

</div>

<div id="menu">

<h3>Téléchargement</h3>

<ul>

<li><a href="logiciel.htm">Logiciels</a></li>

<li><a href="mobile.htm">Mobile</a></li>

<li><a href="pilote.htm">Pilotes</a></li>

<li><a href="jeux.htm">Jeux</a></li>

<li><a href="musique.htm">Musique</a></li>

<li><a href="logo_sonnerie.htm">Logo & sonneries</a></li>

<li><a href="bandeannonces.htm">Bandes-annonces</a></li>

<li><a href="publicite.htm">Publicité</a></li>

</ul>

</div>

<div id="cadredumenudroite">

<img alt="pub" src="pub.gif"/>

</div>

<div id="cadrecentrale">

<ul>

<li><a href="bureautique.htm">Bureautique</a></li>

<li><a href="developpement.htm">Développement</a></li>

<li><a href="internet.htm">Internet</a></li>

<li><a href="jeux.htm">Jeux</a></li>

<li><a href="loisirs.htm">Loisirs</a></li>

<li><a href="multimedia.htm">Multimédia</a></li>

<li><a href="personnalisation.htm">Personnalisation</a></li>

<li><a href="pilotes.htm">Pilotes</a></li>

<li><a href="securite.htm">Sécurité</a></li>

<li><a href="utilitaires.htm">Utilitaires</a></li>

</ul>

<ul id="second">

<li><a href="agenda.htm">Agenda</a></li>

</ul>

</div>

</div>

</body>

voila si vous pouviez m'aider... :blush:

Spark · 2 Avril 2007

Salut,

C'est simple en fait :

1°)

#cadrecentrale
{

margin-left:180px;

min-height:150px;//150px ce n'est pas suffisant, ton menu sort du block

margin-right:140px;

border:1px dashed #000000;

background-color:#00FBFF;

}

min-height n'est pas prit en charge par Internet Explorer 6, tu dois utiliser height.

2°)

Ta dernière balise </div> est en trop.

3°)

border-left:1px dashed #000000;
border-right:1px dashed #000000;
border-bottom:1px dashed #000000;
border-top:1px dashed #000000;

border:1px dashed black; c'est bien suffisant

4°)

Cette partie du code s'applique à toute les balise cadrecentrale ul :

#cadrecentrale ul
{
list-style-type: none;
width: 32%;
float: left;
top: 2px;
}

Y compris celle qui à l'id second

#second
{
position: relative;
top: -10px;
float: right;
background: red;
width: 100px;
}

Ce qui veut dire que pour la même balise (<ul id="second">) tu donne 3 ordres contradictoire :

top: -10px;
float: right;
width: 32%;

float: left;
top: 2px;
width: 100px;

Il serait préférable de faire quelque chose dans ce style :

#cadrecentrale ul
{
position: relative;
list-style-type: none;
background: red;
}

#premier
{
top: 2px;
float: left;
width: 32%;
}

#second
{
top: -10px;
float: right;
width: 100px;
}

Petite parenthèse :

Maintenant pourquoi le block <div id="cadrecentrale"></div> ne s'agrandit pas tout seul avec le contenu ? Et bien c'est à cause de position: relative;, tu verras si tu t'amuse à remplir de texte qui ne sera pas assujetti à une propriété de position et en suppriment #cadrecentrale {min-height:150px;}, le block va s'adapter au contenu.

Modifié 2 Avril 2007 par Spark

Connexion

probeme css

Sujets conseillés

merie-nico

Lien vers le commentaire

Partager sur d’autres sites

Spark

Lien vers le commentaire

Partager sur d’autres sites

Veuillez vous connecter pour commenter

Parcourir

Activité