PDA

View Full Version : Code a layout with css/divs

tomaten53
12-30-2005, 10:51 AM
Hi

I have coded layouts in tables before, but I often get a white gap, and I have heard that it is not really good to code them in tables. So therefore I wanna code this layout in divs/css. I have tried searching for tutorials, looking at sources and all that stuff, but I havent got a clue on how to do it. I want the content and menu area to repeat down.

Here is my image IMAGE (http://i18.photobucket.com/albums/b149/tomaten/layouts.jpg)
tomaten53
12-30-2005, 01:38 PM
Ok, I have tested a bit here, but my backgrounds and images wont show up!

<html>
<head>
<title>Page title</title>
</head>
<body>
<div id=layer1 style="position:absolute; top:0; left:0; width:748; height:255; padding:0px; border: #000000 0px solid;>
<img src="http://i31.photobucket.com/albums/c375/layout_imagesforright/topper.jpg">
</div>
<div id=layer2 style="position:absolute; top:255; left:0; width:45; padding:0px; border: #000000 0px solid; background-image:url(http://i31.photobucket.com/albums/c375/layout_imagesforright/leftbg.jpg); layer-background-image:url(http://i31.photobucket.com/albums/c375/layout_imagesforright/leftbg.jpg);">
</div>
<div id=layer3 style="position:absolute; top:255; left:45; width:408; padding:0px; border: #000000 0px solid; background-image:url(http://i31.photobucket.com/albums/c375/layout_imagesforright/bg.jpg); layer-background-image:url(http://i31.photobucket.com/albums/c375/layout_imagesforright/bg.jpg);">
Content goes here (images, text)
Content goes here (images, text)
Content goes here (images, text)
Content goes here (images, text)
Content goes here (images, text)
Content goes here (images, text)
Content goes here (images, text)
Content goes here (images, text)
Content goes here (images, text)
Content goes here (images, text)

</div>
<div id=layer4 style="position:absolute; top:255; left:453; width:22; padding:0px; border: #000000 0px solid; background-color:#000000; background-image:url(http://i31.photobucket.com/albums/c375/layout_imagesforright/middlebg.jpg); layer-background-image:url(http://i31.photobucket.com/albums/c375/layout_imagesforright/middlebg.jpg);">
</div>

<div id=layer5 style="position:absolute; top:255; left:475; width:225; padding:0px; border: #000000 0px solid; background-color:#000000; background-image:url(http://i31.photobucket.com/albums/c375/layout_imagesforright/bg.jpg); layer-background-image:url(http://i31.photobucket.com/albums/c375/layout_imagesforright/bg.jpg);">
Content goes here (images, text)
Content goes here (images, text)
Content goes here (images, text)
Content goes here (images, text)
Content goes here (images, text)
Content goes here (images, text)
Content goes here (images, text)
Content goes here (images, text)
Content goes here (images, text)
Content goes here (images, text)
</div>
<div id=layer6 style="position:absolute; top:255; left:700; width:48; padding:0px; border: #000000 0px solid; background-image:url(http://i31.photobucket.com/albums/c375/layout_imagesforright/rightbg.jpg); layer-background-image:url(http://i31.photobucket.com/albums/c375/layout_imagesforright/rightbg.jpg);">
</div>
</body>
</html>
Arwen
12-30-2005, 02:16 PM
Unfortunately I can't view your images...but I guess you need something like this:


<html><head>
<title>Title</title>
<link rel="stylesheet" href="style.css" type="text/css">
</head>

<body background="URL">

<div style="position: absolute; left: 0px; top: 0px; z-index: 1">
<img src="http://i18.photobucket.com/albums/b149/tomaten/layouts.jpg">
</div>

<div style="position: absolute; top: 250px; left: 590px; width: 200px; z-index: 2" class="side">

<p>Menu

<br>Link
<br>Link

</div>

<div style="position: absolute; top: 250px; left: 96px; width: 375px; z-index: 2" class="side">

<p>Welcome

<br>blah blah

</div>


</body>
</html>
tomaten53
12-30-2005, 02:21 PM
Yes, but when I write more, it just comes down, the background at the image wont repeat
Arwen
12-30-2005, 03:03 PM
You can also put there height: ***px; and do you have a link to your background image?
kittycat
12-30-2005, 04:08 PM
In your original code you missed a " on this line:
<div id=layer1 style="position:absolute; top:0; left:0; width:748; height:255; padding:0px; border: #000000 0px solid;">
It might work after you add that in
tomaten53
12-30-2005, 04:45 PM
Ok, but I have solved it! Thankies everyone!