|
Web Development & Graphic Design Problem Solving for Graphic Design, PHP, ASP, Perl, MySQL, SQL, XML, HTML issues |
|
Topic Tools |
#1
|
|||
|
|||
Having some issues with CSS.
I'm having some issues with CSS, I know I should be able to do what I want but how, is a bit more confusing.
It should look like like this in the end. But right now it look more like a great big lump of grey, I can't get the blocks to space. [edit] I have gotten it to look more like I want but for some reason the World Wide Box doesn't show up and it makes a big space. It's all very strange because everything is the same for that box as is for the rest. Here is the html code Code:
<div id="nav_holder" class="navholder"> <div id="home" class="nav">Home</div> <div id="Bolivia" class="nav">Bolivia</div> <div id="Analysis" class="nav">Analysis</div> <div id="America" class="nav">America</div> <div id="World Wide" class="nav">World Wide</div> <div id="Documents" class="nav">Documents</div> <div id="Stuff" class="nav">Stuff</div> <div id="Links" class="nav">Links</div> <div id="Contact" class="nav">Contact</div> </div> Code:
.navholder { font-family: Minion, Georgia, "Times New Roman", Times, serif; font-size: 17px; color: #000000; top: 15px; right: 5px; width: 92px; } .nav { background-color: #CCCCCC; padding: 1px; height: 15px; width: 92px; } #home { top: 0px; right: 0px; } #Bolivia { position: relative; top: 5px; right: 0px; } #Analysis { position: relative; top: 10px; right: 0px; } #America { position: relative; top: 15px; right: 0px; } #World Wide { position: relative; top: 20px; right: 0px; } #Documents { position: relative; top: 25px; right: 0px; } #Stuff { position: relative; top: 30px; right: 0px; } #Links { position: relative; top: 35px; right: 0px; } #Contact { position: relative; top: 40px; right: 0px; } I would really appreciate any help on this. Last edited by Brand; February 5th, 2007 at 05:37 PM. |
#2
|
||||
|
||||
Remove the space in your css between the two words World Wide. If you change it to <div id="WorldWide" class="nav">World Wide</div> and #WorldWide it should work ok.
|
#3
|
|||
|
|||
I wouldnt' use divs. Use a list.
Code:
#nav { font-family: Minion, Georgia, "Times New Roman", Times, serif; font-size: 17px; color: #000000; background-color: #eeeeee; width: 110px; margin: 0; } #nav ul { list-style-type: none; margin: 0; padding: 0; text-align: left; } #nav ul li { display: block; padding: 3px 5px; } #nav ul li a:link, #nav ul li a:visited { background-color: #ccc; display: block; color: #000; text-decoration: none; padding: 2px; } #nav ul li a:hover, #nav ul li a:active { background-color: #333; color: #fff; } Code:
<div id="nav"> <ul> <li><a href="#">Home</a></li> <li><a href="#">Bolivia</a></li> <li><a href="#">Analysis</a></li> <li><a href="#">America</a></li> <li><a href="#">World Wide</a></li> <li><a href="#">Documents</a></li> <li><a href="#">Stuff</a></li> <li><a href="#">Links</a></li> <li><a href="#">Contact</a></li> </ul> </div> see it here ---> menu |
#4
|
|||
|
|||
Thank you for all the help. I managed figured out the world wide was what was screwing me up but the list is very nice.
Thank you guys for all your help. |
Bookmarks |
«
Previous Topic
|
Next Topic
»
Topic Tools | |
|
|
Similar Topics | ||||
Topic | Topic Starter | Forum | Replies | Last Post |
firefox issues and yahoo issues | perplexed | Internet / Browsers | 4 | September 11th, 2010 08:20 PM |
Windows Explorer navigation issues and virus removal issues | sepulverture | Windows XP | 5 | September 12th, 2008 02:42 PM |
LSP Issues??? | philstubbs | Malware Removal | 13 | August 28th, 2008 08:09 PM |
ie issues ! | saviiour | Windows 98 | 1 | June 24th, 2004 05:00 AM |
All times are GMT +1. The time now is 07:52 PM.