CSS issues.. and just some help please [Archive]

Click to See Complete Forum and Search --> : CSS issues.. and just some help please

Kyleva2204

01-20-2007, 06:31 PM

Ok, well.. I am a new person to the whole Web 2.0.. and my site is based back in normal HTML and tables.. so I want to make the nice transition to hot javascripts, and kick@$$ CSS.. So I'm sitting here trying to get this layout to work.. but i'm not exactly sure 100% what i'm doing.. I know CSS, but not that well. So far this is my code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
<meta name="generator" content="Adobe GoLive">
<title>Untitled Page</title>
<style type="text/css" media="screen"></style>
</head>

<body bgcolor="#ffffff">
<div class="top">
<div class="top_body" align="center">
<div class="top_content" align="left">
<ul>
<li id="current">Hello</li>
<li>World</li>
</ul>
</div>
</div>
</div>
<div class="body" align="center">

<div class="content" align="center">

<div class="green_back" align="left">

asdfasdfasdfadf

</div>

</div>

</div>
</body>

</html>

basically, everything works.. but I want to know why the "green_back" wont center completely.. and if there is an easier way to center it.. also for the top List items, if there is a better way to get them to align to the background image.. I have attached a ZIP archive of the images and HTML file.. Any advice or help would be awesome, thanks.

bathurst_guy

01-20-2007, 07:56 PM

First use a valid DOCTYPE (http://www.w3.org/QA/2002/04/valid-dtd-list.html)
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
Then remove bgcolor="#ffffff"and add it into the CSSbody { margin: 0;
background: #fff url(images/background.png) repeat-y center 0;
}Then remove all instances of align="center"and align="left"
And move that to the CSS, like this.top_body {width:100%; height: 100%;text-align:center;}And finally give .green_back a margin: 0 auto;How does that fit so far?

Centauri

01-20-2007, 08:54 PM

To follow on from my fellow Aussie ...... :)

You seem to be making the fatal mistake of trying to define a layout first, then fit some content into it later. You should think the other way - work out what content you want, THEN style it in the manner you would like. You end up with a sleeker, more semantic code that way.

As bathurst_guy said, use a valid doctype. However, for new pages you should use a strict doctype - you aren't transitioning from anything...

Looking at your page so far, we can make some assumptions of basic content layout. If you write content in plain text, and then mark it up to describe the content (h1, h2 etc tags for headings, paragraphs for blocks of text, lists for menu links etc), you can then apply styling. Even if you are going to use graphics for logos etc, the text should still be written for the benefit of search engines, screen readers etc - the text can be hidden in the styling.

An initial text / html mockup of your page without any styling could be <!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>
</head>

<body>
<h1>Page Title</h1>
<ul>
<li>Menu1</li>
<li>Menu2</li>
<li>Menu3</li>
</ul>
<h2>Content heading</h2>
<h2>Green box title</h2>
<p>Green box text paragraphs</p>
<p>another paragraph</p>
<p>Body paragraph</p>
</body>
</html>

You can then look at this and decide logical groupings and enclose those groupings with divs - only use the minimum needed. I also prefer to keep the css in an external css file - makes thing much easier to debug, and allows all pages of the site to access the one file.

So our html with a bit of grouping and a css file link looks like <!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>
<link href="style.css" rel="stylesheet" type="text/css">
</head>

<body>
<div id="header">
<h1>Page Title</h1>
<ul>
<li><a href="#">Menu1</a></li>
<li><a href="#">Menu2</a></li>
<li><a href="#">Menu3</a></li>
</ul>
</div>
<div id="content">
<h2>Content heading</h2>
<div class="greenbox">
<h2>Green box title</h2>
<p>Green box text paragraphs</p>
<p>another paragraph</p>
</div>
<p>Body paragraph</p>
</div>
</body>
</html>
I'll style it in next post

Centauri

01-20-2007, 09:09 PM

You probably would have noticed in your first attempt, that there is a gap between the header bar and top of page - this is caused by the default margins (and padding) the browsers give to various elements. Unfortunately, each browser sets different values, so I start my css by zeroing out these differences.

The body element next gets its background and base font settings.

As the #header extends full width, it is defined outside the content, and given its background, height, and default text colour. Being a div, it will automatically extend the width of its container (the body, or visible screen).

The header title h1 element can be styled as text, or if you like, it can have a size and background graphic with the text indented off the page.

For the navigation, I styled the a tags for text colour, text decoration (link underline), and margins. I then put the links beside each other by floating the li elements left. Finally, I gave the ul element a size, and margins to achieve centering. A :hover on the a element gives a simple rollover.

The #content container is given a width slightly less than the graphic column, and side margins set to auto for centering. The content's h2 header is styled along the same lines as the header, and can easily be a graphic if you like.

The .greenbox div is sized (subtracting amount for padding) to suit background, and again given auto side margins for centering. The contents can also be styled separately as shown.

The css file * {
border: 0;
margin: 0;
padding: 0;
}
body {
background-image: url(images/background.png);
background-position: center top;
background-repeat: repeat-y;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
}
#header {
background-image: url(images/top_header.png);
background-repeat: repeat-x;
height: 64px;
color: #CCCCCC;
}
#header h1 {
text-align: center;
font-size: 24px;
line-height: 45px;
display: block;
}
#header ul {
list-style: none;
display: block;
width: 674px;
margin: 0 auto;
padding-left: 20px;
}
#header li {
float: left;
}
#header a {
text-decoration: none;
margin: 0 10px;
color: #CCCCCC;
}
#header a:hover {
color: #FFFFFF;
}
#content {
width: 660px;
margin: 0 auto;
}
#content h2 {
font-size: 22px;
text-align: center;
color: #009933;
margin: 10px;
}
#content p {
margin-bottom: 10px;
font-size: 14px;
}
#content .greenbox {
width: 595px;
height: 185px;
margin: 20px auto 20px;
padding: 12px;
background-image: url(images/green_back.png);
background-position: center center;
background-repeat: no-repeat;
}
#content .greenbox h2 {
color: #FFFF99;
font-size: 20px;
margin: 6px;
}

Hope this makes sense..

Cheers
Graeme

Kyleva2204

01-20-2007, 09:29 PM

thanks man.. I actually have a dynamic website this is going with, but I get what ya mean with the whole make content first. :).. I'm right now reading all your CSS.. Its pretty sweet.. Thanks a lot, lets hope I learn somestuff :)