5568 sujets

Sémantique web et HTML

Ajustement largeur d'un menu horizontal

Bonjour,

Mon problème est assez simple à décrire:

J'ai voulu créer un menu horizontal comportant 5 liens cliquables à l'aide d'une liste à 5 éléments placés en float:left.

J'ai ensuite donné une couleur de background aux liens afin d'avoir cette couleur comme background pour tout le menu.

Or j'ai un décalage de 2px sur le bord droit du menu (vers la gauche, cela crée donc un blanc dans le design) et cela que je mette float:right ou float:left.

J'ai triché pour compléter le design en mettant un à tableau à 1 ligne et 5 colonnes, mais j'aimerais bien savoir ce qui cloche avec mon menu initial.

Merci d'avance

<body>

<div class="wrapper">
   
    <div class="header-wrapper">
    
        <div class="header">
    
            <div class="header-inner">
    
                <div></div>
        
                
                    <ul class="barre">
                    
                        <li><a href="#">Accueil</a></li>
                        <li><a href="#">Certfications ISO</a></li>
                        <li><a href="#">Autres certifications</a></li>
                        <li><a href="#">En savoir plus</a></li>
                    
                    </ul>
                
            
            </div>
        
        </div>
    
    </div>
    
    <div class="body-wrapper">
    
        <div class="body">
    
            <div class="body-inner">&nbsp;
    
            </div>
    
        </div>
    
    </div>
    
    <div class="footer-wrapper">
    
        <div class="footer">
    
            <div class="footer-inner">&nbsp;
    
            </div>
    
        </div>
    
    </div>

</div>

</body>


* {
padding:none;
margin:none;
}

.wrapper {
	width:900px;
	margin: 0 auto;
	background:url(images/background.png) repeat-y;
}

.header-wrapper {
	width:870px;
	margin: 0 auto;
}
.header {
	width:870px;
	height:172px;
}

.header-inner {
	width:870px;
	
}

	.header-inner > div {
		width:870px;
		background:url(images/9001.png);
		height:147px;
	}
	
	.header-inner ul {
		padding:0;
		margin:0;
		list-style:none;
		width:870px; 	
	}
	
	.header-inner li {
		padding:0;
		margin:0;
		float:left;
		text-align:center;
	}

	.header-inner a {
		float:right;
		width:157px;
		height:25px;
		padding:0 30px;
		background-color:#0099FF;

	}
	
	.header-inner a:link {
		color:white;
		text-decoration:none;
	}

.body-wrapper {
	width:870px;
	margin: 0 auto;
}

.body {
	
}
.body-inner {
	
}

.footer-wrapper {
	width:870px;
	margin: 0 auto;
}
.footer { 

}
.footer-inner {
	
}
Sujet clos
Aller à