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 11 of 11
  1. #1
    Regular Coder
    Join Date
    Jul 2011
    Posts
    184
    Thanks
    68
    Thanked 2 Times in 2 Posts

    <ul> not displaying on a web page

    I am working on a website, and for some reason <ul> is not showing on the bottom of the site. Here is the code.

    Code:
    <!DOCTYPE html> 
    <html lang="en"> 
    <head> 
    <meta charset="utf-8" /> 
    <title>Latin Sluts</title> 
    <link rel="stylesheet" href="st/css/main.css" type="text/css" /> 
    </head> 
    <body>
    <div id="wrap">
    <div id="header"><a href="http://url-here.com"><img src="st/img/custom/header.png"></a></div>
    <div id="one"><table></table></div>
    <div id="banner-one"><a href="http://url-here.com" target="_blank"><img src="st/img/custom/image-name.jpg"></a></div>
    <div id="two"><table></table></div>
    <div id="three"><table></table></div>
    <ul id="link-list"> 
    <span class="one-list">
    <li>Your link here</li>
    <li>Your link here</li>
    <li>Your link here</li>
    </span>
    <span class="two-list">
    <li>Your link here</li>
    <li>Your link here</li>
    <li>Your link here</li>
    </span>
    <span class="three-list">
    <li>Your link here</li>
    <li>Your link here</li>
    <li>Your link here</li>
    </span>
    <span class="four-list">
    <li>Your link here</li>
    <li>Your link here</li>
    <li>Your link here</li>
    </span>
    </ul>
    <div id="st">
    <div style="font-size: 10px; font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; font-weight:bold;">POWERED BY <a href="http://www.url-here.com">name here</a></div>
    </div></div>
    </body> 
    </html>
    Code:
    body {
    	font-size: 0px; 
    	background-color: #86d6ff;
    }
    
    img {
    	border: none;
    }
    
    td {
    	padding: 1px; 
    }
    
    #wrap {
    	width: 986px;
    	margin: 0 auto;
    }
    
    #header {
    	width: 986px;
    	height: 180px; 
    }
    
    #one {
    	padding-top: 20px; 
    }
    
    #three {
    	padding-top: 180px;
    }
    
    #banner-one {
    	padding: 30px 0 30px 0;
    }
    
    ul {
    	list-style-type: none; 
    }
    
    #link-list {
    	padding-top: 40px; 
    }
    
    .one-list, .two-list, .three-list, .four-list {
    	width: 25%; 
    	float: left;
    }
    
    #st {
    	width: 986px; 
    	margin: 0 auto;
    	padding-top: 60px;
    }
    Thank you.
    Last edited by joliett89; 11-24-2012 at 01:19 PM.

  • #2
    Regular Coder LearningCoder's Avatar
    Join Date
    Jan 2011
    Location
    The Pleiades
    Posts
    925
    Thanks
    76
    Thanked 29 Times in 29 Posts
    I don't think you can use <span> tags within <ul>'s.

    I was doing something similar not so long ago and was told to use the <li>'s as DIRECT CHILDREN of the unordered list.

    Try removing your <span> tags and see what happens.

    Regards,

    LC.

  • Users who have thanked LearningCoder for this post:

    joliett89 (11-24-2012)

  • #3
    Regular Coder
    Join Date
    Jul 2011
    Posts
    184
    Thanks
    68
    Thanked 2 Times in 2 Posts
    So something like this should work (it looks like it doesnt)?

    Code:
    <ul id="link-list"> 
    <div class="one-list">
    <li>Your link here</li>
    <li>Your link here</li>
    </div>
    <div class="two-list">
    <li>Your link here</li>
    <li>Your link here</li>
    </div>
    <div class="three-list">
    <li>Your link here</li>
    <li>Your link here</li>
    </div>
    <div class="four-list">
    <li>Your link here</li>
    <li>Your link here</li>
    </div>
    </ul>
    CSS stayed the same.

  • #4
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,916
    Thanks
    6
    Thanked 1,040 Times in 1,013 Posts
    No, only li elements are allowed as direct chilren of ul, nothing else! A list must look like this:
    Code:
    <ul>
      <li></li>
      <li></li>
      <li></li>
    </ul>
    And inside the list items you can put whatever HTML you like. But again, ul must only contain li directly.

    You can either do:
    Code:
    <div id="link-list">
      <div class="one-list">
        <ul>
          <li>…</li>
          <li>…</li>
        </ul>
      </div>
      <div class="two-list">
        <ul>
          <li>…</li>
          <li>…</li>
        </ul>
      </div>
      <div class="three-list">
        <ul>
          <li>…</li>
          <li>…</li>
        </ul>
      </div>
    </div>
    or:
    Code:
    <ul id="link-list">
      <li class="one-list">
        <ul>
          <li>…</li>
          <li>…</li>
        </ul>
      </li>
      <li class="two-list">
        <ul>
          <li>…</li>
          <li>…</li>
        </ul>
      </li>
      <li class="three-list">
        <ul>
          <li>…</li>
          <li>…</li>
        </ul>
      </li>
    </ul>
    And of course, you need to adapt your CSS.
    Last edited by VIPStephan; 11-24-2012 at 01:22 PM.

  • Users who have thanked VIPStephan for this post:

    joliett89 (11-24-2012)

  • #5
    Regular Coder
    Join Date
    Jul 2011
    Posts
    184
    Thanks
    68
    Thanked 2 Times in 2 Posts
    I guess this is just not meant to work. Here is the current code:

    Code:
    <div id="link-list">
      <div class="one-list">
        <ul>
          <li>Your link here</li>
          <li>Your link here</li>
        </ul>
      </div>
      <div class="two-list">
        <ul>
          <li>Your link here</li>
          <li>Your link here</li>
        </ul>
      </div>
      <div class="three-list">
        <ul>
          <li>Your link here</li>
          <li>Your link here</li>
        </ul>
      </div>
      <div class="four-list">
        <ul>
          <li>Your link here</li>
          <li>Your link here</li>
        </ul>
      </div>
    </div>
    Code:
    #link-list {
    	padding-top: 40px; 
    }
    
    .one-list {
    	width: 25%; 
    	float: left;
    }
    
    .two-list {
    	width: 25%; 
    	float: left;
    }
    
    .three-list {
    	width: 25%;
    	float: left;
    }
    
    .four-list {
    	width: 25%;
    	float: left;
    }
    Last edited by joliett89; 11-24-2012 at 08:23 PM.

  • #6
    Regular Coder LearningCoder's Avatar
    Join Date
    Jan 2011
    Location
    The Pleiades
    Posts
    925
    Thanks
    76
    Thanked 29 Times in 29 Posts
    What exactly is not working? I copied and pasted your code and you have your 4 unordered lists in div's (which are floated to gain horizontal view) and you have your list-items showing.

    Did you want the list items closer together or something?

    Regards,

    LC.

  • Users who have thanked LearningCoder for this post:

    joliett89 (11-24-2012)

  • #7
    Regular Coder
    Join Date
    Jul 2011
    Posts
    184
    Thanks
    68
    Thanked 2 Times in 2 Posts
    I dont know why it is not working on my website (see the post above for url).

  • #8
    Regular Coder LearningCoder's Avatar
    Join Date
    Jan 2011
    Location
    The Pleiades
    Posts
    925
    Thanks
    76
    Thanked 29 Times in 29 Posts
    I visited it and went down to the bottom and I see that nothing is showing.

    I know it's a silly question, but you have edited the live version of your code haven't you, both html and css, and not your local version of the page?

    Are there any other declarations in your page to do with div's or ul li's?

    Regards,

    LC.

  • #9
    Regular Coder
    Join Date
    Jul 2011
    Posts
    184
    Thanks
    68
    Thanked 2 Times in 2 Posts
    I just went to the website, right-clicked for "View source" and stripped unnecessary information. Here is the code:

    Code:
    <!DOCTYPE html> 
    <html lang="en"> 
    <head> 
    <meta charset="utf-8" /> 
    <title>Title here</title> 
    <link rel="stylesheet" href="st/css/main.css" type="text/css" /> 
    </head> 
    <body>
    <div id="wrap">
    <div id="header"></div>
    <div id="one">
    <table></table></div>
    <div id="banner-one"></div>
    <div id="two">
    <table></table></div>
    <div id="three">
    <table></table></div>
    <div id="link-list">
    <div class="one-list">
    <ul>
    <li>Your link here</li>
    <li>Your link here</li>
    </ul>
    </div>
    <div class="two-list">
    <ul>
    <li>Your link here</li>
    <li>Your link here</li>
    </ul>
    </div>
    <div class="three-list">
    <ul>
    <li>Your link here</li>
    <li>Your link here</li>
    </ul>
    </div>
    <div class="four-list">
    <ul>
    <li>Your link here</li>
    <li>Your link here</li>
    </ul>
    </div></div>
    <div id="st">
    <div>POWERED BY <a href="url-here.com">name here</a></div>
    </div></div>
    </body> 
    </html>
    And here is the CSS (directly from the server):

    Code:
    body {
    	font-size: 0px; 
    	background-color: #86d6ff;
    }
    
    img {
    	border: none;
    }
    
    td {
    	padding: 1px; 
    }
    
    #wrap {
    	width: 986px;
    	margin: 0 auto;
    }
    
    #header {
    	width: 986px;
    	height: 180px; 
    }
    
    #one {
    	padding-top: 20px; 
    }
    
    #three {
    	padding-top: 180px;
    }
    
    #banner-one {
    	padding: 30px 0 30px 0;
    }
    
    ul {
    	list-style-type: none; 
    }
    
    #link-list {
    	padding-top: 40px; 
    }
    
    .one-list {
    	width: 25%; 
    	float: left;
    }
    
    .two-list {
    	width: 25%; 
    	float: left;
    }
    
    .three-list {
    	width: 25%;
    	float: left;
    }
    
    .four-list {
    	width: 25%;
    	float: left;
    }
    
    #st {
    	width: 986px; 
    	margin: 0 auto;
    	padding-top: 60px;
    }

  • #10
    Regular Coder LearningCoder's Avatar
    Join Date
    Jan 2011
    Location
    The Pleiades
    Posts
    925
    Thanks
    76
    Thanked 29 Times in 29 Posts
    Just worked it out. It's because you have set the font-size on the body element to 0px.

    set it to whatever size you want. Try 13px to see.

    Code:
    body {
        font-size: 13px;
    }
    OR you can specify a style for the elements.
    Code:
    #one-list{font-size: 13px;}
    #two-list {font-size: 13px;}
    //etc etc
    OR create a style for list-items (<li>)
    Code:
    li {font-size: 13px;}

    Kind regards,

    LC.
    Last edited by LearningCoder; 11-24-2012 at 05:29 PM.

  • Users who have thanked LearningCoder for this post:

    joliett89 (11-24-2012)

  • #11
    Regular Coder
    Join Date
    Jul 2011
    Posts
    184
    Thanks
    68
    Thanked 2 Times in 2 Posts
    It's working now. Thanks.


  •  

    Posting Permissions

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