Jump to content

Archived

This topic is now archived and is closed to further replies.

effigy

Floating (in tables).

Recommended Posts

I'm having some troubles with [b]float[/b]; screenshot and simplified code are below. I want "Heading" to be horizontally and vertically centered.

[URL=http://img428.imageshack.us/my.php?image=floatrc4.jpg][IMG]http://img428.imageshack.us/img428/4577/floatrc4.th.jpg[/img][/URL]

[code]
<html>
<head>
<style type="text/css">
* {
color: black;
font-family: arial;
font-size: 12px;
}
table, td, span {
border: 1px gray solid;
}
td {
padding: 4px 8px;
text-align:center;
/* this does not work; bottom doesn't even work either */
vertical-align: middle;
}
span {
float: right;
}
</style>
</head>
<body>

<table width="500">
<tr>
<td>
<span>
<img src="http://www.phpfreaks.com/forums/Themes/default/images/topic/my_normal_post.gif"/>
</span>
Heading
</td>
</tr>
<tr>
<td>
|
</td>
</tr>
<tr>
<td>
Notice how "Heading" is not centered horizontally or vertically.
</td>
</tr>
</table>

</body>
</html>
[/code]

Is the fact that I'm in a table causing the problem? [b]Update:[/b] I can't seem to get it working in a div either...

Share this post


Link to post
Share on other sites
I had to result to the negative-margin thing again; this is working:

[code]
<html>
<head>
<style type="text/css">
* {
color: black;
font-family: arial;
font-size: 12px;
}
table, td, th, span {
border: 1px gray solid;
}
span {
border-color: red;
}
td {
padding: 4px 8px;
text-align: center;
}
th {
text-align: left;
}
span.heading {
display: block;
position: relative;
top: 0px;
left: 50%;
margin-left: -200px;
width: 400px;
height: 100%;
text-align: center;
line-height: 2;
}
span.iconbar {
float: right;
}
</style>
</head>
<body>

<table width="500">
<tr>
<th>
<span class="iconbar"><img src="my_normal_post.gif"/></span>
<span class="heading">Heading</span>
</th>
</tr>
<tr>
<td>
|
</td>
</tr>
<tr>
<td>
Notice how "Heading" <i>is</i> centered horizontally and vertically.
</td>
</tr>
</table>

</body>
</html>
[/code]

Share this post


Link to post
Share on other sites
you could always give that table element an id and use that to set the background image in teh css. That way the image will never interfee with your layout and your page may even download a few nanoseconds quicker.

Share this post


Link to post
Share on other sites

×

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.