Navigation bar in wrong place, Nav bar is bottom right needs to be top right |
Navigation bar in wrong place, Nav bar is bottom right needs to be top right |
H3ll0W0rld |
Feb 12 2012, 07:08 PM
Post
#1
|
Group: Members Posts: 3 Joined: 12-February 12 Member No.: 16,460 |
Hi. This is my first attempt at coding. I am building a simple little site that is using a Navigation bar. My problem is that for some reason my Navigation bar is sitting at the bottom right of the webpage, and I want it at the top right of the page. Here is the code for the Navigation bar and the css code that I am using as well. I have the top code in my index.html file and the bottom in my layout.css file all of which are saved into the same folder. If for some reason you need more information just let me know and I will post that as well.
<div id="navigation"> <h2>Post and Read by Classes</h2> <ul> <li><a href="history.html">History Classes</a></li> <li><a href="english.html">English Classes</a></li> <li><a href="philosophy.html">Philosophy Classes</a></li> </ul> </div> <!--navigation--> #navigation { margin: 0; padding: 10px 10px 10px 10px; float: right; width: 180px; height: 100%; /*border: 1px #666 solid; text-align: center;*/ } |
Darin McGrew |
Feb 12 2012, 07:41 PM
Post
#2
|
WDG Member Group: Root Admin Posts: 8,365 Joined: 4-August 06 From: Mountain View, CA Member No.: 3 |
Can you provide the URL (address) of a document that demonstrates the problem?
|
H3ll0W0rld |
Feb 12 2012, 09:51 PM
Post
#3
|
Group: Members Posts: 3 Joined: 12-February 12 Member No.: 16,460 |
Can you provide the URL (address) of a document that demonstrates the problem? Not sure how, as I am using notebook++ to write the code and just opening the file to see the changes. I did attach the index.html and layout.css files though if that helps. This post has been edited by H3ll0W0rld: Feb 12 2012, 09:52 PM Attached File(s) layout.css ( 741bytes ) Number of downloads: 175 index.html ( 1.16k ) Number of downloads: 201 |
pandy |
Feb 13 2012, 02:56 AM
Post
#4
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,730 Joined: 9-August 06 Member No.: 6 |
Add this to your style sheet and you can see what's wrong.
CODE #content { background: lime } #navigation { background: pink } See? The total width of #content and #navigation is wider than #container. The result of that is what's called a float drop. In CSS padding is added to the width. So the total width for #navigation is 180 + 2*10 = 200px and for #content it is 508 + 38 + 20 = 566px. 200 + 566 = 766px. 766px > 760px. |
H3ll0W0rld |
Feb 13 2012, 05:20 AM
Post
#5
|
Group: Members Posts: 3 Joined: 12-February 12 Member No.: 16,460 |
Add this to your style sheet and you can see what's wrong. CODE #content { background: lime } #navigation { background: pink } See? The total width of #content and #navigation is wider than #container. The result of that is what's called float drop. In CSS padding is added to the width. So the total width for #navigation is 180 + 2*10 = 200px and for #content it is 508 + 38 + 20 = 566px. 200 + 566 = 766px. 766px > 760px. Wow, what a difference changing the colors made in showing what was going on there. Thanks for the help. That put everything into perspective for me. |
pandy |
Feb 13 2012, 05:29 AM
Post
#6
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,730 Joined: 9-August 06 Member No.: 6 |
Remember that trick.
It's always good to make sure you know where things really are and how far boxes stretch. To color the boxes is the CSS equivalent of turning on table borders. You could use borders as well, but they add width and sometimes affect margins so they can confuse things. |
Lo-Fi Version | Time is now: 24th April 2024 - 06:27 AM |