PDA

View Full Version : tableless middle align



Zangeel
Apr 22nd, 2009, 02:05 AM
ok so i have a navigation bar, and im converting it from table to tableless, ive been successfull in everything but aligning the text to the middle. see what i mean:

http://i43.tinypic.com/2dk037q.png

the top is the tableless one, bottom is css..

heres the source ( i shortened it to first 2 links one is the active link the other is unactive )

TABLE SOURCE



<div class="NavCenter">
<div style="padding-left:90px; padding-top:0px; text-align:left">
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="menuLeft"></td>
<td style="background-repeat: no-repeat" width="75" valign="middle" align="center" class="menuhome" onclick="javascript:window.location.href='http://www.islamicarea.com/';" >
<a href="http://www.islamicarea.com/">Home</a>

</td>
<td style="background-repeat: no-repeat" valign="middle" align="center" class="menu" onclick="javascript:window.location.href='http://www.islamicarea.com/gallery/main/';" >
<a href="http://www.islamicarea.com/gallery/main/">Photos</a>
<td class="menuRight"></td>
</tr>
</table>
</div>
</div>


TABLELESS SOURCE



<div class="NavCenter" style="float:left">
<div style="padding-left:90px; padding-top:0px; text-align:left">
<div class="MenuLeft" style="float:left"></div>

<div style="background-repeat: no-repeat;width:75;height:35px;vertical-align:middle;float:left;" align="center" class="menuhome" onclick="javascript :window.location.href='http://www.islamicarea.com/';">
<a href="#">Home</a><a></a></div>

<div style="background-repeat: no-repeat;vertical-align:middle;float:left;" align="center" class="menu" onclick= "javascript:window.location.href='http://www.islamicarea.com/';">
<a href="#">Photos</a></div>

<div class="MenuRight"></div>

</div>
</div>



so how can i make the text aligned to the middle?

BoldUlysses
Apr 22nd, 2009, 03:09 AM
Couple of things:

A list (<ul> and <li>) is much more semantic (http://www.boagworld.com/technology/semantic_code_what_why_how/) when it comes to coding navigation menus. I mean, what is it but a list of links?

Also, to center one line of text in a box, give it a line-height equal to the box's height. Observe, the list and line-height centering:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"/>
<title>Untitled</title>

<style type="text/css">

* {
padding:0;
margin:0;
}

ul {
list-style:none;
}

li {
float:left;
}

a {
display:block;
text-decoration:none;
font-family:arial, sans-serif;
width:80px;
height:50px;
line-height:50px;
text-align:center;
border:1px solid #f00;
border-right:0px;
background:#ccc;
}

a:hover {
color:#fff;
background:#aaa;
}

</style>

</head>

<body>

<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Photos</a></li>
<li><a href="#">Members</a></li>
<li><a href="#">Blogs</a></li>
<li><a href="#">Forum</a></li>
<li><a href="#">Polls</a></li>
<li><a href="#">Groups</a></li>
<li><a href="#">Quiz</a></li>
<li><a href="#">Videos</a></li>
</ul>

</body>
</html>