PDA

View Full Version : CSS template help!



onedayhero
Feb 19th, 2010, 01:17 AM
Hey there,

This is my first post on this forum but it seems like we have a gentle community over here. I have this issue with some basics CSS, I used to make a couple of websites in XHTML/CSS with some JS. But my inspiration is just lost, even though I understand most code.

So I've made a design in photoshop (well I'm currently still fixing some things) and is viewable here (http://i406.photobucket.com/albums/pp141/onedayhero/design.jpg). I need to find the most efficient way to program this in XHTML 1.1 strict / CSS.

My view would be using 4 layers.

left layer (500px): with image and the 508538 sign (attached to left side of page)
right layer (30px) with the icons in it (attached to right side of page)
middle layer for header + menu and inside this a layer for the actually content of the page (grey area)


The middle layer should change in size according the screen resolution (I aim for at least 1280*768).

There's a change that on some pages the content will be too large for the inner layer in the middle layer and it the page will have to extend. Though the images on the side layers should remain the same (or stretched perhaps, because it wouldn't be THAT bad on the design). Expect that the content will not be twice the size of the lowest resolution height (768px in this case) but will exceed some.

In what way can I implement this layout in CSS? Can anyone create this CSS style for me (just the layers). And how can I make this design versatile with my images (concerning stretching)? the images for the right and left layer are found here (http://i406.photobucket.com/albums/pp141/onedayhero/links.jpg) and here (http://i406.photobucket.com/albums/pp141/onedayhero/rechts.jpg).

Thanks in advance,
onedayhero

Excavator
Feb 19th, 2010, 02:48 AM
Hello onedayhero,
Maybe this will give you a start -
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
body {background: #fff url(http://i406.photobucket.com/albums/pp141/onedayhero/links.jpg) no-repeat left top;}
* {
margin: 0;
padding: 0;
}
#out-container {background: url(http://i406.photobucket.com/albums/pp141/onedayhero/rechts.jpg) no-repeat right top;}
#content {
height: 954px;
margin: 0 83px 0 429px;
background: #ccc;
}
</style>
</head>
<body>
<div id="out-container">
<div id="content">
<!--end content--></div>
<!--end out-container--></div>
</body>
</html>

onedayhero
Feb 19th, 2010, 03:00 AM
The layer design definitely helps, Now I just need to divide the content layer in a head and a real content layer, which isn't that hard.

But I'm struggling with the images, how can I make this site more appealing with those images. Can't they be set on 100% height regardless of page resolution?

When I try adding a 'height = 100%;' in the appropriate sections, my image doesn't get stretched over that height. The reason I've chosen for those bold and big numbers in my left image was that it could be stretched without really transforming the image in a catastrophe.

So I've just added the height factor, what else should I do to get the image stretched?


body {background: #fff url(http://i406.photobucket.com/albums/pp141/onedayhero/links.jpg) no-repeat left top ;}
* {
margin: 0;
padding: 0;
height:100%;
}
#out-container {background: url(http://i406.photobucket.com/albums/pp141/onedayhero/rechts.jpg) no-repeat right top;}
#content {
height: 954px;
margin: 0 83px 0 429px;
background: #ccc;
height:100%;
}

Excavator
Feb 19th, 2010, 03:03 AM
Yeah, height:100%; doesn't really have the affect you might think.

Have a look at a resizable background demo (http://nopeople.com/CSS/background_image_resize/index.html) I have. It may or may not work for you. If the end user has his browser stretched weird it can skew the proportions of your image to where it's really not right althought it sounds like you've accounted for that already.

onedayhero
Feb 19th, 2010, 03:24 AM
So I've I do that image stretch strick with both my image this shouldn't be a real problem. But then, implementing your background-image source code on the current code is (for me anyway).

So do I need to create new layers for those 2 images? and add those height 100% and my custom width and position:absolute with those?

onedayhero
Feb 19th, 2010, 03:47 AM
Ok so I've tried using your code combining with your stretching images tutorial. This is how I ended up ...




<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">

* {
margin: 0px;
padding: 0px;
}


body {
height: 100%;
width: 100%;
}



#content {
height: 954px;
margin: 0 83px 0 429px;
background: #ccc;
}

#img_links {
position: absolute;
top: 0px;
left: 0px;
height: 100%;
width: 500px;
z-index: 1;
}

#img_rechts {
position: absolute;
top: 0px;
left: 0px;
height: 100%;
width: 30px;
z-index: 1;
}

</style>
</head>

<body>
<div id="out-container">
<img src="http://i406.photobucket.com/albums/pp141/onedayhero/links.jpg") no-repeat left top" alt="big pic" width="500px" id="img_links" />

<div id="content">
<!--end content--></div>
<!--end out-container--></div>

<img src="http://i406.photobucket.com/albums/pp141/onedayhero/rechts.jpg") no-repeat right top" alt="big pic" width="30" height="2548" id="img_rechts" />

</body>
</html>




The images both resize nicely, the way it should (a big 'thanks' for that already). But now, for some reason, my layout is messed up. The image that should be on the most right is now on the most left, for no reason I can think off.

This will probably be a minor mistake, but I can't continue without it. Oh and also? are my values of width correct? (remember, the left one should be 500px starting from left, and the right one should be 30px from right) I have this feeling it doesn't really fit out in the design ...

Excavator
Feb 19th, 2010, 05:08 AM
Does this work better?


html, body {
height: 100%;
width: 100%;
}

#img_rechts {
position: absolute;
top: 0px;
right: 0px;
height: 100%;
width: 30px;
z-index: 1;
}

onedayhero
Feb 19th, 2010, 12:10 PM
Thank you, Excavator, everything works now.

Now I'm able to continue my work ^^ There's just 1 more bug, I always have a horizontal scrollbar :(

abduraooft
Feb 19th, 2010, 12:25 PM
There's just 1 more bug, I always have a horizontal scrollbar A link to your current page would be very helpful.

Excavator
Feb 19th, 2010, 06:19 PM
Ok so I've tried using your code combining with your stretching images tutorial. This is how I ended up ...


see your post above


The code in that post is invalid. It looks like you are confusing CSS with HTML, ) no-repeat right top" does not belong in the markup.
Maybe it just ended up there when you copy/pasted some code? That's why I suggest using the validators as a splelchecker, to catch little mistakes like that.

Excavator
Feb 19th, 2010, 06:45 PM
Maybe instead of trying to get 2 images to scale... try this instead (http://nopeople.com/onedayhero/).

onedayhero
Feb 21st, 2010, 01:00 PM
Maybe instead of trying to get 2 images to scale... try this instead (http://nopeople.com/onedayhero/).

This is exactly the layer layout I want to start from, you helped me a lot mate! Big thanks to you!