Everything looking alright here with this CSS build?

HTML & CSS
1

I apologize if the purpose of the forum is not to review code as a whole; I could not find a forum elsewhere on the site that deals explicitly with code. If this thread is too broad, please don’t hesitate to close.

But basically, after a lot of tinkering, this is what I have for my four-column build. I do not have a footer, and do not think I will be adding one. But apart from that, I have laid down the foundation for all I’ll need by and large.

Anything grossly incorrect? Everything works on my browsers but there could be a no-no that just hasn’t struck yet.

Thanks!

/* simple reset to give good cross-browser baseline */
html,body,address,blockquote,div,
form,fieldset,caption,
h1,h2,h3,h4,h5,h6,
hr,ul,li,ol,ul,
table,tr,td,th,p,img {
	margin:0;
	padding:0;
}

img, fieldset {
border: none;
}

hr {
display: none;
}

body {
font-size: 90%;
font-family: calibri,helvetica,sans-serif;
background-image: url('image/shield_background.png');
background-repeat: repeat;
margin-left: auto;
margin-right: auto;
margin-top: 30px;
text-align:center; /*center #pageWrapper in IE 5.x */
}


#signature {
position: relative;
margin: 30px 30px 70px;
background-image:url(image/CCSignature.jpg);
repeat: x-axis;
height: 77px;
width: 368px;
border: none;
}

#signature img {
display: none;
}

h1 {
position: relative; /* wrap floats */
padding: 0 0 0 0;
font-weight: bold;
font-size: 115%;
font-family: "Droid Serif", helvetica, georgia, sans-serif;
font-color: black;
overflow: hidden;
}

p {position: relative;
padding: 10px 0 0 0;
font-size: 105%;
}

li {
font-size: 105%;
padding-left: .3em;
padding-top: .3em;
}


#textWrapper {
margin-left: auto;
margin-right: auto;
text-align:left;
width: 992px;}

#contentWrapper {
}

#navBar {
margin: 0;
padding: 0;
background-color: white;
list-style: none;
font-size: 1px;
font-family: "Droid Sans", calibri, helvetica, sans-serif;
padding-top: 10px;
text-align: center;
border-bottom: 2px dotted #666;
white-space: nowrap;
}

#navBar li {
display:inline;
}

#navBar hr {
display: block;
background-color: black;
}

#hrNull {
display: none;
}

#navBar a {
display:-moz-inline-block;
display:-moz-inline-box;
display: inline-block;
font-size: 18px;
white-space: nowrap;
text-decoration: none;
color: black;
padding: 10px 60px;
}

#navBar a:active,
#navBar a:focus,
#navBar a:hover {
background: rgb(6,11,85) 0 no-repeat;
}

#navBar a:hover {
color: gold;
}

#bcgColor {
margin: 0 auto;
width: 992px;
height: 100%;
background-color: white;
background-repeat: repeat-y;
}

#column1, #column2, #column3, #column4, #column5, #column6, #column7 {
top: 230px;
float: left;
padding: 1.5em 1.3em;
}

#column1 {
left: 24%;
width: 210px;
}

#column2 {
left: 48%;
width: 210px;
}

#column3 {
left: 62%;
width: 210px;
}

#column4 {
left: 86%;
width: 210px;
}

#column5 {
left: 62%
width: 500px;
}

#column6 {
left: 48%;
width: 680px;
}
2

You sure can :). It’s never been a no-no lol.

You can have png sure, whatever file type you desire, although make sure that if it has transparency in it, and you’re supporting IE6, you have some sort of PNGfix in place (like twinhelix)

3

Well they aren’t margins, and they aren’t even being used because no position is set :).

4

Exactly ;). Good job. Anything else you need answered?

But technically, the position:relative isn’t even needed, so you can remove that too.

5

I wasn’t sure how the browsers would handle un-set columns. I set the widths and they consistent fell where they belonged. However, I wasn’t sure if declaring their coordinates would be necessary because, in the event something isn’t placed correctly, I thought setting a left coordinate (I think of them as margins) would fix it.

6

Which top and left?

And ah, I did have real content. You can’t have a website with stuff to fill it with. :wink:

7

Now that you mention it:

Can I make a DIV wrapper to place a background image? Or is that still a no-no? And it should still be PNG, correct?

8

Yeah, those top and left declarations shouldn’t even be doing anything - makes no sense for those to even be present.

Me, I’m not wild about calling them “column#” either, since I’d be asking WHY is this a separate column, but that’s just me. There’s a reason I write my entire markup out around REAL content before I even THINK about layout.

9

To quote: http://www.sitepoint.com/forums/showpost.php?p=4555825&postcount=12

What Ryan meant was that we have a specific forum for Reviews and as you titled your thread “Code Review Request” then it could be perceived that you were looking for general reviews on how the sites works, looks and feels. Those types of questions must be asked in the review forum so that we don’t have people posting “does my site look ok” type of questions and cluttering up the forums :slight_smile:

However, questions about bugs and fixes and css problems are fine here:) It’s just the review type of questions that you shold avoid but any other fixes you need looked at then fire away;)

Usually it’s better to ask one or two questions at a time as a whole list frightens people away :slight_smile:

OK?

10

Offset coordinates are top: bottom: left: and right:

On the column1-6 you set a top value offset…which isn’t even recognized since no position is set :slight_smile:

Why would yo uwant to declare positions (and by that I mean offset values like top/right/bottom/left) ?

11

If you want code review then I’d suggest the Website Reviews section :slight_smile:

I’ll request a move.

12

Here is my take though. You shouldn’t support IE5x, thus I’d remove the text-align:centers you have in there to center IE5.

PNGS need to be accounted for for IE6 (since they don’t understand PNG transparency), a background imge on the body shouldn’t be used (if you are trying to line something up) because a 1px jog can occur

You can write shorthand code, aka instead of margin-left:auto;margin-right:auto; you ca just do margin:0 auto :slight_smile:

Eric Meyers reset shouldn’t be used as it’s too bulky, I’d make your own mini reset :slight_smile:

Borders don’t come with most elements (like <div>s) so there isn’t a need to specify border:0

On elements like #navBar you set margin/padding to 0, but your reset does that anyway :). Redundant.

Your column placement also shouldn’t be done via offset coordinates ;). I also see no position relative/absolute/fixed set on them, so the top: values you are setting won’t even work!

13

Hey Ryan,

I’ve added a position:relative to the #column1, #column2 … section and that seems to make any attribute/element unnecessary. I took out the top:240px

Thank you!

14

Strangely, Google has failed me.

What are offset coordinates?

And technically, isn’t the placement of the columns in the HTML placement “enough”? I understand that you should declare positions when possible but is there any harm in utilizing the way browsers let things “stack”?