PDA

View Full Version : Help with div layout coding

defunct
10-03-2004, 08:27 AM
Hello. I FINALLY got a layout made for a site I'm starting and I don't really know how to code. I'm trying though! So its a div layout.

I have a free version of dreamweaver this is what it came up with so far:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>defunct randomness</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- ImageReady Slices (layout.jpg) -->
<table width="1024" border="0" cellpadding="0" cellspacing="0">
<tr>
<td rowspan="2">
<img src="images/josh_groban_layout_01.gif" width="559" height="648" alt="" /></td>
<td>
<img src="images/josh_groban_layout_02.gif" width="465" height="585" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="585" alt="" /></td>
</tr>
<tr>
<td rowspan="2">
<img src="images/josh_groban_layout_03.gif" width="465" height="183" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="63" alt="" /></td>
</tr>
<tr>
<td>
<img src="images/josh_groban_layout_04.gif" width="559" height="120" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="120" alt="" /></td>
</tr>
</table>
<!-- End ImageReady Slices -->
</body>
</html>


But I still have this image to repeat: http://img.photobucket.com/albums/v23/Born2mugglz/site/background.jpg

And I have a feeling that code isn't exactly right at all. X-/

Also, I need to add text and such to it. Does anyone know where I would insert the text? And what I would put there (like the text tags or something?)? Sorry, I don't really know what Im talking about here.

http://www.defunctrandomness.com/ <that is my website. you can see the actual layout on there. It might help you tell me where to put the text...

I'd really appreciate any help I could get! Let me know if I need to explain anything furthur or reslice my layout or something.

Thank you! <3
kittycat
10-03-2004, 03:46 PM
For the background image, add style="background-image: url(http://img.photobucket.com/albums/v.../background.jpg); to the <body> tag. (make sure you adjust that between the brackets so it's the full url)

To add text, you can either make adjustments to the table you have or use divs.
Div tutorial here: http://www.lissaexplains.com/html7.shtml
For the table method, in the cells that you want to add text the image has to be made a background.
eg, <td>
<img src="images/spacer.gif" width="1" height="585" alt="" /></td>
Would become
<td style="background-image: url(images/spacer.gif)" width="1" height="585"> Your text here. </td>
defunct
10-03-2004, 05:46 PM
Hm....

Is this where you meant for the background (in bold):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>defunct randomness</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" style="background-image: url(http://img.photobucket.com/albums/v23/Born2mugglz/site/background.jpg);>
<!-- ImageReady Slices (layout.jpg) -->
<table width="1024" border="0" cellpadding="0" cellspacing="0">
<tr>
<td rowspan="2">
<img src="http://img.photobucket.com/albums/v23/Born2mugglz/site/josh_groban_layout_01.gif " width="559" height="648" alt="" /></td>
<td>
<img src="http://img.photobucket.com/albums/v23/Born2mugglz/site/josh_groban_layout_02.gif " width="465" height="585" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="585" alt="" /></td>
</tr>
<tr>
<td rowspan="2">
<img src="http://img.photobucket.com/albums/v23/Born2mugglz/site/josh_groban_layout_03.gif " width="465" height="183" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="63" alt="" /></td>
</tr>
<tr>
<td>
<img src="http://img.photobucket.com/albums/v23/Born2mugglz/site/josh_groban_layout_04.gif " width="559" height="120" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="120" alt="" /></td>
</tr>
</table>
<!-- End ImageReady Slices -->
</body>
</html>

Because that makes everything go all crazy: http://www.defunctrandomness.com/

Did i place it in the wrong spot? X/
kittycat
10-03-2004, 09:03 PM
Yeah, just missing a closing "... I forgot to finish it off in what I posted :P

<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" style="background-image: url(http://img.photobucket.com/albums/v23/Born2mugglz/site/background.jpg);">
See if that works any better
defunct
10-03-2004, 09:40 PM
OMG PERFECT! yay. You are being such a great help! So now, I'm a bit confused on how I do the text...Whats the difference between doing the div or the adjustments to the table? And when would I make the image a background? Would that be for putting content in the box that says 'recent art' or something?

Where exactly would i insert the code for text?

Sorry if Im throwing all this on you, but I really appreciate the help! <3
kittycat
10-03-2004, 09:56 PM
Personally I'd find easier just to use divs for the layout, so you don't have to mess around with the tables and can get the content exactly where you want it.
The basic code you'd need would be

<div style="position: absolute; top: ##px; left: ##px; width: ##px; height: ##px;">
Your text goes here
</div>

The top and left position the div exactly where you want it on a page. You can play with the numbers there until you get it in the place you want it. Change the width and height and add the text you want. You can put that either before or after the table code, between the body tags. The link I posted above to the divs page might help explain a bit more about them if you need it.

If you just want to do it the table way, there's not much more to it than what I already posted... The only table cells you have to change are the ones that have an image where you want to include content.
defunct
10-03-2004, 10:16 PM
Did I place that in the right spot? Because this is what it does no matter what number I adjust it to: http://www.defunctrandomness.com/

(Its in bold again. =P):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>defunct randomness</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" style="background-image: url(http://img.photobucket.com/albums/v23/Born2mugglz/site/background.jpg);">
<!-- ImageReady Slices (layout.jpg) -->
<div style="position: absolute; top: #500px; left: #30px; width: #30px; height: #60px;">
Your text here
</div>
<table width="1024" border="0" cellpadding="0" cellspacing="0">
<tr>
<td rowspan="2">
<img src="http://img.photobucket.com/albums/v23/Born2mugglz/site/josh_groban_layout_01.gif " width="559" height="648" alt="" /></td>
<td>
<img src="http://img.photobucket.com/albums/v23/Born2mugglz/site/josh_groban_layout_02.gif " width="465" height="585" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="585" alt="" /></td>
</tr>
<tr>
<td rowspan="2">
<img src="http://img.photobucket.com/albums/v23/Born2mugglz/site/josh_groban_layout_03.gif " width="465" height="183" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="63" alt="" /></td>
</tr>
<tr>
<td>
<img src="http://img.photobucket.com/albums/v23/Born2mugglz/site/josh_groban_layout_04.gif " width="559" height="120" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="120" alt="" /></td>
</tr>
</table>
<!-- End ImageReady Slices -->
</body>
</html>
kittycat
10-03-2004, 10:21 PM
Take away the # in front of the numbers, I included two there just for place holders ;) Other than that it looks all right.
defunct
10-03-2004, 11:17 PM
Haha! Thanks, I don't know why I thought I should leave those in...

So, I managed to get some text in the main content box. Now how would I go about putting content in the navigation box and recent artwork?

http://www.defunctrandomness.com/

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>defunct randomness</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" style="background-image: url(http://img.photobucket.com/albums/v23/Born2mugglz/site/background.jpg);">
<div style="position: absolute; top: 650px; left: 80px; width: 420px; height: 400px;">
<font face="times new roman" color="#CD5D2B" size="2"><p>Welcome to defunct randomness! Here you will find graphics for your use and enjoyment. Feel free to look around and enjoy all the defunct randomness!</p></font>
</div>
<!-- ImageReady Slices (layout.jpg) -->
<table width="1024" border="0" cellpadding="0" cellspacing="0">
<tr>
<td rowspan="2">
<img src="http://img.photobucket.com/albums/v23/Born2mugglz/site/josh_groban_layout_01.gif " width="559" height="648" alt="" /></td>
<td>
<img src="http://img.photobucket.com/albums/v23/Born2mugglz/site/josh_groban_layout_02.gif " width="465" height="585" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="585" alt="" /></td>
</tr>
<tr>
<td rowspan="2">
<img src="http://img.photobucket.com/albums/v23/Born2mugglz/site/josh_groban_layout_03.gif " width="465" height="183" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="63" alt="" /></td>
</tr>
<tr>
<td>
<img src="http://img.photobucket.com/albums/v23/Born2mugglz/site/josh_groban_layout_04.gif " width="559" height="120" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="120" alt="" /></td>
</tr>
</table>
<!-- End ImageReady Slices -->
</body>
</html>
defunct
10-03-2004, 11:53 PM
Oop! Just kidding. I think I figured it out! Thank you! <3