Some help with CSS and layout

Deathwish

Deathwish

Deathwish

Soldato
Joined
17 Oct 2002
Posts
2,956
Location
Cold Scotland :(
Hi,

Updating a website for a friend and I've been taking their design which they want to keep but moving it from a table based layout to a CSS one.

Having a problem with the background, it isn't going all the way to the top, there is a 20px height gap, and a similar one at the bottom.

http://www.fwibble.org/ba/pages/services.html

Any thoughts?

Cheers
 
The suggestion of using a negative margin is a hack and should be avoided. You need to understand why there is 20px padding at the top.

The problem is your <ul> in the header. I suggest you read up on and include a reset.css file.

Also, your naming conventions are very bad. You should never label things "topSection", "leftColumn" etc. What happens if they decide to move the leftColumn to the right?
 
redeye_uk said:
The suggestion of using a negative margin is a hack and should be avoided. You need to understand why there is 20px padding at the top.

The problem is your <ul> in the header. I suggest you read up on and include a reset.css file.

Also, your naming conventions are very bad. You should never label things "topSection", "leftColumn" etc. What happens if they decide to move the leftColumn to the right?
Click to expand...
He's using XHTML and that is an HTML5 reset. Won't make a lot of difference, but I'd stick to an XHTML one just to be sure.

This is the one I've been using for a while now, I've fettled it a bit so use it if you like, if not then there are plenty of others out there. :)

What's wrong with calling them leftColumn and rightColumn? (Apart from the camel case, eurgh). Better to use descriptive names with some meaning IMO.

Code: 
/* CSS Document */
/*------------------------------------*\
	RESET
\*------------------------------------*/
body{
	position:relative;
}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,p,a,pre,form,fieldset,input,textarea,blockquote,th,td{
	margin:0;
	padding:0;
}
table{
	border-collapse:collapse;
	border-spacing:0;
}
fieldset,img{
	border:0;
}
address,caption,cite,code,dfn,th,var{
	font-style:normal;
	font-weight:normal;
}
ol,ul{
	list-style:none;
}
caption,th{
	text-align:left;
}
h1,h2,h3,h4,h5,h6{
	font-size:100%;
	font-weight:normal;
}
q:before,q:after{
	content:'';
}
abbr,acronym{
	border:0;
}
a{
	text-decoration:none;
	color:#000000;
}
 
Muel said:
He's using XHTML and that is an HTML5 reset. Won't make a lot of difference, but I'd stick to an XHTML one just to be sure.
Click to expand...

I wasnt implying he use that exact one. I just pointed out the cause of his problem and linked him to an example reset.css with a brief explination to what it is.

Muel said:
What's wrong with calling them leftColumn and rightColumn? (Apart from the camel case, eurgh). Better to use descriptive names with some meaning IMO.
Click to expand...

Unfortunately your opinion is wrong in this case. I suggest you read up on HTML, CSS & Javascript design patterns. As I said, what happens if the client decides they want to swap the left and right columns around, or move one on top of the other?

There is also nothing wrong with using lower camel case; as long as they are being consistant. But i agree, there are better conventions for CSS
 
Last edited:
redeye_uk said:
Unfortunately your opinion is wrong in this case. I suggest you read up on HTML, CSS & Javascript design patterns. As I said, what happens if the client decides they want to swap the left and right columns around, or move one on top of the other?

There is also nothing wrong with using lower camel case; as long as they are being consistant. But i agree, there are better conventions for CSS
Click to expand...

That would be an opinion. If I wanted to swap the right and left columns over, I'd simply change the class/id on the div in my template.

I agree it's best to use unique names, but what if the best you can do is to call them left and right?
 
Muel said:
That would be an opinion. If I wanted to swap the right and left columns over, I'd simply change the class/id on the div in my template.
Click to expand...

And what if you wanted the left and right columns to both be on the left? You'd rename the class/id again? Why not just name it correctly first time round and stop changing ID's which might confuse other developers?

Muel said:
I agree it's best to use unique names, but what if the best you can do is to call them left and right?
Click to expand...

Well I would say if the best you can do is name them "left-column" and "right-column" then you need to go back to basics. It's on par with giving elements classes of "grey", "bold" etc...

You should be calling them "sidebar-first", "sidebar-second".
 
Well in a western society, left comes before right, just like first comes before second.

You should be calling them whatever makes sense. Left and right are descriptive names, infact I'd say they're the most obvious of all descriptive names. Where's the left-column? Oh yeh, it's on the left. sidebar-first means nothing to me. Semantic meaning come before anything else in my work. :p
 
redeye_uk said:
The suggestion of using a negative margin is a hack and should be avoided. You need to understand why there is 20px padding at the top.

The problem is your <ul> in the header. I suggest you read up on and include a reset.css file.
Click to expand...

Unless the page has changed since you had a look Redeye it's actually the H2's default margin that's causing the problem at the top.

The bottom spacing is a combination of the paragraph's default margin on the last section of text and the 5px margin he's added to "innertube" on the left, right and bottom.

P.S. I agree with everything else you say :)
 
You must log in or register to reply here.
Back
Top Bottom