1 reply [Last post]
runawayNinja
Offline
Regular
Last seen: 17 years 37 weeks ago
Joined: 2004-01-06
Posts: 22
Points: 0

ok so basically i am building a vertical navigation bar
for my links, nothing surprising here

------------------------------------------------------
link1 link2 link3
------------------------------------------------------

the problem is the text wont center vertically within it
it looks more like
------------------------------------------------------
link1 link2 link3

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

heres what i have done...

i created a main navigation div

#main_navigation{
width: 720px;
height: 34px;
margin: 0;
padding: 0;
text-align: center;
background: #DDB url(images/main_nav_backgrnd.gif) no-repeat;
vertical-align: bottom;
}

the background image is of size 720/34 thus the size

within the main navigation i have made my links into a ul list...

#main_navigation ul {
padding: 0;
margin: 0;
display: inline;
width: 700px;
}
#main_navigation ul li.first {
margin-left: 0;
border-left: none;
list-style: none;
display: inline;
background-image: none;
}
#main_navigation ul li {
margin: 0 0 0 0;
padding: 0 16px 0 16px;
list-style: none;
list-style-position: inside;
display: inline;
}

the first is just so in case i want to add an image or line to seperate them i can. all of this i got from alistapart.com and made some minor adjustments on my own

then since these are all links inside of this
i defined the links with the following

#main_navigation a:link {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 20px;
color: #ddb;
margin: 0;
padding: 0 0 0 0;
letter-spacing: 0.15em;
text-decoration: none;
font-weight: bold;
}
#main_navigation a:visited {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 20px;
color: #ddb;
margin: 0;
padding: 0 0 0 0;
letter-spacing: 0.15em;
text-decoration: none;
font-weight: bold;
}
#main_navigation a:hover {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 20px;
color: #fff;
margin: 0;
padding: 0 0 0 0;
letter-spacing: 0.15em;
text-decoration: none;
border-bottom: 2px solid #fff;
}
#main_navigation a:active {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 20px;
color: #ddb;
margin: 0;
padding: 0 0 0 0;
letter-spacing: 0.15em;
text-decoration: none;
font-weight: bold;
}

i figured the padding property in the main navigation div (the first css property above) was/is the place to add the padding, this i rationalized and also realized thru trial and error its the only place where the text moves from the padding property.

so one would think or assume (atleast a novice such as myself)
that the text would be pushed down by how many pizels i have defined the top padding to be padding: 2px 0 0 0;
but instead what it does is act almost like the margin property where sure the text moves down but its like the text is now too big for the defined height because now i have empty space beneath my background image. i tried everything from small font size (10px to my desired size of 18px and it doesnt matter, any top padding i define is just added to the overall height of the box, thus giving me a space between the bottom of the main navigation box and the displaybox underneath...

------------------------------------------------
link1 link2 link3

------------------------------------------------
<------empty space with whatever color i set----->
----------------------------------------------------
context panel

i hope that made sense and i am sorry this is long
i tried to display and show everything i have written in css as well

this issue i have never encountered before but this is also the first time using a list for my links in a horizontal fashion.

my question is how do i just puch the text down a couple pixels without adjusting anything else and maintaining the 32pixel height i want for my main navigation area?

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 1 week 6 hours ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5343
Points: 2964

help! getting text vertically centered in a box issue

Hi runawayNinja,
Try setting the line-height of the links to 34px.

Hope that helps