Jump to content


Photo

Floating (in tables).


  • Please log in to reply
2 replies to this topic

#1 effigy

effigy
  • Staff Alumni
  • Advanced Member
  • 3,600 posts
  • LocationIL

Posted 08 September 2006 - 08:12 PM

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

Posted Image

<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>

Is the fact that I'm in a table causing the problem? Update: I can't seem to get it working in a div either...
Regexp | Unicode Article | Letter Database
/\A(e)?((1)?ff(?:(?:ig)?y)?|f(?:ig)?)\z/

#2 effigy

effigy
  • Staff Alumni
  • Advanced Member
  • 3,600 posts
  • LocationIL

Posted 08 September 2006 - 09:57 PM

I had to result to the negative-margin thing again; this is working:

<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>

Regexp | Unicode Article | Letter Database
/\A(e)?((1)?ff(?:(?:ig)?y)?|f(?:ig)?)\z/

#3 ToonMariner

ToonMariner
  • Members
  • PipPipPip
  • Advanced Member
  • 3,342 posts
  • LocationNewcastle upon Tyne, UK

Posted 08 September 2006 - 11:28 PM

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.
follow me on twitter @PHPsycho




0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users