Hello, Do you know this layout ? Holy Grail 3 column liquid-layout: No Quirks Mode, No IE Conditional Comments http://matthewjamestaylor.com/blog/holy-grail-no-quirks-mode.htm I'm trying to make it look like: http://www.freeimagehosting.net/image.php?66c0bddf86.jpg I'm trying to insert this new div called "banner" above the main and the right-menu and besides the left-menu. Can anyone help me ? I'm with this problem for days! Thanks,
Add the #banner div right after the #colmask div start .... <div id="colmask"> <div id="banner"> <!--your #banner content here --> </div> <div id="colmid"> ... HTML: And this is the css: #banner{float:left;width:200%;height:200px;position:relative;left:200px;} Code (css): You can change the height to ur desired value. Hope it works .
Hello Cameljourney ! Thanks for the help, But i tryed this too and got error; When i put that div there the left-menu goes down and i don't want that. If you see the latout that i want to make: http://www.freeimagehosting.net/image.php?66c0bddf86.jpg See that's Banner div's is besides the left-menu content ! When i do what you send me to do i get the result that is attached . Thank you,
Hello, Thanks for the help, i have tryed that too and et no results =\ Do you have the code ? Thanks,
Holy grail is cute as a theoretical exercise, but it tries too hard to avoid using that one extra DIV at the cost of convoluted CSS. Content first columns are hard enough as it is without confusing it, so first I'd drop holy grail and put that extra DIV back in. As to what you want to do with it, content first columns don't entirely like the layout you are aiming for, but it is possible. The trick is to set a left margin on the banner equal to the width of the left column, then pad the top of the two right columns equal to the height of the banner (plus any extra desired padding), and then use a negative margin to ride the columns up UNDER the banner. http://www.cutcodedown.com/for_others/fmansoldo/template.html That's what you are trying to accomplish, right? As with all my examples the directory: http://www.cutcodedown.com/for_others/fmansoldo is unlocked so you can grab the files. Valid XHTML 1.0 Strict, Valid CSS 2, tested working all the way back to IE 5.5 and 5.2 Mac, as well as most every modern browser. Naturally being a content first columns they don't stretch, so you'd want to use fauxColumns for that - you could probably put one side's faux-column background on #pageWrapper, meaning you'd just need one extra wrapper around the three columns for the opposite side. Hope this helps.
I've made it different, what do you think about this method ? html code: .... <div id="colmask"> <div id="left"> <div id="logo">logo</div> <div id="div_busca">busca</div> </div> <div id="banner">banner</div> <div id="colmid"> <div id="colright"> .... css code: #colmask { position:relative; /* This fixes the IE7 overflow hidden bug and stops the layout jumping out of place */ clear:both; float:left; width:100%; /* width of whole page */ overflow:hidden; /* This chops off any overhanging divs */ /*background:#3F9; /* Left column background colour */ } #left { position:absolute; top:0; left:10; width:226px; height:2000px; /*por causa do BUG DO IE que nao entende que 100% é 100% !*/ overflow:hidden; margin:0 0px 0 10px; background:url("../images/01_left_repeat.jpg") repeat-y; } #logo { float:left; margin: 0px 0px 0px 23px; background:url("../images/01_logo.jpg") no-repeat; height:74px; width:174px; } #div_busca { float:left; margin: 0px 0px 0px 23px; background:#0f4; height:74px; width:174px; } #banner { position:relative; top:0; left: 241px; background:url("../images/01_banner_paris.jpg") no-repeat; height:170px; width:100%; } ............... Is attached a screen of the site that i'm coding. Hope exchange with you guys more codes and stuffs! Thanks for all! Bye
Well, that version has a lot of problems. First, it's not content first source order, depending on what the left column is, that may or may not be a good idea. Second, you are absolute positioning a column - this means you can't 'clear' to add a footer if desired, and the layout is more than likely to break. Absolute positioning anything without it being inside a wrapping element in flow is bad practice and likely to bite you in the ass sooner than later. Third, you are using a div for the site logo, which might not be appropriate to the content (depends on what you are planning on for headings and pages). Finally, you are fixing the height of #left, which restricts what you can put in it for content - since it's absolute positioned if it grows in height it could overlap your col2 element (as shown in the picture). It's interesting, but really this: position:absolute; top:0; left:10; width:226px; height:2000px; Code (markup): Would make me consider that layout undeployable 'real world' since in the long term that will rear up and bite you.
I put all the files here: http://sambainrio.com.br/stuff/ so it's better to understand the things and feel free to change whatever you want ! "First, it's not content first source order, depending on what the left column is, that may or may not be a good idea." I had no "option" because all the modifications i have made was to input a Banner in the layout: http://matthewjamestaylor.com/blog/holy-grail-no-quirks-mode.htm ; Second, you are absolute positioning a column - this means you can't 'clear' to add a footer if desired, and the layout is more than likely to break. Absolute positioning anything without it being inside a wrapping element in flow is bad practice and likely to bite you in the ass sooner than later. I didn't understand this, because as can you see in: http://sambainrio.com.br/stuff/ We do have a "footer"; i put #left with height:2000px; because when i tryied to display it in IE it bug's ! in all other browser it's ok and gets down if i put height:100% =| Hope you can help me with this, because i'm trying to make a "real world" and cross-browser site ! My target is to put a banner in that layout.. just that.. a banner besides "left menu" and above the main and right menu ! Thanks for all!
Hi On the subect of modifying the holy-grail template - http://matthewjamestaylor.com/blog/holy-grail-no-quirks-mode.htm I am trying to change the widths of the left and right columns (to say 140px). Is that possible with this template? I have tried so many variations with no success. The CSS is here if it helps: http://matthewjamestaylor.com/blog/holy-grail-no-quirks-mode.css Any help hugely appreciated! Kev
inkydolphin, I just completed a tool to generate fixed - liquid - fixed 3 column layout. You can change the widths of the left and right columns freely. But not equal height ... http://www.pagecolumn.com/liquidfixed/3_col_fix-liquid-fix.htm
Thanks! That must have taken some work. I'll try and use it to work out how to change the column widths in my css (or maybe change it to your code if that's ok with you - perhaps the simpler option).
Thanks Unigogo - your clever tool made me think about what I needed to change in my CSS to get the right result. Problem solved!