hello, could someone please help me :(

**hellhound121** · 05-13-2006, 01:07 AM

hey all, ok looking at some of these post my problem seems so stupid

, anyways. im new to CSS, i uset to use tables for image layouts. but many have said CSS is better, and it is as i have been learning some, but im very stuck on some stuff, E.G, like how to position text, how to position images and put text on them. without using tables. if you could post some sites that have some easy to follow-well explained-examples, then it would be very greatful ^^

one more thing, if you could code this layout i made in CSS not using tables, and leave comments on why, and what the code does. it would be very geatful too

Thankyou for all your help x anna x

**dynamic_coder111** · 05-13-2006, 02:24 AM

Here is a good one:
http://www.w3schools.com/css/default.asp

**hellhound121** · 05-13-2006, 03:30 AM

i have been there, but its not teaching me what i want to know

**jscheuer1** · 05-13-2006, 08:21 AM

I'm really learning more and more of this all the time myself. I came up with this that closely mimics your image. There could easily be better ways to do it:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en" dir="ltr">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
body {
margin:0;
padding:0;
}

.header a{
color:#fff;
background-color:#374461;
text-decoration:none;
}

.header {
position:relative;
height:2.5em;
font-family:verdana, arial, sans-serif;
font-size:.9em;
padding:0 5px;
color:#fff;
background-color:#374461;
border-bottom:1px solid #576178;
}
.header div {
position:absolute;
top:50%;
margin-top:-.55em;
}

.leftc, .rightc {
font-family:verdana, arial, sans-serif;
font-size:.9em;
height:36em;
border-top:1px solid #000;
}

.leftc div, .rightc div {
padding:0 5px;
}

.leftc {
float:left;
width:20%;
color:#fff;
background-color:#555454;
}
.rightc {
float:right;
width:80%;
color:silver;
background-color:#fff;
}

.footer {
clear:both;
height:1.5em;
position:relative;
font-family:verdana, arial, sans-serif;
font-size:.9em;
padding:0 5px;
color:#fff;
background-color:#374461;
}

.footer div {
position:absolute;
bottom:0;
}
</style></head>
<body>
<div class="header">
<div>Website Name &nbsp;- <a href="#">Home</a> - <a href="#">Link</a> - <a href="#">Link</a> - <a href="#">Link</a> - <a href="#">Link</a> &nbsp;- <a href="#">Home</a> - <a href="#">Link</a> - <a href="#">Link</a> - <a href="#">Link</a> - <a href="#">Link</a> - </div>
</div>
<div class="leftc">
<div>navigation</div>
</div>
<div class="rightc">
<div>content</div>
</div>
<div class="footer">
<div>Footer</div>
</div>
</body>
</html>

**hellhound121** · 05-13-2006, 02:24 PM

thanks so much jscheuer1

, this is exactly what i need, could you explain why there is like three .headers? and leftc, and rightc? that would be great.

**Twey** · 05-13-2006, 02:29 PM

could you explain why there is like three .headers?

There's only one header. Of three blocks whose selectors start with header, two apply to different elements within header.

leftc, and rightc?

Left column, and right column.

**hellhound121** · 05-13-2006, 04:45 PM

XD ^^ okay well can you explain, elements in elements, or what you said hehe. everything helps me. i now know. padding and margins are used for more than juat adding width to text.

**Twey** · 05-13-2006, 04:55 PM

Well:

Code:

.header {
  background-color: black;
}

...

<div class="header"><a>Something</a></div>

Then that DIV will have a black background. However, if we use:

Code:

.header {
  background-color: black;
}

.header a {
  background-color: red;
}

... then the <div> element will have a black background, but the <a> element will have a red background. Yes?

**hellhound121** · 05-13-2006, 06:00 PM

yeah i think i get it, can you explain more

im getting the hang of it. so will be nice to know more about it. thanks

**jscheuer1** · 05-13-2006, 06:52 PM

You probably know this but, for the OP's information:

Twey, in your example, you have specified background colors with no foreground color. Not supposed to do that, if the user has a foreground color set in their configuration that matches your background - instant invisible text. If you set one color, set them both.

Using various selectors to control what is going on inside an element is fairly common. For example:

.header div

selects divisions that are one level or more inside the header class element. You can even use a selector like:

.header div div

to reach only those at least two levels deep.

Other multiple selectors are used to set properties common to two elements:

.leftc, .rightc

selects both of those classes for common definitions.

I played around with this a bit more and discovered a slight rendering glitch in Opera for which I made the below change (red), a bit of a compromise - a black left border might be better, or you can leave it out but, then there will be a 1px white dot in the top border for the columns in Opera. It has to do with the way Opera does top borders. There is probably a better solution like scrapping the top border for the columns and inserting a one pixel high division above them but, that is not ideal either. I also noticed that I left out a space for the '.header a' selector (inserted below, see green highlight) that is bad practice due to an IE bug that doesn't come into play in this particular case. Finally remembering that em units for font size can cause problems when they are nested in IE and the user resizes the view, I've changed those to %. Here is the updated style:

Code:

body {
margin:0;
padding:0;
}

.header a {
color:#fff;
background-color:#374461;
text-decoration:none;
}

.header {
position:relative;
height:2.5em;
font-family:verdana, arial, sans-serif;
font-size:90%;
padding:0 5px;
color:#fff;
background-color:#374461;
border-bottom:1px solid #576178;
}
.header div {
position:absolute;
top:50%;
margin-top:-.55em;
}

.leftc, .rightc {
font-family:verdana, arial, sans-serif;
font-size:90%;
height:36em;
border-top:1px solid #000;
}

.leftc div, .rightc div {
padding:0 5px;
}

.leftc {
float:left;
width:20%;
color:#fff;
background-color:#555454;
}
.rightc {
float:right;
width:80%;
color:silver;
background-color:#fff;
border-left:1px solid #555454;
margin-left:-1px;
}

.footer {
clear:both;
height:1.5em;
position:relative;
font-family:verdana, arial, sans-serif;
font-size:90%;
padding:0 5px;
color:#fff;
background-color:#374461;
}

.footer div {
position:absolute;
bottom:0;
}

Thread: hello, could someone please help me :(

Thread Tools

Search Thread

hello, could someone please help me :(

Bookmarks

Bookmarks

Posting Permissions