Reply
DIV 100% Height
Old 04-02-2007, 08:12 PM DIV 100% Height
Novice Talker

Posts: 5
Name: Mike
I know it's been discussed already and there's a bunch of tutorials around. But I can't seem to make it work!
Does this:
http://beta.helios.ca/agena/index2.html
css is here: http://beta.helios.ca/agena/inc/css/main3.css
I also can't seem to remove that space between the menu and the content... even with all margins and paddings set to 0px......
If any body can help me fix these problems it would be really great!!!
Thanks
Mike

Last edited by He|ios : 04-02-2007 at 09:27 PM.
He|ios is offline
Reply With Quote
View Public Profile
 
When You Register, These Ads Go Away!
Old 04-02-2007, 08:29 PM Re: DIV 100% Height
Tom_M's Avatar
Ultra Talker

Posts: 251
Name: Tom Maurer
Location: Pennslvania, USA
Quote:
Originally Posted by He|ios View Post
I know it's been discussed already and there's a bunch of tutorials around.
http://css-discuss.incutio.com/?page...dPercentHeight
Tom_M is offline
Reply With Quote
View Public Profile
 
Old 04-02-2007, 08:33 PM Re: DIV 100% Height
Novice Talker

Posts: 5
Name: Mike
I've read that.. it's in my code..

if you look at the page the div actually takes 100% of the page, and even more... with the same code :S..

the thing is that I can't afford to have permanent scrollbars..

Last edited by He|ios : 04-02-2007 at 08:34 PM.
He|ios is offline
Reply With Quote
View Public Profile
 
Old 04-02-2007, 08:43 PM Re: DIV 100% Height
LadynRed's Avatar
Super Moderator

Posts: 6,553
Location: Tennessee
Take out the 'clear: both" on your #spacerBG - you don't need it, nothing is floated !

Another question, why are you using a piece of an image as a spacer anyway ? Just carve out your heading to include that piece of graphic and make it all one image.

There's no reason to use all that mess mouseover code to get an image rollover. Use the hover pseudo-class on the link tag to change the background image when you mouse over the link. You also shouldn't be using images for links. You can get that same rollover with pure CSS - and no images except the header background you already have.

Oh yeah... one more thing.. the * html hack will break in IE 7. Learn to use conditional comments to target IE browser versions.
__________________
Web Goddess & Web Standards Evangelist :) - Tables Be Gone !!
"Using or working with IE is like having to wear a 1970's polyester suit with pantyhose and a girdle, to work everyday"
Carolina Corvette Club
LadynRed is offline
Reply With Quote
View Public Profile
 
Old 04-02-2007, 08:51 PM Re: DIV 100% Height
Novice Talker

Posts: 5
Name: Mike
well as for the clear:both.. the navlist is floated.

I'll re cut the image so there's no spacer, that's really something I should of done ^.^!

doesn't answer my question tho
why does the content div take more then 100%? how can I fix that?
He|ios is offline
Reply With Quote
View Public Profile
 
Old 04-02-2007, 09:27 PM Re: DIV 100% Height
Novice Talker

Posts: 5
Name: Mike
updated the files with your recommandations.. still the same problem tho
He|ios is offline
Reply With Quote
View Public Profile
 
Old 04-02-2007, 10:15 PM Re: DIV 100% Height
Kirtan's Avatar
Who Am I?

Posts: 377
Name: Venkat Raj
Location: Salem, South India
This works
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>AGENA Informatique inc.</title>
<style>
/* DonorPerfect Main CSS  */
body, html {
    background-color: #ffffff;
    font: normal 8pt Tahoma; 
    color : #666666;
    text-decoration: none;
    height:100%;
    max-height:100%;
    overflow:hidden;
    margin:0px;
    border-width: 0px;
    padding:0px;
}

A:link {
    font: bold 8pt Tahoma; 
    color : #666666;
    text-decoration: none;
}

A:visited {
    font: normal 8pt Tahoma; 
    color : #666666;
    text-decoration: none;
}

A:hover {
    font: normal 8pt Tahoma; 
    color : #999999;
    text-decoration: underline;
}


/* LAYOUT */ 
#mainContainer {
    height:100%;
    max-height:100%;
}
#header {
    background-image:url(images/dp_01.jpg);
    background-repeat:no-repeat;
    width:993px;
    height:217px;
}

#middle {
    background-image:url(images/dp_02.jpg);
    background-repeat:repeat-y;
    width:993px;
    height:100%;
}
/* menu */
#navlist {
padding:0;
margin:0;
padding:175px 0 0 90px;
}
#navlist ul {
margin:0;
padding:0;
}
#navlist li {
    display: inline;
    list-style-type: none;
    padding-right: 25px;
}

#navlist a { 
    font: normal 18pt Tahoma; 
    color : #2387be;
    text-decoration: none;
    padding-right:25px;
}

#navlist a:link, #navlist a:visited {
    font: normal 18pt Tahoma; 
    color : #2387be;
    text-decoration: none;
}

#navlist a:hover {
    font: normal 18pt Tahoma; 
    color : #72b9e3;
    text-decoration: none;
}
#navlist li{
    float: left;
    margin: 0px;
    padding: 0px;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<body>
<div id="mainContainer" align="center">
    <div id="header">
            <ul id="navlist">

                <li><a href="#">AGENA</a></li>
                <li><a href="#">DonorPerfect</a></li>
                <li><a href="#">Modules</a></li>
                <li><a href="#">Members</a></li>
                <li><a href="#">Shopping</a></li>
                <li><a href="#">About</a></li>

                <li><a href="#">Contact</a></li>
            </ul>
    </div>
    <div id="middle">middle</div>
    <!--<div id="footer">footer</div>-->
</div>
</body>
</html>
But i prefer the #navlist div not child of header to avoid padding-top and right issue. This is MY CHOICE.
__________________
All the Buddhas of all the ages have been telling you a very simple fact: Be -- don't try to become.
Kirtan is offline
Reply With Quote
View Public Profile Visit Kirtan's homepage!
 
Old 04-02-2007, 10:39 PM Re: DIV 100% Height
Novice Talker

Posts: 5
Name: Mike
Thx mate
He|ios is offline
Reply With Quote
View Public Profile
 
Reply     « Reply to DIV 100% Height
 

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

vB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are Off
Pingbacks are Off
Refbacks are Off




   
RSS Feed  Feeds: RSS   JS   XML
RSS Feed  Feeds for this forum: RSS   JS   XML

 


Page generated in 0.16330 seconds with 12 queries