28172 sujets

CSS et mise en forme, CSS3

[Résolut ]Lien en colonne.

Bonsoir,

Je poste pour vous faire par d'un problème que je n'arrive pas à réglé.

J'ai un menu comme sur l'image ci-dessous à réalisé mais mon code ne fonctionne pas.

upload/19733-Image2.png

mon XHTML

    <div id="menu">
    	<img src="theme/site.gif" height="37" width="320" />
    	<ul class="navigation">
        	<li><span><a href="#" title="#">Acccueil</a></span><span><a href="#" title="#">Acccueil</a></span></li>
            <li><span><a href="#" title="#">Acccueil</a></span><span><a href="#" title="#">Acccueil</a></span></li>
            <li><span><a href="#" title="#">Acccueil</a></span><span><a href="#" title="#">Acccueil</a></span></li>
            <li><span><a href="#" title="#">Acccueil</a></span><span><a href="#" title="#">Acccueil</a></span></li>
            <li><span><a href="#" title="#">Acccueil</a></span><span><a href="#" title="#">Acccueil</a></span></li>
        </ul>
    </div>


Mon code CSS

div#menu {
width:320px; float:right; margin:0 43px 0 0; border: solid 1px #00FFCC; }
	
	.navigation {
	width:315px; list-style: none; margin:0 0 0 20px; padding:0; }

	.navigation li span { background:url(fond_lien.gif) no-repeat; width:156px; float:left;  padding:0 3px 0 0   }
	
	.navigation li a { display: block ; font: 1.4em Tahoma; line-height: 1.4em; text-align: center ; color:#FFFFFF; text-decoration:none; } 
	
	.navigation li a:hover { color: #232323 ; }


Merci d'avance pour toute aide que vous m'apportera.
Modifié par Adamys (13 Feb 2010 - 21:03)
Salut,

sujet déplacé dans le bon salon.

J'ai un petit doute sur ce que tu veux faire puisque ton image ne montre aucun menu. Smiley rolleyes

2 remarques par rapport à ton code html :
* un élément IMG doit toujours avoir un attribut alt (quitte à le laisser vide pour une image purement décorative).
* en l'occurrence cette image devrait être en background css du DIV #menu.

Un petit test en ne me basant que sur le titre de ton sujet :
ul#menu {
	width:320px;
	background: #FFCC00; /* à remplacer par l'image site.gif */
	float:right;
	margin:0 43px 0 20px;
	padding: 0;
	border: solid 1px #00FFCC;
	list-style: none;
}
 
ul#menu li {
	float: left;
	background: #FFCC00; 
	width:160px; 
	padding:0;
} 

ul#menu li a {
	display: block;
	text-align: center;
	text-decoration: none;
	padding: 4px 0;
}  
<ul id="menu"> 
	<li><a href="#" title="#">Acccueil</a></li>
	<li><a href="#" title="#">Acccueil</a></li>
	<li><a href="#" title="#">Acccueil</a></li>
	<li><a href="#" title="#">Acccueil</a></li>
	<li><a href="#" title="#">Acccueil</a></li>
	<li><a href="#" title="#">Acccueil</a></li>
	<li><a href="#" title="#">Acccueil</a></li>
	<li><a href="#" title="#">Acccueil</a></li>
</ul>

Modifié par Heyoan (13 Feb 2010 - 19:19)
Salut Heyoan merci de m'avoir répondu Smiley smile

En fait je me suis mal exprimer ce que je voudrais c'est comme sur mon image montrée dans le premier poste aligner mes liens dans les blocs noires avec à chaque fois l'image de la section(Site, information, etc...) au dessus.
Alors effectivement il faut bien un élément IMG avant chaque liste UL : par contre il faut renseigner l'attribut alt :
div#menu {
	float: right;
	background: #fff;
	margin:0 43px 0 0;
	padding: 5px;
}

div#menu img {
	display: block;
	font-weight: bold;
}

ul.navigation {
	width: 320px;
	margin: 0;
	padding: 0;
	list-style: none;
	background: #000;
	border-bottom: solid 1px #fff;
	border-left: solid 1px #fff;
	overflow: hidden;
}
 
ul.navigation li {
	float: left;
	width:160px; 
	padding:0;
	border-top: solid 1px #fff;
} 

ul.navigation li a {
	display: block;
	text-align: center;
	text-decoration: none;
	padding: 4px 0;
	color: #FFCC00;
	border-right: solid 1px #fff;
} 

ul.navigation li a:hover,
ul.navigation li a:focus,
ul.navigation li a:active {
	color: #FF6600;
}
<div id="menu">
	<img src="theme/site.gif" height="37" width="320" alt="Site" /> 
	<ul class="navigation"> 
		<li><a href="#" title="#">Acccueil 1</a></li>
		<li><a href="#" title="#">Acccueil 1</a></li>
		<li><a href="#" title="#">Acccueil 1</a></li>
		<li><a href="#" title="#">Acccueil 1</a></li>
		<li><a href="#" title="#">Acccueil 1</a></li>
		<li><a href="#" title="#">Acccueil 1</a></li>
		<li><a href="#" title="#">Acccueil 1</a></li>
		<li><a href="#" title="#">Acccueil 1</a></li>
	</ul>
	<img src="theme/formation.gif" height="37" width="320" alt="Formation" /> 
	<ul class="navigation"> 
		<li><a href="#" title="#">Acccueil</a></li>
		<li><a href="#" title="#">Acccueil</a></li>
		<li><a href="#" title="#">Acccueil</a></li>
		<li><a href="#" title="#">Acccueil</a></li>
		<li><a href="#" title="#">Acccueil</a></li>
		<li><a href="#" title="#">Acccueil</a></li>
		<li><a href="#" title="#">Acccueil</a></li>
		<li><a href="#" title="#">Acccueil</a></li>
	</ul>
</div>
Tout marche comme sur des roulettes 'ai essayer de modifier un peu histoire de comprendre.
Merci beaucoup et bonne soirée Smiley biggrin
Sujet clos
Aller à