SitePoint Sponsor |
|
User Tag List
Results 1 to 7 of 7
-
Jun 18, 2006, 21:03 #1
- Join Date
- Jun 2006
- Posts
- 7
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Equal Column Height Attempt.Help, No luck.
The guide here: http://www.positioniseverything.net/...ut/equalheight
is not working for me. The Overflow:hidden isn't chopping off my extra column height, that is making my two columns equal in heighth.
My code goes like this:
Code:#Main { width: 728px; position: absolute; background-color: #999999; left: 30%; padding-bottom: 32767px; margin-bottom: -32767px; } html,body { background-color: #8b8b98; } #Navi { position: absolute; width: 10%; background-color: #999999; left: 20%; padding-bottom: 32767px; margin-bottom: -32767px; } #wrapper { overflow: hidden; } MAIN PAGE BELOW The usual stuff <div id="Wrapper"> <div id="Navi">Navigation Bar content that needs to match the Main content area's height.</div> <div id="Main">Main content area with blog/reviews/etc.</div> </div>
I've also tried my hand at Faux Columns....but that didn't work either. My attempt below
Code:#Main { width: 728px; position: absolute; background-color: #999999; left: 30%; } html,body { background-color: #8b8b98; } #Navi { position: absolute; width: 10%; background:url(Navi_Back.png) repeat-y left; left: 20%; } *Main Page Below* <div id="Navi">Navigation Bar content that needs to match the Main content area's height.</div> <div id="Main">Main content area with blog/reviews/etc.</div>
-
Jun 18, 2006, 21:30 #2
- Join Date
- Sep 2005
- Location
- Zurconion Soon!
- Posts
- 1,549
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
The embarassingly simple secret is to use a vertically tiled background image to create the illusion of colored columns. For SimpleBits, my background image looks something like Figure 2 (proportions changed for demonstration), with a decorative stripey thing on the left, a wide white section for the content column, a 1 pixel border, and a light brown section for the right column’s background followed by the reverse of the left side’s decorative border.
http://www.alistapart.com/articles/fauxcolumns/
-
Jun 18, 2006, 22:56 #3
- Join Date
- Jan 2005
- Location
- Netherlands
- Posts
- 4,300
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Hello
Why do you want to use position absolute ?
Code:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>12345 12345 12345 12345 12345</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <style type="text/css"> *{margin:0;padding:0;} body{background: #8b8b98;} .wrapper{ width:728px; overflow: hidden; margin:0 auto; } .main,.navi{float:left;} .main{width:628px;background:#ff6600;} .navi{width:100px;background:#999999;} .ex{padding-bottom:32767px;margin-bottom: -32767px;} </style> <script type="text/javascript"> </script> </head> <body> <div class="wrapper"> <div class="navi ex">Navigation Bar content that needs <br /><br /><br />to match the Main content area's height.</div> <div class="main ex">Main content area <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />with blog/reviews/etc.</div> </div> </body> </html>
-
Jun 18, 2006, 23:35 #4
- Join Date
- Jun 2006
- Posts
- 7
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
I'm kinda new to CSS, so I started with position absolute. I'm going to research more about CSS Positioning, and give your method a try. Thx
-
Jun 19, 2006, 01:37 #5
- Join Date
- Jan 2005
- Location
- Netherlands
- Posts
- 4,300
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Hello
2 column bare 1200 px height
Code:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>Basic 2 Column Bare </title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <style type="text/css"> *{margin:0;padding:0;} body{font-size:75%;background:#a2a2a2;/*padding:2%;*/} div,p,i{font-size:1em;} head+/**/body code,head+/**/body i{font-size:1.1em;} p span,p code,p a{color:#0000ff;} code b,p i{color:#ff0000;font-weight:normal;} * html .he,* html .fo,* html .na,* html .wra{height:1%;} .wra{ margin:0 auto; background:#b7b7b7; } .he{background:#ff8c00;} .fo,.na{background:#fbfbfb;} .l,* html .r,.ll{float:left;} .w{width:64em;margin-top:.5em;} .l{width:18em;} head+body .r{margin:0 0 0 18em;} .ll{background:#d8d8d8;width:100%;} .fo{margin:0 auto;clear:both;} .wra h1,.wra p,.fo p{padding:5px;} /* .l{display:none;}head+body .r{margin:0;} */ .h{height:1200px;} </style> </head> <body> <div class="wra w"> <div class="he"> <h1>header</h1> <p>Basic 2 Column Bare</p> </div> <div class="na"><p>nav</p></div> <div class="l"><p>left<br /><br /><br />end</p></div> <div class="r"> <div class="ll h"> <p>Content main box must always be the highest.</p> <p><a href="../../../layouts.htm">back</a></p> <p> <code> <i>main parameter</i><br /> .w{width:<b>64</b>em;margin-top:.5em;}<br /> <a href="2bare100.htm">class .w switched off (100% width)</a><br /> <i>parameter</i><br /> .<b>l</b>,* html .r,.ll{float:<b>left</b>;}<br /> .l{width:<b>18</b>em;}<br /> head+body .r{margin:0 0 0 <b>18</b>em;}<br /> <a href="2bare-r-col.htm">column right</a><br /> </code> </p> <p> <span> Left right column floating.<br /> No 3px jog, float clearing in Content column.<br /> Content column adjusts to width.<br /> Footer clears float<br /> </span> </p> <p> Main advantage it's logic build up of columns, highly flexible, easy maintenance and extensibility. </p> <p> The relative disadvantage the Content box must always be higher then left or right column. </p> <p>start <!-- <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> --> end </p> </div> </div> <div class="fo w"><p>footer</p></div> </div> </body> </html>
-
Jun 19, 2006, 10:12 #6
- Join Date
- Jun 2006
- Posts
- 7
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
I guess I'm not quite following. I've had success with the faux columns method now, but I have one quip.
I've got my Nav Bar at 20% left. I then did my repeating background Navi_Back.png at 20% left as well, thinking it would line up. It doesn't line up. Why? I had to use 22% left, and still it hangs out a little bit.
Code:#Main { width: 728px; position: absolute; background-color: #999999; left: 30%; } body { margin:0; padding:0; background-color: #8b8b98; background-image: url(Navi_Back.png); background-repeat: repeat-y; background-position: 22% 0; } #Navi { position: absolute; width: 10%; background-color: #999999; left: 20%; }
Can you guys tell me the methods you were trying to showing me? I could kinda see that one was the positioniseverything method. The other I can't follow.
Why isn't my background tiled image lining up. It's a 200*1 pixel image made in photoshop will paint bucket of #999999. Anybody? I really really do appreciate your guys' help, I'm just kinda new to CSS, and cluttered examples confuse me.
-
Jun 19, 2006, 10:28 #7
- Join Date
- Jan 2005
- Location
- Netherlands
- Posts
- 4,300
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Hello
Sorry position absolute is NS 4 , dreamweaver 3 , old time , for faux columns or the PIE model, or whatever model
PS the other way is the PIE way ?
basic faux column
Code:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>12345 12345 12345 12345 12345</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <style type="text/css"> html,body{height:100%;} *{margin:0;padding:0;} body{background:#8b8b98;} #main{ width:728px; margin:0 auto; background:#999999 url(xx.gif) repeat-y } * html #main{height:100%;} head+body #main{min-height:100%;} #navi{ float:left; width:166px; } </style> </head> <body> <div id="main"> <div id="navi"><p>12345</p></div> <p>12345</p> </div> </body> </html>
Last edited by all4nerds; Jun 19, 2006 at 11:07.
Bookmarks