The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> Navigation bar in wrong place, Nav bar is bottom right needs to be top right
H3ll0W0rld
post 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;*/
}
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Darin McGrew
post 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?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
H3ll0W0rld
post Feb 12 2012, 09:51 PM
Post #3





Group: Members
Posts: 3
Joined: 12-February 12
Member No.: 16,460



QUOTE(Darin McGrew @ Feb 12 2012, 06:41 PM) *

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)
Attached File  layout.css ( 741bytes ) Number of downloads: 175
Attached File  index.html ( 1.16k ) Number of downloads: 200
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Feb 13 2012, 02:56 AM
Post #4


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
H3ll0W0rld
post Feb 13 2012, 05:20 AM
Post #5





Group: Members
Posts: 3
Joined: 12-February 12
Member No.: 16,460



QUOTE(pandy @ Feb 13 2012, 01:56 AM) *

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. biggrin.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Feb 13 2012, 05:29 AM
Post #6


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



Remember that trick. wink.gif
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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 29th March 2024 - 02:16 AM