http://www.webmasterworld.com Welcome to WebmasterWorld Guest from 38.103.63.17
register, login, search, glossary, subscribe, help, library, PubCon, announcements , recent posts, unanswered posts
Subscribe and Support WebmasterWorld
Home / Forums Index / Browser Side World / CSS
Forum Library : Charter : Moderators: DrDoc & Robin reala & SuzyUK

CSS

  
Text sitting outside of block
daiv


#:3628210
 2:18 pm on April 16, 2008 (utc 0)

Hi,

I am trying to get my site links to sit in the middle of a DIV but they are sitting low and I can't seem to bring them up for the life of me. address is at <>, you can see the links at the top of the page (they are obvious). other than that, they are pretty much perfect.

If anyone has some insight, please let me know. below is the CSS code i am using to create this effect. it might be uglier than needed, because i have been playing.

Thanks!

.toplinks {
height: 33px;
text-align: center;
margin-top: 4px;
margin-bottom: 0px;
padding: 0px;
}

A.toplinks {
display: block;
border-style : solid;
border-width : 2px;
border-color : #253962;
background-color : #253962;
color : #dcdcdc;
width: 110px;
height: 21px;
padding-right : 4px;
text-decoration : none;
text-align: center;
font-size: 18pt;
font-family : Arial Narrow;
margin: 0px;
}
A.toplinks:HOVER{
border-style : solid;
border-width : 2px;
border-color : #253962;
background-color : #4cb3e3;
color : #dcdcdc;
width: 110px;
height: 21px;
padding-right : 4px;
text-decoration : none;
font-family : Arial Narrow;
font-size: 18pt;
text-align: top;
}

Here is the HTML code:

...<td colspan=5>
<table width="750" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td class="toplinks"><div class="toplinks"><span><a href="specials.php" class="toplinks">Specials<a/></span></div></td>
<td class="toplinks"><div class="toplinks"><a href="about_us.html" class="toplinks">About Us<a/></div></td>
<td class="toplinks"><div class="toplinks"><a href="feature_cruises.php" class="toplinks">Feature<a/></div></td>
<td class="toplinks"><div class="toplinks"><a href="trip_quote.html" class="toplinks">Trip Quote<a/></div></td>
<td class="toplinks"><div class="toplinks"><a href="contact_us.html" class="toplinks">Contact Us<a/></div></td>
<td class="toplinks"><div class="toplinks"><a href="forms.php" class="toplinks">Forms<a/></span></td>
</tr>
</table>
</td>...

[edited by: SuzyUK at 5:08 pm (utc) on April 18, 2008]
[edit reason] No specifics, thank you [/edit]

penders


#:3628367
 5:08 pm on April 16, 2008 (utc 0)

To vertically centre a single line of text in a container try setting/reducing the line-height of your toplinks to the same as the height of the container. ie:
a.toplinks {
height:21px;
:
line-height:21px;
}

and welcome to webmasterworld! :)

 

Home / Forums Index / Browser Side World / CSS
All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About
WebmasterWorld ® and PubCon ® are a Registered Trademarks of WebmasterWorld Inc.
© WebmasterWorld Inc. / SearchEngineWorld 1996-2008 all rights reserved