28172 sujets

CSS et mise en forme, CSS3

Mise en page menu.

Bonjour,

Je programme un site en zend framework.
le menu générer est du type "ul" "li".

le css c'est pas trop mon truc.
et puis je cherche une simple mise en page, rien de plus.


Je vais vous copier le code.


<html>
    <head> 
      <title>...</head> 
    <body> 
        <div id="container"> 
            <div id="header">  
                <div id="logo" > 
                    <p></p> 
                </div>  
                <div id="menu"> 
                    <ul class="navigation"> 
                        <li class="active"> 
                            <a href="/">Home</a> 
                        </li> 
                        <li> 
                            <a href="/client">Client</a> 
                        </li> 
                    </ul>
                </div> 
                <div id="submenu"> 
                    <ul class="navigation"> 
                        <li class="active"> 
                            <a href="/">Index</a> 
                        </li> 
                        <li> 
                            <a href="/index/about">About</a> 
                        </li> 
                    </ul>
                </div> 
                <div id="content"> 
                    ok                
                </div> 
            </div> 
        </div> 
    </body> 
</html> 




#container {
}

/*----------------------STAR_HEADER---------------------*/
#header {
  background: url(../images/bg-header.jpg) repeat-x top;
}
#header h1 {
  margin: 0 auto;
}
#header h1 a {
  display: block;
  height: 110px;
  background: url(../images/logo.jpg) no-repeat;
}
#header h1 img {
  display: none;
}
#header .post {
  float: right;
  margin-top: -66px;
  margin-right: 40px;
}

/*----------------------STAR_LOGO-----------------------*/
#logo {
    background-color: #EEEEEE;
    height: 50px;
}

/*----------------------STAR_MENU-----------------------*/

#menu {
    font-family:"Trebuchet MS",Arial,Helvetica,sans-serif;
    font-size:20px;
}
#menu ul {
    height: 66px;
    margin: 0 auto;
    background-color: #FAF5CF;
    list-style: none;
    list-style-type: none;
    text-align: center;
}
#menu li {
    float: left;
    padding: 20px;
    margin: 0 auto;
}
#menu li.active {
    background-color: #8EE5EE;
}
#menu a {
    text-decoration: none;
    letter-spacing: -1px;
    font-size: 20px;
    color: #FFFFFF;
    display:block;
}
#menu a.active {
    color: black;
}
#menu li a:hover {
    text-decoration: underline;
}
#menu ul li ul {
    display:none;
}
#menu ul li:hover ul {
    display:block;
}
#menu li:hover ul li {
    float:none;
}
#menu li ul {
    position:absolute;
}

/*----------------------STAR_SUB-MENU-----------------------*/

#submenu {
  width: auto;
  height: auto;
  margin: 0 auto;
  padding-bottom: 5px;
}
#submenu ul {
    background-color: #FDFCDC;
    float: left;
    list-style: none;
    margin: 0;
    width: auto;
}
#submenu li {
    list-style:none;
    padding: 15px;
    float: left;
    margin: 0 auto;
}
#submenu a {
    font-size: 16px;
    color: black;
    font-weight: bold;
    text-decoration: none;
}
#submenu li:hover {
    text-decoration: underline;
}
#submenu li.active {
    background-color: #EE6A50;
}


[URL=http://img30.imageshack.us/i/capture1no.png/][IMG]http://img30.imageshack.us/img30/2811/capture1no.png[/IMG][/URL]



Comme vous le constater, il y a un menu, et un sous menu.

Le problème viens du sous menu.
Le but est d'étendre jusqu’au boue de la page le sous menu.

Je souhaite que le site s'adapte à la largeur de la page, menu, sous menu et contenu compris.

le "ok" représente le contenu du site



Voilà j’espère que vous pourrez me venir en aide.

Merci
Bonjour,
jusqu'au bout à droite, ou jusqu'au bout vers le bas ?
Essaye de supprimer le "float: left" de ton <li> de submenu qui fait qu'ils s'alignent vers la droite peut-être ?
bonjour,

je souhaite tirer le sous menu jusqu' à la droite au boue de la page.

en retirant le "float:left", le "about" arrive sous le "index"

je me rends compte que c'est pas si évidant que ça...
en tout cas de mon côté je fais des tests, sans succès pour l'instant.


ps : j'ai mis "height: 50px;" dans "#submenu "
et le contenu est passé en dessous d'un coups
il ne reste plus qu'a allonger la barre vers la droite
Modifié par maryooman (16 Jun 2011 - 17:27)
Sujet clos
Aller à