Webforumz's RSS FeedRSS Webforumz RegistrationRegister Contact Webforumz StaffContact

Horizontal CSS Navigation

This is a discussion on "Horizontal CSS Navigation" within the Web Page Design section. This forum, and the thread "Horizontal CSS Navigation are both part of the Design Your Website category.


 Subscribe in a reader

Go Back   Webforumz.com > Main Forums > Design Your Website > Web Page Design

Notices




Reply
 
LinkBack Thread Tools
  #1  
Old Nov 30th, 2006, 01:03
Elite Veteran
Join Date: Sep 2006
Location: Pink House
Posts: 3,946
Thanks: 0
Thanked 0 Times in 0 Posts
Horizontal CSS Navigation

Hey!
Ok... moving forward in my education of CSS slowly.....

Can someone point me to a tutorial on creating a horizontal navigation with CSS.
The w3school's site doesn't seem to have info on navigations. The sticky on the CSS forum is too complex with sub menus.

I want four boxes on a horizontal line with text links inside. Simple stuff I know, but remember I'm in Kindergarten.
_______________________________
BOX BOX BOX BOX
_______________________________

I also want to center the four links in the center of the page. Obviously floating isn't what I want since that's only left and right... I'm so confused!


Thanks in advance!



Lchad

Last edited by Lchad; Nov 30th, 2006 at 01:16.
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Spurl this Post!Reddit! Wong this Post!
Reply With Quote
  #2  
Old Nov 30th, 2006, 01:44
Elite Veteran
Join Date: Sep 2006
Location: Pink House
Posts: 3,946
Thanks: 0
Thanked 0 Times in 0 Posts
Re: Horizontal CSS Navigation

ok.. I'm getting somewhere.

Here's the link to the site so you can see the problem with my navigation:
http://www.vinylfontsandphrases.com/

As you can see it's all scrunched up on the left.

Here's my html

<div class="nav" id="navigation">
<ul class="nav">
<li><a href="#">Home</a></li>
<li><a href="#">Quotes & Sayings</a></li>
<li><a href="#">Colors & Fonts</a></li>
<li><a href="#">Shipping & Policies</a></li>
</ul>
</div>

Here's the CSS:

ul.nav {
margin:0;
padding:0;
list-style:none;
height: 0px;
width: 0px;
margin-top: 15px;
padding-top:6px;
padding-bottom:5px;
}

ul.nav li {
display:inline;
}
ul.nav a{
border:1px dashed;
padding:5px 15px;
text-decoration:none;
color: #DE079F;
font: lighter small Tahoma;
text-transform: uppercase;
background: #FFFFFF url(polkadot_pink.jpg);

}

Anyone have an idea what I'm missing?

lchad
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Spurl this Post!Reddit! Wong this Post!
Reply With Quote
  #3  
Old Nov 30th, 2006, 01:46
Elite Veteran
Join Date: Sep 2006
Location: Pink House
Posts: 3,946
Thanks: 0
Thanked 0 Times in 0 Posts
Re: Horizontal CSS Navigation

Holy ..... #$@&... I got it!!
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Spurl this Post!Reddit! Wong this Post!
Reply With Quote
  #4  
Old Nov 30th, 2006, 02:41
Ryan Fait's Avatar
Elite Veteran
Join Date: May 2006
Location: Las Vegas
Posts: 3,787
Thanks: 0
Thanked 0 Times in 0 Posts
Re: Horizontal CSS Navigation

text-align: center;
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Spurl this Post!Reddit! Wong this Post!
Reply With Quote
  #5  
Old Nov 30th, 2006, 12:00
Elite Veteran
Join Date: Sep 2006
Location: Pink House
Posts: 3,946
Thanks: 0
Thanked 0 Times in 0 Posts
Re: Horizontal CSS Navigation

Thanks Ryan, I had still missed that but I think because my container or wrapper was centered, it still worked!

I can't say I'm comfortable with CSS yet but it's coming!
Have you read the CSS- The Missing Manual.

I have it and it's been helpful. For some reason, I prefer a book to flip through than searching the net.

Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Spurl this Post!Reddit! Wong this Post!
Reply With Quote
  #6  
Old Dec 5th, 2006, 09:57
Ryan Fait's Avatar
Elite Veteran
Join Date: May 2006
Location: Las Vegas
Posts: 3,787
Thanks: 0
Thanked 0 Times in 0 Posts
Re: Horizontal CSS Navigation

No, I've never read anything about CSS. I just sort of learned it from practice and play. JavaScript, however, was a different story. If you're interested in it, the JavaScript Bible is a wonderful thing.
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Spurl this Post!Reddit! Wong this Post!
Reply With Quote
  #7  
Old Dec 5th, 2006, 13:38
masonbarge's Avatar
Highly Reputable Member
Join Date: Jan 2006
Location: Atlanta GA
Posts: 631
Thanks: 0
Thanked 0 Times in 0 Posts
Re: Horizontal CSS Navigation

Make that two votes for the JavaScript Bible or actually, the Wiley "Bible" series since I have the PHP Bible too.

Bah sorry, didn't mean to hijack the thread.
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Spurl this Post!Reddit! Wong this Post!
Reply With Quote
  #8  
Old Dec 5th, 2006, 20:04
Ryan Fait's Avatar
Elite Veteran
Join Date: May 2006
Location: Las Vegas
Posts: 3,787
Thanks: 0
Thanked 0 Times in 0 Posts
Re: Horizontal CSS Navigation

I have the PHP Bible, too! I gave up on reading it, though. I found the PHP site to be more useful. Anyway, text-align: center; will move a horizontal navigation to the middle if you're not using floats.
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Spurl this Post!Reddit! Wong this Post!
Reply With Quote
Reply

Tags
css, horizontal, navigation

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are On

Similar Threads
Thread Thread Starter Forum Replies Last Post
horizontal list navigation breaks when load times are slow sch3dana Web Page Design 14 Mar 19th, 2008 14:56
horizontal navigation bar using realitve position <li> ehudros Web Page Design 1 Nov 18th, 2007 15:34
[SOLVED] Horizontal Navigation Bar cshanks Web Page Design 5 Oct 3rd, 2007 16:31
IFrame left horizontal scrollbar and top horizontal scroll bar jadeite100 Web Page Design 6 May 29th, 2007 10:45
Horizontal list Krakatoa Web Page Design 4 May 16th, 2006 14:16


All times are GMT. The time now is 20:02.


Powered by vBulletin®
Copyright ©2000 - 2008, Jelsoft Enterprises Ltd.
Search Engine Optimization by vBSEO 3.2.0 RC8