Menu positioning

Andy17 · March 30, 2010

Hey guys,

I have a problem positioning my menu. Please click the link below to see my problem.

I would like my menu to be on the right side of the logo (the light blue box) so the bottoms are aligned. To make sure you know what I mean, I made it in Paint:

Now my code...

HTML:

<html>

<head>

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

</head>

<body>

       <div id="logo"></div>
        <div id="menu">
            <ul class="menu">
                <li><a href="/">Forside</a></li>
                <li><a href="/">Forum</a></li>
                <li><a href="/">Links</a></li>
                <li><a href="/">Kontakt</a></li>
            </ul>
        </div>

</body>

</html>

CSS:


body {
margin:0;
padding:0;
font-family: Arial, Helvetica, Verdana, Sans-serif;
}

#logo {
height:150px;
width:190px;
background-color:#DDF3FF;
}

#menu {
height:30px;
background-color:#555555;
margin: 0 auto;
}

.menu {
margin:0;
padding:0;
font: bold 14px Arial;
padding-top:6px;
}

.menu li {
display: inline;
}

.menu a {
color:white;
text-decoration:none;
padding-right:14px;
}

.menu a:hover {
color:red;
}

Any ideas how to get the menu up next to the logo so the bottoms are aligned?

Thanks in advance!

haku · March 31, 2010

Try this:

#logo
{
  background-color:#DDF3FF;
  float:left;
  height:150px;
  width:190px;
}

#menu
{
  //remove all styles from div#menu
}

ul.menu
{
  padding-left:0;
  position:relative;
  top:120px;
  height:30px;
  margin-left:190px;
  line-height:30px;
  background-color:#555555;
}

haku · March 31, 2010

I should add that you don't have a doctype in your document which is a big no-no. You should add one first. You will potentially find that the code I gave above won't work once you add a doctype, but you should add one anyways as it will save you plenty of headaches much further down the road.

Andy17 · March 31, 2010

I should add that you don't have a doctype in your document which is a big no-no. You should add one first. You will potentially find that the code I gave above won't work once you add a doctype, but you should add one anyways as it will save you plenty of headaches much further down the road.

The code I posted here is only a small part of the design I am working on, so I just copied the relevant part into an HTML and CSS file and forgot to add the doctype. Thanks for the heads up, though. Your solution worked. I can always count on you, haku! Thanks!

Sign In

Menu positioning

Recommended Posts

Andy17

Link to comment

Share on other sites

haku

Link to comment

Share on other sites

haku

Link to comment

Share on other sites

Andy17

Link to comment

Share on other sites

Archived

Browse

Activity

Important Information