10 replies [Last post]
ZoeF
ZoeF's picture
Offline
Regular
Belgium
Last seen: 11 years 43 weeks ago
Belgium
Joined: 2008-05-05
Posts: 14
Points: 0

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>&laquo; The Exalted &brvbar;&brvbar; Yvresse &raquo;</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 }

ZoeF
ZoeF's picture
Offline
Regular
Belgium
Last seen: 11 years 43 weeks ago
Belgium
Joined: 2008-05-05
Posts: 14
Points: 0

Forgot to give you all a

Forgot to give you all a online vieuw of the site

http://exalted.zoef-design.be

Smee
Smee's picture
Offline
Elder
Adelaide, Oz
Last seen: 3 years 23 weeks ago
Adelaide, Oz
Timezone: GMT+9.5
Joined: 2007-06-10
Posts: 1596
Points: 340

Thank you for bringing valid

Thank you for bringing valid CSS and XHTML to the forum Smile

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 Smile

ZoeF
ZoeF's picture
Offline
Regular
Belgium
Last seen: 11 years 43 weeks ago
Belgium
Joined: 2008-05-05
Posts: 14
Points: 0

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 Tongue , 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.

Smee
Smee's picture
Offline
Elder
Adelaide, Oz
Last seen: 3 years 23 weeks ago
Adelaide, Oz
Timezone: GMT+9.5
Joined: 2007-06-10
Posts: 1596
Points: 340

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. Smile

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 Smile

ZoeF
ZoeF's picture
Offline
Regular
Belgium
Last seen: 11 years 43 weeks ago
Belgium
Joined: 2008-05-05
Posts: 14
Points: 0

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 Laughing out loud tnx anyway, you never know Laughing out loud

Smee
Smee's picture
Offline
Elder
Adelaide, Oz
Last seen: 3 years 23 weeks ago
Adelaide, Oz
Timezone: GMT+9.5
Joined: 2007-06-10
Posts: 1596
Points: 340

Sorry I couldn't help more

Sorry I couldn't help more Zoe Sad

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 Smile

Smee
Smee's picture
Offline
Elder
Adelaide, Oz
Last seen: 3 years 23 weeks ago
Adelaide, Oz
Timezone: GMT+9.5
Joined: 2007-06-10
Posts: 1596
Points: 340

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 Smile

ZoeF
ZoeF's picture
Offline
Regular
Belgium
Last seen: 11 years 43 weeks ago
Belgium
Joined: 2008-05-05
Posts: 14
Points: 0

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 ?

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 47 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

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.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

ZoeF
ZoeF's picture
Offline
Regular
Belgium
Last seen: 11 years 43 weeks ago
Belgium
Joined: 2008-05-05
Posts: 14
Points: 0

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.