containers and .whatever

All Forums >> [Web Development] >> Cascading Style Sheets

Message

StevieB -> 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. [8|]

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 -> 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.

StevieB -> 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 -> 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).

Page: [1]

0.0625