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 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Aug 2012
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    DIV won't go to correct place

    Hi there,

    I'm currently creating a website with multiple pages and am having issues with a navigation rollover that won't go past a certain point on the page like there's an invisible wall. I'm using absolute positioning, padding, margins, z indexes and nothing works.

    This same div works perfectly on every other page and is in the correct position yet this particular page is giving me issues.


    Hopefully someone has some suggestions.

    Thanks,
    Jon

  • #2
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    Impossible to say.. . You need to post some code (wrapped in [ CODE ]) tags, or a link to the page.
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS

  • #3
    New to the CF scene
    Join Date
    Aug 2012
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Here's all the code for the page. I'm pretty new to coding, so please be nice about how messy it is/amateur it looks. I'm also in the process of learning external style sheets.

    <!DOCTYPE HTML>
    <html><head>
    <style type="text/css">
    body {
    background-image: url(images/sitebackground.jpg);
    background-repeat: no-repeat;
    }

    div.home
    {position: absolute; left: 116px; top: 95px;}
    div.homeover
    {background:url(images/home_over.png);
    width: 202px; height: 80px;
    opacity:.01;
    position: absolute; left: 61px; top: 72px;
    transition: 1s;
    -moz-transition: opacity .25s linear; /* Firefox 4 */
    -webkit-transition: opacity .25s linear; /* Safari and Chrome */
    -o-transitionpacity .25s linear;/* Opera */
    }
    div.homeover:hover
    {width:202px; height:80px; opacity:1;}



    div.ourbrews
    {position: absolute; left: 295px; top: 93px;}
    div.ourbrewsover
    {background:url(images/our_brews_over.png);
    width: 291px; height: 100px;
    opacity:.01;
    position: absolute; left: 234px; top: 64px;
    transition: .25s;
    -moz-transition: opacity .25s linear; /* Firefox 4 */
    -webkit-transition: opacity .25s linear; /* Safari and Chrome */
    -o-transitionpacity .25s linear;/* Opera */
    }
    div.ourbrewsover:hover
    {width:291px; height:100px; opacity:1;}




    div.joesblog
    {position: absolute; left: 564px; top: 93px;}
    div.joesblogover
    {background:url(images/joes_blog_over.png);
    width: 270px; height: 93px; z-index:2;
    opacity:.01;
    position: absolute; left: 509px; top: 61px;
    transition: .25s;
    -moz-transition: opacity .25s linear; /* Firefox 4 */
    -webkit-transition: opacity .25s linear; /* Safari and Chrome */
    -o-transitionpacity .25s linear;/* Opera */
    }
    div.joesblogover:hover
    {width:268px; height:92px; opacity:1;}






    div.beereducation
    {position: absolute; left: 823px; top: 93px;}
    div.beereducationover
    {background:url(images/beer_education_over.png);
    width: 341px; height: 110px;
    opacity:.01;
    position: absolute; left: 774px; top: 55px;
    transition: .25s;
    -moz-transition: opacity .25s linear; /* Firefox 4 */
    -webkit-transition: opacity .25s linear; /* Safari and Chrome */
    -o-transitionpacity .25s linear;/* Opera */
    }
    div.beereducationover:hover
    {width:341px; height:110px; opacity:1;}




    div.store
    {position: absolute; left: 1152px; top: 93px;}
    div.storeover
    {background:url(images/store_over.png);
    width: 204px; height: 86px;
    opacity:.01;
    position: absolute; left: 1100px; top: 64px;
    transition: .25s;
    -moz-transition: opacity .25s linear; /* Firefox 4 */
    -webkit-transition: opacity .25s linear; /* Safari and Chrome */
    -o-transitionpacity .25s linear;/* Opera */
    }
    div.storeover:hover
    {width:204px; height:86px; opacity:1;}

    div.image {
    position: fixed; left: 650px; top: 150px; display: none; visibility: visible;
    }

    a:hover + div.image {
    display: block;
    }



    #menuContainer { position: absolute; margin-left: 280px; width: 10em; padding: 5px; z-index:1;}
    #menuContainer ul { list-style-type: none; margin: 0; padding: 0; }
    #menuContainer li { background-color: #fffbc1; border: 1px solid #965b1c; opacity: .85; width: 10em; /* this is to make the submenus position relative to this li */ position: relative; } #menuContainer a { text-decoration: none; color: #6b3c0a; font-weight: bold; font-size: 10pt; font-family: Verdana, Arial, sans-serif; }
    #menuContainer li:hover { border: 1px solid #CC6600; background-color: #FF9933; } #menuContainer a:hover { color: #ffffff; }
    #menuContainer ul ul { position: absolute; left: 10em; top: 0; visibility: hidden; }
    #menuContainer li:hover > ul { visibility: visible; }
    #menuContainer li:hover ul, #menuContainer li:hover li:hover ul { visibility: visible; }
    #menuContainer li:hover ul ul { visibility: hidden; }
    body { border: 5px; behavior:url("csshover.htc"); }








    div.info1
    {position: absolute; top: 560px; left: 1060px; margin-top:auto;}

    div.info2
    {position: absolute; top: 580px; left: 1270px; margin-top:auto; height: 20px;}



    div.paper
    {background:url(images/paper5.png);
    width: 400px; height: 400px;
    position: relative; }


    @font-face
    {
    font-family: Font1;
    src: url('ThrowMyHandsUpintheAir.ttf'); /* IE9+ */
    }

    div.font
    {
    font-family:Font1;
    }


    </style>
    <meta charset="utf-8">
    <title>Eugene, Oregon's Student Homebrew Club</title>
    </head>




    <body>


    <div class="home">
    <img src="images/home.png" />
    </div>
    <a href="index.html">
    <div class="homeover"></div>
    </a>


    <div class="ourbrews">
    <img src="images/our_brews.png" />
    </div>
    <a href="ourbrews.html">
    <div class="ourbrewsover"></div>
    </a>


    <div class="joesblog">
    <img src="images/joes_blog.png" />
    </div>
    <a href="#">
    <div class="joesblogover"></div>
    </a>


    <div class="beereducation">
    <img src="images/beer_education.png" />
    </div>
    <a href="education.html">
    <div class="beereducationover"></div>
    </a>


    <div class="store">
    <img src="images/store.png" />
    </div>
    <a href="store.html">
    <div class="storeover"></div>
    </a>

    <link rel="stylesheet" type="text/css" href="ourbrews.css" />
    <div id ="menuContainer">
    </div>



    <div id ="menuContainer">
    <ul><li><a href="#">Belgian</a><ul>
    <li><a href="#">Belgian Blond Ale</a><div class="image"><img src="images/belgianblonde.png"></div></li>
    <li><a href="dubbeltake.html">Dubbel Take</a><div class="image"><img src="images/dubbeltake.png"></div></li>
    <li><a href="#">Hydra Belgian Stout</a><div class="image"><img src="images/belgianstout.png"></div></li>
    <li><a href="#">Liquid Luck</a><div class="image"><img src="images/liquidluck.png"></div></li>
    <li><a href="#">Noogz 'N' Foogz</a><div class="image"><img src="images/liquidluck.png"></div></li>
    <li><a href="#">Quadzilla</a><div class="image"><img src="images/quadzilla.png"></div></li>
    <li><a href="#">Trivium Belgian IPA</a><div class="image"><img src="images/triviumipa.png"></div></li>
    </li></ul>


    <li><a href="#">Blonde Ale</a><ul>
    <li><a href="#">Blonde Bretty</a><div class="image"><img src="images/blondbretty.png"></div></li>
    <li><a href="#">Blonde Gone Wild</a><div class="image"><img src="images/blondegonewild.png"></div></li>
    </ul></li>


    <li><a href="#">Cascadian Dark Ale</a><ul>
    <li><a href="#">Kincaidian Dark Ale</a><div class="image"><img src="images/kincaidiandark.png"></div></li>
    <li><a href="#">Stormbreaker Cascadian Dark</a><div class="image"><img src="images/stormbreaker.png"></div></li>
    </ul></li>



    <li><a href="#">ESB</a><ul>
    <li><a href="#">WESB</a><div class="image"><img src="images/wesb.png"></div></li>
    </ul></li>


    <li><a href="#">Fruit Beer</a><ul>
    <li><a href="#">Lazy Day Pineapple IPA</a><div class="image"><img src="images/lazyday.png"></div></li>
    <li><a href="#">Oregon Triple Berry Beer</a><div class="image"><img src="images/tripleberry.png"></div></li>
    <li><a href="#">Raspberry Fields Forever</a><div class="image"><img src="images/raspberryfields.png"></div></li>
    <li><a href="#">Strawberry Breeze</a><div class="image"><img src="images/strawberrybreeze.png"></div></li></li>
    </ul></li>



    <li><a href="#">Farmhouse</a><ul>
    <li><a href="#">Carboy Joe's Funky Farmhouse</a><div class="image"><img src="images/farmhouse.png"></div></li>
    </ul></li>


    <li><a href="#">Herb Beer</a><ul>
    <li><a href="#">Hoppy Matrimony</a><div class="image"><img src="images/hoppymatrimony.png"></div></li>
    <li><a href="#">Lavender Fields Forever IPA</a><div class="image"><img src="images/lavenderfields.png"></div></li>
    </ul></li>


    <li><a href="#">IPA</a><ul>
    <li><a href="#">Juggernaut Imperial IPA</a><div class="image"><img src="images/juggernautipa.png"></div></li>
    <li><a href="#">King's Cup IPA</a><div class="image"><img src="images/kingscup.png"></div></li>
    <li><a href="#">Rye IPA</a><div class="image"><img src="images/ryeipa.png"></div></li>
    <li><a href="#">Tiny Pliny</a><div class="image"><img src="images/tinypliny.png"></div></li>
    </ul></li>


    <li><a href="#">Oktoberfest</a><ul>
    <li><a href="#">Brew of Oktoberfest</a><div class="image"><img src="images/brewofoktoberfest.png"></li>
    </ul></li>


    <li><a href="#">Pale Ale</a><ul>
    <li><a href="#">"Cit" Back and Relax Pale Ale</a><div class="image"><img src="images/citbackpale.png"></div></li>
    <li><a href="#">Hop Milk Hybrid Pale Ale</a><div class="image"><img src="images/hopmilk.png"></div></li>
    <li><a href="#">Grandpa Ben's Pale Ale</a><div class="image"><img src="images/grandpabenspale.png"></div></li>
    <li><a href="#">Meridian Northwest Pale Ale</a><div class="image"><img src="images/meridianpale.png"></div></li>
    <li><a href="#">Wag Your Tail Pale Ale</a><div class="image"><img src="images/wagyourtailpale.png"></div></li>
    </ul></li>


    <li><a href="#">Pilsner</a><ul>
    <li><a href="#">Czech Me Out</a><div class="image"><img src="images/czechmeout.png"></div></li>
    <li><a href="#">LSD Lager Clone (Liquid Sourdough)</a><div class="image"><img src="images/lsdlager.png"></div></li>
    </ul></li>


    <li><a href="#">Porter</a><ul>
    <li><a href="#">Coconut Coffee Macadamian Nut Porter</a><div class="image"><img src="images/cocomacacoffeeporter.png"></div></li>
    <li><a href="#">Oaked Chocolate Pumpkin Porter</a><div class="image"><img src="images/oakchocopumpkinporter.png"></div></li>
    </ul></li>


    <li><a href="#">Red Ale</a><ul>
    <li><a href="#">Ian's Irish Red</a><div class="image"><img src="images/iansirishred.png"></div></li>
    <li><a href="#">Lemon Drop Honey Rose Red</a><div class="image"><img src="images/lemonred.png"></div></li>
    <li><a href="#">McGillecutty the Mercenary</a><div class="image"><img src="images/mcgillecutty.png"></div></li>
    </ul></li>


    <li><a href="#">Saison</a><ul>
    <li><a href="#">Saison of the Witch</a><div class="image"><img src="images/saisonofthewitch.png"></div></li>
    <li><a href="#">Saison Brett</a><div class="image"><img src="images/saisonbret.png"></div></li>
    </ul></li>


    <li><a href="#">Scottish/Scotch Ale</a><ul>
    <li><a href="#">Hop Ness Monster</a><div class="image"><img src="images/hopnessmonster.png"></div></li>
    <li><a href="#">Pond Hopper Scotch Ale</a><div class="image"><img src="images/pondhopper.png"></div></li>
    </ul></li>


    <li><a href="#">Smoked Beer</a><ul>
    <li><a href="#">Lock, Stock, and Two Smoking Carboys</a><div class="image"><img src="images/lockstock.png"></div></li>
    <li><a href="#">Third Eye Rye</a><div class="image"><img src="images/thirdeyerye.png"></div></li>
    </ul></li>


    <li><a href="#">Stout</a><ul>
    <div style="height:120px;width:179px;margin-top:-151px;">
    <li><a href="#">Coffee Shakespeare Stout</a><div class="image"><img src="images/chocolatecoffeestout.png"></div></li>
    <li><a href="#">Milk Thistle Seed Stout</a><div class="image"><img src="images/milkthistle.png"></div></li>
    <li><a href="#">Mint Chocolate Stout</a><div class="image"><img src="images/mintchocostout.png"></div></li>
    <li><a href="#">Peanut Butter Stout</a><div class="image"><img src="images/pbstout.png"></div></li>
    <li><a href="#">Thumb Biter Stout</a><div class="image"><img src="images/shakespearestout.png"></div></li>
    <li><a href="#">Truffle Abyss</a><div class="image"><img src="images/abyss.png"></div></li>
    </ul></li>


    <li><a href="#">Wheat Beer</a><ul>
    <div style="height:120px;width:179px;margin-top:-107px;">
    <li><a href="#">Bavarian Wheat</a><div class="image"><img src="images/bavarianwheat.png"></div></li>
    <li><a href="#">Chocolate Orange Hef</a><div class="image"><img src="images/chocoorangehef.png"></div></li>
    <li><a href="#">German Weihenstephan</a><div class="image"><img src="images/germanweihestaphen.png"></div></li>
    <li><a href="#">Rowdy With a Chance of Wheatballs</a><div class="image"><img src="images/rowdywheatballs.png"></div></li>
    </ul></li>

    <li><a href="#">Witbier</a><ul>
    <li><a href="#">Gather Your Wits</a><div class="image"><img src="images/gatheryourwits.png"></div></li>
    <li><a href="#">Wildberry Wit</a><div class="image"><img src="images/wildberrywit.png"></div></li>
    </ul></li>
    </ul>
    </div>






    <div class="paper">
    </div>

    <div class="font">

    <div class="info1">
    <h2>
    <font color="#FFFFFF">
    BrewofO@gmail.com
    </div>

    <div class="info2">
    <a href="https://www.facebook.com/groups/261262623941553/">
    <img src="images/facebookicon.gif" width="30" height="30">
    </a>
    <a href="https://twitter.com/BrewofO">
    <img src="images/twittericon.gif" width="30" height="30";>
    </a>
    </div>


    </body>
    </html>


  •  

    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
    •