|
| |
|
|
StevieB
Posts: 80
Joined: 8/11/2005
From: Yuma, AZ USA
Status: offline
 |
containers and .whatever - 2/9/2006 17:59:42
Hi all,
I'm working on different styles and I've been looking at other style sheets. Let me say first, I learn from trial and error through application (it just works best for me) and I'm probably missing a basic here. But...
I've seen much mention on containers and wrappers and I haven't got my head around what they are yet, but I'm assuming that they will contain other div tags. For instance I wrote this: /* Layout */
body{
margin: 0;
padding:0;
background: #ffffff;
color: #333333;
}
#tl-head {
position: absolute;
top: 15px;
left: 20px;
width: 200px;
height:94px;
border: 1px solid #dbebdd;
background: #c9e1cc;
color: #5b6b5d;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}
#tr-head {
position :relative;
top: 15px;
margin: 0px 20px 0px 224px;
height:94px;
border: 1px solid #c9e1cc;
background: #dbebdd;
color: #ffffff;
padding: 0px 0px 0px 0px;
}
#head-slogan {
position: absolute;
top: 111px;
left: 20px;
width: 199px;
height:25px;
border: 1px solid #c9e1cc;
background: #dbebdd;
color: #c9e1cc;
margin: 2px 0px 0px 0px;
padding: 1px 0px 0px 0px;
}
#head-bar {
position :relative;
top: 19px;
height:25px;
border: 1px solid #5b6b5d;
background:#c9e1cc;
color: #5b6b5d;
margin: -1px 20px 0px 224px;
padding: 0px 0px 0px 0px;
}
#left-body {
position: absolute;
top: 152px;
left: 20px;
width: 188px;
height:380px;
border: 1px solid #F2E5BF;
background: #FAF5E6;
color: #664D00;
margin: 0px 0px 0px 0px;
padding: 0px;
}
#right-body {
position :relative;
top: 33px;
height:380px;
margin: -2px 20px 0px 225px;
border: 1px solid #F2E5BF;
background: #ffffff;
color: #256A24;
padding: 10px;
}
#foot {
position :relative;
top: 24px;
height:20px;
margin: 20px 20px 20px 20px;
border: 2px solid #c9e1cc;
background: #dbebdd;
color: #256A24;
padding: 0px;
}
Here's the link if you want to see it http://websight101.com/new.html . It's obviosly in the still playing with it stage.
Should I be doing something like adding a #wrapper{rules} and then in the page code something like <div id="wrapper">
<div id="tr-head">
<div id="tl-head">
<div id="head-slogan">
<div id="head-bar">
</div>
? I know that example is wrong cuz I tried it. 
DUMB QUESTION #2
Many of the style sheets I have looked at look like this:.top { background: #EFEFEF; color: #000; font: normal bold 10pt Verdana, Arial, sans-serif; height: 40px;
padding-left: 10px; }
.topright { background: #EFEFEF; color: #000; font: normal bold 10pt Verdana, Arial, sans-serif; height: 40px;
padding-left: 10px; border-right: 1px solid #006; }
.top a:link { color: #000; font-size: 10px; font-weight: bold; text-decoration: none; }
.top a:active { color: #000; font-size: 10px; font-weight: bold; text-decoration: none; }
.top a:visited { color: #000; font-size: 10px; font-weight: bold; text-decoration: none; }
.top a:hover { color: #900; font-size: 10px; font-weight: bold; text-decoration: underline; }
Sorry for my ignorance but is that for <span> <class> or something else and I didn't once see something like #foot {rules} (with the # characture). Am I on the wrong track with my CSS?
Thanks for any help,
Steve
|
|
|
|
Tailslide
Posts: 6003
Joined: 5/10/2005
From: Out here on the raggedy edge
Status: offline
|
RE: containers and .whatever - 2/10/2006 3:17:27
Hi Steve
A container or a wrapper isn't a separate item of markup - it's just a common name given to a div that "holds" all the other divs on the page. It's commonly used so that you can then centre it by using margin:0 auto; or so that you could stick a background image behind it. They're not necessary - just a commonly used method - so you might find a site laid out like this:
<div id="container">
<div id="header">
</div> <!-- end header -->
<div id="contents">
</div> <!-- end contents -->
<div id="sidebar">
</div> <!-- end sidebar -->
<div id="footer">
</div> <!-- end footer-->
</div> <!-- end container -->
the style rules for whole divs are prefixed by a # in the stylesheet like this:
#container {whatever}
If you want to apply a style to more than one div or more than one item on a page then you need to use a "class" instead like this:
.whatever {whatever}
Then you can apply that class to a div, a span, a paragraph - anything in fact.
You can also make the class more specific like this:
#footer .whatever {whatever}
now that span will only work when applied to stuff in the footer div.
All the div names and all the class names are completely arbitary - you make them up.
Just keep the stylesheets simple to start with and gradually add more complicated stuff as you go.
_____________________________
"My strategy is so simple an idiot could have devised it"
Little Blue Plane Web Design | Blood, Sweat & Rust - A Land Rover restoration project
| |
|
|
|
StevieB
Posts: 80
Joined: 8/11/2005
From: Yuma, AZ USA
Status: offline
|
RE: containers and .whatever - 2/10/2006 12:11:59
Tailslide
That makes a lot more sense than what I've been reading, I think I get it.
Thanks for all of the help and patience while I've been learning CSS!
Steve
| |
|
|
|
Tailslide
Posts: 6003
Joined: 5/10/2005
From: Out here on the raggedy edge
Status: offline
|
RE: containers and .whatever - 2/10/2006 12:38:41
No problem Steve - it's not easy when you're starting out. It takes a while to find tutorials/articles etc that you both trust and understand (no point in an article being correct if it's completely impossible to understand).
_____________________________
"My strategy is so simple an idiot could have devised it"
Little Blue Plane Web Design | Blood, Sweat & Rust - A Land Rover restoration project
| |
|
 New Messages |
 No New Messages |
 Hot Topic w/ New Messages |
 Hot Topic w/o New Messages |
 Locked w/ New Messages |
 Locked w/o New Messages |
|
Post New Thread
Reply to Message
Post New Poll
Submit Vote
Delete My Own Post
Delete My Own Thread
Rate Posts
|
|
|
Printable Version 
