11 Replies - 26881 Views - Last Post: 28 July 2010 - 10:37 AM

#1 Scarab   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 8
  • Joined: 20-July 10

Nav bar spacing

Posted 21 July 2010 - 09:05 PM

So I have this nav bar......
<div id="navbar">            
	<ul>
		<li><a href="family.html">Family</a></li>
		<li><a href="sports.html">Sports</a></li>
		<li><a href="school.html">School</a></li>
		<li><a href="job.html">Job</a>
		<li><a href="events.html">Events</a></li>
		<li><a href="photos.html">Photos</a></li>
	</ul>
</div>


and this CSS.....
#navbar{
	padding-bottom: 1px;
	padding-top: 1px;
	padding-left: 0px;
	padding-right: 0px;
	background: #422100;
	width: 100%;
	border: 1px solid #000000;
	}
#navbar li{
	display: inline;
	}
#navbar a:link,
#navbar a:visited{
	color: #000000;
	background: #8C7661;
	padding-top: 7px;
	padding-bottom: 7px;
	padding-left: 20px;
	padding-right: 20px;
	float: center;
	border: 1px solid #000000;
	border-width: 3px;
	border-right: 3px solid #000000;
	border-left: 3px solid #000000;
	text-decoration: none;
	}
#navbar a:hover,
#navbar a:focus{
	color: #660000;
	background: #C6AA8D;
	}


What I am looking to do is have the navbar items evenly spaced and centered on the page. Even when the window size is changed, I would like it to adjust automatically. Sorta like this:
#header{
	width: 150px;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
	background-color: #8C7661;
	border: 1px solid #000000;
	}


Both the margins are set to auto, so when the window changes, the heading will adjust its position to the window size. Is there a way to do this? I was thinking of trying to apply the same "margin-left: auto" to the navbar items, but I cannot figure out where I need to do this. I tried to explain this as best as I could, but let me know if clarification is needed. Thanks!

Is This A Good Question/Topic? 0
  • +

Replies To: Nav bar spacing

#2 VIonescu   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 29
  • Joined: 20-July 08

Re: Nav bar spacing

Posted 22 July 2010 - 03:25 PM

Try putting that inside the #navbar li selector, it should do it :)

Let us know the results
Was This Post Helpful? 0
  • +
  • -

#3 Scarab   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 8
  • Joined: 20-July 10

Re: Nav bar spacing

Posted 22 July 2010 - 03:45 PM

Noluck there.... Here is what I tried:
#navbar li{
	display: inline;
	width: 100px;
	float: center;
	margin-left: auto;
	margin-right: auto;
	}


I added the code in steps. First the two margins, then the float, then the width. None of the steps had any visible effect.
Was This Post Helpful? 0
  • +
  • -

#4 VIonescu   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 29
  • Joined: 20-July 08

Re: Nav bar spacing

Posted 22 July 2010 - 07:14 PM

try giving it a position attribute :)
Was This Post Helpful? 0
  • +
  • -

#5 Scarab   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 8
  • Joined: 20-July 10

Re: Nav bar spacing

Posted 23 July 2010 - 04:15 PM

Getting somewhere now, but not quite:
#navbar li{
	display: inline;
	position: absolute;
	left: 75%;
	}


that gives me the effect that I want, adjusting to the window size and also positions the bar correctly, but it deletes everything but the last element..... No idea why though.

EDIT:
Well, I just thought of a way I can do it all individually, but its alot of work and complicates the code.... I would place all the elements in their own div, and give them all different position elements. I'd rather not do that. To lazy. :P

FAIL:
Just figured out that "fixed" will fix the bar to the window, even when scrolling. "relative" will leave the bar intact, but will not move with the window. Changed to absolute. Acts the same way as above.

This post has been edited by Scarab: 23 July 2010 - 04:45 PM

Was This Post Helpful? 0
  • +
  • -

#6 Guest_Zekera*


Reputation:

Re: Nav bar spacing

Posted 24 July 2010 - 10:31 AM

I had this problem the other day.

Here try this, it should work.. I think.
#navbar li{	
margin: 0;
padding: 3px 4px;
float: left;
}



If float center will cause all the element to move to the center.. try left, it should then force the elemets to align them selves beside each other. Then add a center command around your html nav code. I'm a little new to css though, so sorry if this does not work.
Was This Post Helpful? 0

#7 Dormilich   User is offline

  • 痛覚残留
  • member icon

Reputation: 4277
  • View blog
  • Posts: 13,561
  • Joined: 08-June 10

Re: Nav bar spacing

Posted 24 July 2010 - 11:48 AM

View PostScarab, on 22 July 2010 - 10:45 PM, said:

#navbar li{
	display: inline;
	width: 100px;
	float: center;
	margin-left: auto;
	margin-right: auto;
	}


there is no such thing as float: center;, it would be near impossible to render correctly under any circumstance.
Was This Post Helpful? 0
  • +
  • -

#8 Scarab   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 8
  • Joined: 20-July 10

Re: Nav bar spacing

Posted 25 July 2010 - 06:08 PM

Good call Dormilich
I've made some progress. Here is the CSS:
#navbar li{
	display: inline;
	padding-left: 10px;
	padding-right: 10px;
	}
#navelements{
	text-align: center;
	}


And the HTML:
<div id="navbar">
	<ul id="navelements">
		<li><a href="family.html">Family</a></li>
		<li><a href="sports.html">Sports</a></li>
		<li><a href="school.html">School</a></li>
		<li><a href="job.html">Job</a>
		<li><a href="events.html">Events</a></li>
		<li><a href="photos.html">Photos</a></li>
	</ul>
</div>


I added the id "navelements" to the ul and applied the text-align: center to that. It's moved the bar pretty much to center, but overshot a little bit. Just enough to bother me. I did try using margin-left(and right): auto; and width: 100% but it leaves the bar on the left side of the screen.

This post has been edited by Scarab: 25 July 2010 - 06:10 PM

Was This Post Helpful? 0
  • +
  • -

#9 Lemur   User is offline

  • Pragmatism over Dogma
  • member icon


Reputation: 1453
  • View blog
  • Posts: 3,633
  • Joined: 28-November 09

Re: Nav bar spacing

Posted 26 July 2010 - 12:32 PM

Set a width attribute for it for a container and remember the common fault that margins and padding are added on top of the current width, not outside of.

Why you decided to use a div container for a menu is beyond me, wouldn't it be simpler to merely use the class/id on the <ul> element? Prevents rogue margins/padding and some other space issues that would otherwise be giving you a royal pain.
Was This Post Helpful? 0
  • +
  • -

#10 Scarab   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 8
  • Joined: 20-July 10

Re: Nav bar spacing

Posted 27 July 2010 - 05:55 PM

View PostLemur, on 26 July 2010 - 11:32 AM, said:

Set a width attribute for it for a container and remember the common fault that margins and padding are added on top of the current width, not outside of.

Why you decided to use a div container for a menu is beyond me, wouldn't it be simpler to merely use the class/id on the <ul> element? Prevents rogue margins/padding and some other space issues that would otherwise be giving you a royal pain.

It ended up that way because I didn't know ul's could have id's. I am learning HTML, so there are probably errors and stupid things all over the place. :P
Was This Post Helpful? 0
  • +
  • -

#11 Dormilich   User is offline

  • 痛覚残留
  • member icon

Reputation: 4277
  • View blog
  • Posts: 13,561
  • Joined: 08-June 10

Re: Nav bar spacing

Posted 27 July 2010 - 11:17 PM

View PostScarab, on 28 July 2010 - 12:55 AM, said:

It ended up that way because I didn't know ul's could have id's.

any element* can have the core attributes id, class, style & title. most elements also have the i18n and event (click, mouse & key events) attributes.


* - despite elements inside <head>
Was This Post Helpful? 0
  • +
  • -

#12 singularity   User is offline

  • D.I.C Head
  • member icon

Reputation: 17
  • View blog
  • Posts: 184
  • Joined: 17-October 08

Re: Nav bar spacing

Posted 28 July 2010 - 10:37 AM

If you had peeped a little into HTML5, you would have come across across navigation tag <nav>

Quote

<nav>

This is a container for the primary navigation links on a Web page. This
element is not intended for use with all groups of links and should be used for
major navigation blocks only. If you have a <footer> element that contains
navigation links, you do not need to wrap these links in a <nav> element, since
the <footer> element will suffice on its own.

This post has been edited by singularity: 28 July 2010 - 10:37 AM

Was This Post Helpful? 0
  • +
  • -

Page 1 of 1