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>



Machie wrote:
> in my main css is overriding the colours in the ticker css. Not
> sure what I should do there. Also I'm trying to get the
> "LATEST" bit to be a different colour and in bold than
> the rest of the ticker.

Are you defining these.. http://www.hmmm.ip3.co.uk/ticker/ticker.css as Hmmm... has done?

Okay I'm having problems with the links, my...

a { text-decoration: none; }
p a { text-decoration: underline; }
a:link { color: #888888; }
a:visited { color: #888888; }
a:hover { color: #888888; }
a:focus { color: #888888; }
a:active { color: #888888; }

in my main css is overriding the colours in the ticker css. Not sure what I should do there. Also I'm trying to get the "LATEST" bit to be a different colour and in bold than the rest of the ticker.

var theLeadString = "LATEST: ";

I suppose I could add around it :/

oh dear I am a n00b sometimes. Thanks Garin.

I'll just finish the ticker then I'll go start on that tabbed javascript layer thingy. See if I could get something like that for my site.

If you're testing locally then IE will flag javascript as a security risk. Upload it and see if the problem persists.

Nice one Garin :D A*

[B][U]ALERT! ALERT! ALERT![/U][/B]

Aww and I thought it was going well too. My ticker which is exactly like Hmmm's with the only change being that I put it inside a ticket box (to add some padding was planning to do more changes later)...

#ticker {
float: left;
background: #FFFFFF;
width: 760px;
padding: 5px;
text-align:left;
font-family: verdana;
color:#888888;
font-size: 110%;
}

Works perfect in FF but for some reason IE is blocking the ticker because of a security problem :( however viewing Hmm's ticket I don't get a similiar warning.

Have I done something wrong? :(

Machie wrote:
> how about now? :)

Add style="display:block;" to your image tag.

hehe I got it working :^D

Any drawbacks to having a ticker from a webdesign point of view? Opinions please.

wow thanks a lot Hmmm, impressive. Think I might try and do one for my site :D Though probably shouldnt go nuts with it.

Hope it wont be too difficult to set up :)

Machie wrote:
> Oh and just curious, how are BBC doing their text ticker?

I liked the BBC News ticker as well. I've used it myself in the past.

I've knocked up a quick working example of the ticker if you want to play: [URL]http://www.hmmm.ip3.co.uk/ticker[/URL]. The BBC insert the ticker page in to an iFrame.

Lots has already been written about the BBC ticker, here's a good place to start [URL]http://www.webreference.com/programming/javascript/professional/chap21/[/URL]

Garin wrote:
> Machie wrote:
> Everythings great except for a 1px line between the image and
> the CSS content. so making it incomplete.
>
> Could be many things. Lets see the code. ;)

aww I knew you were gonna say that >_<


<div id="rightcol">

<img src="news-title.gif" width="200" height="30" alt="" />
<div id="news">
News
</div>

</div>

----

#rightcol {
width: 200px;
float:right;
background: #FFFFFF;
}

#news {
background: #FFFFFF;
width: 198px;
text-align:left;
font-family: verdana;
font-size: 13px;
border-left: #A5A5A5 solid 1px;
border-right: #A5A5A5 solid 1px;
border-bottom: #A5A5A5 solid 1px;
}



how about now? :)