CSS driving me nuts! - Webmaster Forum - Web Design, Programming and SEO forums

12-17-2005, 05:46 PM

opserty

Status: I love this place
Join date: Jan 2005
Location: UK, Birmingham
Expertise:
Software:

Posts: 606

iTrader: 0 / 0%

opserty is on a distinguished road

CSS driving me nuts!

EDIT: FIXED

Hi ya guys, seem to have some trouble with my CSS, its not working as I expected!

Ok the problem is with the Navigation, this is what it is meant to look like. However this is what it has come out like.

I think the problem is that each of the links has a division (<div>), but this is necessary as each link must be exactly 75 pixels wide. I expected them to line up side by side, yet they are going one underneath the other. You can't see them as they are being covered by the black bit, it should say "Home, Forums. Portfolio, Partners".

Any help would be appreciated, sorry if it a little confusing.

Thanks,
Opserty.

12-17-2005, 06:41 PM

Jonny

Status: Member
Join date: Feb 2005
Location: UK
Expertise:
Software:

Posts: 335

iTrader: 0 / 0%

Jonny is on a distinguished road

Thats because div's are block level elements, try using spans, or give the divs this css:

Code:

display: inline;

12-17-2005, 08:15 PM

opserty

Status: I love this place
Join date: Jan 2005
Location: UK, Birmingham
Expertise:
Software:

Posts: 606

iTrader: 0 / 0%

opserty is on a distinguished road

Then I lose the 75 px width, they just bunch up together :S

12-17-2005, 08:24 PM

Techno

Status: Sin Binner
Join date: Jul 2005
Location: Yorkshire, UK
Expertise:
Software:

Posts: 3,709

iTrader: 1 / 100%

Techno is on a distinguished road

But if you create a class with margin-left or margin-right set to 75px and then put <span class="name">Button 1</span><span class="name">Button 2</span> etc....

12-17-2005, 08:38 PM

Jonny

Status: Member
Join date: Feb 2005
Location: UK
Expertise:
Software:

Posts: 335

iTrader: 0 / 0%

Jonny is on a distinguished road

You might also want to take a look at the great tutorials over at listamatic, expecially the horizontal lits bits.

12-17-2005, 08:38 PM

opserty

Status: I love this place
Join date: Jan 2005
Location: UK, Birmingham
Expertise:
Software:

Posts: 606

iTrader: 0 / 0%

opserty is on a distinguished road

But then the difference will change as I go along, the center of the word needs to be 75px apart each time. If I use a margin it will only mean the start and end of the word are 75px apart

12-17-2005, 08:51 PM

opserty

Status: I love this place
Join date: Jan 2005
Location: UK, Birmingham
Expertise:
Software:

Posts: 606

iTrader: 0 / 0%

opserty is on a distinguished road

Originally Posted by Jonny

You might also want to take a look at the great tutorials over at listamatic, expecially the horizontal lits bits.

Found one after like 20 mins, thank you very very much

12-18-2005, 12:22 AM

bcd

Status: Junior Member
Join date: Oct 2005
Location: Cali
Expertise:
Software:

Posts: 96

iTrader: 0 / 0%

bcd is on a distinguished road

Code:

#nav {
background: url(images/nav_bg.gif) no-repeat;
color: #dfdfdf;
font-weight: bold;
height: 28px;	
margin: 5px auto 0 auto;
padding: 12px 0 0 15px;
position: relative;
width: 890px;	
}
#nav li {
display: inline;
list-style: none;
}
#nav li a {
color: #dfdfdf;
display: block;
float: left;
padding: 3px;
text-align:center;
text-decoration:none;
width: 69px;
z-index: 2;
}
#nav li a:hover {
color:#48AEB1;
}

-------------

<div id="nav">	
<ul>
<li> <a href="#" title="Goto Homepage">Home</a> </li>
<li> <a href="index.php?p=2" title="Goto the Forums">Forums</a> </li> 
<li> <a href="#" title="View my latest sites">Portfolio</a> </li> 
<li> <a href="#" title="Visit my friends and favourite sites">Partners</a> </li> 
<li> <a href="#" title="Get in touch with me">Contact</a> </li>
</ul>
</div>

The semantically correct way to do things :reindeer:

12-18-2005, 01:28 AM

Glynis

Status: I'm new around here
Join date: Dec 2005
Location: Michigan
Expertise:
Software:

Posts: 13

iTrader: 0 / 0%

Glynis is on a distinguished road

Navigation can be real tough

opserty, I've just learned about css but I was able to do the navigation of my site so that the links were all the same length apart. Go ahead and take a look if you want.

http://hp-h.com/p/gjdesigns/

12-18-2005, 06:09 AM

#10

Garrett

Status: Waving
Join date: Aug 2005
Location:
Expertise:
Software:

Posts: 2,694

iTrader: 11 / 100%

Garrett is on a distinguished road

Code:

<div id="nav">	
	
		<div class="navlink"> <a href="#" title="Goto Homepage">Home</a> </div>

		<div class="navlink"> <a href="index.php?p=2" title="Goto the Forums">Forums</a> </div> 
		<div class="navlink"> <a href="#" title="View my latest sites">Portfolio</a> </div> 
		<div class="navlink"> <a href="#" title="Visit my friends and favourite sites">Partners</a> </div> 
		<div class="navlink"> <a href="#" title="Get in touch with me">Contact</a> </div>  
	</div>

When you make div after div, html reads it and skips a line, so to make it work use this CSS:

Code:

.nav-link{
word-spacing: 15px;
}

and this html:

Code:

<div class="navlink">
                <a href="#" title="Goto Homepage">Home</a>
		<a href="index.php?p=2" title="Goto the Forums">Forums</a>  
		<a href="#" title="View my latest sites">Portfolio</a>
		<a href="#" title="Visit my friends and favourite sites">Partners</a> 
		<a href="#" title="Get in touch with me">Contact</a>
</div>