html - Remove the left space from <ul> navigation -
the navigation appears margin left. tried many things couldn't remove left margin.
how can remove space?
here online demo.
#navcontainer { padding: 0 5 20px 10px; } ul#navlist { font-family: sans-serif; margin-left: 0;} ul#navlist li { padding: 10px 5px 10px 5px; background-color: #ef634a; } ul#navlist > li { height:38px; line-height:38px; } ul#navlist li:hover { color: #ffff00; background-color: #3e748a; } ul#navlist { font-weight: bold; text-decoration: none; display: inline-block; line-height:1.1; vertical-align: middle; } ul#navlist, ul#navlist ul, ul#navlist li { padding: 0 8px; margin: 0 8px; list-style-type: none; box-shadow: 8px 8px 12px #aaa; } ul#navlist li { float: left; } ul#navlist li { color: #ffffff; //padding:10px; /*border: 1px #ffffff outset; height: 40px;*/ } ul#navlist li:active { color: #cccccc; background-color: #3e748a; border: 1px #ffffff inset; box-shadow: none; } ul#subnavlist { display: none; } ul#subnavlist li { float: none;line-height:normal; } ul#subnavlist li { padding: 0px; margin: 0px; height: 14px; } ul#navlist li:hover ul#subnavlist { display: block; //display: inline-block; //display: table-cell; position: absolute; font-size: 8pt; padding-top: 5px; box-shadow: none; } ul#navlist li:hover ul#subnavlist li { display: block; width : 360; height : 100; border: none; padding: 2px; } ul#navlist li:hover ul#subnavlist li a:before { content: " >> "; } .left { float:left; width:760px; background-color:#b0e0e6; } a.white:link {color: #fff;} a.white:active {color: #fff;} a.white:visited {color: #fff;} a.white:hover {color: #fff;} <div id="navcontainer"> <ul id="navlist"> <li><a href="obs-geostrategique-sport.php?cat=1">programme europÉen de lutte <br>contre le trucage de matchs</a></li> <li><a href="obs-geostrategique-sport.php?cat=2">actualitÉs</a></li> <li><a href="obs-geostrategique-sport.php?cat=3">analyse</a></li> <li id="active"><a href="obs-geostrategique-sport.php?cat=4" id="current">thematiques</a> <ul id="subnavlist"> <li id="subactive"><a href="#" id="subcurrent">lutte contre la corruption</a></li> <li><a href="obs-geostrategique-sport.php?cat=4&id=1">evènements sportifs </a></li> <li><a href="obs-geostrategique-sport.php?cat=4&id=2">bonne gouvernance du sport</a></li> <li><a href="obs-geostrategique-sport.php?cat=4&id=3">economie du sport</a></li> <li><a href="obs-geostrategique-sport.php?cat=4&id=4">lutte contre le dopage</a></li> <li><a href="obs-geostrategique-sport.php?cat=4&id=5">lutte pour l'intégrité dans le sport</a></li> </ul> </li> </ul> </div>
first, web browsers apply margin: 8px on <body> element default, need remove that:
html, body { margin: 0; padding: 0; } also, apply padding-left property on html list elemets such <ul> too, fix by:
ul#navlist { font-family: sans-serif; margin-left: 0; padding: 0; /* <-- override user agent stylesheet */ } you're setting margin , padding on main <ul> element by:
ul#navlist, ul#navlist ul, ul#navlist li { padding: 0 8px; /* here */ margin: 0 8px; /* & here */ list-style-type: none; box-shadow: 8px 8px 12px #aaa; } remove ul#navlist selector group , set style individually.
and finally, first list item doesn't need have left margin:
ul#navlist > li:first-child { margin-left: 0; } here jsbin demo.
Comments
Post a Comment