L.Adlon Posted June 14, 2014 Share Posted June 14, 2014 (edited) Hi. I've been trying to shed some of my past bad HTML habits, and have been successful to a point, but am still clinging to a few things because I can't seem to get the proper CSS methods to work. One of the final bad habits I've been clinging to has been the beloved 'using tables for formatting', and now I've been trying to replace that with proper CSS... but am (once again) not fully successful. I've read quite a bit of literature on it, but I still get things like gaps and slight misalignments... plus, what I'm trying to do has elements that might not be present in standard tutorials. So, I'm hoping someone here could give me a sample of the proper, current coding method for this simple structural sample. Here's what I'm trying to set up (without tables!): The interface consists of two 'frames' (not in the HTML sense)... One frame surrounds the header, the other surrounds the main content, and is vertically flexible. So, the individual graphic elements (in order) are: Fixed size top horizontal bar (960x20) Fixed size left vertical bar (20x200) Fixed size header image (920x200) Fixed size right vertical bar (20x200) ...then, directly underneath (attached) to that: Vertically flexible sized left vertical bar (20x?) Vertically flexible sized content (920x?) Vertically flexible sized right vertical bar (20x?) Fixed size horizontal bottom bar (960x20) All of this is horizontally centered to the monitor. Up to now, I built it with a table for the first part (header frame), and a table for the second part (with the two side bar images being repeated background images, rather than regular 'cell content' elements, to allow for the image to repeat as much as necessary, as the whole frame gets vertically stretched as needed). I'm now trying again to make it with pure CSS. I've defined a style for each element (headertop, headerleft, etc), and have each of the <img> elements sitting (in order) in the main body, within a <div>, and defined a style for that, as well as setting the border/padding of the body to 0. I figure you'd use float or something like that to push the side bars to the sides? Or, is it best to use the CSS positioning attributes? This is where I'm lost. Can anyone help out? (Sorry, I know you probably get positioning questions a lot... but I haven't noticed anything that also has vertically flexible sections) Edited June 14, 2014 by L.Adlon Link to comment Share on other sites More sharing options...
L.Adlon Posted June 14, 2014 Author Share Posted June 14, 2014 So far, I've set the left and right element styles to float:left and float:right respectively. That seems to work... or, at least, doesn't seem to be causing anything to break. In both IE and Firefox, the text frame I did (header part of my above sample) seems to be working so far.... although I'm not sure if it's break-proof, or if it's done the ideal way. Here's what I have so far: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html> <head> <title>Untitled</title> <style> .body {margin:0; padding:0} .topframe {display:block; width:960px;} .left {display:block; float:left;} .right {display:block; float:right;} </style> </head> <body> <div class="topframe"> <img src="images/top.jpg" width="960" height="20" border="0" class="top" /> <img src="images/side.jpg" width="20" height="100" border="0" class="left" /> <img src="images/side.jpg" width="20" height="100" border="0" class="right" /> <img src="images/bottom.jpg" width="960" height="20" border="0" class="bottom" /> </div> </body></html> Is this 'proper' so far? How would I go about doing the second part, where the frame is vertically flexible (and the side frame image repeats vertically as needed)? Link to comment Share on other sites More sharing options...
davej Posted June 15, 2014 Share Posted June 15, 2014 Rather than verbosely describing what you want it might be better to create diagrams. Is there some specific reason you want to stay with HTML 4.01? <!DOCTYPE html><html lang="en"><head><meta charset="utf-8"/><title>Untitled</title><style>body {margin:0; padding:0}.topframe{background-color:#ccc;}.top {width:960px;height:20px}.left {float:left;width:20px;height:100px}.right {float:right;;width:20px;height:100px}.bottom{width:960px;height:20px}img{border:none}</style></head><body><div class="topframe"> <img src="images/top.jpg" class="top" /> <img src="images/side.jpg" class="left" /> <img src="images/side.jpg" class="right" /> <br style="clear:both"/> <img src="images/bottom.jpg" class="bottom" /></div></body></html> Link to comment Share on other sites More sharing options...
L.Adlon Posted June 15, 2014 Author Share Posted June 15, 2014 Reason to stay with 4.01? Because I don't know any better, I guess. I'm not sure of how fully supported HTML5 is... nor really how I would update to it in the first place. Is it just the DOCTYPE declaration, and the use of HTML5 specific tags/attributes? Transitional is technically probably the most accurate description of my coding, anyway... Still shedding the last few bad habits (tables for formatting... occassionaly using <br /> to add spaces between things, etc). Today, I've been recoding my site to use the CSS alternative to <center>, as well as getting rid of most of the <br /> tags. I've been good with most of the other things... I'm using style sheets, and trying to do everything so it's html5 friendly. Really, at this point, it's just the occassional use of tables for formatting... and not having a full understanding of the more advanced methods available. Link to comment Share on other sites More sharing options...
Day Posted June 18, 2014 Share Posted June 18, 2014 There are multiple "right" ways to layout what you're describing, but for me it would depend on what the role of each section described would be. For instance, if the 20px right and left vertical sections are just to be a border, I wouldn't code the top and bottom ones out as different sections. Example: _____________________ |_____________________| | | | | | | | | |_____________| | | | | | | | | | | | | | | | | | | | | |__|_|_____________|_|__| |_____________________| Link to comment Share on other sites More sharing options...
L.Adlon Posted June 18, 2014 Author Share Posted June 18, 2014 Hi, Day. Ya, I see what you're saying, although I'm not fully sure of how to then place the bottom of the header frame. That's probably some sort of relative positioning or something... and CSS positioning can be a real mind-bender, if you're not a seasoned CSS vet. Even so, the graphic elements I have consist of the sides of the header being different from the side of the main body area. The header one is a non-repeating, unique graphic, and the main body one is a repeating graphic (as the body section is 'liquid' or whateve the current term is for a variable height screen. Previously, I did it all with tables (...ya, I know...), as I couldn't get the CSS positioning to ever work properly in past years. But, this week, I managed to successfully do it with CSS on the header part (fixed size)... but am not sure how to (best?) do the vertically flexible main body frame. I sort of have ideas, but even if they would work, I'm not sure if they are the ideal. The tiled graphic for the sides would probably be done using background-image, rather than an <img> file... and set to repeat? I'll have to experiment with it, but like I said, even if whatever I come up with works, I'm won't be sure if it's the best (most compatible/stable/efficient) method. Link to comment Share on other sites More sharing options...
dsonesuk Posted June 18, 2014 Share Posted June 18, 2014 The side column background images will only repeat to content within those columns, you can make a illusion that these repeat to bottom by using container element that match the width, but use position: absolute: and top:0; bottom:0; left:0; properties to force it to the height of a outer container (wrapper) that will match the height of highest content be it on side columns or main content area within it. Link to comment Share on other sites More sharing options...
Day Posted June 19, 2014 Share Posted June 19, 2014 If you're want to share your desired design, like a mockup, I can help ya out. It's just hard to do without knowing the role of each section. Link to comment Share on other sites More sharing options...
L.Adlon Posted June 20, 2014 Author Share Posted June 20, 2014 Is there a way to upload an image to this post, or is it required to be hosted on a webspace somewhere? I can't find a way to just upload an image here from my drive. Link to comment Share on other sites More sharing options...
Day Posted June 21, 2014 Share Posted June 21, 2014 I think you need to upload it first then post the url Link to comment Share on other sites More sharing options...
L.Adlon Posted June 21, 2014 Author Share Posted June 21, 2014 Ew... Well, what I'm after is really simple... A vertically flexible webpage content area that has a vertically repeating/tiled image on either side. Done with a table, it would be something like: <td background="edge.jpg" width="20"></td> <td background="contentbg.jpg" width="920"> .....website content here... </td> <td background="edge.jpg" width="20"></td> ...and those cells would stretch vertically to fit the content (and the edge images would repeat as needed, creating a tiled edge frame), and the contentbg.jpg (which has a width to match the content cell size, 920), would also tile vertically). Done in CSS... I'm not fully sure how to do that. <div> with the two edge images inside, floating left and right, respectively? (or, would the edges be their own divs?). But, then you have to deal with the images not starting at the very top, as dsonesuk, points out... which I tried, but that put the graphics in the zero postion (top left corner) of the monitor screen, as opposed to the top left corner of the <div>.... as I was probably doing something wrong, or that solution assumes certain things that aren't the case. No idea... which is why I kept reverting back to tables. I'd love to have a working CSS solution, as I do want to go 100% CSS. So, ya, basically just looking for a standard vertically flexible <div>, but with vertically repeating edge graphics (20x100). There will be a whole framed header thing and a footer above and below that, but I imagine I can figure those out. It's just the repeating edge and contentbg graphics that I don't fully know how to do properly in CSS. Link to comment Share on other sites More sharing options...
dsonesuk Posted June 21, 2014 Share Posted June 21, 2014 <!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" /> <title>Untitled Document</title> <script type="text/javascript"> /*<![CDATA[*//*---->*/ /*--*//*]]>*/ </script> <style type="text/css"> body{margin: 0; padding: 0; background-color: lightgrey;} #wrapper {margin: 0 auto; width: 960px; } .left, .right { width: 20px; } .left { float: left;} .right {float:right;} .content {background-color:#CCCC00;overflow: auto;} #header_wrap, #main_wrap {overflow:hidden; } #header_wrap { background-color:#CCFFCC;} #header_wrap .left, #header_wrap .right, #header_wrap .content {height: 200px} .top, #footer {height: 20px; background-color: #0099FF;} #main_wrap {background-image: url(edge.jpg);position:relative;} #inner_main {position: absolute; top:0; left:0; right:0; bottom:0; margin: 0 20px;background-image: url(contentbg.jpg); z-index: 0;} #inner_main ~ * { position:relative; z-index: auto;} #main_wrap .content {background: none;} </style> </head> <body> <div id="wrapper"> <div id="header_wrap"> <div class="top"></div> <div class="left">Left</div><div class="right">Right</div> <div class="content"> Content</div></div> <div id="main_wrap"><div id="inner_main"></div> <div class="left"><p>Left</p></div><div class="right"><p>Right</p><p>Right</p><p>Right</p><p>Right</p><p>Right</p><p>Right</p><p>Right</p></div> <div class="content"> <p>Content</p><p>Content</p><p>Content</p><p>Content</p></div> </div> <div id="footer"></div> </div> </body></html> Link to comment Share on other sites More sharing options...
L.Adlon Posted June 21, 2014 Author Share Posted June 21, 2014 Thanks for the code, dsonesuk. Although I generally understand the logic, I get a bit overwhelmed by parts of that. I would still need to replace the placeholder content you have there with repeating images, and apply your coding to make those images start at the top properly. So, it gets pretty cryptic for me. I tried sorting through it, and it broke on me. Not sure what I screwed up. Sections get positioned wrong, and even overlap. What's the CDATA thing at the top? I am totally unfamiliar with that. Link to comment Share on other sites More sharing options...
dsonesuk Posted June 21, 2014 Share Posted June 21, 2014 When you say repeating images, you do mean repeating background images right? all it does is repeat side background image all through the main_wrap area, so this will result right and left being filled, the inner_main overlaps the background image of main_wrap, but has 20px margin to show main_wrap bg image at sides. CDATA is just pre inserted comment code for javscript so ignore. Link to comment Share on other sites More sharing options...
L.Adlon Posted June 21, 2014 Author Share Posted June 21, 2014 Ya, background images. The header is all locked sizes and unique top/side/bottom graphics. The main content area is vertically flexible, with a vertically repeating 20x100 graphic, and a vertically repeating 920x100 background image. I'll have to play around with your code some more. It's a little tricky, as some of the syntax (and the grouping/combining of definitions, etc) is a bit new to me. I understand it all. It's just a bit tricky for my brain to wrap around some of it... kind of like reading a foreign language that you 'know', but it's not your native language... A bit tricky to wade through, even though you get the main content. And, when I modify it a bit, to work with my content, I inevitably (and inadvertantly) mess something up, that causes things to go all over the place. Wouldn't be a big deal if it wasn't for the 'foreign language' aspect of it, as I would easily be able to follow the logic and modify it to work. I'm just racing to get this site revision done, otherwise I'd be experimenting and hitting the books much more. Link to comment Share on other sites More sharing options...
dsonesuk Posted June 21, 2014 Share Posted June 21, 2014 (edited) mk2 side background image within #wrapper and show from top to bottom from header to main content sidebars <!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" /> <title>Untitled Document</title> <style type="text/css"> body{margin: 0; padding: 0; background-color: lightgrey;} #wrapper {margin: 0 auto; width: 960px;background-image: url(edge.jpg); } .left, .right { width: 20px; } .left { float: left;} .right {float:right;} .content {background-color:#fff;overflow: auto; margin: 0 2px;} #header_wrap, #main_wrap {overflow:hidden; } #header_wrap .left, #header_wrap .right, #header_wrap .content {height: 200px} .top, #footer {height: 20px; background-color: #0099FF;} #main_wrap {position:relative;} #inner_main {position: absolute; top:0; left:0; right:0; bottom:0; margin: 0 20px;background-image: url(contentbg.jpg); z-index: 0;} #inner_main ~ * { position:relative; z-index: auto;} #main_wrap .content {background: none;} </style> </head> <body> <div id="wrapper"> <div id="header_wrap"> <div class="top"></div> <div class="left">Left</div><div class="right">Right</div> <div class="content"> Content</div></div> <div id="main_wrap"><div id="inner_main"></div> <div class="left"><p>Left</p></div><div class="right"><p>Right</p><p>Right</p><p>Right</p><p>Right</p><p>Right</p><p>Right</p><p>Right</p></div> <div class="content"> <p>Content</p><p>Content</p><p>Content</p><p>Content</p></div> </div> <div id="footer"></div> </div> </body></html> EDIT: I guess it depends what side images look like and size to tell if repeating through #wrapper will locate or position itself correctly when viewed though from the sides. Edited June 21, 2014 by dsonesuk Link to comment Share on other sites More sharing options...
L.Adlon Posted June 21, 2014 Author Share Posted June 21, 2014 Cool. I'll tinker with that as well, and see where that brings me. Although I've moved to CSS for most things on the site, there's still a few little things I cling to, just because I'm still not fully comfortable (and knowledgable enough) to make it work properly. Ya, I still sometimes use tables for formatting... but only when my attempts to do it with CSS fail repeatedly, and I can't sort out why. My previous site was sort of half CSS, half.... well, bad format (standard HTML tricks). I had intended to do it full CSS, but was just getting a rats nest of a mess in both formatting and in text styling... mostly due to me misunderstanding some aspects of CSS, or inadvertantly having some other item affecting it. Now, I'm having another go... and doing much better this time around. The site is much cleaner and easier to update, and (although not fully complient), it's a heck of a lot closer to proper form now. I love CSS... when it works for me. Again, it's just a matter of me learning what I'm doing wrong, or learning some of the new methods and stuff. Thanks for your help so far, dsonesuk. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now