Middle TD not drifts to the side!

#1 temhawk

W.R. Private First-Class

Group: Members
Posts: 322
Joined: 30-August 07
Gender:Male
Interests:travel, cg art, macs, music, skateboarding, programming, discovery channel, TextMate 2

Posted 13 October 2007 - 12:12 PM

My friend is working on a site and called for my help twenty minutes ago.
I tried a bunch of things that I thought might make the layout look as preferred.

The page looks like this (on Windows, IE):
Posted Image

Note that the page title at the top belongs to the background-image!

You can see that the (hungarian) sentence in the middle drifts off to the right side of the page, which it shouldn't!
I can also see a slight drift to the right side (of the middle td of the table) on my mac, Safari..

Here is the code:

<html>
	<head>
		<title>title</title>
	</head>
	<body>

<table border="0px" style="width:100%;">
	<tr width="100%">
		<td align="left" nowrap>
			<a href="http://www.dunno.com/" target=_blank>Ikonok</a><br>
			<a href="http://www.dunno.com/">ÃƒÂrÃƒÂ¡saim</a><br>
			<a href="http://www.dunno.com/">AdatbÃƒÂ¡zisok</a><br>
			<a href="http://www.dunno.com/">'Skethcup modellek</a><br>
			<a href="http://www.dunno.com/">Munka alatt</a><br>
			<a href="http://www.dunno.com/">EgyÃƒÂ©b adatok</a><br>
		</td>
		<td align="center" width="100%" nowrap>
			<font size=3 color=red face="Times New Roman"> A mostanÃƒÂ¡ban elkÃƒÂ©szÃƒÂ¼lt dolgok itt lesznek lÃƒÂ¡thatÃƒÂ³ak</font><br>
		</td>
		<td align="right">
			<a href="http://www.dunno.com/">Main page</a><br>
			<a href="http://www.dunno.com/">Főoldal</a><br>
		</td>
	</tr>
</table>

	</body>
</html>

You might be puking at my horrible attempts to fix this, but forgive me please :blush:

I hope one of you will aid us (me and my friend) with this dilemma!

The td in the middle of the table needs to be perfectly aligned, not off to the right as seen on the screenshot!

Thank you in advance, I know you can solve this! :rolleyes1:

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

My thought was, making each td 33%. But that leaves 1% away

This post has been edited by temhawk: 13 October 2007 - 12:22 PM

Back to top
Back to top of the page up there ^
MultiQuote
Reply

#2 marcamos

W.R. General

Group: Administrators
Posts: 2,849
Joined: 04-April 06
Gender:Male
Location:Massachusetts - USA

Posted 13 October 2007 - 01:34 PM

The fastest way to fix it is to toss an id onto the <td> that contains the text that is to be centered, then using relative positioning to move it a little left or right. Like so:

<td id="middleTD">
your text
</td>

And there's the CSS:

#middleTD {
position:relative;
left: -20px;
}

And here's my obligitory anti-table statement: Don't use tables to layout your page.

Back to top
Back to top of the page up there ^
MultiQuote
Reply

#3 temhawk

W.R. Private First-Class

Group: Members
Posts: 322
Joined: 30-August 07
Gender:Male
Interests:travel, cg art, macs, music, skateboarding, programming, discovery channel, TextMate 2

Posted 13 October 2007 - 01:46 PM

Thanks, I'll have to look into that and try it; I never really understood the relative/absolute positioning concept of stuff :red:

Quote

And here's my obligitory anti-table statement: Don't use tables to layout your page.

What do you suggest? I didn't know there were other ways of achieving things that tables achieve (test aligned left and right on one line, floating test blocks without any css...). I'd surely be interested in getting to know a new way though, because I hate tables for some reason

Thank you!

Back to top
Back to top of the page up there ^
MultiQuote
Reply

#4 pgo

W.R. Corporal

Group: Members
Posts: 83
Joined: 07-September 07
Gender:Male
Location:Oklahoma, USA

Posted 14 October 2007 - 12:34 AM

temhawk, on Oct 13 2007, 01:46 PM, said:

Thanks, I'll have to look into that and try it; I never really understood the relative/absolute positioning concept of stuff :red:

Thank you!

CSS. That's what it's for.

Follow all the tutorials - from beginner HTML onward - at www.htmldog.com

stillwater oklahoma web design

Back to top
Back to top of the page up there ^
MultiQuote
Reply

#5 temhawk

W.R. Private First-Class

Group: Members
Posts: 322
Joined: 30-August 07
Gender:Male
Interests:travel, cg art, macs, music, skateboarding, programming, discovery channel, TextMate 2

Posted 14 October 2007 - 07:02 AM

Thanks pgo!

I'll definitely do that now

I knew some day I'd have to face it and learn HTML the right way! All what I know of HTML now is from searching for a code that does what I need, copy-pasting it and analyzing it. I guess the drawback of that is that I've missed a lot of other basic, useful things

Cya

Back to top
Back to top of the page up there ^
MultiQuote
Reply

#6 temhawk

W.R. Private First-Class

Group: Members
Posts: 322
Joined: 30-August 07
Gender:Male
Interests:travel, cg art, macs, music, skateboarding, programming, discovery channel, TextMate 2

Posted 14 October 2007 - 07:40 AM

Ugh, I love html dog!!!!

Everything is so clean and easy to understand!

I'm really glad now I made this thread! Not only did my friend's website get the layout he wanted (thanks to herkalees!), but I've also been introduced to a great html/css source! I'm going to sit here all day and purify my html knowledge

I know I'm probably a big n00b, overjoyed about this, but I just wanted to say thanks one more time and lock this thread because everything is good now! :flowers:

Back to top
Back to top of the page up there ^
MultiQuote
Reply

#7 marcamos

W.R. General

Group: Administrators
Posts: 2,849
Joined: 04-April 06
Gender:Male
Location:Massachusetts - USA

Posted 14 October 2007 - 09:13 AM

temhawk, on Oct 14 2007, 08:40 AM, said:

I know I'm probably a big n00b, overjoyed about this, but I just wanted to say thanks one more time and lock this thread because everything is good now! :flowers:

Your welcome, I really enjoy bringing people to the light. It makes for a better interwebz.

Back to top
Back to top of the page up there ^
MultiQuote
Reply

How can I make the middle <td> center vertically, independent of