Home/ Questions/Q 7428051
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-29T08:40:59+00:00

I’m trying to learn CSS/HTML at the moment so sorry if there is a

  • 0

I’m trying to learn CSS/HTML at the moment so sorry if there is a really obvious solution to this. I’m just using this to practice what I’ve learnt at the moment, but it keeps going wrong.

After literally hours of messing around with my code, I’ve finally got my navigation bar to align to the right, without messing everything else up. However it now won’t sit in my “header” div. My basic structure is a header div, and within that a div for the logo (aligned to the left), and a div for the navigation menu (aligned to the right).

However after finally getting them aligned correctly, I can’t seem to get my menu div in the right place. Here is a picture illustrating what I mean:

https://i.stack.imgur.com/ot5ls.png

I have temporarily changed the colour of my “header” div to black, to better illustrate my problem. As you can see, my menu is underneath the header div, and also slightly to the right?

Here is my HTML code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>T5</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>

<body id="home_p">

<div id="header">

<div id="logo">
</div>

<div id="menu">

<ul id="nav">
<li id="home"><a href="#"></a></li>
<li id="about"><a href="#"></a></li>
<li id="portfolio"><a href="#"></a></li>
<li id="contact"><a href="#"></a></li>
</ul>

</div>
</div>


</body>
</html>

And here is my CSS:

body
/* T5 */
{background-color:#fff8d3; font-size:100%;}

body#home_p #home{background:url('home.gif') 0 -45px;}
body#about_p #about{background:url('about.gif') 0 -45px;}
body#portfolio_p #about{background:url('portfolio.gif') 0 -45px;}
body#contact_p #about{background:url('contact.gif') 0 -45px;}

#header {
background-color:#000000;
height:45px;
width:1200px;
margin-left:auto;
margin-right:auto;
margin-top:90px;
}

#logo {
background-image('logo.gif');
height:45px;
width:181px;
}


#menu {
width:328px;
float:right;
}

#nav
{position:absolute;}

#nav ul{
display: inline;
}


#nav li{
height:45px;
margin:0px;
padding:0px;
list-style:none;
position:absolute;
right:0px;
top:0px;
display:inline;
float:right;
}

#nav a
{height:45px;
display:block;
}


#home{left:0x; width:62px;}
#home{background:url('home.gif') 0 0;}
#home a:hover{background: url('home.gif') 0 -45px;}

#about{left:62px;width:65px;}
#about{background:url('about.gif') 0 0;}
#about a:hover{background: url('about.gif') 0 -45px;}

#portfolio{left:147px;width:98px;}
#portfolio{background:url('portfolio.gif') 0 0;}
#portfolio a:hover{background: url('portfolio.gif') 0 -45px;}

#contact{left:265px;width:83px;}
#contact{background:url('contact.gif') 0 0;}
#contact a:hover{background: url('contact.gif') 0 -45px;}

I would really appreciate any help. Thanks in advance.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    CSS:

    body
{
    background-color: #fff8d3;
    min-width: 600px;
}

body#home_p #home, body#about_p #about, body#portfolio_p #about, body#contact_p #about
{
    background-position: 0 -45px !important;
}

#header
{
    background-color: black;
    height: 45px;
    width: 90%;
    position: relative;
    margin-left: auto;
    margin-right: auto;
    margin-top: 90px;
}

#logo
{
    background-image: url('logo.gif');
    background-color: #fff8d3;
    height: 45px;
    width: 181px;
}

#nav
{
    position: relative;
    float: right;
    padding: 0;
    margin: 0;
}

#nav li
{
    height: 45px;
    margin: 0 -2px;
    padding: 0;
    list-style: none;
    position: relative;
    display: inline-block;
    background-position: 0 0;
    background-repeat: no-repeat;
    position: relative;
}

#nav li:hover
{   
    background-position: 0 -45px;
}

#nav a
{
    height: 100%;
    width: 100%;
    position: abosolute;
    display: block;
}


#home
{
    width: 62px;
    background-image: url('home.gif');
}

#about
{
    width: 65px;
    background-image: url('about.gif');
}

#portfolio
{
    width: 98px;
    background-image: url('portfolio.gif');
}

#contact
{
    width: 83px;
    background-image: url('contact.gif');
}

    HTML:

    <!DOCTYPE html>
<html>
    <head>
        <title>T5</title>
        <link rel="stylesheet" type="text/css" href="style.css" />
    </head>
    <body id="home_p">
        <div id="header">
            <!-- The floating elements have to go before the main content, or they will appear below. -->
            <ul id="nav">
                <li id="home" title="Home"><a href="javascript:void();"></a></li>
                <li id="about" title="About"><a href="javascript:void();"></a></li>
                <li id="portfolio" title="Portfolio"><a href="javascript:void();"></a></li>
                <li id="contact" title="Contact"><a href="javascript:void();"></a></li>
            </ul>
            <div id="logo"></div>
        </div>
    </body>
</html>
    • 0