Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New to the CF scene
    Join Date
    May 2010
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question Extending the left hand menu to the bottom of the screen

    I have a floating left hand menu, with content on the right that fills the rest of the page. My goal is to have it display on 1024x768 without horz scrolling... and expand to fill large / widescreen monitors.

    Everything works great (in FF) until you scroll down. The menu cuts off and the content appears underneath:

    http://www.cartoonizemypet.com/temp/...gs/index.shtml

    I've spent the last couple of days trying to figure out how to stretch the left-hand menu down to the bottom of the page. I've found various suggestions online but nothing seems to work for me.

    It looks like I'll have a problem with IE down the road too as at a certain width it pushes the dogs underneath the menu. If anyone has any ideas on that too that would be great.

    Apologies for my sloppy coding... I am by no means a professional, I just learn it as I go along.

    CSS:
    Code:
    * { margin: 0;
    padding: 0;
    }
    
    html, body {
        height:100%;
        width:100%;
    }
    
    body {
        background-color:#ffffff;
        margin:0;
        padding:0;
        font-family:Verdana, Geneva, sans-serif;
        color:#242424;
        line-height:1.3em;
    }
    
    img {
        border:none;
    }
    
    /*----------------- FONTS -------------------*/
    
    
    p.small {
        font-size:0.9em;
        line-height:1.3em;
    }
    
    p.smaller {
        font-size:0.8em;
        line-height:1.3em;
    }
    
    p.bigbold {
        font-size:1em;
        font-weight:bold;
        line-height:1.75;
    }
    
    h1,h2,h3,h4 {
        font-family:Verdana, Geneva, sans-serif;
        color:#000;
        text-align:center;
    }
    
    p.center {
        text-align:center;
    }
    
    a {
        text-decoration:none;
        font-family:Verdana, Geneva, sans-serif;
        color:#915C91;
        font-size:1em;
        font-weight:bold;
        
    }
    
    a:hover {color:#A87AA9;}  
    a:active {color:#6D476D;}  
    
    
    
    /*------------------- ALL PAGES ---------------------*/
    
    #page-wrapper {
        width:100%;
        height:100%
    }
    
    #menu-wrapper {  
        float:left;
        width:25%;
        min-width:235px;
        max-width:347px;
        min-height:100%;
        height:auto;
        position:relative;
        overflow:visible;
        z-index:2;
        margin-right:30px;
    }
    
    
    #paper {
        background-image:url("paper-menu.gif");
        background-position:top right;
        background-repeat:repeat-y;
        width:100%;
        min-height:100%;
        height:auto;
        position:absolute;
        right:0;
    }
    
    #logo-splat {
        background-image:url("logo-splat.png");
        background-repeat:no-repeat;
        width:616px;
        height:311px;
        position:absolute;
        right:-385px;
        z-index:5;
    }
    
    #logo {
        background-image:url("logo.png");
        width:288px;
        height:113px;
        left:200px;
        top:31px;
        position:absolute;
    }
    
    #logo a{
        width:288px;
        height:113px;
        display:block;
    }
    
    .displace {
        position:absolute;
        left:-5000px;
    }
            
    
    #footprints {
        position:absolute;
        width:100%;
        background-image:url("footprints.png");
        background-position:left;
        background-repeat:repeat-x;
        z-index:1;
        top:20px;
        height:81px;
    }
    
    #menu-home {
        z-index:2;
        position:absolute;
        right:-20px;
        top:500px;
        overflow:visible;
        width:245px;
        min-height:100%;
        height:auto;
    }
    
    #menu {
        z-index:3;
        position:absolute;
        right:-20px;
        top:300px;
        overflow:visible;
        width:245px;
        min-height:100%;
        height:auto;
    }
    
    #dog-menu{position:relative;}
    #dog-menu li{margin:0;padding:0;list-style:none;position:absolute;top:0;}
    #dog-menu li, #dog-menu a{height:57px;display:block;}
    
    #dog-button{right:0px;width:104px;}
    #dog-button{background:url('menu-dogs.png') 0 0;}
    #dog-button a:hover{background: url('menu-dogs.png') -106px 0; zoom:1;}
    
    #cat-menu{position:relative;top:60px}
    #cat-menu li{margin:0;padding:0;list-style:none;position:absolute;top:0;}
    #cat-menu li, #cat-menu a{height:57px;display:block;}
    
    #cat-button{right:-5px;width:101px;}
    #cat-button{background:url('menu-cats.png') 0 0;}
    #cat-button a:hover{background: url('menu-cats.png') -106px 0; zoom:1;}
    
    
    
    #menu-small {
        background-image:url("menu-small.png");
        width:181px;
        height:41px;
        position:absolute;
        right:0px;
        top:125px;
    }
    
    #menu-rep {
        background-image:url("menu-rep.png");
        width:165px;
        height:71px;
        position:absolute;
        right:5px;
        top:180px;
    }
    
    #menu-creepy {
        background-image:url("menu-creepy.png");
        width:201px;
        height:46px;
        position:absolute;
        right:-3px;
        top:260px;
    }
    
    #menu-birds {
        background-image:url("menu-birds.png");
        width:110px;
        height:50px;
        position:absolute;
        right:0px;
        top:318px;
    }
    
    #menu-aqua {
        background-image:url("menu-aqua.png");
        width:143px;
        height:71px;
        position:absolute;
        right:5px;
        top:375px;
    }
    
    #menu-large {
        background-image:url("menu-large.png");
        width:178px;
        height:45px;
        position:absolute;
        right:0px;
        top:453px;
    }
    
    #coupons {
        background-image:url("coupons.png");
        width:167px;
        height:119px;
        top:530px;
        right:55px;
        position:absolute;
    }
    
    #coupons a{
        width:167px;
        height:105px;
        top:14px;
        display:block;
        position:absolute;
    }
    
    
    #chihuahua {
        width:187px;
        height:222px;
        position:absolute;
        z-index:7;
        right:-76px;
        top:265px;
    }
    
    /* "Create - Customize - Enjoy" */
    #steps {
        width:680px;
        position:absolute;
        right:-738px;
        top:225px;
        text-align:center;
        z-index:2;
    }
    
    #find-pet {
        width:320px;
        height:94px;
        position:absolute;
        right:-370px;
        top:515px;
    }
    
    #footer {
        
    }
    
    #featured {
        width:680px;
        position:absolute;
        right:-715px;
        top:640px;
        text-align:center;
        z-index:10;
    }
    
    #featured-sticker {
        position:absolute;
        right:0px;
        top:-60px;
        z-index:11;
    }
    
    /*------------------ Shop ----------------------*/
    
    
    #contents {
        min-width:765px;
        position:relative;
        top:230px;
    }
    
    #contents-flex {
        text-align:center;
    }
    HTML
    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" xml:lang="en" lang="en">
    <head>
    <meta name="generator" content="HTML Tidy for Linux (vers 6 November 2007), see www.w3.org" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="content-language" content="EN" />
    <meta name="Rating" content="General" />
    <meta name="Keywords" content="pet, cartoon, cartoon pet, merchandise, shop, gift, pet lover, pet lover gift, cartoonize my pet, customizable merchandise, gifts for pet lovers, pet merchandise, pet cartoons, gift for pet lover, pet shop cartoon, cat lover gift, animal lover gifts, dog lover gift, dog breed gifts, dog related gifts, dog owner gifts, unique pet gift, designer pet accessories, pet owner gifts, gifts for dog people, gifts for cat people, gift for dog lover, gift for cat lover, gift for pet, puppy gifts, exotic pet gift, gifts for exotic pet owner, american cocker spaniel gifts, australian shepherd gifts, beagle gifts, border collie gifts, boston terrier gifts, boxer gifts, bull terrier gifts, bulldog gifts, english bulldog gifts, cavalier king charles gifts, chihuahua gifts, chinese crested gifts, corgi gifts, dachshund gifts, doberman gifts, doberman pincher gifts, enlish cocker spaniel gifts, french bulldog gifts, german shepherd gifts, alsatian gifts, golden retriever gifts, greyhound gifts, miniature greyhound gifts, whippet gifts, labrador retriever gifts, maltese gifts, pitbull gifts, staffordshire bull terrier gifts, pomeranian gifts, poodle gifts, toy poodle gifts, standard poodle gifts, pug gifts, rottweiler gifts, schnauzer gifts, standard schnauzer gifts, miniature schnauzer gifts, shetland sheepdog gifts, rough collie gifts, collie gifts, scottish terrier gifts, scottie gifts, shih tzu gifts, westie gifts, west highland terrier gifts, yorkie gifts, yorkshire terrier gifts, cat gifts, dog gifts, ferret gifts, hamster gifts, fancy rat gifts, rat gifts, hedgehog gifts, pygmy hedgehog gifts, guinea pig gifts, cavy gifts, sugar glider gifts, bearded dragon gifts, rankin dragon gifts, leopard gecko gifts, chameleon gifts, parrot gifts, budgie gifts, budgerigar gifts, tarantula gifts, spider gifts, giant snail gifts, land snail gifts, clownfish gifts, clown fish gifts, macaw gifts, pet owner gift, sheltie gifts, unique pet gifts, personalized pet gift, personalized gift, pet gift ideas, pet gift shop, pet mugs, pet t shirts, christmas pet gift, pet shirts, pet tshirts, pet prints, gifts for pets, original cartoons, presents for pet lovers, gift shop merchandise, cartoon merchandise, christmas dog gifts, christmas cat gifts, breed gifts, pet mugs, pet stickers, pet aprons, pet binders, pet bumper stickers, pet stationery, modern pet gifts, personalized dog gift, personalized cat gift, puppy products, cute cartoon pets, cute pet, cute dog, cute cat, unique gifts, unusual gifts, personalised gifts, fathers day gifts, birthday gifts, mothers day gifts, novelty gifts, valentines gifts, gift ideas, christmas gifts, different gifts, buy gifts, female gifts, gifts women, gifts boyfriend, gifts girlfriend, unique christmas gifts, unusual christmas gifts, unique birthday gifts, unusual birthday gifts, personalised birthday gifts, unusual wedding gifts, online birthday gifts, unusual gift, special birthday gifts, personalised borthday gift, customized gifts, customised gifts, pet illustration, commission pet illustration, pet caricature, draw pet cartoon, personalised persents, buy a gift, random gifts, brilliant gifts, exclusive gifts, gifts for, birthday gifts for women, fun gifts, gifts for women, unusual gifts for him, unusual gifts for her, gift shop, her gifts, him gifts, dog breeder gifts, cat breeder gifts, breeder business cards, gifts for mother, novelty gifts, gifts for mum, gifts for dad, personalized birthday gifts, grandma gifts, unusual wedding ideas, buy a gift online, gift ideas for women, sugarvsspice, zazzle, vector art, sugar vs spice, francesca o'brien, francesca hause, cartoonize my pet, dog cartoons, cat cartoons, cartoon american cocker spaniel, cartoon australian shepherd, cartoon beagle, cartoon border collie, cartoon boston terrier, cartoon boxer, cartoon bull terrier, cartoon bulldog, cartoon english bulldog, cartoon cavalier king charles, cartoon chihuahua, cartoon chinese crested, cartoon corgi, cartoon dachshund, cartoon doberman, cartoon doberman pincher, cartoon english cocker spaniel, cartoon french bulldog, cartoon german shepherd, cartoon alsatian, cartoon golden retriever, cartoon greyhound, cartoon minature greyhound, cartoon whippet, cartoon labrador retriever, cartoon maltese, cartoon pitbull, cartoon staffordshire bull terrier, cartoon pomeranian, cartoon poodle, cartoon toy poodle, cartoon standard poodle, cartoon pug, cartoon rottweiler, cartoon schnauzer, cartoon standard schnauzer, cartoon minature schnauzer, cartoon shetland sheepdog, cartoon rough collie, cartoon collie, cartoon scottish terrier, cartoon scottie, cartoon shih tzu, cartoon westie, cartoon west highland terrier, cartoon yorkie, cartoon yorkshire terrier, cartoon cat gifts, cartoon dog gifts, cartoon ferret, cartoon hamster, cartoon fancy rat, cartoon rat, cartoon hedgehog, cartoon pygmy hedgehog, cartoon guinea pig, cartoon cavy, cartoon sugar glider, cartoon bearded dragon, cartoon rankin dragon, cartoon leopard gecko, cartoon chameleon, cartoon parrot, cartoon budgie, cartoon budgirgar, cartoon tarantula, cartoon spider, cartoon giant snail, cartoon land snail, cartoon clownfish, cartoon clown fish, cartoon macaw, cartoon sheltie, oscar fish gifts, cartoon oscar fish, cartoon corn snake, corn snake gifts, snake gifts, cartoon snake, king snake gifts, cartoon king snake, cartoon milk snake, milk snake gifts, reptile lover gifts, reptile gifts, cartoon reptile, cartoon exotic pet, zazzle associate, become a zazzle associate, make money selling t shirts, make money, promote pet products, make money selling pet products, become a zazzle affiliate" />
    <meta name="Abstract" content="A HUGE selection of cartoon pets on customizable merchandise!" />
    <meta name="Title" content="Cartoonize My Pet" />
    <meta name="revisit-after" content="7" />
    <meta name="Robots" content="index,follow" />
    <meta name="Description" content="A HUGE selection of cartoon pets on customizable merchandise! Browse our library of pets to find yours or request a new one." />
    <meta http-equiv="Cache-Control" content="no-cache" />
    <meta http-equiv="Expires" content="0" />
    <title>CartoonizeMyPet.com - A HUGE selection of cartoon pets on customizable apparel &amp; gifts!</title>
        <!--[if IE]>
        <link rel="stylesheet" type="text/css" href="../../ie.css" />
        <![endif]-->
        <![if !IE]>
        <link rel="stylesheet" type="text/css" href="../../main.css" />
        <![endif]>
    <style type="text/css">
    /*<![CDATA[*/
     div.c1 {clear: both;}
    /*]]>*/
    </style>
    </head>
    	<body>
    		<div id="footprints">
    		</div>
    		<div id="page-wrapper">
    			<div id="menu-wrapper">
    				<div id="paper">
    				</div>
    				<div id="logo-splat">
    					<div id="logo">
    						<p><a href="http://www.cartoonizemypet.com"><span class="displace">Cartoonize My Pet</span></a></p>
    					</div>
    				</div>
    				<div id="menu">
    					<ul id="dog-menu">
    						<li id="dog-button">
    							<p><a href="shop/dogs/index.shtml"><span class="displace">Dogs</span></a></p>
    						</li>
    					</ul>
    					<ul id="cat-menu">
    						<li id="cat-button">
    							<p><a href="shop/cats/index.shtml"><span class="displace">Cats</span></a></p>
    						</li>
    					</ul>	
    					<div id="menu-cats">
    					</div>
    					<div id="menu-small">
    					</div>
    					<div id="menu-rep">
    					</div>
    					<div id="menu-creepy">
    					</div>
    					<div id="menu-birds">
    					</div>
    					<div id="menu-aqua">
    					</div>
    					<div id="menu-large">
    					</div>		
    					<div id="coupons">
    						<a href="http://www.zazzle.com/coupons?rf=238606341631845955&CMPN=zBookmarklet" target="_blank"><span class="displace"><p>COUPONS: Click here to get the latest deals and promo codes!</p></span></a>
    					</div>
    				</div>
    			</div>
    			<div id="contents">
    				<div id="contents-flex">
    					<center><p />Click on a Breed to see all the variations!</center>
    					<br />
    					<center>
    					<a href="american-cocker-spaniel/index.shtml" rel="nofollow"><img src="american-cocker-spaniel.jpg" alt="American Cocker Spaniel"  title="American Cocker Spaniel"  /></a>
    					<a href="australian-shepherd/index.shtml" rel="nofollow"><img src="australian-shepherd.jpg" alt="Australian Shepherd"  title="Australian Shepherd"  /></a>
    					<a href="beagle/index.shtml" rel="nofollow"><img src="beagle.jpg" alt="Beagle"  title="Beagle"  /></a>
    					<a href="border-collie/index.shtml" rel="nofollow"><img src="border-collie.jpg" alt="Border Collie"  title="Border Collie"  /></a>
    					<a href="boston-terrier/index.shtml" rel="nofollow"><img src="boston-terrier.jpg" alt="Boston Terrier"  title="Boston Terrier"  /></a>
    					<a href="boxer/index.shtml" rel="nofollow"><img src="boxer.jpg" alt="Boxer"  title="Boxer"  /></a>
    					<a href="bulldog/index.shtml" rel="nofollow"><img src="bulldog.jpg" alt="Englsih Bulldog"  title="English Bulldog"  /></a>
    					<a href="bull-terrier/index.shtml" rel="nofollow"><img src="bull-terrier.jpg" alt="Bull Terrier"  title="Bull Terrier"  /></a>
    					<a href="cardigan-welsh-corgi/index.shtml" rel="nofollow"><img src="cardigan-welsh-corgi.jpg" alt="Cardigan Welsh Corgi"  title="Cardigan Welsh Corgi"  /></a>
    					<a href="cavalier-king-charles/index.shtml" rel="nofollow"><img src="cavalier-king-charles.jpg" alt="Cavalier King Charles Spaniel"  title="Cavalier King Charles Spaniel"  /></a>
    					<a href="chihuahua/index.shtml" rel="nofollow"><img src="chihuahua.jpg" alt="Chihuahua"  title="Chihuahua"  /></a>
    					<a href="chinese-crested/index.shtml" rel="nofollow"><img src="chinese-crested.jpg" alt="Chinese Crested"  title="Chinese Crested"  /></a>
    					<a href="dachshund/index.shtml" rel="nofollow"><img src="dachshund.jpg" alt="Dachshund" title="Dachshund"  /></a>
    					<a href="english-cocker-spaniel/index.shtml" rel="nofollow"><img src="english-cocker-spaniel.jpg" alt="English Cocker Spaniel" title="English Cocker Spaniel"  /></a>
    					<a href="french-bulldog/index.shtml" rel="nofollow"><img src="french-bulldog.jpg" alt="French Bulldog" title="French Bulldog"  /></a>
    					<a href="german-shepherd/index.shtml" rel="nofollow"><img src="german-shepherd.jpg" alt="German Shepherd / Alsatian" title="German Shepherd"  /></a>
    					<a href="golden-retriever/index.shtml" rel="nofollow"><img src="golden-retriever.jpg" alt="Golden Retriever" title="Golden Retriever"  /></a>
    					<a href="greyhound/index.shtml" rel="nofollow"><img src="greyhound.jpg" alt="Greyhound / Whippet / Italian Greyhound" title="Greyhound / Whippet / Italian Greyhound"  /></a>
    					<a href="labrador/index.shtml" rel="nofollow"><img src="labrador.jpg" alt="Labrador Retriever" title="Labrador Retriever"  /></a>
    					<a href="maltese/index.shtml" rel="nofollow"><img src="maltese.jpg" alt="Maltese" title="Maltese"  /></a>
    					<a href="pembroke-welsh-corgi/index.shtml" rel="nofollow"><img src="pembroke-welsh-corgi.jpg" alt="Pembroke Welsh Corgi" title="Pembroke Welsh Corgi"  /></a>
    					<a href="pomeranian/index.shtml" rel="nofollow"><img src="pomeranian.jpg" alt="Pomeranian" title="Pomeranian"  /></a>
    					<a href="poodle/index.shtml" rel="nofollow"><img src="poodle.jpg" alt="Standard Poodle / Toy Poodle" title="Poodle"  /></a>
    					<a href="pug/index.shtml" rel="nofollow"><img src="pug.jpg" alt="Pug" title="Pug"  /></a>
    					<a href="rottweiler/index.shtml" rel="nofollow"><img src="rottweiler.jpg" alt="Rottweiler" title="Rottweiler"  /></a>
    					<a href="schnauzer/index.shtml" rel="nofollow"><img src="schnauzer.jpg" alt="Schnauzer" title="Schnauzer"  /></a>
    					<a href="scottish-terrier/index.shtml" rel="nofollow"><img src="scottish-terrier.jpg" alt="Scottish Terrier" title="Scottish Terrier"  /></a>
    					<a href="shetland-sheepdog/index.shtml" rel="nofollow"><img src="shetland-sheepdog.jpg" alt="Shetland Sheepdog / Rough Collie" title="Shetland Sheepdog / Rough Collie"  /></a>
    					<a href="shih-tzu/index.shtml" rel="nofollow"><img src="shih-tzu.jpg" alt="Shih Tzu" title="Shih Tzu"  /></a>
    					<a href="staffordshire-bull-terrier/index.shtml" rel="nofollow"><img src="staffordshire-bull-terrier.jpg" alt="Staffordshire Bull Terrier" title="Staffordshire Bull Terrier"  /></a>
    					<a href="west-highland-terrier/index.shtml" rel="nofollow"><img src="west-highland-terrier.jpg" alt="West Highland Terrier" title="West Highland Terrier"  /></a>
    					<a href="yorkie/index.shtml" rel="nofollow"><img src="yorkie.jpg" alt="Yorkshire Terrier" title="Yorkshire Terrier"  /></a>
    					</center>
    				</div>
    			</div>
    			<div id="footer">
    				
    			</div>
    		</div>
    	</body>
    </html>

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,861
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Try
    Code:
    #page-wrapper {
    background:url("paper-menu.gif") repeat-y scroll left center transparent;
    min-height:100%;
    width:100%;
    }
    #menu-wrapper {
    float:left;
    /*height:auto;*/
    margin-right:30px;
    max-width:347px;
    min-height:100%;
    min-width:235px;
    /*overflow:visible;
    position:relative;*/
    width:25%;
    z-index:2;
    }
    #contents  {
    margin-left:30%;
    min-width:765px;
    position:relative;
    }
    You don't need that #paper div or its CSS.

    (You'd need to fake min-height for IE6!)
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    New to the CF scene
    Join Date
    May 2010
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    That fixed the dogs not appearing under the menu, but unfortunately lost the variable width of the menubar.
    http://www.cartoonizemypet.com/temp/shop/dogs/test.html

    I want the menu to be thinner on smaller screens and stretch out slightly on bigger ones. I have it working in the first link, but then everything I do to try to get the menu to stretch downwards seems to mess it up.

  • #4
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,861
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    You'd need to use a liquid faux column approach.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #5
    New Coder
    Join Date
    Sep 2008
    Posts
    67
    Thanks
    8
    Thanked 2 Times in 2 Posts
    Set the menu width in ems rather than pixels.


  •  

    Tags for this Thread

    Posting Permissions

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