www.webdeveloper.com
Results 1 to 2 of 2

Thread: [RESOLVED] unordered list screwed up.

  1. #1
    Join Date
    Nov 2011
    Posts
    145

    resolved [RESOLVED] unordered list screwed up.

    I'm tring to get 5 columns of unordered list and then 5 more on the next row. I have attached two images I want screen 2 to look like screen 1. the code provided is my webpage that I'm trying to fix.


    HTML Code:
    <!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>

    Code:
    @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;
     width: 100%;
     font-family: Arial, Verdana;
     font-size: 14px;
     margin: 0;
     padding: 0;
     list-style: none;
     }
     
     
     
    
    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 --- */
    Attached Images Attached Images

  2. #2
    Join Date
    Feb 2011
    Location
    Chuluota, Florida
    Posts
    144
    its definitely your css that is causing the problems. You need to create seperate classes for the nav ul's and the ones you use for the main content. The way you have your css written now, its telling all your lists on the page regardless if its in the nav section or not to look a certain way. so go through and add classes for the nav stylings and then you should start to get what you want.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles