hicky Posted May 27, 2012 Report Posted May 27, 2012 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; } Quote
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.