28220 sujets

CSS et mise en forme, CSS3

Menu semblable à celui de Wikipedia

Salut à tous/toutes,
ces derniers temps, j'ai essayé de faire un design et j'ai rencontré un problème. J'aimerai que le menu qui se trouve en bas de ma photo ressemble à celui-ci:
http://img122.imageshack.us/img122/9410/menu5gf.jpg

Voici ma source(partie ou se trouve la liste):

<div id="photo">
<a href="#"><img src="img.jpg"></a>
</div>
<ul id="nav">
<li><a href="#">&lt;&lt; | &gt;&gt;</a></li>
</ul>


La source CSS:

#photo {
	width : 600px;
	margin: 0 auto; 
	border: 1px solid #37597f;
	border-bottom: 0px;
	margin-top: 20px;
	background-color:#e4f0f9;
	}

img {
	margin: 0 auto; 
	border: 0px;
	padding: 7px;
	}

#nav {
    	font: 11px trebuchet MS, Verdana, arial, sans-serif;
      border-top: 1px solid #666;
    	list-style-type: none;
    	padding-bottom: 24px;
    	padding-left: 5px;
      margin: 0;
	margin-left: 45%;
}
#nav li {
      border: 1px solid #666;
    	height: 25px;
 	float:left;
    	background-color: #e4f0f9;
}

#nav a {
    	float: left;
    	display: block;
    	color: #666666;
    	text-decoration: none;
    	padding: 2px;
}

#nav a:hover {
    	background: #e4f0f9;
}


Alors, en d'autres mots, c'est un peu comme le menu de Wikipedia, mais inversé. J'ai essayé de faire ce menu avec une liste, mais je n'arrive pas à atteindre ce résultat. Alors, j'aimerai savoir, que doit-t-on spécifier dans les CSS pour que ma liste soit de même.

Merci en avance,
Vlad Smiley smile

P.S. - Si vous voulez voir toute la source, dites le moi Smiley cligne
Modifié par Vlad (30 Aug 2005 - 01:25)
Modérateur
bonjour:
pour ta liste , a priori c'est 2 liens alors je vois ça comme ça pour le html:
  <div id="nav" ><ul >
<li><a href="#">&lt;&lt; </a>|<a href="#"> &gt;&gt;</a></li>
</ul></div>

et pour le css:

#nav {width:100%;text-align:center;}
#nav ul{padding:0;}
#nav li{display:inline;}


je n'ai pas tester visuellement le resultat, mais c'est la base sur la quelle je partirais...

a plus
Sujet clos
Aller à