SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    Always A Novice bronze trophy
    K. Wolfe's Avatar
    Join Date
    Nov 2003
    Location
    Columbus, OH
    Posts
    2,182
    Mentioned
    66 Post(s)
    Tagged
    2 Thread(s)

    Critical to have LNavigation to 100% height

    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>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Untitled Document</title>
    <style type="text/css" media="all">
    @import "style.css";
    </style>
    <script language="javascript" type="text/javascript">
    	function toggleLayer(whichLayer)
    	{
    	if (document.getElementById)
    	{
    		// this is the way the standards work
    	var e = document.getElementById(whichLayer)
            e.style.display = e.style.display == "none" ? "block":"none";
    	}
    	}
    </script>
    </head>
    <body>
    <div id="Content">
      <div id="Header">
        <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="760" height="200" title="Header">
          <param name="movie" value="header1.swf" />
          <param name="quality" value="high" />
          <embed src="header1.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="760" height="200"></embed>
        </object>
      </div>
      <ul id="Navigation">
    	<li><a href="#">Home</a></li>
    	<li><a href="#">About Us </a></li>
    	<li><a href="#">Pray With Us </a></li>
    	<li><a href="#">Spend Time With Us</a></li>	
    	<li><a href="#">Special Events </a></li>
    	<li><a href="#">Calendar</a></li>
    	<li><a href="#">Links</a></li>
    	<li><a href="#">Contact Us</a></li>
      </ul>
      <div id="LNavigation">Link<br />Link<br />Link<br />Link<br />Link<br />
      </div>
      
      <p><a href="javascript:toggleLayer('LNavigation');">Show/Hide</a></p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <div id="Footer">
        <div align="center" class="copyright">Copyright  2007 OurLadyofMtCarmel.net. Design By <a href="http://www.kylewolfe.com" target="_blank">Kyle Wolfe</a>.</div>
      </div>
    </div>
    </body>
    </html>
    Code:
    /* CSS Document */
       
    body {
    	margin:30px 0px 30px 0px; padding:0px; /* Need to set body margin and padding to get consistency between browsers. */
    	background-image:url(images/bg.gif);
    	background-repeat:repeat-x;
    	background-color:#658db4;
    	text-align:center; /* Hack for IE5/Win */
    	height:100%;
    	}
    	
    #Content {
    	width:760px;
    	margin:0px auto; /* Right and left margin widths set to "auto" */
    	text-align:left; /* Counteract to IE5/Win Hack */
    	padding:0px;
    	border:1px solid #1D3347;
    	background-color:#fff;
    	}
    	
    #Header {
    	width:auto;
    	height:200px;
    	margin:0px;
    	padding:0px;
    	background-color:#1D3347;
    	border-bottom:1px solid #3E6082;
    	}
    	
    #Footer {
    	width:auto;
    	margin:0px;
    	padding:2px 0px 2px 0px;
    	background-image:url(images/footer_bg.gif);
    	border-top:1px solid #3E6082;
    	}
    	
    #Navigation {
    	width:auto;
    	height:30px;
    	margin:0px;
    	padding:0px;
    	background-image:url(images/nav_bg.gif);
    	background-color:#D1D1D1s;
    	border-bottom:1px solid #1D3347;
    	}
    
    #Navigation a {
    	color:#305171;
    	text-decoration:none;
    	font-family:"Georgia", verdana, sans-serif;
    	font-size:11px;
    	font-weight:normal;
    	border-right:1px solid #858585;
    	padding:8px 10px 8px 10px;
    	margin:0px;
    	float:left;
    	}
    
    #Navigation a:hover,#Navigation a:active {
    	color:#305171;
    	background-color:#AAA;
    	border-right:1px solid #888;
    	}
    
    #Navigation li {
    	list-style:none;
    	display:inline;
    	}
    
    #LNavigation {
    	width:170px;
    	border-right:1px solid #294561;
    	border-bottom:1px solid #294561;
    	background-color:#497096;
    	height:100%;
    	margin:0;
    	}
    	
    .copyright {font-size: 10px;font-family: Arial, Helvetica, sans-serif;}
    .copyright a {color:#fff;}
    .copyright a:hover,.copyright a:active {color:#999;}
    I need LNavigation t be 100% high, however the one way I kow how to do it won't work with the show/hide layer function. My old method was to simply have the layerwith the content in it aligned to the right and make it 150px smaller than rest of window, allowing layer below it show through. But here I need to have a layer on top of the content.

  2. #2
    SitePoint Enthusiast
    Join Date
    Dec 2006
    Location
    Pakistan
    Posts
    36
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Its working fine.... The #LNavigation is now 100&#37; and the "show/hide" is also working fine by using the following 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>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Untitled Document</title>
    <style type="text/css" media="all">
    /* CSS Document */

    body {
    margin:30px 0px 30px 0px; padding:0px; /* Need to set body margin and padding to get consistency between browsers. */
    background-image:url(images/bg.gif);
    background-repeat:repeat-x;
    background-color:#658db4;
    text-align:center; /* Hack for IE5/Win */
    height:100%;
    }

    #Content {
    width:760px;
    margin:0px auto; /* Right and left margin widths set to "auto" */
    text-align:left; /* Counteract to IE5/Win Hack */
    padding:0px;
    border:1px solid #1D3347;
    background-color:#fff;
    }

    #Header {
    width:auto;
    height:200px;
    margin:0px;
    padding:0px;
    background-color:#1D3347;
    border-bottom:1px solid #3E6082;
    }

    #Footer {
    width:auto;
    margin:0px;
    padding:2px 0px 2px 0px;
    background-image:url(images/footer_bg.gif);
    border-top:1px solid #3E6082;
    }

    #Navigation {
    width:auto;
    height:30px;
    margin:0px;
    padding:0px;
    background-image:url(images/nav_bg.gif);
    background-color:#D1D1D1s;
    border-bottom:1px solid #1D3347;
    }

    #Navigation a {
    color:#305171;
    text-decoration:none;
    font-family:"Georgia", verdana, sans-serif;
    font-size:11px;
    font-weight:normal;
    border-right:1px solid #858585;
    padding:8px 10px 8px 10px;
    margin:0px;
    float:left;
    }

    #Navigation a:hover,#Navigation a:active {
    color:#305171;
    background-color:#AAA;
    border-right:1px solid #888;
    }

    #Navigation li {
    list-style:none;
    display:inline;
    }

    #LNavigation {
    width:100%;
    border-right:1px solid #294561;
    border-bottom:1px solid #294561;
    background-color:#497096;
    height:100%;
    margin:0;
    }

    .copyright {font-size: 10px;font-family: Arial, Helvetica, sans-serif;}
    .copyright a {color:#fff;}
    .copyright a:hover,.copyright a:active {color:#999;}
    </style>
    <script language="javascript" type="text/javascript">
    function toggleLayer(whichLayer)
    {
    if (document.getElementById)
    {
    // this is the way the standards work
    var e = document.getElementById(whichLayer)
    e.style.display = e.style.display == "none" ? "block":"none";
    }
    }
    </script>
    </head>
    <body>
    <div id="Content">
    <div id="Header">
    <object classid="clsid27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="760" height="200" title="Header">
    <param name="movie" value="header1.swf" />
    <param name="quality" value="high" />
    <embed src="header1.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="760" height="200"></embed>
    </object>
    </div>
    <ul id="Navigation">
    <li><a href="#">Home</a></li>
    <li><a href="#">About Us </a></li>
    <li><a href="#">Pray With Us </a></li>
    <li><a href="#">Spend Time With Us</a></li>
    <li><a href="#">Special Events </a></li>
    <li><a href="#">Calendar</a></li>
    <li><a href="#">Links</a></li>
    <li><a href="#">Contact Us</a></li>
    </ul>
    <div id="LNavigation">Link<br />Link<br />Link<br />Link<br />Link<br />
    </div>

    <p><a href="javascript:toggleLayer('LNavigation');">Show/Hide</a></p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <div id="Footer">
    <div align="center" class="copyright">Copyright &#169; 2007 OurLadyofMtCarmel.net. Design By <a href="http://www.kylewolfe.com" target="_blank">Kyle Wolfe</a>.</div>
    </div>
    </div>
    </body>
    </html>
    Sorry, if i don't understand what you mean.
    Wanna earn free & quick money,domains etc...? Visit:
    www.betlik.com
    and earn free money,domains,hosting etc for making posts.

  3. #3
    Always A Novice bronze trophy
    K. Wolfe's Avatar
    Join Date
    Nov 2003
    Location
    Columbus, OH
    Posts
    2,182
    Mentioned
    66 Post(s)
    Tagged
    2 Thread(s)
    Umm, I needed it to be 100&#37; high, not wide. I coulda got that one myself :-) But ya, I need it to be fill 100% of the height, and moves fluidly as content gets longer.

  4. #4
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,109
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    I would use a faux column (tiled background image on the the content div) and then when you hide the nav also set the background-image to none;

    You can set any CSS properties via javascript so I would start(nav shown) with a floated left nav, a floated right content section and a faux column.
    Then when hidden I would set the left nav to display: none;, set the float: none; on the right content, and remove the faux column.

  5. #5
    Non-Member deathshadow's Avatar
    Join Date
    Jul 2006
    Location
    Dublin, NH
    Posts
    901
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Welcome to where a non-table layout is a major /FAIL/ hard - you are going to end up with more CSS, more hacks, and STILL not be satisfied with the result.

    My advice - use a table... and lose the targets... and wrap the content in a container... and maybe lose the container around the whole thing and just style the body directly (need to look closer at that one)

    One minute, lemme see if I'm seeing this right...

    -- edit --

    Is this supposed to be a 100&#37; height model (the overall page)? If so you might be SOL on doing that with top/bottom margins the way you are attempting.

    As to the show/hide, yeah - it's either switch to a table, OR you could assign the background to #Container, then shift the background over when you minimize it.

    Really, I'd put at least two more DIV's in there if going non-table to accomplish this - one around the 'right column' and one around both columns... the one around both is where you assign the full-stretch background, then use background-position to slide the background out of the way when you pull the left column from view - likely with a class switch instead of changing the display type.
    Last edited by deathshadow; Dec 29, 2006 at 21:59.

  6. #6
    Always A Novice bronze trophy
    K. Wolfe's Avatar
    Join Date
    Nov 2003
    Location
    Columbus, OH
    Posts
    2,182
    Mentioned
    66 Post(s)
    Tagged
    2 Thread(s)
    The whole website is to have a margin of like 20px off the window. The LNav (left navigation) is supposed to fill 100&#37; heigh down to the footer, where the copyright is.

  7. #7
    Always A Novice bronze trophy
    K. Wolfe's Avatar
    Join Date
    Nov 2003
    Location
    Columbus, OH
    Posts
    2,182
    Mentioned
    66 Post(s)
    Tagged
    2 Thread(s)
    A better look at what I need. I've been trying all different kinds of cominations of things.

    --Check Image--
    Attached Images Attached Images

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,386
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Are you looking for something like this old demo here:

    http://www.pmob.co.uk/temp/2col-toggle.htm

    Hope its of some use.

  9. #9
    Always A Novice bronze trophy
    K. Wolfe's Avatar
    Join Date
    Nov 2003
    Location
    Columbus, OH
    Posts
    2,182
    Mentioned
    66 Post(s)
    Tagged
    2 Thread(s)
    My only problem is getting divs to correctly display inside of a wrapper. Here to make things real simple, I should have stated this in the first place. I have been away for so long I forget how to do all this stuff. I have a 760px wide wrapper to hold the content area and the left nav area. How can I create 3 layers, 3 columns, like in the image showing the seperation of them, side by side, and make the content layer fill out the rest of the area when the side bar is contracted. So I need the contents width to be fluid, and I need the Left navigations height to be fluid as the page grows longer.

  10. #10
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,386
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    I think my example above shows you exactly how to do that

    It looks exactly like your drawing except that there was no need for a second column to hold just the "close container" tab.

    Close the window smaller and you will see that the left column keeps pace with the right column and always extends to the bottom of the parent div.

    As already mentioned above your options are limited if you want equalising columns and you can either use a negative margin example as in the link I posted above , or use the "faux" column technique of repeating a background image on the main container, or use a table.

    Thos are your choices.

    Code:
    and make the content layer fill out the rest of the area when the side bar is contracted.
    Exactly as shown in the link I posted above - that's one way how

    Here is the demo updated to 760px width with header and footer.

    http://www.pmob.co.uk/temp/2col-toggle2.htm

    Hope it helps


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •