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 2 of 2

Thread: Question

  1. #1
    New Coder
    Join Date
    Dec 2011
    Posts
    86
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Question

    Hey, when I use this code:

    html:

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <LINK href="style.css" rel="stylesheet" type="text/css">
    </head>
    <body>
    <div id="logo"></div>
    <div id="navigation">
    
    <div class="home"></div>
    <div class="upload"></div>
    <div class="about"></div>
    <div class="subjects"></div>
    
    </div>
    </body>
    </html>
    and

    css:

    Code:
    body {
    background-color: #f4f4f4;
    }
    
    #logo {
    background: url('images/logo.gif');
    background-position: center;
    background-repeat: no-repeat;
    height: 126px;
    }
    
    #navigation  ul{
    margin: 0;
    padding: 0;
    list-style-type: none;
    }
    
    .home {
    background: url('images/nav-home.gif');
    background-repeat: no-repeat;
    height: 41px;
    background-position: center;
    margin: 0;
    padding: 5px;
    }
    
    .about {
    background: url('images/nav-about.gif');
    background-repeat: no-repeat;
    height: 41px;
    background-position: center;
    margin: 0;
    padding: 5px;
    }
    
    .upload {
    background: url('images/nav-upload.gif');
    background-repeat: no-repeat;
    height: 41px;
    background-position: center;
    margin: 0;
    padding: 5px;
    }
    
    .subjects {
    background: url('images/nav-subjects.gif');
    background-repeat: no-repeat;
    height: 41px;
    background-position: center;
    margin: 0;
    padding: 5px;
    }
    I get this result:



    How can I get it to display inline, such as:

    Code:
    Menu Item | Menu Item | Menu Item | Menu Item
    Instead of the current:

    Code:
    Menu Item
    
    Menu Item
    
    Menu Item
    
    Menu Item
    Cheers

    ~ David

  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    First off, use a list. It looks like your CSS was written for a list but then you changed your HTML. Not sure why you did that.
    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <link href="style.css" rel="stylesheet" type="text/css">
    </head>
    <body>
    <div id="logo"></div>
    <ul id="navigation">
    	<li class="home"></li>
    	<li class="upload"></li>
    	<li class="about"></li>
    	<li class="subjects"></li>
    </ul>
    </body>
    </html>
    Then your CSS would look like this
    Code:
    html, body {
    	background-color: #f4f4f4;
    	margin:0;
    	padding:0;
    }
    #logo {
    	background: url('images/logo.gif');
    	background-position: center;
    	background-repeat: no-repeat;
    	height: 126px;
    }
    ul#navigation {
    	margin: 0;
    	padding: 0;
    	list-style-type: none;
    	overflow:auto;
    }
    #navigation li {
    	float:left;
    }
    .home {
    	background: url('images/nav-home.gif');
    	background-repeat: no-repeat;
    	height: 41px;
    	background-position: center;
    	margin: 0;
    	padding: 5px;
    }
    .about {
    	background: url('images/nav-about.gif');
    	background-repeat: no-repeat;
    	height: 41px;
    	background-position: center;
    	margin: 0;
    	padding: 5px;
    }
    .upload {
    	background: url('images/nav-upload.gif');
    	background-repeat: no-repeat;
    	height: 41px;
    	background-position: center;
    	margin: 0;
    	padding: 5px;
    }
    .subjects {
    	background: url('images/nav-subjects.gif');
    	background-repeat: no-repeat;
    	height: 41px;
    	background-position: center;
    	margin: 0;
    	padding: 5px;
    }
    You will need to give widths to each of your LI elements to match the widths of the background images.
    ||||If you are getting paid to do a job, don't ask for help on it!||||


  •  

    Posting Permissions

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