Website Design Forum

**mikehende** · 02-23-2009, 03:38 PM

I need to apply what I have read on HTML and CSS, I wish to start from the very basics and build on that step by step so I will appreciate some help and patience please to make sure I understand every symbol in a code.

First thing, what's the very first things you pro's do when planning to build a site? Do you draw out layout on paper?

**mikehende** · 02-24-2009, 01:31 PM

I used divs to create blocks but I am only seeing the 'text" from the coding, I wish to "see" the blocks as in a template where you can see each block clearly outlined, how can I do so?

**LadynRed** · 02-24-2009, 02:46 PM

Best way to do that is to apply a background color, temporarily, to your divs so you can see where things are falling. I also use borders, but borders add to the width of the divs, so a bg color is a better tool for 'seeing' how things are laid out.

**mikehende** · 04:51 PM

Any idea why this is not working please? As you can see, I have placed the bgcolor within the divs but I am seeing the entire page's background color changing instead?

Quote:

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

"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title></title>
</head>
<body>
<div id="wrap">
<div id="header" bgcolor="green">Header information goes here.</div>
<div id="nav" bgcolor="blue">Left column content goes here. You'll need to adjust the

column width in the CSS part.</div>
<div id="content">Right column content goes here. You'll need to adjust the column width in

the CSS part.</div>
<div id="footer">Footer contents go here.</div>
</div>
</body>
</html>

**mikehende** · 02-24-2009, 05:08 PM

Actually, looks like the "bgcolor" coding tag does not work for this? I tried using

<div style="background: green">

and this works.

Quote:

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

"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title></title>
</head>
<body>
<div id="wrap">
<div id="header"<div style="background: green">Header information goes here.</div>
<div id="nav"<div style="background: blue"> >Left column content goes here. You'll need to

adjust the column width in the CSS part.</div>
<div id="content"<div style="background: yellow"> >Right column content goes here. You'll

need to adjust the column width in the CSS part.</div>
<div id="footer"<div style="background: red"> >Footer contents go here.</div>
</div>
</body>
</html>

**fitnfree** · 02-24-2009, 05:31 PM

I believe the "bgcolor" tag has been deprecated...anyone, do correct me I'm wrong on that, but I think that's correct. I do know it won't work with CSS but see you've found that out already!

**mikehende** · 06:01 PM

The code above is giving 3 "parallel" sections, one on top of each other, I want to create 3 blocks. A rectangular block from left to right of the page for the header on top of the page and then 2 square blocks [left and right] underneath sort of like a table top resting on 2 blocks. What coding would I need to see this on a page please? Or can this only be done through css?

**mikehende** · 02-24-2009, 06:52 PM

I am being told that I can only get the above with css coding, is that correct?

**chrishirst** · 02-24-2009, 07:01 PM

HTML Code:

<div id="wrapper">
<div id="pg_header">Page Header</div>
<div id="right">Right Leg</div>
<div id="left">Left Leg</div>
<div id="pg_footer">Page Footer</div>
</div>

CSS

Code:

html, body {
    height:100%;
}
#wrapper {
    position:relative;
    height:100%;
    width:968px;
}
#pg_header, #pg_footer {
     width:100%;
}
#pg_header {
     height:100px;
}
#pg_footer{
    clear:both;
}
#right, #left {
     height:100%;
     width:45%;
}
#right {
    float:right;
}
#left {
    float:left;
}

Not actually tested BTW

**mikehende** · 02-24-2009, 07:59 PM

Thanks, I will try this out tomorrow, let me address my other questions in the CSS forum.

**mikehende** · 02-25-2009, 11:47 AM

I pasted the html code you listed into the body of the index file and the css code into an external stylesheet but don't see any blocks or borders only the text, does it work with anyone else please?

**chrishirst** · 02-25-2009, 11:58 AM

Simply add borders and colour into the CSS rules, it's just a skeleton layout as it stands.

The idea is that you learn by changing things for yourself and noting what happens. You can't "break" anything permanently

**mikehende** · 02-25-2009, 12:16 PM

ok, understood, thanks, I will go look into that now.

**LadynRed** · 02-25-2009, 01:10 PM

Your code here is incorrect.

Quote:

Needs to be <div id="header" style="background: green;"> if you're going to do it in-line like that.

**mikehende** · 02-25-2009, 06:09 PM

Quote:

Originally Posted by chrishirst

HTML Code:

<div id="wrapper">
<div id="pg_header">Page Header</div>
<div id="right">Right Leg</div>
<div id="left">Left Leg</div>
<div id="pg_footer">Page Footer</div>
</div>

CSS

Code:

html, body {
    height:100%;
}
#wrapper {
    position:relative;
    height:100%;
    width:968px;
}
#pg_header, #pg_footer {
     width:100%;
}
#pg_header {
     height:100px;
}
#pg_footer{
    clear:both;
}
#right, #left {
     height:100%;
     width:45%;
}
#right {
    float:right;
}
#left {
    float:left;
}

Not actually tested BTW

So basically, to get the 3 outlined blocks I am seeking, you absolutely need to set the "foundation" first in HTML which is why you created the "right leg and left leg"? Is this correct? Also, does this mean that if you did not create that specific HTML code, that this could NOT be done using CSS alone?

**chrishirst** · 02-25-2009, 06:59 PM

CSS is merely a way of styling HTML, it cannot be used to create a document.

HTML is the Bricks, Woodwork and Plaster, CSS is the Paint, Wallpaper and Furnishing.

It doesn't HAVE to be that specific code or structure, that was simply plucked out of my head as a basic two equal column layout.
If I spent more than a couple of minutes setting out a layout for a two column (navigation down one side, content down the other) template the skeleton would be even more minimalistic.
eg:
wrapper element;
page header div;
a list structure for the nav
the content would then be either floated around the nav or in a separate container.

**mikehende** · 02-25-2009, 07:35 PM

Ok, appreciate the help, before I should move on to CSS, can you or anyone else give me a complex layout [ test] to construct so I can try it and see just how much I understand HTML please?

**chrishirst** · 02-26-2009, 03:25 AM

Take a look at -> http://www.webmaster-talk.com/html-f...e-code-my.html