Thu, 2008-08-07 02:03
It's a constant, daily struggle to stay away from the old way (tables), but I'm resisting.
I think I'm close to accomplishing what I'm trying to do here, but I've run out of ideas. The content in the "copy" div is over flowing it's boundaries. I need to figure out how to make that stop, without having a scroll bar appear in that div. A scroll bar for the whole page is fine.
Any help is appreciated.
Here's the HTML and CSS:
Thu, 2008-08-07 06:46
#1
Your problems stem from
Your problems stem from attempting to layout this page using Absolute positioning. I'm afraid that you will need to rethink the whole page pretty much.
I also suspect that you are being led astray by some pernicious editor, this belief comes from the rather odd slicing of that graphic sitting in the content box, why on earth does that need to be twelve slices? It doesn't and shouldn't nor should the boxes corner graphics be set as inline foreground images.
Your box simply needs it's width set and for that outer box element to have auto margins on the horizontal plane this will center it to the viewport, as for height you must let content dictate height so that the rounded corner box can expand. You will need to set the corner graphic slices as background images of the outer box and of the inner box one set to top the other to the bottom, thus when your content increases so will your box while retaining it's look.
You might well need further help with this but have a go at re-working the layout and post back when and if further assistance is required and someone will take a look.
On a side note you must learn to validate your markup, to correct any little issues that may be creeping in, Firefox and the html-tidy plugin allow you to do this as you work.
Lastly if you are following the dictates of a well known editor, please be extremely wary of what it tries to do it's often wrong!
Thu, 2008-08-07 12:38
#2
Nope, no editor...
I use TextPad, as I have for years. I hate WYSIWYG editors. I'm from the old school as far as layout, so I've been working on my CSS layout skills. As for the sliced images, I'm using that technique to "wrap" the copy around the images like you'd see in a magazine.
I'm cool with the suggestion I start from scratch, that's part of the learning process. However, can you offer some suggestions?
Thanks...
Thu, 2008-08-07 14:58
#3
webopolis wrote:I'm using
I'm using that technique to "wrap" the copy around the images like you'd see in a magazine.
Thing is, the web is not a magazine and it is not paper. Things that work well in such media do not necessarily work on the web, in fact they very often don't.
May I suggest you read this article to see what I mean.
Thu, 2008-08-07 17:25
#4
Irrelevant discussion...
This is an irrelevant philosophical discussion that has nothing to do with the original request for assistance.
I wouldn't use the method if it didn't work in the 2 browsers I develop for.
Thu, 2008-08-07 20:16
#5
Your page is working now in
Your page is working now in IE/6, IE/7, and compliant browsers with font-scaling-- and, not shooting the text out the bottom. No heights declared on text containing wrappers. No absolute positioning needed. The top rounded image flipped 180 degrees to make the bottom rounded image. The CSS and HTML are now valid. You're on your own as far as support for transparent png in IE/6.
On line example here:
http://www.chelseacreekstudio.com/ca/cssd/test-11.html
Markup and CSS for the forum archives below.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta name="generator" content="HTML Tidy for Linux/x86 (vers 1st November 2002), see <a href="http://www.w3.org" rel="nofollow">www.w3.org</a>" /> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>test-11</title> <style type="text/css"> html, body { background : #6599ff; color : #000; margin : 0; padding : 0; } body { font : 100%/1.4 Georgia, serif; } img { display : block; margin-left : 10px; } #page { background : #6599ff url(<a href="http://www.joenobody.com/sample/assets/images/littlescribbles.jpg" rel="nofollow">http://www.joenobody.com/sample/assets/images/littlescribbles.jpg</a>) no-repeat; width : 1000px; margin : 0 auto; overflow : hidden; } #header { background : url(<a href="http://www.joenobody.com/sample/assets/images/logo.png" rel="nofollow">http://www.joenobody.com/sample/assets/images/logo.png</a>) no-repeat 50% 0%; height : 200px; } #footer { color : #fff; margin : 0 auto; width : 699px; text-align : center; } .content { background : #fff; margin : 0 auto; overflow : hidden; padding : 15px 0; width : 699px; } .row { height : 12px; margin : 0 auto; width : 699px; } .top { background : url(top.png) no-repeat; } .bottom { background : url(bottom.png) no-repeat; } .main { float : right; width : 515px; } .main p { margin : 0 20px 0 0; } .minor p { clear : both; margin : 0 20px; padding : 20px 0; } .box { display : table; width : 180px; height : 120px; } </style> </head> <body> <div id="page"> <div id="header"><!-- --></div> <div class="row top"><!-- --></div> <div class="content"> <div class="main"> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed libero dui, condimentum eu, fringilla vel, dapibus in, nisl. Mauris elementum faucibus mauris. Cras id arcu. Cras sollicitudin vulputate ante. Sed nec quam feugiat dolor varius interdum. Fusce non massa. Donec felis. In lectus. Aenean vestibulum sagittis lectus. Mauris velit. Aliquam at ligula. Proin sollicitudin nunc sit amet nunc. Fusce volutpat, lorem in accumsan rutrum, felis velit egestas felis, auctor molestie nulla risus imperdiet dui. Nulla facilisi. Sed nec nibh. Mauris sagittis. Praesent enim enim, pretium vel, interdum in, sollicitudin et, nulla. Donec bibendum.</p> </div> <div class="box c1"> <img src="http://www.joenobody.com/sample/assets/images/boy01.png" alt="" /> <img src="http://www.joenobody.com/sample/assets/images/boy02.png" alt="" /> <img src="http://www.joenobody.com/sample/assets/images/boy03.png" alt="" /> <img src="http://www.joenobody.com/sample/assets/images/boy04.png" alt="" /> <img src="http://www.joenobody.com/sample/assets/images/boy05.png" alt="" /> <img src="http://www.joenobody.com/sample/assets/images/boy06.png" alt="" /> <img src="http://www.joenobody.com/sample/assets/images/boy07.png" alt="" /> <img src="http://www.joenobody.com/sample/assets/images/boy08.png" alt="" /> <img src="http://www.joenobody.com/sample/assets/images/boy09.png" alt="" /> <img src="http://www.joenobody.com/sample/assets/images/boy10.png" alt="" /> <img src="http://www.joenobody.com/sample/assets/images/boy11.png" alt="" /> <img src="http://www.joenobody.com/sample/assets/images/boy12.png" alt="" /> <img src="http://www.joenobody.com/sample/assets/images/boy13.png" alt="" /> </div> </div> <div class="content minor"> <p> Maecenas eget augue eget lectus auctor imperdiet. Proin quis metus ac neque semper tempus. Aliquam eleifend, purus at commodo ultrices, magna sem ultricies mi, eu posuere turpis ipsum non urna. Cras commodo libero eget ligula ullamcorper imperdiet. Suspendisse feugiat. Etiam adipiscing accumsan urna. Sed risus sapien, tempor imperdiet, lacinia interdum, volutpat sed, arcu. Nam auctor ante eu nulla. Integer vitae orci. Mauris sed sapien ut nibh vulputate scelerisque. Ut ullamcorper. Aliquam erat volutpat.</p> </div> <div class="content"> <div class="main"> <p>Praesent egestas facilisis elit. Morbi tincidunt. Donec porta eleifend quam. Vivamus rhoncus consequat est. Mauris tincidunt elementum arcu. Quisque aliquam purus luctus diam. Nam augue. Donec luctus vestibulum leo. Etiam magna libero, dictum eu, tincidunt sodales, sagittis sollicitudin, est. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec id enim facilisis neque pretium blandit. Mauris nec enim. Nulla viverra. Ut non massa a augue volutpat mollis. Phasellus felis turpis, cursus sed, tempor quis, vehicula a, purus.</p> </div> <div class="box c2"> <img src="http://www.joenobody.com/sample/assets/images/blocks01.png" alt="" /> <img src="http://www.joenobody.com/sample/assets/images/blocks02.png" alt="" /> <img src="http://www.joenobody.com/sample/assets/images/blocks03.png" alt="" /> <img src="http://www.joenobody.com/sample/assets/images/blocks04.png" alt="" /> <img src="http://www.joenobody.com/sample/assets/images/blocks05.png" alt="" /> <img src="http://www.joenobody.com/sample/assets/images/blocks06.png" alt="" /> <img src="http://www.joenobody.com/sample/assets/images/blocks07.png" alt="" /> <img src="http://www.joenobody.com/sample/assets/images/blocks08.png" alt="" /> <img src="http://www.joenobody.com/sample/assets/images/blocks09.png" alt="" /> <img src="http://www.joenobody.com/sample/assets/images/blocks10.png" alt="" /> </div> </div> <div class="row bottom"><!-- --></div> <div id="footer"><p>Design and Layout Copyright 2008, Little Scribblers Academy. All Rights Reserved.</p></div> </div><!--/page--> </body> </html>
PS
Stop whinning.
Thu, 2008-08-07 20:34
#6
Thank you very much
I appreciate your help tremendously.
PS
I wasn't whining. I was simply trying to keep the thread on task.
Thank you again for your help.
Thu, 2008-08-07 20:41
#7
So your good to go? Realise
So your good to go?
Realise you weren't whining 
that was a little harsh.
I get what you were intending with the graphic sliced that way just wasn't seeing the intended affect and it can look good.
I hope that despite having had all the work done for you you grasped the principle and why your original layout wasn't working? Usually we prefer to walk people through the processes step by step as generally they will tend to learn more when they actually code the changes themselves, but it's a small point as long as you can appreciate the changes.
Thu, 2008-08-07 20:57
#8
Good to go...
Yes. I do appreciate the guidance. I've been designing and developing Web sites since 1995 -- with about a 3 year hiatus after I started a sign business. A lot changed in the 3 years I was away. I typically learn pretty quick, but all the ins and outs of CSS have been a challenge.
The provided solution isn't exactly what I was looking for, but it's a start. I needed the main area to stretch to the full height of the page, whether it had sufficient content or not, but scroll the page when it went beyond the height of the viewport. Further help is greatly appreciated -- In the mean time, I'll read and experiment, and try to solve it myself as well.
Thanks again.
Thu, 2008-08-07 21:23
#9
webopolis wrote:This is an
This is an irrelevant philosophical discussion that has nothing to do with the original request for assistance.
I'd say that understanding the medium you are working in is pure practicality myself, but then it's your choice. I charge the same thing for advice here as everyone else, namely nothing, so anyway you can be sure you are getting at least your money's worth.
Thu, 2008-08-07 21:51
#10
webopolis wrote: The
The provided solution isn't exactly what I was looking for, but it's a start. I needed the main area to stretch to the full height of the page, whether it had sufficient content or not, but scroll the page when it went beyond the height of the viewport.
Yep. Your on your way to yet another control freak disaster. Let go. Personal opinion, of course.
Thu, 2008-08-07 21:57
#11
Forgive me...
@David Laasko -- Not sure I understand your response. Sorry for being a dunce.
Thu, 2008-08-07 23:42
#12
You might say, as you put it
You might say, as you put it earlier in the thread, that this is just another "irrelevant philosophical discussion." I simply mean things often go better for Web authors -- and much more important -- for Web users, when a page and its content is not restricted. The software is perfectly capable of giving the user a meaningful and enjoyable experience without your interference. Could you let it do so?
Fri, 2008-08-08 19:48
#13
I think what people are
I think what people are trying to express is the belief that one doesn't try and control layouts in respect of height or try to treat the viewport as a graphic canvas.If you really need to center that object then it's quite easy with css and the use of the display table properties, naturally IE and it's dev team couldn't figure out how to the property worked? so decided to leave it out making life just that little bit harder There is a technique that can be used to get around this which involves setting an outer element position relative and and a top value 50% then on the inner element you reverse the top offset
Have a look at Gary's example which shows this approach in action. There are other variations on this which use position absolute and you can also take the single cell table approach.