Starting my first real CSS site

[CamarotaDesign]

I know this is a noob question, and I'm still learning CSS and coding html (the correct way) but I was wondering if you guys have some ideas as to the best way to format this site using CSS? I have been struggling along, but I'ts taking a while and I'm in need of your awesome expertise.

One thing going on in this template is that I want the main area (the part with the jet powered cooper) to have 3 columns for text or images, but I want them to all share the same background image (the jet cooper in this example) and be able to write text atop that.

The nav bar is going to be a simple CSS drop down like something from www.pmob.co.uk (http://www.pmob.co.uk), I'm also trying to fit the design into a template design he has there as well, but its going slow.

Any and all your help is greatly appreciated

http://www.marketingexpertsinc.net/images/webtemplate3.jpg

[Neballer]

http://www.glish.com/css/7.asp - this should help with the three colums. For the background either slice up the background in 3s, or nest the three columns in side another div with the background.

[CamarotaDesign]

Thanks a lot Neb! Even though the holy grail wasn't what I was looking for that site was great and I got what I needed. Today was a huge learning experience.

If you and any of the other pro's can take a look at the markup and give me a critique, I would really appreciate it.

My First CSS from Notepad page (http://www.marketingexpertsinc.net/css_site)

XHTML Valid, yeah babY!!!!

I learning to speak CSS !!!! wooohoo!

[resdog]

Here's my comments on your CSS.

Know when to use class and id's. It looks like all of your selectors should be ids, not classes. Classes are reusable on the page, id's are not. And since each of your classes are for a specific place on the page (topcontainer, bottomcontainer), they should be switched to ids.

With the background image: What I usually do, if I want the start of a gradient, but don't to have one with an enormous width, is I make the gradient how I want (gray to black in your case), then I crop away the excess black and take it down so it's only one pixel width. And I save it as a jpg, not gif. This reduces the size of the background from 1.492k to 439 bytes. Then the css would look as follows:

body{background: #000 url(gradientbackground.gif) repeat-x;}


I know in the overall scheme of things, this size difference doesn't matter, just something I do, and thought I would share.

Just going by what you have, but you are accessing <h1> three times and you only need one, since you only have one <h1> in your markup.


p,h1,pre {margin:0px 10px 10px 10px;}
h1 { font-size:14px;
padding-top:10px;
}

#contentheader h1 {font-size:14px;
padding:10px;
margin:0px;
}


You can take out the h1 in the first one (p,h1, pre) and remove the second one completely, as the third one addresses the same properites, and hence has specificity.

Why do you include an inline css style in your html markup (p style="text-align:left; margin:0px")? This style should be contained in your stylesheet.

Just a couple of observations. Hope this helps you.

[CamarotaDesign]

Thanks Resdog,

Ok, first off, the original code I got this out of was all done in IDs, no classes. I've been learning along the way, but I found that out about ID's only being used once. So I changed those two bottom selectors to classes because I used them as floats for containing the bottom and top rounded edges of the page. I'll definately be changing everything to a class in the next update. When is an ID necessary to use?

The reason for the inline style is because I am using the float of the same class for the top and bottom (4 times total) to acheive the rounded edges. So I needed it to align right for the right corners.
So its better to just declare that style at the top and use it for the two parts of the floats? will do, thanks for that tip.

The original code had a seperate style sheet for other text, and then all the code at the top, I will be moving the code from the page to that txt document before the site starts being used.

I need to clean out the H1 tags, they arent really being used right now, plus I want to do my own styles as well for this, so all the declarations for anything involving fonts will be cleaned up as well.

Thanks for your critique I really appreciate it. Can you tell me if I used the divs and built the page up in an acceptable way, I thought the way I did it was rather choppy.

[resdog]

Ahh, I see now about the classes. Got it now.

But in using it that way, you are negating the uses of CSS. You are using markup to do the design, i.e. putting a p tag and using an image of a corner.

You've set the width of the frame, so you could use a background image (combining the corners and the to line). Use that for the top and bottom, then use the "spacer image for the vertical lines. This will help clean up and separate the content (text) from the design (corner images). Using this way will also facilitate not using the inline style.

It's not "necessary" to use an ID. You can use all classes if you want. I think it's more of a standards issue. when another coder looks at your code, and sees an id, they won't look for multiple occurences.

[CamarotaDesign]

ahh yes, I see. instead of using a float for two seperate corners, just combine them all into a top piece. I thought about that, but decided to go with what I had already created. I'll get that taken care of soon.

So what do you think of the way I created the divs? is this a pretty standard way of doing this type of design?

[resdog]

It is a pretty decent standard, once your get rid of the divs for the corners, but what you have to remember is CSS helps the look of the site. If you take away the CSS, the site should downgrade gracefully into readable markup. If you open your page, then (in firefox) choose View>Page Style>no style, your website doesn't downgrade very well.

I took your code, and reworked it a little bit to make it more readable. It kind of follows your layout, but I got rid of any excess images (corner) and made them one long bar at the top and bottom. Then a repeater 1px high bar across the midsection.

CSS used:

<style type="text/css">
body {
text-align:center;
background:url(gradientbackground.gif);
}
#frame {
width:780px;
margin-right:auto;
margin-left:auto;
margin-top:25px;
padding:0px;
text-align:left;
}
#top {
width:780px;
height:28px;
background:url(topBar.gif) no-repeat;
}
#middle {
background:url(midsection.gif);
height:530px;
}
#bottom {
background:url(bottomBar.gif);
height:28px;
width:780px;
}
#middleBox {
margin:0 auto;
width:721px;
height:530px;
}
#contentheader {
margin: 0;
height:100px;
width:721px;
text-indent:-9999px;
background:url(topdivbg.gif) center bottom no-repeat;
}
#linkcontainer {
margin: 0;
margin-left:1px;
height:25px;
width:720px;
background:black;
}
#linkcontainer p {
margin:0 10px 10px;
}
#contentcenter {
width:722px;
height:405px;
margin-left:0px;
float:left;
background:url(maindivbg.jpg) bottom no-repeat;
}
#contentcenter h1 {
font-size:14px;
padding:10px;
margin:0px;
}
</style>


body html

<div id="frame">
<div id="top"></div>
<div id="middle">
<div id="middleBox">
<div id="contentheader">MEI - Marketing Experts, Inc.</div>
<div id="linkcontainer"><p> Well would you look at that!</p></div>
<div id="contentcenter"><h1>contentcenter</h1></div>
</div>
</div>
<div id="bottom"></div>
</div>

[CamarotaDesign]

wow! thanks for going through the code for me resdog, I had been re-working it before I checked out your post, but I think what I did is almost the same as what you did.

I put all the css in an external style sheet, but I realized that wont be a good idea for the main background since it will be changing. I was thinking I could just make that one part of the layout in the style of the page header and use the external sheet for eveything else that will stay the same.

link to webpage (http://www.marketingexpertsinc.net/css_site)

[resdog]

One thing I do (not sure if it is compliant, or whatever), is on my logos, or images that are CSS that are important (like the logo on your page), I put text in that div, then in the css I text-indent:-9999px;.

That way if CSS is disabled, they will still see the "logo", but when they have CSS enabled, they will see the actual image.

Your layout looks a lot cleaner.

[CamarotaDesign]

I was just reading over your earlier posts, I realized I read what you said about classes and ID's wrong. I'm going to make everything an ID again. I must be going dyslexic or something. Thanks for the text-indent tip.