Tue, 2008-10-14 04:02
Hello everyone i recently made this layout and now i finaly put it to use. But when scripting it i noticed that actualy making this layout 100% hight wasn't that easy as i tought it would be. I readed up on alot of hacks for IE and so, but i never got it right. I tried everything i could find but i am totaly stuck here. I hope people can help me out here.
Tnx in advance.
HTML CODE ( Cuted out some php code as that was totaly irrelivant )
<!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'> <head> <meta http-equiv='Content-Type' content='text/html; charset=utf-8' /> <title>« The Exalted ¦¦ Yvresse »</title> <script type="text/javascript" src="http://www.wardb.com/js/exguilds.js"></script> <link rel="stylesheet" type="text/css" media="screen,projection" href="css/layout.css" /> </head> <body> <div id='container'> <div id='header'> <img src='images/layout/header1.jpg' alt='' /> <img src='images/layout/header2.jpg' alt='' /> <img src='images/layout/header3.jpg' alt='' /> <img src='images/layout/header4.jpg' alt='' /> <img src='images/layout/header5.jpg' alt='' /> </div> <ul id='links'> <li><a href='index.php?page=home' title='homepage'>Home</a></li> <li><a href='/forum/' title='Register yourself'>Forum</a></li> <li><a href='index.php?page=members' title='Members of the guild'>Members</a></li> <li><a href='#' title='Rules for our guild'>Rules</a></li> <li><a href='#' title='Alliances we have'>Alliance</a></li> <li><a href='#' title=''>Test</a></li> <li><a href='#' title=''>Test</a></li> </ul> <div id='content'> <p>put some txt here</p> </div> </div> </body> </html>
CSS CODE
* { margin:0; padding:0 } * html #container { height:100% } html, body { height:100% } body { background-color:#292720; font-family:Verdana, Arial; font-size:12px; line-height:20px; color:#333; text-align:center } #container { width:900px; position:relative; text-align:left; margin:0 auto; height:65%; min-height:65%; } #header { line-height:0; font-size:0 } /* LINKS */ #links { background:#fff url(../images/layout/linkbalk.jpg) top left no-repeat; height:60px; list-style-type:none; padding-left:60px; } #links li { float:left; margin:5px 20px; } #links li a { color:#fff; font-size:125%; text-decoration:none; font-weight:bold; font-family:Georgia, 'Times New Roman' } #links li a:hover { border:1px dotted #C63; border-width:1px 0 } #content { padding:0 120px; background:#fff url(../images/layout/contentruler.jpg) top left repeat-y; min-height:100%; height:auto !important; height:100% } h1 { display:block; border-bottom:2px solid #630; margin-bottom:15px; padding:5px 15px } p { text-align:justify; margin-top:10px }
Tue, 2008-10-14 04:02
#1
Forgot to give you all a
Forgot to give you all a online vieuw of the site
Tue, 2008-10-14 05:04
#2
Thank you for bringing valid
Thank you for bringing valid CSS and XHTML to the forum 
Please see the 100% Height in CSS topic in the How To forum and see if it helps.
Mods and gurus – THANK YOU!
For your time, knowledge and experience so willingly and generously given.
Please come back tomorrow and sort us all out again 
Tue, 2008-10-14 14:34
#3
Well i followed it as far as
Well i followed it as far as my css knowladge whend but i can't get it to come ok. Because my div structures are totaly diffrent. I have a container wich goes around everything, than i have a header wich is for the header ofcourse. Than the links wich is for the links 
, and than i have my content and only that part needs 2 strecht to the bottom. But my background is in the content. Because my layout needs it to be like that.
I would love someone who can give me some pointers. I maybe good add typing strict but the css i am not so good add. I hope someone can give me some idees or fixes ( would even be better ). I tryed everything i could find and nothing seems to work. The best thing i could find is curently on the website itself.
Tnx in advance.
Tue, 2008-10-14 21:20
#4
Could you give us a link to
Could you give us a link to the website?
Forgot you had already given it :blushing:
You could try overflow:hidden on the #container but perhaps someone with more knowledge than I have can help you out.
Guru needed please.
Mods and gurus – THANK YOU!
For your time, knowledge and experience so willingly and generously given.
Please come back tomorrow and sort us all out again
Wed, 2008-10-15 03:35
#5
Lol i would love a guru to
Lol i would love a guru to come and help me on this, i realy tried all that i know and could find. Any assistance is realy appreciated.
Greetz ZoeF
P.S.: that overflow:hidden doesn't work 
tnx anyway, you never know
Wed, 2008-10-15 05:10
#6
Sorry I couldn't help more
Sorry I couldn't help more Zoe 
Mods and gurus – THANK YOU!
For your time, knowledge and experience so willingly and generously given.
Please come back tomorrow and sort us all out again
Wed, 2008-10-15 09:22
#7
Read Gary's last comment
Read Gary's last comment here and see if it helps anything.
Mods and gurus – THANK YOU!
For your time, knowledge and experience so willingly and generously given.
Please come back tomorrow and sort us all out again
Wed, 2008-10-15 13:39
#8
Well didn't work, i am
Well didn't work, i am starting to give up. Is there realy no one who thinks he can fix my problem ?
Wed, 2008-10-15 22:36
#9
I haven't time to look at
I haven't time to look at this in depth, and tbh I share Gary's views on 100% height pages, but trying to do this on an element sitting below a fixed height element isn't going to work well, you could try something along the lines of height 100% on the element so that it does stretch the full viewport height and position the header or element with fixed height position:absolute so that it is taken out of the equation for full height and no longer interferes; content within the full height elements child elements/content would need to be padded at the top so that they fell below the bottom edge of the header and wasn't hidden.
Thu, 2008-10-16 02:58
#10
Well i guess i wil just
Well i guess i wil just leave it as it is right now. I know this is pretty hard as i tryed everything i could find. So i wil just leave it as it is and lets hope one day i find a miracle solution. If i do i wil put it in here so i can be used for future references.