 |
 | Home | Contact Us | FAQ | Search & Site Map | Link to Us |
 | Sign In | Join | Other 45 Sites in Network |
| HomeDiscussion GroupsGeneralPHPASPPerlColdFusionFlashHTML, CSS, ScriptsBrowsers |
Webmaster Forum / HTML, CSS, Scripts / CSS / January 2006block element layout - how?
hello there. i am asking for a little help with creating layout like this: 13px 500px 13px .------------------------------------------------------------. | | | | | | 13px |----+----------------+ center area. +----------------+----| | | empty space. | main website | empty space. | | | | height and | window. | height and | | | | width depends | | width depends | | | | on the center | | on the center | | | | area. | | area. | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | |----+----------------+ +----------------+----| | | | | | |13px '------------------------------------------------------------' \--------------------------. .----------------------------/ \/ 100% width i was trying many of possibilities, trying to solve it for all evening but with no luck... ;( always some part of it is wrong (in IE almost always). if someone could spare his free time and take a look on this i would be really really grateful. regards. > hello there. i am asking for a little help with creating layout like > this: [quoted text clipped - 26 lines] > spare his free time and take a look on this i would be really really > grateful. What you want wrt to the width is no problem: html: <div id="container"> <div id="page"> Your actual page content here </div> </div> css: body{ margin:0; padding:13px; } #container{ text-align:center; /* for Win-IE5 */ } #page{ width:500px; margin:0 auto; text-align:left; /* countering the value above */ } What you want in height isn't that easy: at the top it's simple, but to make all pages stop at 13px from the bottom, regardless of the height of the content or the height of the browser window is impossible imo. There are ways to get pages to extend till the bottom of the window when they're too short, but not reliably cross browser, and I don't think I've come across a way to include a 13px empty space at the bottom yet. (not tried very hard though) Just give it up and start thinking in web pages instead of rectangular boxes with margins.  SignatureEls http://locusmeus.com/ Sonhos vem. Sonhos vão. O resto é imperfeito. - Renato Russo - > Just give it up and start thinking in web pages instead of > rectangular boxes with margins. and who told you that height is 100% of the screen? height has no matter, it is content "window" dependent. >> Just give it up and start thinking in web pages instead of >> rectangular boxes with margins. > > and who told you that height is 100% of the screen? height has no > matter, it is content "window" dependent. Who said anything about screen? AFAICS I didn't mention the word at all. If you mean "who told you that height is 100% of the viewport", then okay, my bad. Your example doesn't explicitly say it, it just looked like you wanted 13px margin at the bottom, and I assumed you didn't want more, nor less than 13px. Not sure what you mean by 'content "window"', but if you mean that height in your example isn't relevant, than just go with the stuff I gave you, and you'll be fine. SignatureEls http://locusmeus.com/ Sonhos vem. Sonhos vão. O resto é imperfeito. - Renato Russo - Now playing: Dr. Feelgood - She's Got Her Eyes On You it won't be OK, because in your solution you have missed the 13px "stripes" and "squares" inside. I need them to make something like "internal frame" (check my test webpage http://marti.presents.pl/test/). I'm not an author of this project and I know it can turn out impossible to make, nonetheless I'd like to try it. > hello there. i am asking for a little help with creating layout like > this: It's a basic 3 column layout. What, specifically, have you tried? And and URL showing your best efforts would help a lot. Signaturejmm (hyphen) list (at) sohnen-moe (dot) com (Remove .AXSPAMGN for email) no. it is not simple three column layout. there would be no problem if it would be. here you can find my last efforts, all I need now is two vertical lines to the left and right, just to close the frame around main content "window". note that you cannot simply use an background property because it will interfere with frame corners... height has no matter in my layout. frame should always end with content "window". somebody? oops, i forgot to paste a link ;) here it is: http://marti.presents.pl/test/ > oops, i forgot to paste a link ;) > here it is: http://marti.presents.pl/test/ Looks very complicated when looking at the source - if only I could figure out what you really want... Do you want the left and right 'sidebars' to be without that background? Do you want a plain and simple black border around both sidebars? Do you want 13px margin between the sidebars and the side of the viewport? Why are you using four divs for the corners? Not to get the black borders I hope? SignatureEls http://locusmeus.com/ Sonhos vem. Sonhos vão. O resto é imperfeito. - Renato Russo - Now playing: Dr. Feelgood - Blues Jam - Oil City Sheiks I have provided a screenshot to show how it should looks like. please open http://marti.presents.pl/test/ once again. yes, it is complicated, but i have no other ideas how to paste few background images in one DIV... and I need it because there is no simple solution to make a frame similar to mine when there is no constant width and height given. First things first, right? Here goes: Please, quote relevant bits of messages when you reply to them! Then: > I have provided a screenshot to show how it should looks like. please > open http://marti.presents.pl/test/ once again. > > yes, it is complicated, No, it isn't at all. Really. > but i have no other ideas how to paste few > background images in one DIV... You only need two background images. Black borders come with the html, no need for images. > and I need it because there is no > simple solution to make a frame similar to mine when there is no > constant width and height given. Look: http://here.locusmeus.com/temp/waste.html SignatureEls http://locusmeus.com/ Sonhos vem. Sonhos vão. O resto é imperfeito. - Renato Russo - > First things first, right? > Here goes: [quoted text clipped - 21 lines] > Look: > http://here.locusmeus.com/temp/waste.html Okay, I see that IE doesn't want to accept the negative margin, so here's another version, with only one extra trick div, no extra background images, works in IE, Firefox and Opera: http://here.locusmeus.com/temp/waste-ie.html SignatureEls http://locusmeus.com/ Sonhos vem. Sonhos vão. O resto é imperfeito. - Renato Russo - you are my hero, this is exactly what i wanted to get. ;) thank you, thank you, thank you. i have to study that code carefully - i wish i'd have more time for it. once again thanks, and i am going to check it. > you are my hero, this is exactly what i wanted to get. ;) > thank you, thank you, thank you. i have to study that code carefully - > i wish i'd have more time for it. > > once again thanks, and i am going to check it. You're welcome - please show your gratitude by quoting relevant parts of messages you reply to? You never know if you'll need help another time, and non-quoters do eventually (or sometimes at once) end up in the killfiles of the knowledgeable.. SignatureEls http://locusmeus.com/ Sonhos vem. Sonhos vão. O resto é imperfeito. - Renato Russo - "You're welcome - please show your gratitude by quoting relevant parts of messages you reply to? You never know if you'll need help another time, and non-quoters do eventually (or sometimes at once) end up in the killfiles of the knowledgeable.." -------------------- sorry for that but I have to use google website system as I am not at home and far away from my precious news reader. I have no option to paste text as a quote and when writting a message I can't even tell how it will looks like. anyway, I won't write a word from now on as my problem is solved. thanks! > "You're welcome - please show your gratitude by quoting relevant parts > of messages you reply to? You never know if you'll need help another [quoted text clipped - 4 lines] > > sorry for that but I have to use google website system That isn't a problem, this link shows you how to easily quote with googlegroups 'system': http://www.safalra.com/special/googlegroupsreply/ > as I am not at > home and far away from my precious news reader. I have no option to > paste text as a quote and when writting a message I can't even tell how > it will looks like. See above ;-) > anyway, I won't write a word from now on as my problem is solved. *This* problem is solved - you have no idea about future problems - believe me, they'll come <g> SignatureEls http://locusmeus.com/ Sonhos vem. Sonhos vão. O resto é imperfeito. - Renato Russo - Now playing: Emerson, Lake & Palmer - Lucky Man > http://marti.presents.pl/test/ You made it a lot more complicated than it needs to be. How about: <URL:http://kchayka.c-net.us/test/html/waste.html> Adjust colors and backgrounds to taste. SignatureReply email address is a bottomless spam bucket. Please reply to the group so everyone can share. hello there. you have obviously not looked very carefully at my example ;) in your example borders are fat and it is placed exactly when content layer ends - well it is just an ordinary border after all. in mine - frame is 3px thick and it is a little "inside" to optically look like being placed under the content layer. please open my link once again. i've pasted a screenshot now to show how I wanted it to look like. > hello there. you have obviously not looked very carefully at my example > ;) Hello there. You have obviously not read the parts about adjusting the background, etc. as you see fit. You want to be spoon-fed? Seems you also have not read the part about proper quoting in usenet, and using that abomination called google groups. <URL:http://www.safalra.com/special/googlegroupsreply/> > in your example borders are fat In your ASCII drawing, you specified a 13px frame, which is what I made them. If you don't like them, make them smaller. > and it is placed exactly when content > layer ends I don't know what this means. If you mean the content top and bottom borders are in line with the frame, then yeah. That's what your drawing showed. Adjust the negative margins to whatever value suits your fancy. > - well it is just an ordinary border after all. in mine - > frame is 3px thick and it is a little "inside" to optically look like > being placed under the content layer. Did you even bother looking at the code to see what it was doing, or do you still want to be spoon fed the answer? All you'd have to do is adjust the borders, margins and backgrounds, and it would be exactly what you want. Gee whiz, use a little imagination and initiative, will ya? > please open my link once again. i've pasted a screenshot now to show > how I wanted it to look like. Now please take some time to learn from the examples given you instead of expecting people to just hand the answers over. I don't think I'll waste any more time on you. SignatureReply email address is a bottomless spam bucket. Please reply to the group so everyone can share. > hello there. i am asking for a little help with creating layout like > this: Just float the left stuff, left and float the right stuff, right and allow the center stuff to flow between the two. SignatureGus |
Reply to this Message |
 Sign In
 Join
 My Latest Posts My Monitored Threads My Blog My Photo Gallery My Profile My Homepage Start New Thread Enable EMail Alerts Rate this Thread
|
©2009 Advenet LLC Privacy Policy - Terms of Use
This website includes both content owned or controlled by Advenet as well as content owned or controlled by third parties.