I'm an old webbie trying to re-adjust my paradigm so that I can go from tables to table-less layout, using divs and CSS instead. I currently have a page I've constructed for a client, and another I'll be working on soon that include image based borders around content. The one included below has 3-4 of these bordered content areas per page. These borders occur in 4 images. Two to frame the sides of the content, and then two images top and bottom which span across content and the side frames alike. The side areas scale, thus repeating the background image as many times as is needed to match up to the length of the content. This part, so far, is the real challenge I'm facing, as I haven't been able to get the side div to have a variable length that will match the center div when experimenting with moving over to divs. Before you tell me to just change the way the page looks, no can do. I'm a peon at this company, and while I can change things over to divs if it allows the look to stay the same, I a not allowed to if it will change the look significantly. The site currently up: Pioneer Greens, a Lincoln NE Dentist Office
sorry mate i didnt really understand all that you were saying just then so i just went and clicked on your link to see for myself... That layout could very easily be achieved using css and divs...just do a quick google search for 2 column layouts and see how you go. Look at the examples and see if any suit your application - you should definately be able to find at least one. if you get stuck again then post up your progress and im sure someone will help (if not me)
I'm sure they could help me get the text in two colums. That's not the main problem. It's getting the individual boxes to render correctly that is. I need to get the two images on the sides as backgrounds in divs, and the divs need to be as long as the central div exactly, but not stretch the collection of 3 divs out any further.
this is where i get confused.....i guess it could just be me thats not understanding what you are typing so im sorry if thats the case... but all that just went over my head. looking at the link you posted (pioneergreensdentistry.com/), there are 4 boxes with content in each that are currently positioned in a table and a footer underneath them all. Am i right to assume that what you are wanting to do is recreate that whole page but without the use of the table?
Yes. Now keep in mind, each of those 4 boxes is made up of a total of 5 cells in it's own table. A central cell for the content, followed by a cell to either side which has a background image that repeats vertically so that no mater how much or how little text I put in the central cell, the two cells on each side will be filled with the background image. Then on the top and bottom of this, I put a fixed height and width image to cap it off. I need help re-making those boxes most of all.
ok great glad im now on the same page... ok so to achieve what you want - i would whip up something like this....in regards to the middle section - i merged the left and right side backgrounds into one image that spans right across... and this will repeat and be as long as the content needs it to be * { margin:0px; margin-bottom:5px; padding:0px; border:0px; } #boxwrap { /*wraps whole box together*/ width:331px; height:auto; background-color:E0E3CB; margin:0; padding:0; } #divtop { /*top background*/ width:331px;; height:15px; background-image:url(frmtop.gif); background-position:top; background-repeat:no-repeat; margin:0; } #divmiddle { /*main content - merge both sides into one background image*/ width:331px; height:auto; background-image:url(frmside.gif); background-position:top; background-repeat:repeat-y; margin:0; } #divbottom { /*bottom background*/ width:331px;; height:15px; background-image:url(frmbot.gif); background-position:top; background-repeat:no-repeat; margin-top:-5px; } .bodytext { /*sample text formatting*/ padding-left:20px; padding-right:20px; font-size:10px; } then in the html, it would be something like this <div id="boxwrap"> <div id="divtop"></div> <div id="divmiddle"> <p class="bodytext">content goes in here</p> </div> <div id="divbottom"></div> </div>
Is there any way that you can think to do this without needing to have the image span completely across the back of the cell? I've got a few other sites I'm going to need to use a similar technique on where this would make the image almost a megabyte in size. There's a reason I didn't merge the graphics. And this is also a step away from my next goal for that site, which is to allow the cells to size dynamically width-wise as well so that if people come in with a high resolution screen, they don't have 3/4 of the page taken up by margin to the left and the right of the central content. I do appreciate the help so far though, really.
ok at first no i didnt know how to do that - but ive looked around the net and did manage to find a way.... it looks a bit messy so if i had time i would go through it again and see if i could clean anything up (maybe someone else here could) although it could just be me....it may in fact be all right.
Thank you very much for your help so far, but I can't seem to get the code you sent me to work at all. The only think that shows up is a grey box with a bit of text in it, even after I un-comment the style, and correct the image urls to point at the images, nothing shows up.
While not directly answering your question, personally I'd suggest you stay with what you know (tables) for your client's work. Learn CSS as a seperate project where you are not under the gun. The only reason I'm saying this is I also tried deviating from tables to CSS as part of client-work and it was pretty painful. You might end up really blowing your budget (time) learning on-the-fly and you'll be fighting the CSS getting changes the client done, etc. I'd suggest get his site done then take it upon yourself to recreate it tableless on your own time so you can learn. Here's a few good resources to bookmark: http://www.mezzoblue.com/zengarden/resources/ http://www.devguru.com/Technologies/css/quickref/css_index.html http://www.cssdrive.com/ Good luck.
the only thing i can think of is that you are not directing the links to the images properly (ie. to the right location) because its working on my computer right now as i type this - on both IE7 and Firefox.... like i said originally though - it may not be the best solution out there and available...but it should at least work
Thanks for all the help guys. I am currently working on learning CSS on my own time, but it's slow going as I have so many other things on my plate. *sigh* Anyway, I think the problem was that I took out the <!-- and --> tags around the script, which I have since seen in other scripts as well. Oy.