Trying to learn CSS

J

jeanm

Member
As suggested by forum members I'm trying to learn HTML and CSS so I can totally update my three web sites. I understand tables are not the way to go unless you have to use them and then they should be used via CSS.

My question is: when I first design the layout of the site template should I be using CSS in this instance or HTML like I did way back?

I want a site with a width of 900 px with something like a header and menu up top and a footer down below. I can't seem to get off go because I can't find the answer anywhere online.

Also, when creating tables should I be using pixels or percentages when I set dimensions please? :confused:
 
smoovo

smoovo

New Member
Don't be confused. The reason of inventing CSS was to make life easier... :).

The thing is that you can use divs instead of tables. Search online for "div float tutorials", and start learn how to use it. After short practice you will get the touch and it will flow...

In CSS you can use both percentage or pixels, but you sure can set your container div to be "width:900px;"... ;)

- Enjoy.
 
W

wishbone

New Member
Depends on your skill, for newbies to learn fast, start with building first the site then study how to implement CSS... kinda long time to work but worth for experience.
 
J

jeanm

Member
I've been looking at a video tutorial on building web sites this afternoon and I've been working on divs. Finally the penny is dropping with me. I've realized that instead of using a table to create a template I do it with divs.

Smoovo are you saying that I should have one one big div to create the outer boundary of the template and then smaller ones inside to make up headers, index, content etc?? What do I put in the div to make the vertical direction unlimited in size?
 
anna

anna

New Member
You can also see the list of resources at the top of the page; invaluable stuff. Good luck!
 
D

dzwestwindsor

New Member
Jeanm,

Good questions.

If I were you, I would define a "container" div, and center that on the page.

Code: 
#container {

left-margin: auto;
right-margin:auto;

/** that centers the div, and this is a comment **/

background-color: [I]COLORHERE[/I];
width: 900px;
[B]height: auto;[/B]

}

I would then put everything within that container div. Header, body, sidebar, etc.

Good luck

-d
 
smoovo

smoovo

New Member
Yes, you should have container div, it will contain all the content divs. the header will be also some header container. Like this example... (just example)

HTML: 
<div id="container">
    <div id="header">
        <div id="logo"></div>
        <div id="menu"></div>
    </div>
</div>

When you get this, it's very simple and useful and very flexible. Just read a little about divs at the W3C website to be more aware of small (BIG) issues. One of them is that padding size added to the original size, so width 100px with padding 10px is 110px size div... And there is more... ;)

- Enjoy.
 
J

jeanm

Member
I've hit a stumbling block. Somehow my text is running outside the divs. Does anyone know what I've done wrong please? Please feel free to point out other errors too.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">



<html>
<head>
<style type="text/css">
div.container
{
width:900px;
height:auto;
margin-top:0px;
margin-right:50px;
margin-bottom:5px;
margin-left:50px;
border:1px solid maroon;
}



div.header,div.footer
{
padding:0.5em;
color:yellow;
background-color:eek:live;
}


h1.header
{
padding:0;
margin:0;
}



div.left
{
float:left;
width:160px;
height:auto;
margin:0;
padding:1em;
}



div.content
{
height:auto;
margin-left:190px;
border-left:1px solid gray;
padding:1em;
background-color:yellow;
}


h2.header
{
padding:0;
margin:0;
}



</style>
</head>
<body>



<div class="container">


<div class="header"><h1 class="header">My New Way Of Making Web Sites</h1></div>


<div class="left"><p>Our pressed tin ceilings and tin walls are manufactured from aluminum so they won't give you any rust problems in years to come.xxxxxxxxxxxxxxxxxxxxxxx</p></div>


<div class="content">
<h2>Free Web Building Tutorials</h2>
<p>Ceiling tin is also known as tin tiles, pressed metal and pressed tin. These words are used inter-changeably on this site. They are all correct depending on which part of the world you live in.

Tin ceiling tiles are the best product to use if you want a decorative interior finish for walls or ceilings. Whether this is a DIY job or whether you are calling in the professionals you must have a serious think about using tin ceiling tiles rather than sheetrock or plasterboard.

vvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvv
vvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvv</p></div>


<div class="footer">something is wrong with my x's and v's</div>






</div>

</body>
</html>
 
J

jeanm

Member
No worries - I figured it out. I didn't have spaces in amongst the x's and y's. Have I got any unnecessary code in there? Or something essential that I've missed? I want to get this basic understanding right before I proceed any further. Thx, Jean.
 
You must log in or register to reply here.
Top