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
    Regular Coder Doctor_Varney's Avatar
    Join Date
    Mar 2008
    Location
    Midlands, UK
    Posts
    649
    Thanks
    45
    Thanked 29 Times in 28 Posts

    Help needed with lists

    I'm trying to make two different definition lists. One that is floated and another one that is vertical. I can make one or the other but how can I make them different? Please can someone explain how to do this? Do I use classes or ids and if so, how do I do this?
    Definition: Computer rage is a heightened physiological response with associated feelings of anger and frustration[1] resulting from using a computer or other complex electronic device. It may result in the physical assault of the computer or similar item.[2] Computer use often leads to verbal abuse and occasionally physical violence towards the object.[3] Computer rage may be caused by distress due to a hardware or software problem which the enraged person is unable to correct.

  • #2
    Regular Coder Doctor_Varney's Avatar
    Join Date
    Mar 2008
    Location
    Midlands, UK
    Posts
    649
    Thanks
    45
    Thanked 29 Times in 28 Posts
    Basically, I want:

    -
    -
    -
    -
    -

    Then I want: - - - - - and I want it all to wrap around a picture.
    Definition: Computer rage is a heightened physiological response with associated feelings of anger and frustration[1] resulting from using a computer or other complex electronic device. It may result in the physical assault of the computer or similar item.[2] Computer use often leads to verbal abuse and occasionally physical violence towards the object.[3] Computer rage may be caused by distress due to a hardware or software problem which the enraged person is unable to correct.

  • #3
    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 Doctor_Varney,
    Long time no see!

    You could use either id or class to style your two dl's differently. If you plan on having several dl's on one page, use a class.

    Would look something like this:
    Code:
    <dl class="one">
    <dt>title</dt>
    <dd>item</dd>
    <dd>item</dd>
    <dd>item</dd>
    </dl>
    <dl class="two">
    <dt>title</dt>
    <dd>item</dd>
    <dd>item</dd>
    <dd>item</dd>
    </dl>
    And some CSS for that might start like this:

    Code:
    .two dt, .two dd {float: left;}
    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

  • #4
    Senior Coder alykins's Avatar
    Join Date
    Apr 2011
    Posts
    1,721
    Thanks
    41
    Thanked 191 Times in 190 Posts
    Code:
    <div id="boxWrap">
    <div id="colRight">
      <ul>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      </ul>
    </div>
    
    <img id="myimg" />
    
    <div id="bottomBan">
      <ul>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      </ul>
    </div>
    </div>
    Code:
    #boxWrap div, ul, li, img{padding:0px; margin:0px; border:none;}
    #boxWrap {height: 600px; width: 600px;}
    #colRight {height: 400px; width: 200px; float:left;}
    #myimg { float:right; height: 400px; width:400px;}
    #bottomBan{clear:right; width: 400px; height:200px;}
    #bottomBan ul li, #bottomBan ul{float:right;}

    I code C hash-tag .Net
    Reference: W3C W3CWiki .Net Lib
    Validate: html CSS
    Debug: Chrome FireFox IE

  • #5
    Senior Coder alykins's Avatar
    Join Date
    Apr 2011
    Posts
    1,721
    Thanks
    41
    Thanked 191 Times in 190 Posts
    oops, missed "data list"... (thought the "ticks" were desired)
    Excavator's would work too, i just made it "wrap around the image" you mentioned

    I code C hash-tag .Net
    Reference: W3C W3CWiki .Net Lib
    Validate: html CSS
    Debug: Chrome FireFox IE

  • #6
    Regular Coder Doctor_Varney's Avatar
    Join Date
    Mar 2008
    Location
    Midlands, UK
    Posts
    649
    Thanks
    45
    Thanked 29 Times in 28 Posts
    Thanks. In the end, I went for a paragraph for the longer lists. It's not a webpage, but a CV which I can put on the web and send to clients as a file.

    Thanks anyway, because the answer is noted and it's very likely to come in useful for a future project.

    Yes, Exc. Long time, no see. I only do web publishing when I absolutely have to - because I'm absolutely no good at it. I've changed career which means I don't have to go near computers much these days... which is a relief!

    Cheers

    Dr. V
    Definition: Computer rage is a heightened physiological response with associated feelings of anger and frustration[1] resulting from using a computer or other complex electronic device. It may result in the physical assault of the computer or similar item.[2] Computer use often leads to verbal abuse and occasionally physical violence towards the object.[3] Computer rage may be caused by distress due to a hardware or software problem which the enraged person is unable to correct.


  •  

    Posting Permissions

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