Viewing Thread:
"CSS help"

Okay I'm having a CSS problem with my site, I have a bar with links in "block", at the moment the blocks are aligned on the left. How do I go about centering them in the middle?

Thanks in advanced :)


#block {
float:left;
clear:both;
background-color: #DEDECE;
width: 768px;
height:26px;
border-left: #A5A5A5 solid 1px;
border-right: #A5A5A5 solid 1px;
border-bottom: #A5A5A5 solid 1px;
}

#block a {
text-align: center;
width: 90px;
text-decoration: none;
line-height: 26px;
display: block;
float: left;
}

#block a:hover {
text-decoration: underline;
}

#block span {
float: left;
line-height: 25px;
}

____________________

<div id="block">
<a href="test.html" class="pagelink">Page1</a><span>|</span>
<a href="test.html" class="pagelink">Page2</a><span>|</span>
<a href="test.html" class="pagelink">Page3</a><span>|</span>
<a href="test.html" class="pagelink">Page4</a>
</div>



Okay I'm having a CSS problem with my site, I have a bar with links in "block", at the moment the blocks are aligned on the left. How do I go about centering them in the middle?

Thanks in advanced :)


#block {
float:left;
clear:both;
background-color: #DEDECE;
width: 768px;
height:26px;
border-left: #A5A5A5 solid 1px;
border-right: #A5A5A5 solid 1px;
border-bottom: #A5A5A5 solid 1px;
}

#block a {
text-align: center;
width: 90px;
text-decoration: none;
line-height: 26px;
display: block;
float: left;
}

#block a:hover {
text-decoration: underline;
}

#block span {
float: left;
line-height: 25px;
}

____________________

<div id="block">
<a href="test.html" class="pagelink">Page1</a><span>|</span>
<a href="test.html" class="pagelink">Page2</a><span>|</span>
<a href="test.html" class="pagelink">Page3</a><span>|</span>
<a href="test.html" class="pagelink">Page4</a>
</div>



I'm not familiar with the id thing you're using, but could you use a text-align=center property?

Jo

I couldnt get it to work :(

oh dear.

if anyone can help or need anymore information I'll do it, as I really need to fix this problem.

Is the page in t'internet? Care to link to it if it is so we can see what's going on...?

I'm just not entirely sure what part you want centered, might be clearer just to see the page.

no it's not at the moment but you're right I should put it online so you get a better idea, okay I'll quickly put it up and post a link :) cheers

Simpliest solution, wrap your links in a further div with a defined width. eg

#block div {
width:400px;
margin-left:auto;
margin-right:auto;
}

Another alternative would be to get rid of the block and float properties on the link and span tags, and then apply text-align:center to block. You could then apply padding-left and padding-right to your link tags to get your block effect.
Theres plenty of solutions, I just picked a couple that involved changing the least amount of code.

Yay it works, thanks Garin. I tried the first one and it does what I want. As you provided several solutions I'm okay using this one right? I mean I won't find it looking messed up on other browsers etc. I guess I should check. :/

Sorry I didnt post a link, my webhost is down and I couldnt log in to get my password and login. I really should write it down :(

Thanks again Garin, looks perfect.

#blog {
float: left;
background: #F2F2F2;
width: 550px;
padding:5px;
text-align:left;
font-family: verdana;
font-size: 13px;
border-bottom: #A5A5A5 solid 1px;
}

I'm having trouble making a space above and below this. I'f I'm to put one on top of the other and want to seperate them I would either use <br /> or <p></p>.

Works fine in IE, but not in FF.

Any help would be appreciated.

----

I'm not sure if it has anything to do with 2 columns I put above this blog code. (these two columns are in the left column of another set of columns, I'm not great with columns).


#menu-left {
width: 275px;
height: 175px;
float:left;
background: #FFFFFF;
padding-right:10px;
text-align: center;
}

#menu-right {
width: 263px;
height: 163px;
float:right;
padding:5px;
background: #FFFFFF;
border-left: #DDDDDD solid 1px;
border-right: #DDDDDD solid 1px;
border-bottom: #DDDDDD solid 1px;
border-top: #DDDDDD solid 1px;
}



Sometimes I wonder if my codding is all messed up because I'm using Dreamweaver 8. And the design view is really messed up but not sure if it's because I have the google search coding in there which breaks the CSS code in the design, but not when it's viewed on webpages.

also is there any way I can work online, it's annoying having to design webpages offline. My only worry is that I'll get search engines finding my pages and sending people over or caching pages while I'm still working on it. Anything I can do?