Stretch out list items so that they occupy the width 100%

Discussion in 'CSS' started by cre8ive, Jan 14, 2008.

0
  1. #1
    Stretch out list items so that they occupy the width 100%.

    I want to (and kind of need to) stretch out list items so that they occupy the width 100%. I have the following code.

    
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
    <title>Navigation</title>
    <meta name="Author" content="">
    <meta http-equiv="imagetoolbar" content="no">
    <style type="text/css">
html {
    overflow: hidden;
}
body {
    margin: 0px;
    padding: 0px;
    background: #7E797F;
    position: absolute;
    width: 100%;
    height: 100%;
    filter: alpha(opacity=100);
}
#idList {
	margin: 0;
	padding: 0;
	list-style-type: none;
}
#idList li {
	position: relative;
	display: inline;
	float: left;
	
	border: solid 0px;
	margin-left: 1px;
	padding-right: 20px;
	padding-left: 20px;
	padding-top: 2px;
	padding-bottom: 2px;
	color: #888888;
	background-color: #0D0D0D;
	font: bold 11px/150% Arial, Tahoma, Georgia;
	text-align: center;
}
#idList li a {
	display: block;
	color: #888888;
	font: bold 11px/150% Arial, Tahoma, Georgia;
	text-decoration: none;
}
    </style>

</head>

        <div style="position: absolute; width: 100%; z-index: 101;">
            <div style="display: inline; float: left;"><img alt="" src="images/tmz.jpg"></div>
            <ul id="idList">
                <li><a>Bites</a></li>
                <li><a>Media</a></li>
                <li><a>Press Releases</a></li>
                <li><a>Online Application</a></li>
                <li><a>About Us</a></li>
                <li><a>Contact</a></li>
                <li><a>Home</a></li>
            </ul>
        </div>

</body>
</html>
    Code (markup):
    This creates a space on the right side of the list. There are a few ways to get around this problem (such as displaying something in the background, that looks like a list item), but in this instance, I want to stretch out list items. Can I do that? If so, how can I do that ...??? (OMG, CSS is neat and all, but it's so difficult to get certain things done ...)
     
    cre8ive, Jan 14, 2008 IP
  2. HiredAtHome

    HiredAtHome Peon

    Messages:
    188
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #2
    Do the links themselves need to spread across, or would having them centered with the black bar extending across the entire page work? Which are you trying to make happen?

    H@H
     
    HiredAtHome, Jan 15, 2008 IP
  3. cre8ive

    cre8ive Peon

    Messages:
    295
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #3
    The latter would be just fine. In fact, that's what I really want.
     
    cre8ive, Jan 16, 2008 IP
  4. soulscratch

    soulscratch Well-Known Member

    Messages:
    964
    Likes Received:
    45
    Best Answers:
    0
    Trophy Points:
    155
    #4
    Try..

    getting rid of the position:relative and any horizontal margins/padding on idlist li then give it a width:100%; declaration and then remove the float from <div style="display: inline; float: left;"><img alt="" src="images/tmz.jpg"></div>.

    alternatively you could remove the float:left on the idlist li and remove the float from the container, and they would naturally take up the full width.
     
    soulscratch, Jan 16, 2008 IP
  5. cre8ive

    cre8ive Peon

    Messages:
    295
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #5
    Like the following??? It doesn't look right at all. In fact, all list items show up on different lines.

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Navigation</title>
<meta name="Author" content="">
<meta http-equiv="imagetoolbar" content="no">
<style type="text/css">
html {
	overflow: hidden;
}
body {
	margin: 0px;
	padding: 0px;
	background: #7E797F;
	position: absolute;
	width: 100%;
	height: 100%;
	filter: alpha(opacity=100);
}
#idList {
	margin: 0;
	padding: 0;
	list-style-type: none;
}
#idList li {
	display: inline;
	float: left;
	
	border: solid 0px;
	padding-top: 2px;
	padding-bottom: 2px;
	color: #888888;
	background-color: #0D0D0D;
	font: bold 11px/150% Arial, Tahoma, Georgia;
	text-align: center;
}
#idList li a {
	display: block;
	color: #888888;
	font: bold 11px/150% Arial, Tahoma, Georgia;
	text-decoration: none;
	width: 100%;
}
    </style>

</head>
	<div style="position: absolute; width: 100%; z-index: 101;">
		<div style="display: inline;"><img alt="" src="images/tmz.jpg"></div>
		<ul id="idList">
			<li><a>Bites</a></li>
			<li><a>Media</a></li>
			<li><a>Press Releases</a></li>
			<li><a>Online Application</a></li>
			<li><a>About Us</a></li>
			<li><a>Contact</a></li>
			<li><a>Home</a></li>
		</ul>
	</div>
</body>
</html>
    Code (markup):
     
    cre8ive, Jan 17, 2008 IP
  6. Nick

    Nick Peon

    Messages:
    52
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #6
    Take a look at my menu at vbstartup.com

    Is this the effect you're trying to achieve? If so, here's the relevant CSS

    
ul#navi {
	margin: 0px;
	padding: 0px;
	text-align: center;
	list-style:	none;
	height: 29px;
	line-height: 29px;
	background: url(images/images/gradients/gradient_nav.gif);
}

ul#navi li {
	display: -moz-inline-box;
	display: inline-block;
	height:	29px;
	line-height: 29px;
	margin:	0px 10px;
	font: bold 10pt 'trebuchet ms', verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
}

ul#navi li a:link,  ul#navi li a:hover,  ul#navi li a:visited {
	color: #bc5a10;
	text-decoration: none;
	line-height: 29px;
	display: block;
}
    Code (markup):
    
<!--[if IE]>
<style type="text/css">
ul#navi li {
display: inline;
}
</style>
<![endif]-->
<!-- / CSS Stylesheet -->
    Code (markup):
     
    Nick, Jan 17, 2008 IP