homepage Welcome to WebmasterWorld Guest from 54.166.14.218
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
Centering horizontal links w/paddings
CSS Centering and Padding
MWpro

10+ Year Member



 
Msg#: 970 posted 10:18 pm on Apr 30, 2003 (gmt 0)

Here is a small problem I have encountered while completely redoing a client's site from tables to css.

We have a 750px wide div with 6 links in them, each at 12px. When they are put on the page, they clutter together like normal text should: understandable. My solution to space them out was to add this in the css:

a {
other link properties up here;
text-align: center;
padding-right: 50px;
}

It spaces them out pretty well, however, they are not completely centered because the last link has a padding-right of 50px. I could just work around it by adding extra divs, but I am wondering if there is a cleaner way to center the links with spacing in between?

 

Birdman

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 970 posted 10:39 pm on Apr 30, 2003 (gmt 0)

You could try:

a{
width: 12.5%;
}

...or

a{
margin: 0px 25px 0px 25px;
}

MWpro

10+ Year Member



 
Msg#: 970 posted 12:02 am on May 1, 2003 (gmt 0)

Very nice solutions, thank you.

DCElliott

10+ Year Member



 
Msg#: 970 posted 1:23 am on May 1, 2003 (gmt 0)

Using %ages has the added advantage of allowing the link elements to "squish" when the page is resized horizontally. On one of my pages I have a crossways A - Z alpha index made with CSS buttons that shrink in both width and spacing so that they always take up the same relative width on the page. Experiment with this and I think you can have very nice "accordian" links.

DE

MWpro

10+ Year Member



 
Msg#: 970 posted 2:03 am on May 1, 2003 (gmt 0)

At the moment I have a fixed layout, but I will keep that in mind when I redo my fluid business site in css, thanks :)

I've got another question, this time concerning netscape 4 and links.

Say I have some code like this:

<div id="links">
<a href=".html">Link One</a>
<a href=".html">Link Two</a>
.... etc
</div>

and here is the relavent css:

#links a {
text-align: center;
margin: 0px 25px 0px 25px;
}

In IE and Opera, I get the effect I want, which is having the links horizontal right next to each other. But netscape 4 goes crazy and puts them vertical, right under each other. Any suggestions?

grahamstewart

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 970 posted 2:06 am on May 1, 2003 (gmt 0)

Try ditching the text-align:center - it isn't doing anything anyway.

MWpro

10+ Year Member



 
Msg#: 970 posted 2:11 am on May 1, 2003 (gmt 0)

You're right, it isn't doing anything.

But they are still vertically listed x.x

grahamstewart

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 970 posted 2:27 am on May 1, 2003 (gmt 0)

Hmm.. Tried adding display: inline;?
I'm just guessing - I hate NN4 and stay away from it at all costs.

MWpro

10+ Year Member



 
Msg#: 970 posted 2:42 am on May 1, 2003 (gmt 0)

Inline will only work when the margin/width suggested above to be used for spacing is not present. When the spacing is there, then they bunch up and are all on top of each other as one big jumbled word. However when the spacing is not there, then the links are on the same line, but are not spaced how i wanted them to be. Any other ideas?

I agree with you, graham; I hate netscape and think they should discontinue it and make people upgrade... it is a total inconvenience since many css codes get distorted on it.

grahamstewart

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 970 posted 2:52 am on May 1, 2003 (gmt 0)

Maybe NN4 isn't making the div 100% wide by default?
Try using the classic CSS debugging tool..


div {
border: 1px solid red;
}

..and see if that clarifies the situation any.

Birdman

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 970 posted 2:56 am on May 1, 2003 (gmt 0)

>>I hate netscape and think they should discontinue it and make people upgrade...

:) Don't we wish!

Don't forget to evaluate the styles on the div itself to see if there is something conflicting.

Added: or like Graham said, add 100% width to the div.

MWpro

10+ Year Member



 
Msg#: 970 posted 3:45 am on May 1, 2003 (gmt 0)

Nah doesn't really clarify it. I have a width of 750px declared for the div because a fixed design is needed for the page. In addition to the links overlapping problem, in netscape 4 the div with the id of links doesn't even extend the whole 750px... Here is the css for the div and the links. i hate netscape x.x


#links {
background-image: url(image.gif);
background-repeat: no-repeat;
width: 750px;
height: 20px;
}


#links a {
text-decoration: none;
font-weight: bold;
color: #FFFFFF;
font-size: 11px;
font-family: verdana;
display: inline;
margin: 0px 25px 0px 25px;
}

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved