Go Back   Cyber Tech Help Support Forums > Software > Web Development & Graphic Design

Notices

Web Development & Graphic Design Problem Solving for Graphic Design, PHP, ASP, Perl, MySQL, SQL, XML, HTML issues

Reply
 
Topic Tools
  #1  
Old February 5th, 2007, 04:32 PM
Brand Brand is offline
Member
 
Join Date: Jul 2005
Location: PA
Age: 43
Posts: 77
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>
And here is my CSS
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;
}
Am I on the right track or am I totally off in how I am doing this.

I would really appreciate any help on this.

Last edited by Brand; February 5th, 2007 at 05:37 PM.
Reply With Quote
  #2  
Old February 5th, 2007, 07:04 PM
rockboy's Avatar
rockboy rockboy is offline
Cyber Tech Help Moderator
 
Join Date: Aug 2002
O/S: Windows 7 64-bit
Location: California, USA
Posts: 3,087
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.
Reply With Quote
  #3  
Old February 5th, 2007, 07:23 PM
Buzz Buzz is offline
Cyber Tech Help Moderator
 
Join Date: Sep 2000
O/S: MacOS
Location: Oregon, USA
Posts: 4,005
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>
it's much cleaner code, less CSS is needed and positioning is built in.

see it here ---> menu
Reply With Quote
  #4  
Old February 6th, 2007, 05:20 PM
Brand Brand is offline
Member
 
Join Date: Jul 2005
Location: PA
Age: 43
Posts: 77
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.
Reply With Quote
Reply

Bookmarks

Topic 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

Forum Jump

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.