SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Addict
    Join Date
    Jun 2006
    Posts
    251
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Stretch UL to width of screen

    Hello, Can someone please help me keep the list centered on the page, while making the first and last item stretch to the end of the screen. Is that possible?

    HTML Code:
    <!-- stretched width of left margin-->
    <li id="first" style="background-color:green;width: 100%;">
    <a href="#">First </a></li>
    <!-- centred fixed width-->
    <li id="second" style="background-color:yellow;width: 220px;">
    <a href="#">Second</a></li>
    <!-- centred fixed width -->
    <li id="third" style="background-color:red;width: 220px;">
    <a href="#" >Third</a>
    </li><!-- stretched width of right margin-->
    <li id="fourth" style="background-color:blue;width: 100%;">
      <a href="#">Fourth</a>
    </li>
    Many thanks in advance

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,173
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    That 100% there will only stretch the LI to the width of the parent container. You can use negative left/right margins to stretch it further, but CSS can't tell how far left and right it will need to stretch. For that, you'd need a bit of JS. PPK does something similar on his site: http://www.quirksmode.org/js/strings.html (notice how his <pre> elements stretch to the edge of the window on both sides).

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,352
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Not really sure what you want to happen there but the second and third items could be centred with margin:auto.

    Code:
    #second,#third{margin:auto}
    Or did you want all text items centred and full-width colours?

  4. #4
    SitePoint Addict
    Join Date
    Jun 2006
    Posts
    251
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    many thanks for your replies.

    Here is another graphic if it explains it anybetter:

    http://i41.tinypic.com/2rwxhlj.png

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,352
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Yes that makes it clearer

    Try this:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Untitled Document</title>
    <style type="text/css">
    html, body {
    	margin:0;
    	padding:0
    }
    h1 { text-align:center; }
    ul.stretch {
    	margin:0;
    	padding:0;
    	width:100%;
    	display:table;
    	background:green;/* the left stretech colour*/
    	display:inline-block;
    	word-spacing:-.25em; /* hide whitespace nodes in all modern browsers (not for webkit) - unlike negative margins words will never overlap even if zoomed*/
    	text-align:center;
    	position:relative;
    	overflow:hidden;
    }
    ul.stretch:after {
    	content:" ";
    	position:absolute;
    	top:0;
    	bottom:0;
    	left:50%;
    	right:0;
    	background:blue;/* the right stretch color*/
    	z-index:1;
    }
    .stretch li {
    	display:inline-block;
     *display:inline;/* ie6/7 fix*/
     *zoom:1.0;/* ie6/7 fix*/
    	vertical-align:middle;
    	word-spacing:0; /* reset from parent */
    	width:150px;
    	z-index:2;
    	position:relative;
    }
    .stretch a {
    	display:block;
    	width:150px;
    	color:#fff;
    	text-decoration:none;
    	line-height:30px;
    }
    li.one { background:green }
    li.two { background:yellow }
    li.three { background:red }
    li.four { background:blue }
    </style>
    </head>
    
    <body>
    <h1>Centred list with stretch - IE7+</h1>
    <ul class="stretch">
    		<li class="one"><a href="#"> Link 1</a></li>
    		<li class="two"><a href="#"> Link 2</a></li>
    		<li class="three"><a href="#"> Link 3</a></li>
    		<li class="four"><a href="#"> Link 4</a></li>
    </ul>
    </body>
    </html>
    It may look a little odd when it wraps so you may want to have all 4 links coloured differently to the stretch.


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •