0

I built this web page with unordered list in the content div tag. But it does not look right. It should be 5 unordered list accross and then on the next row another 5.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Canada-Accessible</title>

<link href="css/main.css" rel="stylesheet" type="text/css">
</head>

<body>

<div id="wrapper">

<div id="header">

    <img src="images/banner.jpg" alt="banner">

    <ul id="menu">
        <li><a href="index.html">Home</a></li>
        <li><a href="">Destinations</a>
            <ul>
                <li><a href="canada.html">Canada</a></li>
                <li><a href="United States.html">Untited States</a></li>
                <li><a href="International.html">International</a></li>
            </ul>
        </li>
        <li><a href="">Lodging</a>
            <ul>
                <li><a href="">One</a></li>
                <li><a href="">Two</a></li>
                <li><a href="">Three</a></li>
                <li><a href="">Four</a></li>
                <li><a href="">Five</a></li>
            </ul>
        </li>    
        <li><a href="">Transportation</a>
            <ul>
                <li><a href="">One</a></li>
                <li><a href="">Two</a></li>
                <li><a href="">Three</a></li>
            </ul>
        </li>    
        <li><a href="">Link 5</a>
            <ul>
                <li><a href="">One</a></li>
                <li><a href="">Two</a></li>
                <li><a href="">Three</a></li>
            </ul>
        </li>
        <li><a href="">Link 6</a>
            <ul>
                <li><a href="">One</a></li>
                <li><a href="">Two</a></li>
                <li><a href="">Three</a></li>
            </ul>
        </li>    
        <li><a href="">Link 7</a>
            <ul>
                <li><a href="">One</a></li>
                <li><a href="">Two</a></li>
                <li><a href="">Three</a></li>
            </ul>
        </li>
    </ul>
   <br>
   <h2 align="center">CANADA</h2> 
</div><!-- End header-->
     <br><br>


    <div id="content">

    <ul >
 <p><strong>Alberta</strong></p>
 <li>Airdrie</li>
 <li>Brooks</li>
 <li>Calgary</li>
 <li>Camrose</li>
 <li>Cochrane</li>
 <li>Edmonton</li>
 <li>Fort McMurray</li>
 <li>Grande Prairie</li>
 <li>Leduc</li>
 <li>Lethbridge</li>
 <li>Medicine Hat</li>
 <li>Okotoks</li>
 <li>Red Deer</li>
 <li>Saint Albert</li>
 <li>Spruce Grove</li>
</ul>

 <ul>
  <p><strong>British Columbia</strong></p>
 <li>Abbotsford</li>
 <li>Campbell River</li>
 <li>Chilliwack</li>
 <li>Courtenay</li>
 <li>Duncan</li>
 <li>Kamloops</li>
 <li>Kelowna</li>
 <li>Nanaimo</li>
 <li>Penticton</li>
 <li>Port Alberni</li>
 <li>Prince George</li>
 <li>Vancouver</li>
 <li>Vernon</li>
 <li>Victoria</li>
 <li>White Rock</li> 
 </ul>

 <ul>
  <p><strong>Manitoba</strong></p>
 <li>Altona</li>
 <li>Brandon</li>
 <li>Dauphin</li>
 <li>Flin Flon</li>
 <li>Morden</li>
 <li>Neepawa</li> 
 <li>Selkirk</li>
 <li>Steinbach</li>
 <li>Stonewall</li>
 <li>Swan River</li>
 <li>The Pas</li>
 <li>Thompson</li>
 <li>Virden</li>
 <li>Winkler</li>
 <li>Winnipeg</li>
 </ul>

<ul>
  <p><strong>New Brunswick</strong></p>
 <li>Bathurst</li>
 <li>Campbellton</li>
 <li>Caraquet</li>
 <li>Dalhousie</li>
 <li>Edmundston</li>
 <li>Fredericton</li>
 <li>Grand Falls</li>
 <li>Moncton</li>
 <li>Oromocto</li>
 <li>Saskvillee</li>
 <li>Saint John</li>
 <li>Saint Stephen</li>
 <li>Shediac</li>
 <li>Sussex</li>
 <li>Woodstock</li>
 </ul>

 <ul>
  <p><strong>Newfoundland and Labrador</strong></p>
 <li>Bay Roberts</li>
 <li>Carbonear</li>
 <li>Channel-Port aux Basques</li>
 <li>Conception Bay South</li>
 <li>Corner Brook</li>
 <li>Gander</li>
 <li>Goose Bay</li>
 <li>Grand Bank</li>
 <li>Grand Falls-Windsor</li>
 <li>Labrador City</li>
 <li>Marystown</li>
 <li>Mount Pearl</li>
 <li>Paradise</li>
 <li>Saint Johns</li>
 <li>Stephenville</li>
 </ul>

<div class="clearfix"></div>

 <ul>
  <p><strong>Nova Scotia</strong></p>
 <li>Amhers</li>
 <li>Antigonish</li>
 <li>Bridgewater</li>
 <li>Glace Bay</li>
 <li>Halifax</li>
 <li>Kentville</li>
 <li>New Glasgow</li>
 <li>New Waterford</li>
 <li>Pictou</li>
 <li>Port Hawkesbury</li>
 <li>Springhill</li>
 <li>Sydney Mines</li>
 <li>Sydney</li>
 <li>Truro</li>
 <li>Yarmouth</li>
 </ul>



    </div><!-- End content-->




<div id="footer">
<h6>Copyright © 2011 Accessible Destinations | All rights
reserved | </h6> </div><!--End footer-->


</div><!--End wrapper-->


</body>
</html>


This is the CSS code below.

@charset "UTF-8";
/* CSS Document */

#wrapper {
    background-color:#FFF;
    width: 780px;
    margin: auto;
}

/* --- navigation starts --- */

#header {
    width: 100%;
    height: 229px;
    margin: auto;
}   

#header img {
    width: 100%;
    height: 100%;
}

ul {
 display: block;
 float: left;
 width:auto
 list-style-type: none;
 font-family: Arial, Verdana;
 font-size: 14px;
 margin: 0;
 padding: 0;
 list-style: none;
 }

 .clearfix {
 float:left;
 width:100%;
 clear:both;
 margin-bottom:10px;
 }


ul li {
    width: 111px;
    text-align: center;
    display: block;
    position: relative;
    float:left;
}

li ul { 
    display: none;
    position: relative;
    z-index: 1;


}

ul li a {
    display: block;
    text-decoration: none;
    color: #ffffff;
    border-top: 1px solid #ffffff;
    padding: 5px 15px 5px 15px;
    background: #2C5463;
    margin-left: 1px;
    white-space: nowrap;
}

ul li a:hover { 
    background: #617F8A; 
}

li:hover ul {
    display: block;
    position: absolute;
}

li:hover li {
    float: none;
    font-size: 11px;
}

li:hover a { 
    background: #617F8A; 
}

/* --- navigation ends --- */

/* --- information starts --- */

#content
{
    position: relative;
    top: 40px;
    font-size:16px;
    font-family: Verdana, Geneva, sans-serif;
}




#footer {
    margin-top: 100px;
    text-align: center;
}   

/* --- information ends --- */


/* --- Advertising starts --- */

#adverts {
    width: 95%;
    margin: auto;
    text-align: center; /* Only to align alternate image text for visulization */
}

#adverts #addWarning {
    float: left;
    font-size: smaller;
}   

#adverts #single {
    clear: both;
}   

#adverts #single img {
    width: 100%;
}

#adverts .double img {
    width: 50%;
    display: inline-block;
    float: left;
}

#adverts .trible img {
    width: 33%;
    display: inline-block;
    float: left;
}



/* --- Advertising Ends --- */
5
Contributors
5
Replies
6
Views
5 Years
Discussion Span
Last Post by gabrielcastillo
0

I took a quick scan of the code and found these two items that do not seem correct. Not sure if its going to fix your issue, but anyway...

Line #235, you are missing a semicolon after the width style.
Also, from my understanding, the paragraph element is not an element that can be nested within the unordered list element.

0

I tryed both things, and nothing made a difference.

Edited by charisma

0

Why dont you use table instead? I checked the output and it was lookin like table. So using table makes sense for me. Is it college project? Be careful with managing your layout because later changes might lead you to frustration. Good luck:)

0

Is this what you are looking for?

I added this bit of code:

#content ul {
    display:block;
    float:left;
    width:115px;
    padding:10px 20px;
 }

 #content ul p {
    display:block;
    text-align:center;
 }










<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Canada-Accessible</title>

<link href="css/main.css" rel="stylesheet" type="text/css">
<style type="text/css">
@charset "UTF-8";
/* CSS Document */

#wrapper {
    background-color:#FFF;
    width: 780px;
    margin: auto;
}

/* --- navigation starts --- */

#header {
    width: 100%;
    height: 229px;
    margin: auto;
}   

#header img {
    width: 100%;
    height: 100%;
}

ul {
 display: block;
 float: left;
 width:auto
 list-style-type: none;
 font-family: Arial, Verdana;
 font-size: 14px;
 margin: 0;
 padding: 0;
 list-style: none;
 }

 .clearfix {
 float:left;
 width:100%;
 clear:both;
 margin-bottom:10px;
 display: block;
 }


ul li {
    width: 111px;
    text-align: center;
    display: block;
    position: relative;
    float:left;
}

li ul { 
    display: none;
    position: relative;
    z-index: 1;


}

ul li a {
    display: block;
    text-decoration: none;
    color: #ffffff;
    border-top: 1px solid #ffffff;
    padding: 5px 15px 5px 15px;
    background: #2C5463;
    margin-left: 1px;
    white-space: nowrap;
}

ul li a:hover { 
    background: #617F8A; 
}

li:hover ul {
    display: block;
    position: absolute;
}

li:hover li {
    float: none;
    font-size: 11px;
}

li:hover a { 
    background: #617F8A; 
}

/* --- navigation ends --- */

/* --- information starts --- */

#content
{
    margin-top:40px;
    font-size:16px;
    font-family: Verdana, Geneva, sans-serif;
}

#content ul {
    display:block;
    float:left;
    width:115px;
    padding:10px 20px;
 }

 #content ul p {
    display:block;
    text-align:center;
 }


#footer {
    clear:both;
    margin-top: 100px;
    text-align: center;
}   

/* --- information ends --- */


/* --- Advertising starts --- */

#adverts {
    width: 95%;
    margin: auto;
    text-align: center; /* Only to align alternate image text for visulization */
}

#adverts #addWarning {
    float: left;
    font-size: smaller;
}   

#adverts #single {
    clear: both;
}   

#adverts #single img {
    width: 100%;
}

#adverts .double img {
    width: 50%;
    display: inline-block;
    float: left;
}

#adverts .trible img {
    width: 33%;
    display: inline-block;
    float: left;
}


</style>


</head>

<body>

<div id="wrapper">

<div id="header">

    <img src="images/banner.jpg" alt="banner">

    <ul id="menu">
        <li><a href="index.html">Home</a></li>
        <li><a href="">Destinations</a>
            <ul>
                <li><a href="canada.html">Canada</a></li>
                <li><a href="United States.html">Untited States</a></li>
                <li><a href="International.html">International</a></li>
            </ul>
        </li>
        <li><a href="">Lodging</a>
            <ul>
                <li><a href="">One</a></li>
                <li><a href="">Two</a></li>
                <li><a href="">Three</a></li>
                <li><a href="">Four</a></li>
                <li><a href="">Five</a></li>
            </ul>
        </li>    
        <li><a href="">Transportation</a>
            <ul>
                <li><a href="">One</a></li>
                <li><a href="">Two</a></li>
                <li><a href="">Three</a></li>
            </ul>
        </li>    
        <li><a href="">Link 5</a>
            <ul>
                <li><a href="">One</a></li>
                <li><a href="">Two</a></li>
                <li><a href="">Three</a></li>
            </ul>
        </li>
        <li><a href="">Link 6</a>
            <ul>
                <li><a href="">One</a></li>
                <li><a href="">Two</a></li>
                <li><a href="">Three</a></li>
            </ul>
        </li>    
        <li><a href="">Link 7</a>
            <ul>
                <li><a href="">One</a></li>
                <li><a href="">Two</a></li>
                <li><a href="">Three</a></li>
            </ul>
        </li>
    </ul>
   <br>
   <h2 align="center">CANADA</h2> 
</div><!-- End header-->


    <div id="content">

    <ul >
         <p><strong>Alberta</strong></p>
         <li>Airdrie</li>
         <li>Brooks</li>
         <li>Calgary</li>
         <li>Camrose</li>
         <li>Cochrane</li>
         <li>Edmonton</li>
         <li>Fort McMurray</li>
         <li>Grande Prairie</li>
         <li>Leduc</li>
         <li>Lethbridge</li>
         <li>Medicine Hat</li>
         <li>Okotoks</li>
         <li>Red Deer</li>
         <li>Saint Albert</li>
         <li>Spruce Grove</li>
    </ul>

 <ul>
      <p><strong>British Columbia</strong></p>
     <li>Abbotsford</li>
     <li>Campbell River</li>
     <li>Chilliwack</li>
     <li>Courtenay</li>
     <li>Duncan</li>
     <li>Kamloops</li>
     <li>Kelowna</li>
     <li>Nanaimo</li>
     <li>Penticton</li>
     <li>Port Alberni</li>
     <li>Prince George</li>
     <li>Vancouver</li>
     <li>Vernon</li>
     <li>Victoria</li>
     <li>White Rock</li> 
 </ul>

 <ul>
  <p><strong>Manitoba</strong></p>
 <li>Altona</li>
 <li>Brandon</li>
 <li>Dauphin</li>
 <li>Flin Flon</li>
 <li>Morden</li>
 <li>Neepawa</li> 
 <li>Selkirk</li>
 <li>Steinbach</li>
 <li>Stonewall</li>
 <li>Swan River</li>
 <li>The Pas</li>
 <li>Thompson</li>
 <li>Virden</li>
 <li>Winkler</li>
 <li>Winnipeg</li>
 </ul>

<ul>
    <p><strong>New Brunswick</strong></p>
     <li>Bathurst</li>
     <li>Campbellton</li>
     <li>Caraquet</li>
     <li>Dalhousie</li>
     <li>Edmundston</li>
     <li>Fredericton</li>
     <li>Grand Falls</li>
     <li>Moncton</li>
     <li>Oromocto</li>
     <li>Saskvillee</li>
     <li>Saint John</li>
     <li>Saint Stephen</li>
     <li>Shediac</li>
     <li>Sussex</li>
     <li>Woodstock</li>
 </ul>

 <ul>
      <p><strong>Newfoundland and Labrador</strong></p>
     <li>Bay Roberts</li>
     <li>Carbonear</li>
     <li>Channel-Port aux Basques</li>
     <li>Conception Bay South</li>
     <li>Corner Brook</li>
     <li>Gander</li>
     <li>Goose Bay</li>
     <li>Grand Bank</li>
     <li>Grand Falls-Windsor</li>
     <li>Labrador City</li>
     <li>Marystown</li>
     <li>Mount Pearl</li>
     <li>Paradise</li>
     <li>Saint Johns</li>
     <li>Stephenville</li>
 </ul>



 <ul>
  <p><strong>Nova Scotia</strong></p>
 <li>Amhers</li>
 <li>Antigonish</li>
 <li>Bridgewater</li>
 <li>Glace Bay</li>
 <li>Halifax</li>
 <li>Kentville</li>
 <li>New Glasgow</li>
 <li>New Waterford</li>
 <li>Pictou</li>
 <li>Port Hawkesbury</li>
 <li>Springhill</li>
 <li>Sydney Mines</li>
 <li>Sydney</li>
 <li>Truro</li>
 <li>Yarmouth</li>
 </ul>



    </div><!-- End content-->



<div class="clearfix"></div>
<div id="footer">
<h6>Copyright © 2011 Accessible Destinations | All rights
reserved | </h6> </div><!--End footer-->


</div><!--End wrapper-->


</body>
</html>
This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.