Forum Moderators: not2easy
inside a < td > tag everything is put in the middle growing up and down the more content is added. I want it to start at the top.
The div and p tags won't listen to me if I give them :
.div_powerdby{
left: 50px;
position: absolute;
text-align: center;
align: center;
}
How do I center things (content and elements)? How do I make them follow positions and dimensions set in % with css?
my code:
<!-- index.template for index.php-->
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head><title>
J - v2
</title>
<link rel="stylesheet" href="../media/struct.css" />
<link rel="stylesheet" href="../media/styling.css" />
</head><body>
<table class="main">
<tr class="top">
<td class="toplogo" rowspan="2">
welcome <br />
</td>
<td class="toptxt">Welcome to \\my .com is here\\</td>
</tr><tr>
<td class="toplinks">
{quickmenu}
</td></tr>
<tr>
<td class="menu">{menu}</td>
<td class="page">{page}</td>
</tr>
</table>
<table>
<tr><td>
<div id="power_logos">
//some powerd by logos w3c, php, mysql, macosx, unix, apache2
</div>
</td></tr>
</table></body></html>
<!-- struct css for index.php-->
.main {
width: 100%;
height: 100%;
margin: 0;
padding: 1px;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.power_logos {
left: 50%;
position: absolute;
text-align: center;
align: center;
}
.top {
//placeholder
}
.toplinks {
height: 22px;
}
.toptxt {
height: 22px;
}
.toplogo {
//placeholder
}
.menu {
width: 170px;
}
Style has it's own css file
The template will be filled by a php script which works ok.
John
ie.
div#power_logos {margin: 0 auto; text-align:center;}
don't absolutely position it from the left. set the left and right margins to auto.
This is 1/2 of the solution. Auto margins will center an element, but only if it has a width, otherwise the width value is also "auto" which forces the browser to calculate auto margins as 0. From the W3 Specs [w3.org]...
If 'width' is set to 'auto', any other 'auto' values become '0'
So you also have to add a width to the element.
A second caveat is that old versions of IE do not support auto margins. They do, however, wrongly apply the text-align property to block level elements, so if you put the text-align:center on the containing block of the element you want centered, it will center in early IE versions, too.
html:
<div id="the_container">
<div id="the_stuff">Center Me</div>
</div>css:
#the_container{
text-align:center;/*centers for early IE versions*/
}
#the_stuff{
margin:0 auto;/*centers for modern browsers*/
width:WHATEVER;/*necessary for auto-margin centering*/
text-align:left;/*resets text alignment for the content*/
}
cEM
width: 100%;John
HTML:
<table class="power_logos_container">
<tr><td class="power_logos">
<a href="http://jigsaw.w3.org/css-validator/">
<img style="border:0;width:66px;height:22px"
src="http://jigsaw.w3.org/css-validator/images/vcss"
alt="Valid CSS!" /></a>
<a href="http://validator.w3.org/check?uri=referer"><img
src="http://www.w3.org/Icons/valid-xhtml10"
alt="Valid XHTML 1.0!" height="22" width="66" /></a>
<a href="http://www.mysql.com/"><img
src="../images/mysql_logo.png" alt="Mysql Database server"
height="22" width="66" /></a>
<a href="http://httpd.apache.org/"><img
src="../images/apache_pb.gif" alt="Apache http server"
height="22" width="76" /></a>
<a href="http://www.php.net/"><img
src="../images/php.gif" alt="PHP Scripting engine"
height="22" width="46" /></a>
<a href="http://www.apple.com/macosx"><img
src="../images/phanter_logo.jpg" alt="The system running this personal server"
height="22" width="26" /></a>
<a href="http://www.apple.com/macosx"><img
src="../images/unix_based.jpg" alt="The system running this personal server"
height="22" width="50" /></a>
</td></tr>
</table>
CSS:
.power_logos_container {
text-align: center;
margin: 0;
width: 100%;
}
.power_logos {
margin: 0 auto;
text-align: ;
width: 100%;
}
I fixed it by putting it in a table wich is the container and the td cell the data so it will stay at 100% width which only seems to work with tables and not with divs.
still, the height of my main table will not change if I set
height: 100%;html: <table class="main">
<tr class="top">
<td class="toplogo" rowspan="2">
<br /> You are not logged in
</td>
<td class="toptxt">Welcome to johnkeates.</td>
</tr><tr>
<td class="toplinks"><a href="./" title="go Home">Home</a></td></tr>
<tr>
<td class="menu">menu</td>
<td class="page">page</td>
</tr>
</table>
css:
.main {
width: 100%;
height: 100%;
margin: 0;
padding: 1px;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.top {
height: 27px;
}
.toplinks {
height: 23px;
text-align: center;
margin: 0;
}
.toptxt {
height: 4px;
text-align: center;
margin: 0;
}
.toplogo {
height: 27px;
}
.menu {
width: 170px;
}
The height: 100%; in main doesn't effect the table! What shall I do now?
