Jump to content
UncleStef Mentoring Update: New SEO course!

hicky

New Members
 View Profile  See their activity

  • Posts

    1

  • Joined

  • Last visited

 Content Type 

Posts posted by hicky

  1. positioning

    in Beginners Web Design

    Posted

    hi,

    I am trying to position my divs,like the google maps and and contact info I want them to scroll when i make the page smaller, like in the float element, but this doesn't work and i can't find the problem...

    <body>

     

     

    <div id="header">

     

    <div id="logo">

    b

    </div>

     

    <hr>

     

    <div id="menu">

    <a href="#" onClick="Animate2id('#c1'); return false">home</a>

    <a href="#" onClick="Animate2id('#c2','easeOutQuint'); return false" >assortiment</a>

    <a href="#" onClick="Animate2id('#c3','easeOutQuint'); return false" >boeket v/d week</a>

    <a href="#" onClick="Animate2id('#c4','easeOutQuint'); return false" >bestellingen</a>

    <a href="#" onClick="Animate2id('#c5','easeOutQuint'); return false" >contact</a>

    </div>

     

    </div>

     

    <div id="container">

     

    <div id="c1">

    <div class="content">

    <div id="myslides">

    <img src="images/capitol.jpg"/>

    <img src="images/countryscene.jpg"/>

    <img src="images/flowers.jpg"/>

    </div>

    </div>

    </div>

     

    <div id="c2">

    <div class="assortiment">

    <div id="creaties">

    <ul>

    <li><a href="boeket.html" >Boeketten</a></li>

    <li><a href="trouw.html" >Trouw</a></li>

    <li><a href="rouw.html">rouw</a></li>

    </ul>

    </div>

    </div>

    </div>

     

    <div id="c3">

    <div class="boeket">

    <p>

    </p>

    </div>

    </div>

     

    <div id="c4">

    <div class="bestellingen">

    <p>

    </p>

    </div>

    </div>

     

    <div id="c5">

    <div class="contact">

    <p>bloemen

    <br />openingsuren:

    <br />di-zat 8u30-11u45 & 13u30 - 18u 30

    <br />zo 9u tot 11u45

    </p>

    </div>

     

    <div id="map">

    <iframe width="425" height="350" frameborder="" scrolling="no" marginheight="0" marginwidth="0" src= "http://maps.google.be/maps?hl=nl&client=safari&q=dadizeelsestraat+17+moorslede&ie=UTF8&hq=&hnear=Dadizeelsestraat+17,+8890+Moorslede,+West-Vlaanderen,+Vlaams+Gewest&gl=be&ll=50.891118,3.060637&spn=0.008988,0.021994&t=m&z=14&output=embed"></iframe><br /><small><a href="http://maps.google.be/maps?hl=nl&client=safari&q=dadizeelsestraat+17+moorslede&ie=UTF8&hq=&hnear=Dadizeelsestraat+17,+8890+Moorslede,+West-Vlaanderen,+Vlaams+Gewest&gl=be&ll=50.891118,3.060637&spn=0.008988,0.021994&t=m&z=14&source=embed"

    style="color:#0000FF;text-align:left">Grotere kaart weergeven</a></small>

    </div>

     

     

    </div>

     

     

     

    </div>

     

    <div id="footer">

    </div>

     

    <script>

    function Animate2id(id,ease){ //the id to animate, the easing type

    var animSpeed=1500; //set animation speed

    var $container=$("#container"); //define the container to move

    if(ease){ //check if ease variable is set

    var easeType=ease;

    } else {

    var easeType="easeOutQuart"; //set default easing type

    }

    //do the animation

    $container.stop().animate({"left": -($(id).position().left)}, animSpeed, easeType);

     

    }

     

    </script>

     

     

    </body>

     

     

    html, body, div, span, applet, object, iframe,

    h1, h2, h3, h4, h5, h6, p, blockquote, pre,

    a, abbr, acronym, address, big, cite, code,

    del, dfn, em, img, ins, kbd, q, s, samp,

    small, strike, strong, sub, sup, tt, var,

    b, u, i, center,

    dl, dt, dd, ol, ul, li,

    fieldset, form, label, legend,

    table, caption, tbody, tfoot, thead, tr, th, td,

    article, aside, canvas, details, embed,

    figure, figcaption, footer, header, hgroup,

    menu, nav, output, ruby, section, summary,

    time, mark, audio, video {

    margin: 0;

    padding: 0;

    border: 0;

    font-size: 100%;

    font: inherit;

    vertical-align: baseline;

    }

    /*reset*/

     

    html,body{

    margin: 0px;

    padding: 0px;

    height: 100%;

    background-color: #66b402;

    }

     

    body{

    overflow: hidden;

    background-color: #66b402;

    text-align: center;

    }

     

     

    #container{

    position: relative;

    left: 0;

    width: 10000px;

    top: 0;

    height: 100%;

    }

     

    #header{

    text-align: center;

    background-color: #66b402;

    height: 120px;

    position: relative;

    }

     

    #footer{

    background-color: #323234;

    width: 960px;

    width: 100%;

    height: 40px;

    position: absolute;

    bottom: 0;

    }

     

    #menu{

    position: relative;

    z-index: 2;

    clear :both;

    list-style: none;

    display: inline;

    text-align: center;

    }

     

    #menu a{

    font-family: 'BelleroseLight';

    text-decoration: none;

    color: #edf0f5;

    font-size: 30px;

    margin-left: 40px;

    letter-spacing: 2.8px;

    }

     

    #c1,#c2,#c3,#c4,#c5,#c6 {

    width:1500px;

    height:100%;

    float:left;

    margin-right:100px;

    background:#66b402;

    }

     

     

    #logo{

    font-family:'Freehand575BTRegular';

    font-size: 106px;

    color: #323234;

    text-align:center;

    padding-top: 13px;

    }

     

     

     

    #Homeslides {

    width: 370px;

    height: 220px;

    padding: 0;

    margin: 0 auto;

     

    }

     

    #Homeslides img {

    padding: 10px;

    border: 1px solid rgb(100,100,100);

    background-color: rgb(230,230,230);

    width: 350px;

    height: 200px;

    top: 0;

    left: 0 ;

     

    }

     

    #map{

    float: left;

    width: 100%;

    height: 100%;

    clear: left;

     

     

     

    }

     

    .content{

    padding:60px 20px;

    }

     

     

    .assortiment{

    font-family:'ClementePDacExtraLight';

    color: #edf0f5;

    font-size: 18px;

    text-align: justify;

    letter-spacing: 1.3px;

    line-height: 25px;

    margin-top: 150px;

    margin-left: 120px;

    }

    .boeket{

    font-family:'ClementePDacExtraLight';

    color: #edf0f5;

    font-size: 18px;

    text-align: justify;

    letter-spacing: 1.3px;

    line-height: 25px;

    margin-top: 150px;

    margin-left: 120px;

    }

     

    .bestellingen{

    font-family:'ClementePDacExtraLight';

    color: #edf0f5;

    font-size: 18px;

    text-align: justify;

    letter-spacing: 1.3px;

    line-height: 25px;

    margin-top: 150px;

    margin-left: 250px;

    }

     

    .contact{

    font-family:'ClementePDacExtraLight';

    color: #edf0f5;

    font-size: 18px;

    text-align: justify;

    letter-spacing: 1.3px;

    line-height: 25px;

    margin-top: 150px;

    margin-left: 130px;

    float: left;

    }

     

    hr{

    color: #323234;

    background-color: #323234;

    width: 100%;

    height: 3px;

    tex-align: center;

    border: none;

    top: 99.5px;

    position: absolute;

     

    }

×
×
  • Create New...