|
CSS - Spreading A <ul>
How do I spread the elements of an unordered list so they stretch across the page? This isn't all the code, but definitely all the important parts. I used the HTML to center it, since there's no way to center them in CSS (that I know of) and I tried percentages and such for borders, margins or padding. None of it works, since it's all pertaining to list items. I have no idea what to do with this.
HTML Code: <div id="nav"> <center> <ul> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#">4</a></li> <li><a href="#">5</a></li> <li><a href="#">6</a></li> </ul> </center> </div> <!--Close #nav--> CSS: Code:
#nav {
text-shadow:#000 0.2em 0.2em 0.2em;
position:relative;
width:100%;
display:block;
border: .1em solid #FFF;
background-color:#000;
}
#nav ul {
list-style-type:none;
margin:0;
padding:0;
}
#nav ul li {
display:inline;
}
#nav a {
color: white;
padding: 0 .5em;
text-decoration: none;
/* border: .1em solid #FFF;*/
}
#nav a:hover {
background-color: #333;
color: red;
}
Similar TutorialsIm new to CSS but can some one advise how i spread my image across a who page? At present once i have designed my web page in photoshop and flash i'am struggling to spread the image across my web browser. I seem to be having a gap to my left and right once i centre my image. I haven't been able to find an answer to this anywhere and am hoping someone here can help. I'm trying to space the text inside my navigation div so that it stretches evenly accross the div rather than being centered and having a bunch of space on either side. Here's my current html... Code: <div id="navigation"> <p class="nav"><font color="#ffffff" face="verdana" size="3"> <img align="center" border="0" width="1" height="2" src="navdot.gif"><br /> Link 1 | Link 2 | Link 3 | Link 4 | Link 5 </font></p> </div> And my css... Code: #navigation {
width:750px;
height:30px;
background-image:url('navigation.gif');
background-repeat:no-repeat;
margin-top:0px;
}
Any help would be much appreciated. Thanks! EDIT: I think I got it figured out... well, it looks good on my end and I checked it across 6 larger browsers anyways. Here's the html now... Code: <div id="navigation"> <img align="center" border="0" width="1" height="2" src="navdot.gif"> <table align="center" border="0" width="750"> <tr><td width="150" valign="top"> <center><font color="#ffffff" face="verdana" size="3">Link 1</font></center> </td><td width="150" valign="top"> <center><font color="#ffffff" face="verdana" size="3">Link 2</font></center> </td><td width="150" valign="top"> <center><font color="#ffffff" face="verdana" size="3">Link 3</font></center> </td><td width="150" valign="top"> <center><font color="#ffffff" face="verdana" size="3">Link 4</font></center> </td><td width="150" valign="top"> <center><font color="#ffffff" face="verdana" size="3">Link 5</font></center> </td></tr></table> </div> I used a 1x2px image to lower the text so it wasn't sitting right up against the top of the div, then I used a table inside of it and text without using paragraph tags. There's gotta be a cleaner way of doing this though, isn't there? It looks great cross-browser, but I'm thinking there's gotta be a way to do this without a table. this should be simple, but im just not finding my answer. im trying to figure out how to evenly spread several links across a fixed width. i could manually set the padding or margins for each link, but i figure there has to be a way to do it in css automagically. |
|||||||