Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New Coder
    Join Date
    Nov 2008
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts

    ul wordwrap problem

    Hi,
    I am using CSS for an unordered list with a text description after the list item.
    I do want it to wrap, which it is doing. But I want the wrapped text to begin under the first character on the first line of the description, not under the list item.

    In other words, if two lines of the description exist, the second line should start directly under the first line of the description.
    I hope I'm not being too confusing here..

    I am using <span></span> around the description, but I am not sure how to align it correctly.


    Any help is appreciated.

    Thanks in advance,
    Jake
    Last edited by jake7363; 11-22-2008 at 03:55 PM.

  • #2
    Regular Coder
    Join Date
    Oct 2008
    Posts
    130
    Thanks
    0
    Thanked 4 Times in 4 Posts
    Can we see a code because the text should begin directly under the text on top in a list.

  • #3
    New Coder
    Join Date
    Nov 2008
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts

    re ul wordwrap problem

    Sure, here it is... I'm still not sure I am communicating accurately. But see what you think...

    CSS:
    .remarks {
    padding-left:15px;
    padding-right:5px;
    margin-left:10px;
    margin-right:10px;
    word-wrap: break-word;

    width:400px;

    text-align:left;
    font-family:Arial, Helvetica, sans-serif;
    font-size:14px;

    }




    HTML:
    <ul>
    <span class="art">Art, Arforms, Artists</span>
    <li>Abbey Rodeo <span class="remarks">Great band from Lake County. Go to their gigs and see all of your Lake County friends!</span>
    </li>
    <li>Carlos Alberto Calabrese </li>
    <li>CD Baby </li>
    <li>David J. Fox </li>
    <li>Hillsong </li>
    <li>Kid Brothers of St. Frank, Co. </li>
    <li>Local Bands </li>
    <li>Rich Mullins 1</li>
    <li>Rich Mullins 2 </li>
    <li>The Girls </li>
    <li>The Indie Band Survial Guide </li>
    <li>Trumpet in the Land </li>
    </ul>

  • #4
    Regular Coder
    Join Date
    Oct 2008
    Posts
    130
    Thanks
    0
    Thanked 4 Times in 4 Posts
    Not exactly sure what you want, but...

    Code:
    <style type="text/css">
    .remarks {
    word-wrap: break-word;
    
    width:400px;
    
    text-align:left;
    font-family:Arial, Helvetica, sans-serif;
    font-size:14px; 
    
    }
    </style>
    
    <ul>
    <span class="art">Art, Arforms, Artists</span>
    <li>Abbey Rodeo<br /> 
    <span class="remarks">Great band from Lake County. Go to their gigs and see all of your Lake County friends!</span>
    </li>
    <li>Carlos Alberto Calabrese </li>
    <li>CD Baby </li>
    <li>David J. Fox </li>
    <li>Hillsong </li>
    <li>Kid Brothers of St. Frank, Co. </li>
    <li>Local Bands </li>
    <li>Rich Mullins 1</li>
    <li>Rich Mullins 2 </li>
    <li>The Girls </li>
    <li>The Indie Band Survial Guide </li>
    <li>Trumpet in the Land </li>
    </ul>

  • #5
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello jake7363,
    It looks like your ul is not formed quite right. You want <span class="art">Art, Arforms, Artists</span> to be a title of a list item but it's only enclosed with span tags and that doesn't make it part of the ul.
    Maybe a Definition List would work better for you.
    Have a look at this:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    <!--
    #wrap {
    	width: 800px;
    	background: #999;
    	}
    dl {
    	width: 400px;
    	background: #CCC;
    	margin: 20px;
    	}
    dt {
    	font-family:Arial, Helvetica, sans-serif;
    	font-size:14px; 
    	}
    dd {
    	font-family:Arial, Helvetica, sans-serif;
    	font-size:12px; 
    	}
    .remarks {
    	color: #0F0;
    	margin-left: 65px;
    	}
    ul{
    	margin-left: -30px;
    	}
    -->
    </style>
    </head>
    
    <body>
    <div id="wrap">
    <dl>
    	<dt><span class="art">Art, Arforms, Artists</span></dt>
        <dd>Abbey Rodeo</dd>
        	<dd class="remarks">Great band from Lake County. Go to their gigs and see all of your Lake County friends!Great band from Lake County. Go to their gigs and see all of your Lake County friends!Great band from Lake County. Go to their gigs and see 									all of your Lake County friends!Great band from Lake County. Go to their gigs and see all of your Lake County friends!</dd>
        <dd>
        	<ul>
                <li>Carlos Alberto Calabrese </li>
                <li>CD Baby </li>
                <li>David J. Fox </li>
                <li>Hillsong </li>
                <li>Kid Brothers of St. Frank, Co. </li>
                <li>Local Bands </li>
                <li>Rich Mullins 1</li>
                <li>Rich Mullins 2 </li>
                <li>The Girls </li>
                <li>The Indie Band Survial Guide </li>
                <li>Trumpet in the Land </li>
        	</ul> 
    	</dd>
    </dl>
    </div>
    </body>
    </html>
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #6
    New Coder
    Join Date
    Nov 2008
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts

    re:ul wordwrap problem

    Yeah, I thought I wasn't clear enough...
    Let me try one more time...

    List item 1 description line 1
    description line 2

    What I am trying to get is for "description line 2" to line up under the "d" in description line 1. It is now lining up under the "L" in List Item 1. Hope that clarifies....


    Thanks again,
    Jake


  •  

    Posting Permissions

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