PDA

Click to See Complete Forum and Search --> : Several CSS questions.

OM2
11-13-2007, 07:45 PM
I've got a few CSS questions.
I wasn't sure whether to ask all in one go... or seperate messages...
I thought I'd try in mesage first. :)

1.
I want to have the top part of my screen be one colour.
Say, the top 300 pixels.

I want to have the remaining bottom part to be another colour.

I also want a white line seperating the top and bottom.

How do I do this?

2.
I want similar to the above, but, I want the top part to be 2 colours.

How do I do this?

3.
I want to have a shadow line below the top part.
What's the best way to do this?

4.
If I want to have a shadow all around my content, how do I do this
For example, let's say my content was on white, which sat in the middle with a grey background.
I want to have a shadow go all around the white part.

5
In CSS... what parameters can I specify for the body?
I always want to have my background take up the whole browser screen edge to edge.
What parameter do I need for this?

Thanks.


OM
Centauri
11-13-2007, 09:45 PM
1. Depends somewhat on what your content is. If the top coloured section is to contain separate content, like a header for the page, then a header div with suitable colour and bottom border will do what you want. The bottom colour will simply be the body colour :<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
<!--
* {
margin: 0;
padding: 0;
}
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
color: #FFFFFF;
background-color: #003399;
}
#header {
height: 300px;
background-color: #990000;
border-bottom: 3px solid #FFFFFF;
}
-->
</style>
</head>

<body>
<div id="header">
<p>Header content here</p>
</div>
<div id="content">
<p>Bottom content here</p>
</div>
</body>
</html>
If, on the other hand, the colour split was not actually defining content areas, then it could be done as a background graphic - a 10px wide by 300px or so graphic which will contain the top colour and the divider line, can be tiled across the page like :body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
color: #FFFFFF;
background-color: #003399;
background-image: url(background-graphic.jpg);
background-repeat: repeat-x;
}


2. Again, depending on content and how you want the colours to be displayed, this could be done with graphics or just background colours on content elements.

3. A shadow below the top part (assuming my first example above), could be done by applying a bottom aligned tiled graphic to the background of the header :#header {
height: 300px;
background-color: #990000;
background-image: url(divider-and-shadow-graphic.jpg);
background-position: center bottom;
background-repeat: repeat-x;
}


4. This varies considerably, depending on the action of the centre container. If the container is a fixed width, a narrow slice vertically-repeated graphic could be applied as a background to the container to provide the side shadows, while the top and bottom graphics could be backgrounds of the first and last items contained within. Alternately, if the container is a fixed size, one background graphic on it can provide the shadows. If the container is fluid both ways, then the techniques become more complex.

5. If you are trying to get a background image to always be the full screen size (stretching as required), then this cannot be done as a background image. While you could use an <img> tag with width and height set to 100%, and all the content positioned over top of this absolutely, the effect of the image resizing with browser window size is aggravating and contrary to what is expected (that different window sizes will show more of less of the site, including the background).
ray326
11-13-2007, 09:45 PM
Might I suggest reading through http://alistapart.com/articles/holygrail and other page layout articles there?

1. Use a background image that doesn't repeat vertically or a banner div followed by a content div. Use either a top or bottom border.
2. Use a two color background image.
3. Use a background image to represent the shadow.
4. There is an article on that at alistapart. Just search for shadows.
5. In general check http://www.w3.org/TR/CSS21/ for style application. Again the style you're looking for is background-image.