<ul> not displaying on a web page

joliett89 · 11-24-2012, 09:39 AM

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.

LearningCoder · 11-24-2012, 11:35 AM

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.

joliett89 · 11-24-2012, 12:02 PM

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.

VIPStephan · 11-24-2012, 12:14 PM

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.

joliett89 · 11-24-2012, 01:13 PM

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;
}

LearningCoder · 11-24-2012, 01:50 PM

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.

joliett89 · 11-24-2012, 02:01 PM

I dont know why it is not working on my website (see the post above for url).

LearningCoder · 11-24-2012, 02:43 PM

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.

joliett89 · 11-24-2012, 03:57 PM

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;
}

LearningCoder · 11-24-2012, 04:19 PM

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.

joliett89 · 11-24-2012, 04:33 PM

It's working now. Thanks.