Log in

View Full Version : Where do I start? - new to CSS


Eternal_Howl
10-24-2007, 05:42 AM
My whole reasoning for needing to learn CSS is so that I can use that instead of tables which obviously affect how long it takes and what is displayed when nested tables load.

I'm looking around the internet and I need a quick start tutorial that gets me into it straight away. I know what I want in terms of layout, but achieving it is another matter.

A header
A left column (for navigation) and a right column for the main content
A footer

I've come across terms like divs, containers and wrappers etc.

Can someone point this ignoramus in the right direction so that I can be less ignorant and get to know what I'm doing?

From what I'm guessing it's a matter of defining page elements within either the css tag on a page or linking to an external .css

.header

.navigation
position
etc etc etc

.main content

.footer

and somehow applying the attributes required.

I also need to know which is best: relative or fixed? I want the page to display with the same layout regardless of an individual's screen resolution. (You can see I'm a lil green around the gills here :)

I usually manage to tweak prewritten codes etc, but would be good to be able to Do it myself instead of relying on someone else's stuff. I need a quick start guide that throws me in and gives me results without confusing me...your help would be appreciated.
Eternal_Howl
10-24-2007, 08:01 AM
Okay, so I'm started - very slowly, very painfully. For some reason I can't get my background colour to show black - it's still white.

But that will no doubt be easy to fix.
My first major hurdle/issue
I want two columns. So I've put a div class with stuff all attributes. It's just there and it's on the left where it should be. I'm happy with that.
And unless I figure this out before someone answers it (I'll let you know) - how do I get the column on the right (which will be the main content) to stay where it is so it displays in proportion no matter screen resolution? I don't want it to end up way over on the left or everything too spread out if someone has a higher screen resolution than say 800 x 600. I'm still surfing the web, but this is a big question and puzzle - although it's probably quite obvious to those who are proficient in CSS.

I hope I made sense. This doesn't!
jc_gmk
10-24-2007, 08:11 AM
Here are some templates you can use:

http://www.dynamicdrive.com/style/layouts/category/C9/

Just by looking at the code should give you some idea how to do the rest of the css.

Also there is some good info here: http://www.w3schools.com :)
Eternal_Howl
10-24-2007, 08:19 AM
Thanks JC. I did have a gander at the dynamic drive link you gave me. I guess I didn't realise it would be like going right back to basics and learning EVERYTHING. You know, yo uget through HTML, you can slap a bit of css in here and there where needed but now I'm actually trying to format using the css instead of traditional tables and while I stare at the templates, I dunno - I feel real thick today. I'll go check out the w3schools. That's been around for eons. Cheers :)
Eternal_Howl
10-24-2007, 09:21 AM
To give you an idea of what I am trying to achieve in CSS, I'll post the equivalent in html
<table border="0" cols="2" width="100%">
<tr><td width="30%">Navigation </td>
<td width="70%">
Content
</td>
</tr></table>

That's about as simple as I can make it in HTML - but the point being is I want to eliminate using tables and use CSS instead.
tech_support
10-24-2007, 09:23 AM
<!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>Layout</title>
<style type="text/css">
body {
background-color:#000000; /* Sets background colour to black */
}
#header {
height:70px; /* height of the header */
}
#nav {
float:left; /* Floats the <div> to the left side of the document */
width:30%; /* Sets the width to 30% */
}
#content {
float:right; /* Floats the <div> to the right side of the document */
width:70%; /* Sets the width to 70% */
}
</style>
</head>

<body>
<div id="header">Header</div>
<div id="nav">Navigation</div>
<div id="content">Content</div>
</body>
</html>
Eternal_Howl
10-24-2007, 09:31 AM
Hey Mr Tech Support -

Thank you for that. I'm going to try it out and see how that gets me. I've been scouring and reading all kinds of pages and for some reason I couldn't find something that looked as simple as that.

I've been putting off learning CSS for a LONGGGGG time. I relied on web tutorials and the habit of repetition for HTML and thought CSS would have been just as straight forward.

I'll give this a shot and let you know how I get on. Thanks.
boogyman
10-24-2007, 12:38 PM
body {
background-color:#000000; /* Sets background colour to black */
}
#header {
height:70px; /* height of the header */
}
#nav {
float:left; /* Floats the <div> to the left side of the document */
width:30%; /* Sets the width to 30% */
}
#content {
float:right; /* Floats the <div> to the right side of the document */
width:70%; /* Sets the width to 70% */
}
</style>


using 30% / 70% widths looks like it would do the trick but once against IE's rendering engine screws things up. I have found that every time I reduce the browser width in the one of the elements falls under the other. Thus creating the problem. To fix this I usually leave 5% padding one way or the other, and I have found that it fixes the problem in IE
Twey
10-24-2007, 05:48 PM
If you're looking for a tutorial, the ones at http://www.howtocreate.co.uk/ (read the "site design" tutorial too) are the best on the web, as far as I'm aware.
ReMaX
10-24-2007, 09:23 PM
Okay, Tech_Support told you the basic structure of css.
Here I'll give you two links to get further information:
http://www.selfhtml.org
- I don't know if you speak german or french but this is a very good HTML and CSS encyclopedia.
http://www.cssplay.co.uk
- This is a very interesting page concerning special triggers and the real bandwidth of css by Stuart Nichols! Check this page and you'll love him! :D

greetings
Max
Eternal_Howl
10-25-2007, 05:44 AM
Thanks guys. Yeah I'm finding the content is winding up at the bottom of the page and not at the top where i want it to be (in line with the navigation etc). I'm still plugging away. Going to have a look at the How to create link now.
Eternal_Howl
10-25-2007, 05:54 AM
I guess there's one main question I Have right now.

In tables you do this to achieve what you want that will fit in with all resolutions without losing its alignment in proportion with the rest of the page:
<table border=0 cols=2 width="100%">
<tr>
<td width="30%"> </td>
<td width="70%"></td>
</table>
Then you can do another table with the same variables if you want. I know, bad form and that's what I'm trying to get away from, but I need to be able to make it so that the top positioning of the header is like a table with two cols and the nav and content is the next table (with same widths).

Do you see what I mean?

Problem I'm getting and the problem I foresee is if i specify how many pixels from the left etc, various browsers and resolutions will reformat the layout rather than just displaying it how I intended it to be displayed. My layout is pretty simple - it's not hard. Image on the left. Image to the right (but centered relative to a 70% col width on the right side).

Does that make sense?
Eternal_Howl
10-25-2007, 07:58 AM
Okay, I think I've got it.
I've been trying to make things too difficult.
<Center> tags within the <div> tags still function well and it's going to plan.

Thank you for your help. It will take me a bit to tweak it and no doubt I'll still have some hurdles but thank you all for your assistance.
boogyman
10-25-2007, 11:51 AM
Okay, I think I've got it.
I've been trying to make things too difficult.
<Center> tags within the <div> tags still function well and it's going to plan.

Thank you for your help. It will take me a bit to tweak it and no doubt I'll still have some hurdles but thank you all for your assistance.

but you are still using the extra tag, which you do not need to. if you would just like to center the div you can use


div {
margin: 0 auto;
width: ____;
}
Twey
10-25-2007, 03:57 PM
I think you mean something like:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Some Site :: Lorem Ipsum</title>
<style type="text/css">
.nav {
/* Leave a bit for padding and margins,
in real sites I usually destroy all
padding and margins then build
them back up as necessary. */
width: 25%;
float: left;
}
.content {
width: 65%;
float: left;
}
</style>
</head>
<body>
<div class="header">
<h1>Some Site</h1>
<h2>Lorem Ipsum</h2>
</div>
<div class="nav">
<ul class="nav-top">
<li>Lorem
<ul>
<li>
<a href="ipsum">Ipsum</a>
</li>
<li>
<a href="dolor">Dolor</a>
</li>
<li>
<a href="sit">Sit</a>
</li>
<li>
<a href="amet">Amet</a>
</li>
</ul>
</li>
<li>Ut
<ul>
<li>
<a href="nec">Nec</a>
</li>
<li>
<a href="dui">Dui</a>
</li>
<li>
<a href="ut">Ut</a>
</li>
<li>
<a href="justo">Justo</a>
</li>
<li>
<a href="vulputate">Vulputate</a>
</li>
<li>
<a href="imperdiet">Imperdiet</a>
</li>
</ul>
</li>
</ul>
</div>
<div class="content">
<h3>Lorem Ipsum Dolor Sit Amet</h3>
<p><a href="#lorem">Lorem</a> ipsum dolor sit amet, consectetuer adipiscing elit. Ut nec dui ut justo vulputate imperdiet. Maecenas ut justo. Maecenas mauris turpis, lacinia id, lacinia eu, luctus ac, metus. Mauris vel mauris. Pellentesque pulvinar dolor id lectus. Mauris sed ipsum. Sed id urna sed ipsum aliquam malesuada. Ut sagittis mi <a href="quis">quis</a> felis. Etiam diam. Suspendisse potenti. Quisque feugiat feugiat elit. Ut cursus, purus vitae laoreet porttitor, tellus sapien aliquam mauris, quis volutpat quam lectus a nisl. Aenean malesuada massa laoreet sem. In et <a href="magna">magna</a> in nisl consequat rhoncus. Curabitur porta quam quis lectus rutrum posuere. Curabitur nonummy. Mauris sit amet quam eget massa feugiat sollicitudin. Maecenas gravida ornare sapien. Donec sit amet ligula id orci congue ultricies. Cras tristique egestas est.</p>

<h3>Vestibulum Mollis Pharetra Nunc</h3>
<p>Vestibulum mollis pharetra nunc. Fusce nonummy ultrices urna. Ut sodales ipsum in diam. Nam quam. Aliquam vel arcu ac lorem ultricies ultrices. Vivamus id enim quis nisi rhoncus sagittis. Nulla neque. Integer sapien. Vestibulum adipiscing. Proin vehicula purus in erat. Nulla in justo. Quisque ac sapien. Suspendisse potenti.</p>

<h3>In Hac Habitasse Platea Dictumst</h3>
<p>In hac habitasse platea dictumst. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc vel elit. Nulla justo. Nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec cursus purus at leo. Curabitur non metus. Ut consequat, ligula a porta venenatis, pede turpis consequat dolor, ut egestas turpis odio ut magna. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>

<h3>Pellentesque Ut Dolor</h3>
<p>Pellentesque ut dolor. Vivamus quis turpis vel lorem convallis pulvinar. Donec aliquet. Praesent consectetuer. Etiam quis neque sed lectus mollis porttitor. Etiam fermentum lacinia eros. Duis sit amet ante eget neque adipiscing bibendum. Integer bibendum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris in justo sed mi gravida eleifend. Pellentesque quis pede. Aenean quis dolor. Vivamus dictum sem quis nulla. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus consectetuer dolor sed elit.</p>

<h3>Fusce Sed Nunc Non Orci Feugiat Blandit</h3>
<p>Fusce sed nunc non orci feugiat blandit. Curabitur sapien nisl, pretium quis, auctor at, viverra in, arcu. Sed blandit. Quisque nibh mi, interdum quis, ultricies sed, pulvinar at, nulla. Phasellus dictum magna at lorem. Nam pellentesque. Suspendisse rhoncus facilisis risus. Nam fringilla commodo augue. Sed sed augue a dolor hendrerit varius. Sed vehicula, felis nec adipiscing ultrices, tortor sapien ullamcorper pede, ac consectetuer lorem velit a augue. Vivamus ante. Donec gravida nunc vel nisl. Nam aliquet dictum purus. Donec feugiat neque in leo. Duis blandit. Quisque pellentesque lorem at dui. Vivamus nec orci cursus augue placerat mollis. Cras gravida eleifend odio. Nam pretium nisl eget leo. In non sapien.</p>
</div>
</body>
</html>
Eternal_Howl
10-30-2007, 04:42 AM
Hey there,

I've been fiddling and this is what I've got so far:
Everything seems to work except the scroll bar colours (I know, it's frivolous and doesn't work on all browsers). But I've noticed I have white dots next to my nav menu, which I am deliberately linking to an external style sheet for so that all I have to do is edit that one page when I need to do an update.

Can anyone see WHY my scrollbars aren't working? I only ever find examples of scroll bar colour manipulation in a body tag with no other font etc attributes.




<STYLE type="text/css">
Body{ background-color:#000000;
color:#ffffff;
font-family: garamond, georgia, verdana, serif;
font-size: 12pt;
font-weight: normal;
scrollbar-arrow-color: #ffffff;
scrollbar-track-color: #000000;
scrollbar-face-color: #000000;
scrollbar-highlight-color: #ffffff;
scrollbar-3dlight-color: #000000;
scrollbar-darkshadow-color: #000000;
scrollbar-shadow-color: #ffffff; }

A { color: #ffffff; font-weight: bold; text-decoration: none }
A:link { color: #ffffff; font-weight: bold; text-decoration: none }
A:active { color: #ffffff; font-weight: bold; text-decoration: none }
A:visited { color: #ffffff; font-weight: bold; text-decoration: none }
A:hover { color: #FFFFCC; font-weight: bold; text-decoration: underline}
a:img { border: 0;}


#wrapper {
width:90%;
position: relative;
}

#content {
width: 75%;
float: right;

}

#menusection {
width: 20%;
float: left;
}

#menu {
link href:"/vmenu.css";
}

#footer {
float:center;
width: 100%;
clear: both;
}

</style>


I've tried it with those funny <!-- and --!> declarations but it doesn't make a difference.
tech_support
10-30-2007, 05:45 AM
CSS Scrollbars are IE only.

and <!-- and ---> is for comments. It doesn't get read.
Eternal_Howl
10-30-2007, 05:57 AM
I use IE - so I should see them if I've done it right. It used to work before I started actually writing CSS as in a proper style sheet - used to use the code-snippets and had no problems.