Hello all. I am currently building a site that I need some help with. (it's still heavily WIP so theres only really a left nav and i drew a white box to simulate a news area, you'll see what I'm talking about) http://img.photobucket.com/albums/v299/Xionith/example.jpg So what I am having difficulties with is this: I will make that site and finish it off with everything and have a content area in the middle (the white box). There will be differing lengths of content per page in that space, so what I am wondering is how can I make the page stretch accordingly? If I slice the image and use Imagereadys code for it and type enough for that middle content box to stretch, wont it distort the entire site? Or should I manually code the site as three columns. This way I could put all the appropriate images/links/navs and when I get to the end of it I can set a background that will repeat, thus making the site stretchable?? Please help me!!
You have a simple two column layout, no header, no footer. Make a wrapper of appropriate width. In that div, make a sidebar column by floating left and a main column with margin left ≥ left col's width. That's your layout. The content of each column are simply in-the-flow elements. Each column is its own context. What you put in each doesn't affect the other column. 2 column example. Enclosing float elements. N.B. To make development easier, always use dummy text and dummy images, if needed, to fill in the blanks. It is usually a Bad Idea to specify height. Let the content dictate that. N.B.2 Sliced and diced layout images are a particularly Bad Idea. They are only appropriate for table based layouts, and table based layouts are a Bad Thing. Learn to see the flow of the page. cheers, gary
Ok I probably should've gave some more info Here is a better picture of my site (more of it is finished): http://img.photobucket.com/albums/v299/Xionith/example-1.jpg I also didn't mention then I am pretty new to web design and designing with tables is basically all I know how to use! For example I don't know what an html wrapper is or this floating technique you mentioned. However I am definitely still up for learning new things (I am just a begginer) and willing to expand the technique in which I can develop sites. So on your two column example there, I looked at the source code and didn't quite understand any of it except for the end. The beggining was PHP right? If so I don't know any PHP. But what I am getting at is wouldn't it be a whole lot easier and possibly more efficient just to make that two column layout with, simply two columns (using tables)? Either way if you could provide a more detailed explanation or links to something that could explain your method for my site or even a whole new method that would be easier for me to grasp, I would be very appreciative!
It wont let me edit my post.. says something about not allowing live links. So anyway I meant to say CSS instead of PHP. And I don't know any CSS except for making basic styles to define text.
Hi, The links are not allowed because you have only 3 posts. After 10 links will start displaying. Now about your problem. You mentioned that you know CSS a little. Do this: <table ... > <tr><td style="width: 200px;"> This will set the width to a minimum wide range, with or without content/text. I used 200px as example. You can use anything else also. PX= pixels,. Instead of showing screenshots, it would be better if we could see HTML source code. That way we can provide you specific code. Bye
Thanks for the replies. I use screenshots because I haven't even begun to code the site yet. I am still making it in photoshop. I want some advice as to how I should go about coding it first, this way I can slice the images properly. And JEET I don't get how what you said will help me. What I want is my site to be stretchable by content. What I have been thinking is that I could do this: Have a three column site (left sidebar, middle area, right sidebar). The left and right sidebars are basically the same thing (different text and links that's all). So for these sidebars I could have one big image for them and use imagemaps (never used them before so I don't know if they are good or not) to make the links. Then I could make a background for the two sidebar td's that would be able to be repeated. So this way when the middle content is longer than the height of the sidebar image's the background will appear and repeat as neccessary. Alternatively since I am wary of using image maps I could just slice the images myself and add a link to the appropriate images. This would be a lot of slicing though (small images like inbetween nav buttons etc). Any suggestions... again.
First things first. Using tables for page layout is at least as difficult as using css. Table layouts for any non-trivial page cannot be well structured nor semantic, though it may have valid markup. Table layouts are more difficult to maintain than well structured html + css. Table layouts are likely to cause accessibility issues. Table layouts have a higher markup to content ratio, reducing SEO. Table layouts may not be easily rearranged since presentation data is in each page. Table layouts are made obsolete by the widespread support for css. Given that you're just starting, why wouldn't you want to learn the right way to do things from the get-go? What point is there to learning an obsoleted method that forces you to code for presentation rather than for structure, and which will then require that you learn not only a new and improved markup paradigm, but unlearn all the bad habits you must develop to support that obsolete method? Google for css and html tutorials. There are a bunch of decent ones out there. Learn proper html and css layout first. There is no sane reason to start out wrong. How can a table be simpler than the html in this: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml" lang="en"> <head> <title></title> <meta name="generator" content= "HTML Tidy for Linux/x86 (vers 1 September 2005), see www.w3.org" /> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <meta name="editor" content="Emacs 21" /> <meta name="author" content="Gary Turner" /> <style type="text/css"> /*<![CDATA[*/ html, body { margin: 0; padding: 0; } #sidebar { width: 20%; float: left; } #sidebar h2 { margin-top: 0; } #main { margin-left: 25%; } #footer { clear: both; text-align: right; } /*]]>*/ </style> </head> <body> <h1>generic header</h1> <div id="sidebar"> <h2>sidebar</h2> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec bibendum, nisl et fringilla dictum, quam pede auctor orci, vitae molestie felis risus sed nibh. Curabitur.</p> </div> <div id="main"> <h2>main content area</h2> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec bibendum, nisl et fringilla dictum, quam pede auctor orci, vitae molestie felis risus sed nibh. Curabitur.</p> </div> <p id="footer">© 2006 turner</p> </body> </html> Code (markup): Think about it before you abandon the path of righteousness for the dark side that is table layout. cheers, gary
Ok well thanks for the detailed explanation! I definitely can see the benefits of CSS and would like to try it myself. However all the tutorials I have found only cover making styles (like defining a style for bold or making your own .headline style or somethng). None of them talk about the proper syntax for defining styles for what you did (the sidebar and stuff). If you have any links that would be great, if not I'll probabl come accross something! EDIT: The one problem I see with CSS is that the entire page moves dynamically. What I mean is if you stretch or shorten your browser window everything shifts position, whereas with tables this type of distortion wouldn't occur. Just wondering if there is any way of avoiding this. Once again thanks for the help, Rapishorrid
Look back at the first link I gave you. Check this tutorial. They get into positioning. To be blunt, it would be a stupid move to learn table layout methods. While css layouts may seem difficult, once you reach that aha! moment in the learning curve, you will wonder why you were intimidated. CSS is a powerful styling language. That power means there is the opportunity for complexity. As you learn, just keep it simple. Walk before you run. cheers, gary