Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 5 of 5

Thread: css help

  1. #1
    Junior Member
    Join Date
    May 2008
    Posts
    2
    Member #
    16873
    i need help i made a site a while ago with css and everything worked now i tried to make a new one and i used the same codes but it doesnt work im trying to make a horizontal nav bar but it stacks the items ontop of each other
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <title>oblivion template</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <link href="style.css" rel="stylesheet" type="text/css">
    </head>
    
    <body >
    <div id="container">
        <div id="header">
            <div id="logo">
            
            </div>
    <div id="topright">
                <div id="nav">
                    <ul>
                        <li><a href="http://www.freewebsitetemplates.com">Home</a></li>
                        <li><a href="http://www.freewebsitetemplates.com">Community </a></li>
                        <li><a href="http://www.freewebsitetemplates.com">Support</a></li>
                        <li><a href="http://www.freewebsitetemplates.com">Games</a></li>
                        <li><a href="http://www.freewebsitetemplates.com">Download</a></li>
                        <li><a href="http://www.freewebsitetemplates.com">Catalog</a></li>
                    </ul>
                    <div style="clear:both"></div>
                </div>
                    <div id="contenttr">
                      <p>hey welcome to my site(under construction)if you want to make your own site learn</p>
                      <p> html,css and get a template from<a href="http://www.freewebsitetemplates.com/">http://www.freewebsitetemplates.com/</a></p>
    </div>
    </body>
    </html>
    and this is my css:
    Code:
    /* CSS Document */
    #topright {
        float: left;
        width: 588px;
    }
    
    #header {
        width: 820px;
    }
    
    #logo {    
        background: url(1.png) no-repeat;
        display: block;
        float: left;
        height: 426px;
        width: 215px;
    }
    #container {
        margin: 0 auto;
        text-align: left;
        width: 820px;
    
    }
    ul
    {
    float:center;
    width:100%;
    padding:0;
    margin:0;
    list-style-type:none;
    }
    
    li {
    display:inline;
    }
     a
    {
    float:center
    width:6em;
    text-decoration:none;
    color:black;
    
    padding:0.2em 0.6em;
    border-right:1px solid black;
    }
    a:link { 
        color: #E7B12D;
        font-weight: bold;
        text-decoration: none;
    }
        
    a:visited { 
        color: #E7B12D;
        font-weight: bold;
        text-decoration: none;    
    }
        
    a:hover { 
    
        color: #FFFFFF;
        font-weight: bold;
        text-decoration: underline;
    
    
     }
    #nav a:link { 
        background: url(btn.bg.png) no-repeat;
        color: #C7C6C6;
        display: block;
        font-size: 10px;
        font-weight: bold;
        height: 20px;
        padding-: 6px;
        text-align: center;
        text-decoration: none;
        width: 71px;
        
    }
        
    #nav a:visited { 
        background: url(btn.bg.png) no-repeat;
        color: #C7C6C6;
        display: block;
        font-size: 10px;
        font-weight: bold;
        height: 20px;
        padding-top: 6px;
        text-align: center;
        text-decoration: none;
        width: 71px;    
    }
        
    #nav a:hover { 
        background: url(btn.bg.png) no-repeat;
        color: #FFFFFF;
        display: block;
        font-size: 10px;
        font-weight: bold;
        height: 20px;
        padding-top: 6px;
        text-align: center;
        text-decoration: none;
        width: 71px;
        
    }
    
    #contenttr {
        background: url(bg.png) no-repeat;
        color: #BBD2A8;
        display: block;
        height: 355px;
        padding-left: 30px;
        padding-top: 30px;
        width: 558px;
    }

  2.  

  3. #2
    Senior Member
    Join Date
    May 2003
    Location
    UK
    Posts
    2,354
    Member #
    1326
    I am not sure if you did this previously, but as your menu is inside #nav div you should reference it that way.

    The below works.

    HTML Code:
    <html>
    
    <head>
    
    	<title>oblivion template</title>
    
    	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    
    	<style type="text/css">
    
    	#nav ul li
    	{
    		display: inline;
    		padding: 20px;
    	}
    
    	</style>
    
    </head>
    
    <body>
    
    <div id="nav">
    	<ul>
    		<li><a href="http://www.freewebsitetemplates.com">Home</a></li>
    		<li><a href="http://www.freewebsitetemplates.com">Community </a></li>
    		<li><a href="http://www.freewebsitetemplates.com">Support</a></li>
    		<li><a href="http://www.freewebsitetemplates.com">Games</a></li>
    		<li><a href="http://www.freewebsitetemplates.com">Download</a></li>
    		<li><a href="http://www.freewebsitetemplates.com">Catalog</a></li>
    	</ul>
    </div>
    
    </body>
    </html>

  4. #3
    Junior Member
    Join Date
    May 2008
    Posts
    2
    Member #
    16873
    it didnt work

  5. #4
    Senior Member
    Join Date
    May 2003
    Location
    UK
    Posts
    2,354
    Member #
    1326
    Thanks for the... insightful post there.

    What did not work? What is the code above not doing? Did you try and revise the code to do what you want?

  6. #5
    Senior Member Shani's Avatar
    Join Date
    Nov 2004
    Posts
    1,140
    Member #
    8171
    div#nav ul li {float: left;}

    The float will have to be cleared.
    Shani

    I have an eye for detail like you'd never believe.


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 11:01 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com