SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Member
    Join Date
    Nov 2007
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Removing width from a span

    I'm trying to make a navigation bar using a list, with two rows of text for each item.

    First row contains the page name, second row contains information about the page. The second row of text is put in a span tag, with a class that puts it underneath the first row of text via relative positioning.

    The problem is that the first row is as wide as the second row, because the browser doesn't take into consideration the fact it's been repositioned. It doesn't look at it like:

    Page Name
    This is information about the page

    ...instead...

    Page NameThis is information about the page

    So... there's unnecessary and uneven spacing between the first item, second item, third item, etc. I've tried display:block and all sorts of various tricks... but nothing seems to work.

    Can anybody help? Hope I haven't been too confusing... if you copy the following code, you'll see what I mean.

    <style type="text/css">
    <!--
    #header {
    width: 960px;
    height: 200px;
    position: relative;
    margin-right: auto;
    margin-left: auto;
    }
    #header ul {
    list-style-type: none;
    white-space: nowrap;
    }
    #header li {
    display: inline;
    font-size: 18px;
    padding-left: 15px;
    background-position: 0px;
    }
    .navigation_who {
    position: relative;
    top: 15px;
    font-size: 12px;
    left: -38px;
    }
    -->
    </style>



    <div id="header">
    <ul>
    <li><a href="/who/">Who<span class="navigation_who">are we?</span></a></li>
    <li><a href="/what/">What<span class="navigation_what">we'll do for you.</span></a></li>
    <li><a href="/why/">Why<span class="navigation_why">you need us.</span></a></li>
    <li><a href="/how/">How<span class="navigation_how">we will help.</span></a></li>
    </ul>
    </div>


    Thanks for any help!

  2. #2
    SitePoint Member
    Join Date
    Nov 2007
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    And just to clarify...

    In a browser, it displays the list as:

    Page Name
    This is information about the page

    It just thinks the item is as wide as it would be if the text was on ONE line.

  3. #3
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    Join Date
    Dec 2004
    Location
    Derbyshire - UK
    Posts
    2,651
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm not sure I quite understand the problem.

    Would something like this resolve the issue?

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head><title>Test</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style type="text/css">
    body {
    	font-size: 100&#37;;
    	font-family: arial, verdana, helvetica, sans-serif;	
    }
    #header {
    	list-style-type: none;
    	width: 960px;
    	overflow: hidden;
    }
    #header li {
    	float: left;
    	font-size: 1.2em;
    	padding-left: 15px;
    }
    #header li span {
    	font-size: 0.7em;
    	display: block;	
    }
    </style>
    </head>
    <body>
    <ul id="header">
    	<li><a href="/who/">Who<span>are we?</span></a></li>
    	<li><a href="/what/">What<span>we'll do for you.</span></a></li>
    	<li><a href="/why/">Why<span>you need us.</span></a></li>
    	<li><a href="/how/">How<span>we will help.</span></a></li>
    </ul>
    </body>
    </html>
    If you only want each item to be a set width then you'll need to provide a set width for the <li> of each item otherwise by the very nature of inline or floated elements, they'll display as wide as the content.

    If you specify a width, then it will force text to wrap if it exceeds this width

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head><title>Test</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style type="text/css">
    body {
    	font-size: 100%;
    	font-family: arial, verdana, helvetica, sans-serif;	
    }
    #header {
    	list-style-type: none;
    	width: 960px;
    	overflow: hidden;
    }
    #header li {
    	float: left;
    	font-size: 1.2em;
    	padding-left: 15px;
    	width: 4em;
    }
    #header li span {
    	font-size: 0.7em;
    	display: block;	
    }
    </style>
    </head>
    <body>
    <ul id="header">
    	<li><a href="/who/">Who<span>are we?</span></a></li>
    	<li><a href="/what/">What<span>we'll do for you.</span></a></li>
    	<li><a href="/why/">Why<span>you need us.</span></a></li>
    	<li><a href="/how/">How<span>we will help.</span></a></li>
    </ul>
    </body>
    </html>
    Hope that hopes.

  4. #4
    SitePoint Member
    Join Date
    Nov 2007
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That did exactly what I wanted.

    I don't want each one to be a set width, just as wide as the second row of text.

    Thanks so much for the help!


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
  •