Forum-webmaster
Technique - programmation => HTML / CSS / XHTML => Message commencé par: mci21 le le 28-03-2007 a 11:17:46

Titre: probleme css
Posté par: mci21 le le 28-03-2007 a 11:17:46

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 hors ils le sont mais en dessous.
je vous montre mes codes.
Citation:
#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
Citation:
<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...

Titre: Re:probleme css
Posté par: TinMar le le 31-03-2007 a 11:31:33

A priori un float était manquant. Sinon j'ai ajouté un clear both car sinon ton cadre centrale se met pas de la bonne taille (en hauteur).

Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title>Untitled</title>
<style type="text/css">
<!--
#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;
}
#menu
{
border:1px dashed #000;
float: left;
}
#cadrecentrale
{
margin-left:180px;
min-height:150px;
margin-right:140px;
border:1px dashed #000;

background-color:#CCC;
}
#cadrecentrale ul
{
float: left;
list-style-type: none;
width: 32%;

top: 2px;
}

#cadrecentrale a
{
text-decoration: none;
}

#cadrecentrale a:hover
{
text-decoration: underline;
}
#clear
{
clear: both
}
#second
{
position: relative;
top: -10px;
float: right;
background: red;
width: 100px;
}
-->
</style>

</head>
<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>
             <p id="clear"> </p>
</div>
</div>


</body>
</html>


Forum-webmaster | Actionné par YaBB SE
© 2001-2003, YaBB SE Dev Team. Tous droits réservés.