Click to See Complete Forum and Search --> : Web Pros: Explanation of coding behind this absolute liquid layout design
jasonchan
09-02-2006, 09:05 PM
Hi,
Im a noob at web design and trying to learn about positioning and designing a layout. I have a few questions regardin this layout example that I found featured in a web builder magazine by John Oxton. I am beginning to learn that absolute positioning means that these div sections are placed on top of the flow of the html. Is that right?
Here is the Html code:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 //EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link href="style.css" rel="stylesheet" type="text/css">
<title>A&B Chinese Express</title>
</head>
<body>
<div id="head">This is the head</div>
<div id="content">This is the content
<div id="footer">This is the footer
</div>
</div>
<div id="secondary_content">This is the secondary content
</div>
</body>
</html>
Here is the CSS file:
body { margin: 0;
padding: 0;
}
#head {
background: blue;
height: 5em;
}
#content{
background: green;
width: 74%;
position: absolute;
top: 6em;
left: 2%;
}
#footer{
background: brown;
padding: 0.5em;
}
#secondary_content{
background: yellow;
width: 20%;
position: absolute;
top: 6em;
right: 2%;
}
Here are my questions:
1. What is the reasoning behind using em vs. px?
The author says that it has to do with resizing the certain browsers. Is em similar to using %? When i style text, what attribute should i use?
2. Why is the width set to 74% for #content and 20% for #secondary_content?
The author says that a total of 100% is never reached , and since this is an absolute layout we can just round up the total to 100% w/o any problems. What exactly does he mean by this? Why use % and not pixels?
3. Why is the div id="footer" embedded within the div id="content"? How is there a gap(space) between the right side of the content area and the left side of the secondary content area? Does it have to do with the right and left definitions in the CSS file?
4. What is the purpose of the height attribute? It is used in the header section. Why is it set to 5 em? how did the author know that this is the correct value.. what is his reasoning?
5. How do you separate the content from the footer, so that the content does not sit directly on top of the footer? I tried readjusting the margin and padding but that did not work.
I know this may be a lot of questions but I am curious in learning and mastering these basic techniques. Thank you for your help.
JPnyc
09-02-2006, 09:26 PM
Correct, abs. pos. takes the element out of the flow of the document. Normal doc flow no longer applies.
What a strange approach, I've never really seen a layout done like this before. Absolute positioning is something I *rarely* use. But, it's kind of neat at the same time. Absolute positioning with a liquid layout? Crazy. Hmm. I will try to help you here though. :)
1. What is the reasoning behind using em vs. px?
The author says that it has to do with resizing the certain browsers. Is em similar to using %? When i style text, what attribute should i use?
In Internet Explorer, if you use pixels, the user can't go to the brower and choose to resize the text. In other words it's "fixed" -- but in Firefox and others, you can set in pixels and can STILL resize the text. But that's just one of the thousands of reasons why IE sucks. You will soon realize that a lot of what you have to learn is how to work around this browser.
What do you use? Well. Setting in ems or % is really a courtesy to people that use that crap browser that may have vision problems or prefer to read text at a bigger size.
I prefer percentages to ems, but every coder has their own "way" and reasoning why they do things the way they do, but yes basically it's the same idea.
It's easier when you're first starting to learn to stay with pixels, this will give you the most control.
2. Why is the width set to 74% for #content and 20% for #secondary_content?
The author says that a total of 100% is never reached , and since this is an absolute layout we can just round up the total to 100% w/o any problems. What exactly does he mean by this? Why use % and not pixels?
Yeah I don't know exactly what he means but I'll babble a bit ok? :)
It's again the difference between a fixed measurement and a flexible one. If I am on a small laptop and you're on a ginormous monitor, the site is going to look completely different. If you want it to fill the whole screen and have it look pretty much the same in all monitor sizes, you'll use a liquid layout (flexible/percentages/stretchy) and not pixels.
If you have a graphic-intensive site, it's extremely difficult to do a liquid layout and not have it break in one screen resolution or another (it can look great on a big monitor and like poo in a small one when those graphics, which are by default fixed width, start cramming into one another). Liquid layouts are as a rule more challenging than fixed.
Anything with fixed measurements is going to give the designer much more control, easier.
Keep in mind if you do a fixed layout, you can't assume that everybody is going to be on the same size monitor you're looking at. You'll have to test in different settings, and look at site stats and watch trends to see where "most" people are viewing at. Right now I believe it's 1024x768px in the lead, 800px by 600px still taking up a large chunk. Therefore, a lot of designers will keep their width to less than 800px total if they're doing a fixed design. Those trends are headed toward larger resolutions though as the price of large monitors go down and more people use the internet more regularly as part of their day to day.
3. Why is the div id="footer" embedded within the div id="content"? How is there a gap(space) between the right side of the content area and the left side of the secondary content area? Does it have to do with the right and left definitions in the CSS file?
Because he's using absolute positioning, the content div is taken out of the normal flow of the document. Therefore, the footer wouldn't be able to sit underneath it without that content div spilling over on top of it if the content gets too high.
In practice though, the footer will only be as wide as the content div. If you wanted it to stretch the full width of the site (as wide as the main content and the secondary content) as many footers do, you wouldn't be able to do it with this method. It's interesting though, I'll give the author that. ;)
The gap to the right of the content area is due to the fact that the layout divs equal less than 100%. The left div is positioned from the left, the right positioned from the right, and whatever is left from 100% is going to be that gap.
4. What is the purpose of the height attribute? It is used in the header section. Why is it set to 5 em? how did the author know that this is the correct value.. what is his reasoning?
It's 5em in height, and the content is positioned 6em from the top. He's got 6ems to work with, so he has to tell the header how tall to be. There's a little space between them for whatever reason.
5. How do you separate the content from the footer, so that the content does not sit directly on top of the footer? I tried readjusting the margin and padding but that did not work.
What do you mean directly on top of the footer? And, where did you adjust the margins and padding?
JPnyc
09-02-2006, 09:55 PM
Abs. pos. + liquid layout = disaster. I never do it.
Abs. pos. + liquid layout = disaster. I never do it.
That's what I was thinkin'.
A good way to seperate the content from the footer is to use a two column layout and give the second column a negative top margin and positive left clearing what is normally a navigational container.
However, the downside to this is that your navigation container must be a absolute value. otherwise, your second column may end uop below or above what you intend.
Then you would wrap those columns in a division and under place the footer. normally, your content container should never get smaller then your navigation so there shouldn't be any promblem.
When you use absolute positioning just rmember that the element is positioned relative to it container. This gets some confussed as to the what actual relative positioning is but, theretically absolute positioning is relative positiing just in a different light. Since, elements positioned absolutly are place relative to their containeing division not the screen.
Acual relative positioning is rerlative to were it would be so there is a drastic difference. However, in all aspects both are absolute and relative positioning is are realtive in their own way.
back to your initial question, there are other ways of placing a footer such as usingfloats and clearing element but, I assume you havn't got that far yet so I won't exaplin it.
This book does a wonderfull job exapainning positioning once your beyond the basics.
http://www.amazon.com/HTML-Utopia-Designing-Without-Tables/dp/0975240277/sr=8-1/qid=1157239876/ref=pd_bbs_1/103-3539395-8691813?ie=UTF8&s=books
In addition, it does a great job in explaining relative and absolute measurements.
ems are a bit tricky to explain. However, a em is just the size of a"m" character in your container font size. So, lets say you have a container with a specified font size of 14px then 1 em would be 14 px. So 2em would be 28 px, 3 em would be 42px and so on. The only tricky part comes when you have no set font size for a container. What happens then is the child element will inherit its parents font size then apply the em setting. So if you have a container with no font sized specified but, specify a measurement of 2em then the container will take the parents font size and double it.
However, if no font size is specified for the parent then browser will proceed up the document object model untill it finds a parent who does have a specified font size. If one does not exist once the browser hits the body element then the browser will use the default for the users computer which could theretically be anything but, generally it is around 14 or 16 px.
That is the theory behind em measurements.
jasonchan
09-03-2006, 01:31 AM
What do you mean directly on top of the footer? And, where did you adjust the margins and padding?
What I mean is, separating the footer from the content .. have a space between them. I tried putting a "top: 6em" in the #foot properties but it only extends it (still touching the content area).
I think I have a lot of learning to do as TZ states. I think I will purchase the book he recommended. I actually learned a lil bit of this positionin topic in an o'reilly book but I still have trouble figuring things out.
What I mean is, separating the footer from the content .. have a space between them. I tried putting a "top: 6em" in the #foot properties but it only extends it (still touching the content area).
I think I have a lot of learning to do as TZ states. I think I will purchase the book he recommended. I actually learned a lil bit of this positionin topic in an o'reilly book but I still have trouble figuring things out.
Instead, use a margin setting. i.e.
margin-top: 15px;
jasonchan
09-03-2006, 01:52 AM
EC,
Yea I've also tried that. I set the property in #footer in the CSS file but it still displays the "attachment" of the content and footer.
are you wanting the footer to be *below* the whole content div? if that's the case you have to move it in the html. and you will run into problems if you do, because the content div is absolutely positioned. am I understanding your question?
JPnyc
09-03-2006, 02:07 AM
Well if your content never reaches the footer at any screen size or res. then you can use position:absolute; bottom:0px; to keep it at the bottom. If it does occasionally get down that far then you cant
jasonchan
09-03-2006, 02:19 AM
Yes, that was what I meant. I read your earlier reply and now understand it. Because it will overlap it. Arghh, these layouts are hard to master. EC, do you have any websites/books recommended to master these techniques?
JPnyc
09-03-2006, 02:46 AM
Well there is something you can try (I got this from EC) you can put a wrapper (a div) around the whole content, and another around the footer. Relative position the wrapper around the footer. For some reason that makes absolutely no sense to me, that will allow the footer to be absolute positioned, relative to it's parent element, which is the wrapper div. Purely illogical from where I sit, but it works.
jasonchan
09-03-2006, 05:17 AM
Thanks all for your wise words and advice. I just wanted to know how you would build a layout such as this one, if you did not use absolute positioning. I am still quite unfamiliar with fixed, relative, and other positioning techniques. It seems like each one has their own flaws and advantages. Can anyone post a html/css code or alternative way to build a site with similar qualities to this layout.
Yes, that was what I meant. I read your earlier reply and now understand it. Because it will overlap it. Arghh, these layouts are hard to master. EC, do you have any websites/books recommended to master these techniques?
Probably the best way for you to begin understanding is to just play. Take an absolutely positioned element and change it to relative, see what happens.
Go to a site like http://www.csszengarden.com and download some of the css and html documents and study them. Look at the elements on the page, then go back to the code and see what they're doing to it.
As for books and other resources I recommend, check the sticky post at the top of the web design forum, also ... http://www.graphicdesignforum.com/forum/showpost.php?p=264734&postcount=8
http://www.graphicdesignforum.com/forum/showpost.php?p=286617&postcount=9
Thanks all for your wise words and advice. I just wanted to know how you would build a layout such as this one, if you did not use absolute positioning. I am still quite unfamiliar with fixed, relative, and other positioning techniques. It seems like each one has their own flaws and advantages. Can anyone post a html/css code or alternative way to build a site with similar qualities to this layout.
It depends. Each project is completely unique -- I look at the elements, the needs and requests of the client, the time budget allowed, etc.
A liquid layout with a header, two columns, and a footer at the bottom -- many ways to go about it. One common method is to use floats.
Get creative with google to find examples, tutorials, layout generators, etc.:
http://www.google.com/search?hl=en&lr=&safe=off&c2coff=1&q=css+two+column+liquid+layout&btnG=Search
http://www.google.com/search?hl=en&lr=&safe=off&c2coff=1&q=css+layout+generator&btnG=Search