Jump to content

CSS - Navigation Bar Problems


jonsku
 Share

Recommended Posts

Hello,I have a problem with writing above my navigation bar. I will not show the code of the website here as I don't want to. Instead, I'll give the part of the code I want to show and improve.

<html><head>...<style type="text/css">/* START NAVBAR MAIN */ul.navbar {list-style-type: none;padding: 0;margin: 0;position: absolute;top: 5em;left: 0.5em;width: 16em }/* END NAVBAR MAIN */...</style></head><body>...<ul style="left: 16px; width: 227px;" class="navbar">  <fieldset class="rg lang" style="background-image: url(http://); vertical-align: top; font-family: Helvetica,Arial,sans-serif; width: 200px;"><legend>Language</legend>  <ul>    <li style="list-style-image: url(images/en_flag.GIF);">English</li>    <li style="list-style-image: url(images/fi_flag.GIF);">Suomi</li>  </ul>  </fieldset>...</body></html>

I have heard that the 'absolute positioning' causes some problems in CSS, but here it has positioned itself exactly in the place I want it to be. The problem is that how can I write above the navbar. Is it related somehow to the 'position: absolute' code? Or is it something else? I don't know. I want to write the title of the website and/or insert the logo of the website there, but it won't let my do so. What code should I insert in there?

Link to comment
Share on other sites

Yes, it is caused by the position:absolute; rule, as when you try to put more text there the navbar won't shift down (as it is absolutely positioned). You will have to change the top: part of the CSS definition to shift the navbar down so that the text is exposed.

Link to comment
Share on other sites

Yes, it is caused by the position:absolute; rule, as when you try to put more text there the navbar won't shift down (as it is absolutely positioned). You will have to change the top: part of the CSS definition to shift the navbar down so that the text is exposed.
Yeah, ok. I just didn't understand that do I have to remove the absolute positioning totally?
Link to comment
Share on other sites

No, you don't, you just have to shift the navbar down a bit (using the top: property), e.g.

ul.navbar {list-style-type: none;padding: 0;margin: 0;position: absolute;top: 10em; /* This one, experiment with different values until it doesn't cover any of the text) */left: 0.5em;width: 16em }

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...