• We’re currently investigating an issue related to the forum theme and styling that is impacting page layout and visual formatting. The problem has been identified, and we are actively working on a resolution. There is no impact to user data or functionality, this is strictly a front-end display issue. We’ll post an update once the fix has been deployed. Thanks for your patience while we get this sorted.

HTML problem

K

KoolDrew

Lifer
I am trying to make a simple layout for a site I have to make. Now I made the layout in Photoshop, sliced it and tried to code it, but it doesn't seem to work for me. I am no expert at all in HTML so that is why I don't know whats wrong. I know it is probably something really simple though. Now here is my HTML

http://img279.echo.cx/img279/4111/html1rj.gif

It looks right to me (again I don't know much about HTML), but when I try to put content in it looks like this

http://img285.echo.cx/img285/2786/site0uv.gif

As you can see the text is to the left of the footer when there is supposed to be a content box with the text inside it.

Any help would be appreciated.
 
We need a website forum.

I'm no expert, but maybe you should put it in the other table? I dunno, it's gotta be something basic but I'm too out of it to help you out. Tables aren't complicated, just experiment.

Edit: You forgot a <table> tag. 😛

After the </table> you need to put a <table> otherwise it has no clue what you're talking about with that <tr> and <td> nonsense.
 
Originally posted by: ISAslot
or take the </table><td> out
Click to expand...

Well, personal preference I guess. I like to separate tables by their content, so a menu table, then a main content table, then a footer info table, etc.
 
Originally posted by: aplefka
Originally posted by: ISAslot
or take the </table><td> out
Click to expand...

Well, personal preference I guess. I like to separate tables by their content, so a menu table, then a main content table, then a footer info table, etc.
Click to expand...

All the 1337 people use CSS for that 😛
 
<HTML>

<HEAD>
<TITLE>Xbox 360</TITLE>
</HEAD>

<BODY BACKGROUND="images/bg.gif" LEFTMARGIN="0" TOPMARGIN="0" MARGINWIDTH="0" MARGINHEIGHT="0">
<div align="center">

<TABLE WIDTH="750" HEIGHT"550" BORDER="0" CELLPADDING="0" CELLSPACING="0">

<TR>
<TD COLSPAN="6"><img src="images/header.gif" width="750" height="120" alt="header"></td>
</TR>

<TR>
<TD><img src="images/nav_left.gif" width="159" height="19" alt="nav_left"></td>
<TD><img src="images/nav_console.gif" width="108" height="19" alt="console"></td>
<TD><img src="images/nav_games.gif" width="107" height="19" alt="games"></td>
<TD><img src="images/nav_live.gif" width="102" height="19" alt="live"></td>
<TD><img src="images/nav_credits.gif" width="82" height="19" alt="credits"></td>
<TD><img src="images/nav_right.gif" width="192" height="19" alt="nav_right"></td>
</TR>

<TR>
<TD BACKGROUND="images/content_bg.gif" WIDTH="750" HEIGHT="350">bhnhjk</td>
</TR>

<TR>
<TD COLSPAN="6"><img src="images/footer.gif" width="750" height="24" alt="footer"></td>
</TR>

</TABLE>

</div>
</BODY>
</HTML>
 
The width of your content area is only as wide as the first preceding column.. you'll need to add colspan="the number of columns" in your content's <td> tag..

Tables are not the best way to handle layouts.. the html codesoup can be a bitch to handle later on!
 
Now I solved that problem, but how come the text is in the middle? Also how do I get it farther from the table on the left without using "$nbsp;" just to space? As you can see in the pic the text is right against the table border on the left which may make it hard to read.

Also how come there is no black border on the right side?
http://img275.echo.cx/img275/6295/site7vu.gif
 
Dude, just post the HTML you are working on.. no one can guess what you are doing by just looking at the screenshot
 
<HTML>

<HEAD>
<TITLE>Xbox 360</TITLE>
</HEAD>

<BODY BACKGROUND="images/bg.gif" LEFTMARGIN="0" TOPMARGIN="0" MARGINWIDTH="0" MARGINHEIGHT="0">
<div align="center">

<TABLE WIDTH="750" HEIGHT"550" BORDER="0" CELLPADDING="0" CELLSPACING="0">

<TR>
<TD COLSPAN="6"><img src="images/header.gif" width="750" height="120" alt="header"></td>
</TR>

<TR>
<TD><img src="images/nav_left.gif" width="159" height="19" alt="nav_left"></td>
<TD><img src="images/nav_console.gif" width="108" height="19" alt="console"></td>
<TD><img src="images/nav_games.gif" width="107" height="19" alt="games"></td>
<TD><img src="images/nav_live.gif" width="102" height="19" alt="live"></td>
<TD><img src="images/nav_credits.gif" width="82" height="19" alt="credits"></td>
<TD><img src="images/nav_right.gif" width="192" height="19" alt="nav_right"></td>
</TR>

<TR>
<TD BACKGROUND="images/content_bg.gif" WIDTH="750" HEIGHT="350" COLSPAN="6" BORDER="1">TEST TEST</td>
</TR>

<TR>
<TD COLSPAN="6"><img src="images/footer.gif" width="750" height="24" alt="footer"></td>
</TR>

</TABLE>

</div>
</BODY>
</HTML>
 
<TD BACKGROUND="images/content_bg.gif" WIDTH="750" HEIGHT="350" COLSPAN="6" BORDER="1">TEST TEST</td>
revise that so it has a valign="top"
like this..
<TD BACKGROUND="images/content_bg.gif" WIDTH="750" HEIGHT="350" COLSPAN="6" BORDER="1" valign="top">TEST TEST</td>
 
You must log in or register to reply here.

TRENDING THREADS

Back
Top