CSS Positioning

Noah · Post by **Noah** » Thu Sep 15, 2005 6:51 pm

Paging web designers for some help

Just have some absolute / relative / float q's and hoping for at least one a

rakesh1 · Post by **rakesh1** » Fri Sep 16, 2005 12:21 am

whats the question

Beek · Post by **Beek** » Fri Sep 16, 2005 12:27 am

yeah post it

my CSS knowledge is probably below average but i can try to help

Noah · Post by **Noah** » Fri Sep 16, 2005 7:06 pm

Well, I guess my question is: what is the best practice for positioning different elements on a web page? Should I use absolute or relative positioning?

Let's say I have this for a box:

Code: Select all

#navbar {
	position: absolute;
	left: 0px;
	padding: 10px;
	border: solid black 1px;
	border-left: 0px;
	}

Is it possible to reuse this to create another box that does not end up in the same spot as this box? If so, how would I change that bit of code?

I'm not really sure how to ask this question.

Beek · Post by **Beek** » Sat Sep 17, 2005 5:25 pm

So you want to add another box with the same appearance, just in a different place? Assuming so... Then what you need to do is separate the positioning properties from the appearance properties. Starting with your first definition, we'll do the separation:

Code: Select all

#navbar {
	position: absolute;
	left: 0px;
}

#navbar {
	padding: 10px;
	border: solid black 1px;
	border-left: 0px;
}

Now add the other box in there... I'll call it secondbox:

Code: Select all

#navbar {
	position: absolute;
	left: 0px;
}

#secondbox {
    /* Add the positioning stuff here */ 
}

#navbar, #secondbox {
	padding: 10px;
	border: solid black 1px;
	border-left: 0px;
}

As for the positioning code itself, you'll have to say a bit more about where you want it to go - absolute and relative positiong both have their uses.

rakesh1 · Post by **rakesh1** » Sun Sep 18, 2005 1:44 am

are the boxes going to be next to each other? you could use a list

Noah · Post by **Noah** » Sun Sep 18, 2005 9:13 pm

I'm going through another reading / rethinking / information gathering stage. Do you guys know of any books that are good for learning about web design, page layout, xhtml, css? Any or all of those topics, if you guys could recommend something, I would appreciate it. If you have a website that you think I may not have seen, I would like to hear about it too.

Noah · Post by **Noah** » Tue Sep 20, 2005 12:43 pm

So far I've been finding all the info I need. It just takes a different approach. Thanks for the assistance folks

Noah · Post by **Noah** » Tue Sep 20, 2005 3:14 pm

Ok what do people know about ems

should I just not use ems for text sizing or do people advise that I look into this and learn how they work

Noah · Post by **Noah** » Wed Sep 21, 2005 3:42 pm

I'm back

http://nchase.blogspot.com

I like what I've got going so far. There is a bug in IE though (lol IE). #contentwrapper appears above the title area. If I try to add a border in Firefox, the same thing happens. If anyone has insight into this I would appreciate feedback. Otherwise it's cool guys

cuntface · Post by **cuntface** » Thu Sep 22, 2005 4:28 pm

always use ems for text sizing. ems are a relative unit and so if the user has their default browser font size up high then your page should still maintain it proportions i.e. your paragraphs won't suddeny be bigger than your h1.

if you going for a fluid layout then use ems or percentage for element size too.

all the above examples won't work for more than one element cos the # indiactes am id and ids can only be used once per page. you need a class which is indicated by a .

check htmldog.com for some good explanations. other than that i don't think i ever really seen a css tutorial

some chick · Post by **some chick** » Mon Sep 26, 2005 12:12 am

http://www.w3.org/Style/CSS/learning

this is probably obvious, but it's always a good idea to check out the W3C for info and help.