PDA

View Full Version : any books on page layout without absolute positioning


silverglade
01-01-2009, 09:32 PM
hi, i have a book that teaches mainly absolute positioning, then found out from an experienced designer that using mainly absolute positioning is bad. i was wondering if anyone knows of any good css books that go into lots of detail on laying out webpages without absolute positioning?also im looking for more complicated layouts than are in my "3 column" books. any help greatly appreciated. thank you. derek:-D

domedia
01-01-2009, 10:51 PM
Hi silverglade,
What is your current skills with HTML and CSS?

silverglade
01-02-2009, 06:34 AM
my skills are good with html. i pretty much know html thoroughly and dont have any problems with it. i can style text and paragraphs, with CSS, make forms and lists and style them. But i am a total newbie when it comes out to laying out a page without absolute positioning. the only way i know how to lay out a page is with absolute positioning. when i try anything else it fails , and the tutorials and books i find either have too simple a layout to learn from, or teach absolute positioning. im trying to learn to layout anything i want with CSS DIVS. but most of the time my divs pop all over the place when viewed in browser. im looking for a book that teaches mostly layout techniques, laying out any type of page not just 3 column, etc. any help greatly appreciated, thank you. derek

Corrosive
01-02-2009, 07:06 AM
my skills are good with html. i pretty much know html thoroughly and dont have any problems with it. i can style text and paragraphs, with CSS, make forms and lists and style them. But i am a total newbie when it comes out to laying out a page without absolute positioning. the only way i know how to lay out a page is with absolute positioning. when i try anything else it fails , and the tutorials and books i find either have too simple a layout to learn from, or teach absolute positioning. im trying to learn to layout anything i want with CSS DIVS. but most of the time my divs pop all over the place when viewed in browser. im looking for a book that teaches mostly layout techniques, laying out any type of page not just 3 column, etc. any help greatly appreciated, thank you. derek

To be honest, most of us probably start with the basic layouts and then develop and learn from there. I'm not sure about a tutorial to cover all layouts because the possibilities are pretty much endless. It's a 'play and learn' job I'm afraid.

silverglade
01-02-2009, 07:08 AM
the page i failed to do, had one large background image div, an image to the center right roughly, a text name next to that, a paragraph to the below right off center, and a navigation bar at the bottom. the only way i could position them was with absolute positioning, when i tried any other way i failed, or when i tried to put the form in an apdiv, it popped out, thats when i heard that absolute positioning isnt a good idea, and found out i couldnt lay pages out at all without it. any book ideas greatly appreciated because im not good at googling for the proper tutorials. id like to be able to lay out anything any way on a page, or at least a book that will give me an idea in the right direction. thanks. derek

here is the page i am talking about that was redone by someone for me. he didnt use absolute positioning and he is an expert. i have no idea how he did it. when i tried to understand it and reapply it to my other pages, the stuff popped all over the place in browser. thats why i need a layout book.

here is the code.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link href="/_site/demos/wmt/sg-contact/include/footer.css" rel="stylesheet" type="text/css">
<title>dr alexander home</title>
<style type="text/css">
body {
margin: 0; <!-- clear for browsers -->
padding: 0;
background-color: #3E728E;

}
#wrapper {
background-image: url(docbackground3.jpg);
background-repeat:no-repeat;
width: 800px;
margin:50px auto 0; <!-- top, (right left auto) , bottom zero centers the wrapper-->
}
#contactblock {
width:100%;
height:560px; <!-- encloses the contact info, before the navigation. down to just above navigation-->
}


#navigation {
clear:both; /* code has no effect it appears */
width:100%;
height:50px; /* somehow this box gets magically pushed down to the bottom i dont know how */
padding:0;
}
#contactinfo {
width:75%; /* puts the box near center by its size compared to whole width*/
float:right; /* floats it to the right first, then 75percent shrinks it.*/
margin:0 0 5em; <!-- top 0, (right left 0) , bottom 5 --> /* a margin of 5em bottom pushes down the form content */
}
#contactinfo p {
position:relative; /* pushes text to the right 8em relative to the contactinfo box. */
left:8em;
margin:0 0 .1em; <!-- top 0, (right left 0) , bottom 1 space between lines-->
}
.style1 {
color: #0066CC;
font-weight: bold;
text-align:center;
}
#contactform {
width: 60%; /* this box flows right under the contactinfo box naturally? */
float:right;
}
#contactform label {
float:left; /* floats inputs left, then pushes them 120 to the right*/
width:120px;
}
#contactform input, #contactform textarea {
clear:right; /* code appears to do nothing */
}
</style>
</head>
<body>
<div id="wrapper">
<div id="contactblock">
<div id="contactinfo">
<h2 class="style1">Contact Information</h2>
<p>Address: 104 E 40th St</p>
<p>Suite 508</p>
<p>New York, NY 01234</p>
<p>123.123.1234</p>
<p>Fax:123.123.1234</p>
</div>

<div id="contactform">
<form id="form1" name="form1" method="post" action="">
<div><label for="message">Send us a message</label><textarea name="message" id="message" cols="35" rows="5"></textarea></div>
<div><label for="name">Name</label><input name="name" id="name" type="text"></div>
<div><label for="phone">Phone</label><input name="phone" id="phone" type="text"></div>
<div><label for="email">Email</label><input name="email" id="email" type="text"></div>
<div><input name="message2" id="message2" value="Submit" type="submit"></div>
</form>
</div> <!-- end contactform -->
</div> <!-- end of contentblock -->
<div id="navigation"><a href="home.html"><img src="home.jpg" width="159" height="40" border="0" /></a><a href="aboutus.html"><img src="about.jpg" width="199" height="40" border="0" /></a><a href="services.html"><img src="services.jpg" width="181" height="40" border="0" /></a><a href="contact.html"><img src="contact.jpg" width="261" height="40" border="0" /></a></div>

<div id="footer" > &copy; Derek Van Derven website design 2009</div>
</div> <!-- end wrapper div -->
</body></html>

Corrosive
01-02-2009, 09:00 AM
the page i failed to do, had one large background image div, an image to the center right roughly, a text name next to that, a paragraph to the below right off center, and a navigation bar at the bottom. the only way i could position them was with absolute positioning, when i tried any other way i failed, or when i tried to put the form in an apdiv, it popped out, thats when i heard that absolute positioning isnt a good idea, and found out i couldnt lay pages out at all without it. any book ideas greatly appreciated because im not good at googling for the proper tutorials. id like to be able to lay out anything any way on a page, or at least a book that will give me an idea in the right direction. thanks. derek

here is the page i am talking about that was redone by someone for me. he didnt use absolute positioning and he is an expert. i have no idea how he did it. when i tried to understand it and reapply it to my other pages, the stuff popped all over the place in browser. thats why i need a layout book.

here is the code.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link href="/_site/demos/wmt/sg-contact/include/footer.css" rel="stylesheet" type="text/css">
<title>dr alexander home</title>
<style type="text/css">
body {
margin: 0; <!-- clear for browsers -->
padding: 0;
background-color: #3E728E;

}
#wrapper {
background-image: url(docbackground3.jpg);
background-repeat:no-repeat;
width: 800px;
margin:50px auto 0; <!-- top, (right left auto) , bottom zero centers the wrapper-->
}
#contactblock {
width:100%;
height:560px; <!-- encloses the contact info, before the navigation. down to just above navigation-->
}


#navigation {
clear:both; /* code has no effect it appears */
width:100%;
height:50px; /* somehow this box gets magically pushed down to the bottom i dont know how */
padding:0;
}
#contactinfo {
width:75%; /* puts the box near center by its size compared to whole width*/
float:right; /* floats it to the right first, then 75percent shrinks it.*/
margin:0 0 5em; <!-- top 0, (right left 0) , bottom 5 --> /* a margin of 5em bottom pushes down the form content */
}
#contactinfo p {
position:relative; /* pushes text to the right 8em relative to the contactinfo box. */
left:8em;
margin:0 0 .1em; <!-- top 0, (right left 0) , bottom 1 space between lines-->
}
.style1 {
color: #0066CC;
font-weight: bold;
text-align:center;
}
#contactform {
width: 60%; /* this box flows right under the contactinfo box naturally? */
float:right;
}
#contactform label {
float:left; /* floats inputs left, then pushes them 120 to the right*/
width:120px;
}
#contactform input, #contactform textarea {
clear:right; /* code appears to do nothing */
}
</style>
</head>
<body>
<div id="wrapper">
<div id="contactblock">
<div id="contactinfo">
<h2 class="style1">Contact Information</h2>
<p>Address: 104 E 40th St</p>
<p>Suite 508</p>
<p>New York, NY 01234</p>
<p>123.123.1234</p>
<p>Fax:123.123.1234</p>
</div>

<div id="contactform">
<form id="form1" name="form1" method="post" action="">
<div><label for="message">Send us a message</label><textarea name="message" id="message" cols="35" rows="5"></textarea></div>
<div><label for="name">Name</label><input name="name" id="name" type="text"></div>
<div><label for="phone">Phone</label><input name="phone" id="phone" type="text"></div>
<div><label for="email">Email</label><input name="email" id="email" type="text"></div>
<div><input name="message2" id="message2" value="Submit" type="submit"></div>
</form>
</div> <!-- end contactform -->
</div> <!-- end of contentblock -->
<div id="navigation"><a href="home.html"><img src="home.jpg" width="159" height="40" border="0" /></a><a href="aboutus.html"><img src="about.jpg" width="199" height="40" border="0" /></a><a href="services.html"><img src="services.jpg" width="181" height="40" border="0" /></a><a href="contact.html"><img src="contact.jpg" width="261" height="40" border="0" /></a></div>

<div id="footer" > &copy; Derek Van Derven website design 2009</div>
</div> <!-- end wrapper div -->
</body></html>

I've been looking for ages for this! David J posted this some months ago...

http://www.thenoodleincident.com/tutorials/box_lesson/boxes.html

It shows a load of layouts and the html/CSS to go with it. It may help you to grasp the concept of relative layouts.

Hope it helps

silverglade
01-02-2009, 12:04 PM
thank you very much corrosive thanks for looking that up for me. i will pick that apart for a while, and there is this great guy named chrishirst on webmaster-talk.com. he suggested that i go to elated.com and take apart some of their "page kits" so thats what im going to do also. then hopefully i will have more knowledge when i come back here. thanks. derek

Corrosive
01-02-2009, 12:26 PM
thank you very much corrosive thanks for looking that up for me. i will pick that apart for a while, and there is this great guy named chrishirst on webmaster-talk.com. he suggested that i go to elated.com and take apart some of their "page kits" so thats what im going to do also. then hopefully i will have more knowledge when i come back here. thanks. derek

Sounds like some good ideas. Sorry there is no definitive answer. You almost need to map out how you want a page to look (with knowledge of CSS in mind) and then try and build it. Maybe try a few mock designs?

domedia
01-02-2009, 01:51 PM
my skills are good with html. i pretty much know html thoroughly and dont have any problems with it. i can style text and paragraphs, with CSS, make forms and lists and style them. But i am a total newbie when it comes out to laying out a page without absolute positioning. the only way i know how to lay out a page is with absolute positioning. when i try anything else it fails , and the tutorials and books i find either have too simple a layout to learn from, or teach absolute positioning. im trying to learn to layout anything i want with CSS DIVS. but most of the time my divs pop all over the place when viewed in browser. im looking for a book that teaches mostly layout techniques, laying out any type of page not just 3 column, etc. any help greatly appreciated, thank you. derek
You won't many books like that because once you learn HTML/CSS you can make whatever layout you want. The techniques you learn is how to use HTML/CSS the right way, then you can make any layout you want.

I would suggest this book as a good starter:
Build Your Own Website The Right Way Using HTML & CSS (http://www.dreamweaverclub.com/books/shop.php?k=Build+Your+Own+Web+Site+The+Right+Way+U sing+HTML+%26+CSS&c=books)

And afterwards one of these:

The Art and Science of CSS (http://www.dreamweaverclub.com/books/shop.php?k=The+Art+%26+Science+Of+CSS&c=books)
Bulletproof Web Design: Improving flexibility and protecting against worst-case scenarios with XHTML and CSS (http://www.dreamweaverclub.com/books/shop.php?c=books&n=5&i=0321509021&x=Bulletproof_Web_Design_Improving_flexibility_and _protecting_against_worst_case_scenarios_with_XHTM L_and_CSS_2nd_Edition_Voices_That_Matter)

silverglade
01-02-2009, 07:24 PM
cool thank you very much. im learning to reverse engineer pages now, its hard but i might be able to do it. thank you for the book recommendations. i have the "right way" book. but unfortunately for me it mainly taught absolute positioning, and when i ran into problems with that, that is when i was forced to learn about other page layout techniques. that really made me sad, because the AP was so easy. but i guess i will try my best to learn the code. thanks. derek, i will try those other books you mentioned thanks . and thanks for the boxes page. derek

Cary
01-02-2009, 07:35 PM
If it helps at all, you might try seeing whatever page you're looking at as boxes, and boxes within boxes. Each individual element can have some simple styling. It just looks complicated when you try to see the whole page at once.

domedia
01-02-2009, 09:15 PM
i have the "right way" book. but unfortunately for me it mainly taught absolute positioning, and when i ran into problems with that, that is when i was forced to learn about other page layout techniques. that really made me sad, because the AP was so easy. Not the right way at all. Which book was it?

silverglade
01-03-2009, 01:10 AM
thank you for the replies that helps alot. also, the book that taught me only absolute positioning practicallly, was, "making your own website the right way" by sitepoint. then i found out that wasnt the right way . LOL!!!!:mrgreen: im trying a technique of reverse engineering web pages now with their CSS also. its working out ok, i will post how it goes. im still seeing if i can do it. thanks. derek