1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Easy CSS question - height of a DIV

Discussion in 'CSS' started by le007, Jun 27, 2008.

0
Page 2 of 2
  1. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #21
    Okay, done, but I had been a little confused by what you called the footer. McCabe has theirs inside their Flash, but looks kinda attatched to the bottom of that Flash box either way... the red isn't part of the "footer" at all. Just a background of a 100% high page.

    You should likely ignore everything in the header as it doesn't pertain to you really, I just wanted the page to look like McCabe's. The important part for you is
    html, body
    #container
    #flash

    The box called #flash is your content div, your inner div. Normally, if you had a footer that was to stay at the bottom of the page, you'd use the technique I told you about, where the footer comes after the close of #container, and has a set height, then is pulled up over the bottom of #container with a negative top margin (as #container is 100% high, footer would always be below the screen and the user'd have to always scroll). McCabe's footer doesn't work like that, as it's NOT always at the bottom of the page, but under the Flash. So I just stuck it after the #flash box and looks the same. Normally, you would add bottom padding to your inner box (#flash in this case) so that if you had a pulled-up footer, the content is not covered by it. You canNOT add bottom padding to #container-- remember it's 100% high already.

    Take this page and either add/remove text to see th size difference, or just do insane text-resizes in Mozilla or Safari:
    http://stommepoes.nl/LeoMcCabe/leomccabe.html

    Works in Opera 9.2, FF2, FF1.5, Konqueror, Safari-for-Windows, IE6 and IE7, valid and strict HTML4 and CSS. There are some hacks for IE6 in there for the menu, which you wouldn't need unless you wanted their menu (for regular normal bugs... if you've always wanted to see those bugs in action, look in IE6 and remove the * html stuff).

    But there you go.. I would have liked to show you the footer technique but it's really floating all over teh Internets; otherwise, I have done a 100% height page with footer pulled up on some of my other pages... I think I did it on my homepage even.
     
    Stomme poes, Jul 7, 2008 IP
  2. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #22
    Just got Opera 9.51 today, while keeping 9.27, and while I saw some stuff on other pages, your example page looks the same in all browsers, as do pages I've checked using the same technique. Dunno what you did to your copy? But it seems to work.
     
    Stomme poes, Jul 9, 2008 IP
  3. le007

    le007 Well-Known Member

    Messages:
    481
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    103
    #23
    Hi all I have unforeseeably been out of the country for the last month, Stomme_Poes thank you very much for the detailed example. Its awesome.

    I didnt web develop for almost a year and all these small techniques have decisively gone a bit pear shaped :D

    I understand fully what you were saying about leaving the footer outside the bottom of the container - its nicely laid out what you've done so now I have a template to work off.

    Have you got an example of the dropdown menu? I've googled a few but maybe you have a simplified version I could implement please?

    Thanks again,
    Le007
     
    le007, Jul 31, 2008 IP
  4. strikefreedom

    strikefreedom Peon

    Messages:
    9
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #24
    thanks too
     
    strikefreedom, Jul 31, 2008 IP
  5. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #25
    Which drop down menu?

    If there's one on McCabe I didn't see it, maybe it's scripted?

    Is it a drop-down or a drop-line? I did a drop-line for pyles here at DP, you can look at it:
    http://stommepoes.nl/Menus/pylesmenu.html
    It's already suckerfished so IE6 hovers. : )

    I'll be out of the country starting Saturday, then back a week later before then out again to the Perl Conference : )
     
    Stomme poes, Aug 1, 2008 IP
  6. le007

    le007 Well-Known Member

    Messages:
    481
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    103
    #26
    Hey buddy,

    if you move the mouse over Residential beside project - there is a dropdown. I'd like one like it - if you have one done??

    http://www.mccabebuilders.com

    Actually, all of the second line on the menu has a dropdown.
     
    le007, Aug 1, 2008 IP
  7. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #27
    It's not showing in FF even after I let NoScript allow scripts through. I'll have to check at work with IE to see it.
     
    Stomme poes, Aug 10, 2008 IP
  8. le007

    le007 Well-Known Member

    Messages:
    481
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    103
    #28
    Stomme I've been working since you were away, how was your trip?

    Here's what I've come up with - I'm just trying to style the ul li now to have 4px padding but it ain't working.

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Leo's McCabe Builders</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="description" content="yeah">
<meta name="generator" content="gEdit">
<style type="text/css">
* {
margin: 0;
padding: 0;
}
img {
border: 0;
}

ul, li {
list-style: none;
}

html, body {
height: 100%;
background: url(background.gif)
}

#container {
min-height: 100%;
width: 849px; /*silly width, not 800-friendly yet still small on the next screensize up... might as well go to 960 or something*/
margin: 0 auto;
font-family: sans-serif;
background-color: #7a0000;
}
* html #container {height: 100%;} /*no min-height for lte IE6*/

#header {
}

h1 {
color: #fff;
height: 105px;
width: 849px;
position: relative;
}
h1 span {
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
background: url(logo.jpg) 0 0 no-repeat;
}


#menu1 {
border-top: 1px solid #949494;
background-color: #37383d;
width: 100%; /*haslayout so background colour shows in IE6*/
overflow: hidden;
}
#header ul li {
display: inline; /*some declaration for IE7, otherwise ignore li's*/
}

#header ul a, #header p {
float: left;
font-family: tahoma;
font-size: 11px;
color: #e0e4e7;
height: 26px;
line-height: 26px;
text-align: center;
text-decoration: none;
padding: 0 10px;
}
#header ul a:focus, #header ul a:hover {
background-color: #464d58;
}

#header p {
clear: left;
background-color: #37383d;
border-top: 1px solid #949494;
border-bottom: 1px solid #b9c0ca;
height: 24px;
}
* html #header p {margin-right: -3px;} /*stoopid 3-pixel-jog bug*/


#menu2, #footer {
background-color: #6B6565;
color: #e0e4e7;
overflow: hidden;
border-top: 1px solid #949494;
border-bottom: 1px solid #b9c0ca;


}
* html #menu2 {height: 1.4em;} /*haslayout so the background shows in IE6*/

#flash {
background-color: #949494;
color: #000;
padding: 5px;
margin-top: 0px;
height: 400px;
}

#footer {
margin-left: 0;
padding: 0 5px;

}
#footer p {
font-family: tahoma;
font-size: 11px;
padding: 5px;
text-align: left;
}


#menuh {
background-color: #6C7079;
border-top: 1px solid #B9C0CA;
border-bottom: 1px solid #B9C0CA;
color: #626B7E;
float:left;
width:100%;
}
#menuh li {
list-style: none;
position: relative;
float: left;
}
#menuh a {
float: left;
padding: 0 1em;
color: #FFFFFF;
text-decoration: none;
}
#menuh a:hover {
background-color: #37383D;
}
#menuh div{
    padding:5px 0 0 0;
    position: absolute;
    top: 24px;
    width:108px;
    left: -999em;
    background:url(fake.gif) no-repeat 0 0;/* use a 1px x 1px transparent gif*/
}
#menuh div ul {
    background-color: #6C7079;
    border: 1px solid #B9C0CA;
    width: 108px;
    padding: 0;
    float:left;
}
#menuh ul li {
width: 100%;
padding: 0;
border-bottom: 1px solid #B9C0CA;
}
#menuh ul li.last {
border-bottom: 0;
}
#menuh ul a {
padding: 0 4px 0 5px;
text-align: left;
float: none;
display: block;
}
#menuh li:hover div, #menuh li.sfhover div {
left: 0px;
}

</style>
<!--[if lt IE 7]><script type="text/javascript">
sfHover = function() {
var sfEls = document.getElementById("menuh").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
</script><![endif]-->
</head>
<body>
<div id="container">
    <div id="header">
        <h1>Text<span></span></h1>
        <ul id="menu1">
            <li><a href="#">About Us</a></li>
            <li><a href="#">Recruitment</a></li>
            <li><a href="#">McCabe UK</a></li>
            <li><a href="#">Clients</a></li>
            <li><a href="#">Partners</a></li>
            <li><a href="#">News</a></li>
            <li><a href="#">Contact Us</a></li>
            <li><a href="#">Home</a></li>
        </ul>
        <ul id="menuh">
            <li><a href="#">Homepage</a>
                <div>
                    <ul>
                        <li class="last"><a href="#">About</a></li>
                    </ul>
                </div>
            </li>
            <li><a href="#">Gallery 1 </a>
                <div>
                    <ul>
                        <li><a href="#">Link 1</a></li>
                        <li><a href="#">Link 2</a></li>
                        <li class="last"><a href="#">Link 3</a></li>
                    </ul>
                </div>
            </li>
            <li><a href="#">Gallery 2</a>
                <div>
                    <ul>
                        <li><a href="#">Link 1</a></li>
                        <li><a href="#">Link 2</a></li>
                        <li class="last"><a href="#">Link 3</a></li>
                    </ul>
                </div>
            </li>
            <li><a href="#">Gallery 3</a> </li>
            <li><a href="#">Resources</a> </li>
            <li><a href="#">Contact</a> </li>
        </ul>
    </div>
    <!--header-->
    <div id="flash">
        <p>Text text text.</p>
        <p>Don't use breaks for visual display, I'm doing it to keep the CSS clean for you while extending the content... remove and add these lines to see 

the
            
            page grow and shrink.<br>
        <p>Don't use breaks for visual display, I'm doing it to keep the CSS clean for you while extending the content... remove and add these lines to see 

the
            
            page grow and shrink.<br>
        <p>Don't use breaks for visual display, I'm doing it to keep the CSS clean for you while extending the content... remove and add these lines to see 

the
            
            page grow and shrink.<br>
        <p>Don't use breaks for visual display, I'm doing it to keep the CSS clean for you while extending the content... remove and add these lines to see 

the
            
            page grow and shrink.<br>
        <p>Don't use breaks for visual display, I'm doing it to keep the CSS clean for you while extending the content... remove and add these lines to see 

the
            
            page grow and shrink.<br>
        <p>Don't use breaks for visual display, I'm doing it to keep the CSS clean for you while extending the content... remove and add these lines to see 

the
            
            page grow and shrink.<br>
        <p>Don't use breaks for visual display, I'm doing it to keep the CSS clean for you while extending the content... remove and add these lines to see 

the
            
            page grow and shrink.<br>
        <p>Don't use breaks for visual display, I'm doing it to keep the CSS clean for you while extending the content... remove and add these lines to see 

the
            
            page grow and shrink.<br>
    </div>
    <div id="footer">
        <p>contact</p>
    </div>
</div>
<!--container-->
</body>
</html>
    Code (markup):
     
    le007, Aug 10, 2008 IP
Page 2 of 2