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.
|
|
|
|
|
![]() |
||
Horizontal CSS Navigation
|
||
| Notices |
![]() |
|
|
LinkBack | Thread Tools |
|
#1
|
|||
|
|||
|
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. |
|
|
|
#2
|
|||
|
|||
|
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 |
|
#3
|
|||
|
|||
|
Re: Horizontal CSS Navigation
Holy ..... #$@&... I got it!!
|
|
#4
|
||||
|
||||
|
Re: Horizontal CSS Navigation
text-align: center;
|
|
#5
|
|||
|
|||
|
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. |
|
#6
|
||||
|
||||
|
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.
|
|
#7
|
||||
|
||||
|
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. |
|
#8
|
||||
|
||||
|
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.
|
![]() |
| Tags |
| css, horizontal, navigation |
| Thread Tools | |
|
|
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 13: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 15:31 |
| IFrame left horizontal scrollbar and top horizontal scroll bar | jadeite100 | Web Page Design | 6 | May 29th, 2007 09:45 |
| Horizontal list | Krakatoa | Web Page Design | 4 | May 16th, 2006 13:16 |