PDA

View Full Version : Need help with layout of my site


Squiddy
06-02-2006, 06:33 PM
I have tried so many things to get this to work...

my site or what ive been able to design of it so far is at: www.zycondesigns.gazillion-hosting.com

There is a gap between the header, footer, and middle section, also the middle white bit wont stick to the 700px table width.

The middle area is not an image but just the second row of a table with bgcolor="'#FFF"

I dont know how to make it... click together, ive tried cellspacing/padding at 0 no idea how to fix this... any help would be appreciated.

P.S would rather the help came as more HTML coding rather than Javascript - i need to be able to know what i have to do for the futures sake :P

beefa
06-02-2006, 11:00 PM
Squiddy,

First of all, a warm welcome to the forums :D

This should have actually been in the HTML support section, as this section is for people who want someone to design or make a whole website, but your problem was just in the code.

Your problem originated from bad coding (no offense). Your code was all messed, and scattered everywhere. Now, when coding, IE will take whitespace as spaces in the website, where FF wont. For example, for a table, the correct code would be:

<tr><td>Something Here</td></tr>

However, this is incorrect:

<tr>
<td>
Something Here
</td>
</tr>

However, with your website, even FF messed it up. This is the correct code for your page:

<html>
<head><title>Insert Title Here</title>
</head>
<body bgcolor="#000000">
<center>
<table width="600" cellspacing="0" cellpadding="0" border="0">
<tr><td><img src="Images/h2.png" width="50" height="126"><img src="Images/header.png" alt=""><img src="Images/h2.png" width="50" height="126"></td></tr>
<tr><td width="600" bgcolor="#FFFFFF">
<table width="100%" cellspacing="3" cellpadding="3" border="0">
<tr><td><!-- A table inside the whitespace to allow padding, code after this can be deleted -->
<font size="2">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus nec erat quis ante dapibus tempus. Suspendisse suscipit, nisl non accumsan varius, libero urna feugiat felis, at iaculis ipsum dui id pede. In libero mi, laoreet quis, blandit et, elementum ac, purus. Ut ac dolor et risus mattis rhoncus. Curabitur fringilla dictum dui. Quisque blandit mi. Sed mollis, dolor et scelerisque pharetra, velit diam porta augue, ut ultrices nunc nisi eu magna. Quisque scelerisque enim et ipsum. Morbi ultricies feugiat magna. In eu risus eget sapien tincidunt sodales. Vivamus sollicitudin elit ut nunc.
<p>
Sed sit amet metus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla ipsum dui, ultricies et, gravida sed, commodo ac, enim. Maecenas elementum. Nullam non diam id felis lacinia feugiat. Nullam varius nibh ac pede gravida venenatis. Vivamus convallis quam a lorem. Mauris luctus elit nec magna. Morbi nonummy iaculis dui. Vestibulum consectetuer orci vitae massa. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
<p>
Sed eu magna. Suspendisse vulputate quam eget risus. Ut molestie, odio malesuada mattis convallis, magna massa bibendum ipsum, id consequat mauris tortor eget ligula. Aliquam fringilla quam at lectus. Morbi vitae libero ut pede facilisis blandit. Quisque nibh libero, scelerisque et, scelerisque in, hendrerit ac, purus. Vestibulum sit amet tellus sit amet justo porta pulvinar. Nulla ut dui. Pellentesque vestibulum, eros vel fringilla condimentum, felis sem venenatis elit, sed fringilla nisi sem sit amet tellus. Morbi et lorem sed eros interdum rutrum. Proin tempor blandit lacus. Nunc rutrum. In hac habitasse platea dictumst. Cras sed mi. Duis diam sem, facilisis nec, mattis vitae, eleifend vel, leo. Proin suscipit est ac velit. Ut non sem vitae enim pharetra iaculis. Nunc congue pharetra neque. Vivamus viverra.
</td></tr>
</table>
<!-- End of padding table, stop deleting after this -->
</td></tr>
<tr><td width="600"><img src="Images/f2.png" width="50" height="33"><img src="Images/footer.png" width="500" height="33"><img src="Images/f2.png" width="50" height="33"></td></tr>
</table>
</center>
</body>
</html>

Just one thing to mention, with the white space (your "middle"), I inserted another table inside. This table is just so we can add padding to the inside of the box, so I could insert the sample text. You can keep it there, or delete it. I left in <!-- Comment Tags --> to show you where you can delete from and to.

Hope this helps,
Beefa

Squiddy
06-03-2006, 12:09 AM
Kewl man, thank you for the welcome - sorry it was really annoying me and i needed some answers fast! :)

I shall upload this, im not sure what you mean by adding in another table or why you did it - bu i will probably find out when i upload the code, thanx again!

P.S sorry for posting in the wrong area :P

Squiddy
06-03-2006, 12:17 AM
Wahey! just tested it in dreamweaver - i think that was why all my coding was so screwed up, as dreamweaver automatically sets it out like that :P

could you explain why you inserted another table inside the first one? i dont get how that works? :S cheers :D

beefa
06-03-2006, 01:49 AM
Hehe, sure.

What I did was, add a white table as your middle section (as you had). However, I have set the cellspacing and cellpadding to 0, so therefore any text inside the box would be pressed to the border.

So what I did was, where text would normally be entered into the first white box, I added another table, this table with cellpadding and cellspacing to 3. I then added some random text. Therefore, if you want to enter text into the middle space, dont delete the table. If you want to add more images or whatever, you can delete the 2nd table in there.

Its just so I could add text and have padding from the side. Thats all.

Beefa

Squiddy
06-03-2006, 07:17 AM
So the second table is the only way to like.. keep text from going outisde of the table parametre? If i was to add images which i probably will, how would i be able to keep everything from spilling out like the white box was before you fixed it? :)

beefa
06-03-2006, 09:48 AM
No, its not to keep it from spilling out.

Without the 2nd table, text inserted would be pushed to the edge of the barrier. The space between the extreme edge and the edge of the text is the only reason the 2nd table was inserted.

It does not keep the text inside the table parametre, it just adds padding between the edge of the table and the text. If you really dont understand, have a look at this code WITHOUT THE 2ND TABLE:

<html>
<head><title>Insert Title Here</title>
</head>
<body bgcolor="#000000">
<center>
<table width="600" cellspacing="0" cellpadding="0" border="0">
<tr><td><img src="Images/h2.png" width="50" height="126"><img src="Images/header.png" alt=""><img src="Images/h2.png" width="50" height="126"></td></tr>
<tr><td width="600" bgcolor="#FFFFFF">
<font size="2">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus nec erat quis ante dapibus tempus. Suspendisse suscipit, nisl non accumsan varius, libero urna feugiat felis, at iaculis ipsum dui id pede. In libero mi, laoreet quis, blandit et, elementum ac, purus. Ut ac dolor et risus mattis rhoncus. Curabitur fringilla dictum dui. Quisque blandit mi. Sed mollis, dolor et scelerisque pharetra, velit diam porta augue, ut ultrices nunc nisi eu magna. Quisque scelerisque enim et ipsum. Morbi ultricies feugiat magna. In eu risus eget sapien tincidunt sodales. Vivamus sollicitudin elit ut nunc.
<p>
Sed sit amet metus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla ipsum dui, ultricies et, gravida sed, commodo ac, enim. Maecenas elementum. Nullam non diam id felis lacinia feugiat. Nullam varius nibh ac pede gravida venenatis. Vivamus convallis quam a lorem. Mauris luctus elit nec magna. Morbi nonummy iaculis dui. Vestibulum consectetuer orci vitae massa. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
<p>
Sed eu magna. Suspendisse vulputate quam eget risus. Ut molestie, odio malesuada mattis convallis, magna massa bibendum ipsum, id consequat mauris tortor eget ligula. Aliquam fringilla quam at lectus. Morbi vitae libero ut pede facilisis blandit. Quisque nibh libero, scelerisque et, scelerisque in, hendrerit ac, purus. Vestibulum sit amet tellus sit amet justo porta pulvinar. Nulla ut dui. Pellentesque vestibulum, eros vel fringilla condimentum, felis sem venenatis elit, sed fringilla nisi sem sit amet tellus. Morbi et lorem sed eros interdum rutrum. Proin tempor blandit lacus. Nunc rutrum. In hac habitasse platea dictumst. Cras sed mi. Duis diam sem, facilisis nec, mattis vitae, eleifend vel, leo. Proin suscipit est ac velit. Ut non sem vitae enim pharetra iaculis. Nunc congue pharetra neque. Vivamus viverra.
</td></tr>
<tr><td width="600"><img src="Images/f2.png" width="50" height="33"><img src="Images/footer.png" width="500" height="33"><img src="Images/f2.png" width="50" height="33"></td></tr>
</table>
</center>
</body>
</html>

That is just the same website without the 2nd table. If you were to add images, use the above code, but take out all the text and put in your images.

If you truly dont understand, add my msn beefa_da_man@hotmail.com

Beefa