Website compatible for Iphone/Mobile |
Website compatible for Iphone/Mobile |
fattycss |
Jan 18 2014, 12:18 PM
Post
#1
|
Member Group: Members Posts: 79 Joined: 17-January 14 Member No.: 20,249 |
Hey there, My website is:
http://www.allallallallalla.allalla.com/ The problem is when I open it on my iphone/ipad It's all messed up. (you can try it on your phone). Here is the code in html: CODE <!DOCTYPE html> <html> <head> <title> Tennisvereniging Nedlloyd</title> <link rel="stylesheet" type="text/css" href="home.css"/> </head> <body> <br> <br><br><br> <div id = "logo">Tennisvereniging Nedlloyd</div> </div> <div id = "kader"> <ul id="menu"> <li><a href="#">Home</a></li> <li><a href="#">Informatie</a> <ul> <li><a href="#">Leden</a></li> </ul> </li> <li><a href="#">Agenda</a> </li> <li><a href="#">Contact</a> <ul> <li><a href="#">E-mail</a></li> </ul> </li> <li><a href="#">Regels</a> </li> </ul> <div id = "rechtsboven"> </div> </a> <div id = "inhoud"> </div> <div id = "rechtsboven2"> <a href="http://www.buienradar.nl" target="_blank"> <img src="http://gratisweerdata.buienradar.nl/radar.php" alt="Buienradar.nl"></a> <div id = "bovenin"> </div> <a href="https://twitter.com/share" class="twitter-share-button" data-via="nedlloydtennis.nl" data-lang="nl" data-dnt="true">Tweeten</a> <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script> <a href="http://f.kulfoto.com/pic/0001/0041/AQx9840977.jpg" class="facebookbutton" target="_blank" align="left"><img src="http://www.niftybuttons.com/classic/facebook.png" border="0"></a> </div> </div> <br /> </a> </div> <div id= "bar">©Marc van Houts</div> </body> </html> Here CSS: CODE body { background-image:url('afbeeldingen/ruitlos2.jpg'); background-repeat:no-repeat; background-attachment:fixed; width: 100% } #logo { position: relative; bottom: 60px; left: 55px; font-size: 48px; font-family: times; } #kader { position: relative; right: 372px; width: 814px; background-color: transparent; margin-left: auto; margin-right: auto; height: 630px; } #menu { position: relative; bottom: 50px; left: 50px; font-size: 20px; z-index: 1; display: in-line; background-image:url('afbeeldingen/navbg3.png'); } #inhoud { color: black; border: 4px solid rgb(0,0,0); border-radius: 15px; width: 635px; height: 600px; background-color: rgb(236,170,92); right: -49px; position: relative; } ul { font-family: times; margin: 0; padding: 0; list-style: none; } ul li { float: left; width: 120px; margin-right: 10px; background-image:url('afbeeldingen/navbg3.png'); border-radius: 10px; } li ul { display: none; } ul li a { display: block; text-decoration: none; color: black; padding: 0px; background: transparent; text-align: center; z-index: 1; position: center; } ul li a:hover { background: transparent; background-image:url('afbeeldingen/navbg3.png'); color: rgb(250,250,210); border-radius: 10px; } li:hover ul { display: block; position: center; color: rgb(250,250,210); border-radius: 10px; } li:hover li { float: none; font-size: 16px; } #rechtsboven { position: relative; right: -4px; bottom: 160px; float: top; width: 310px; height: 310px; background-repeat:no-repeat; background-image:url('afbeeldingen/balll.png'); } #rechtsboven { position: relative; float: right; width: 28%; border: 0px solid rgb(0,0,128); border-radius: 4px; } #rechtsboven2 { position: relative; right: -710px; bottom: 414px; float: center; width: 256px; height: 406px; border-radius: 5px; border: 4px solid rgb(0,0,0); } #bar { position: fixed; width: 100%; float:bottom; height:3px; color: white; position: relative; font-size: 12px; } .twitter-share-button { position:relative; top:-250px; left: -190px; } .facebookbutton { position:relative; top:-249px; left: -220px; } #bovenin { color: black; border: 4px solid rgb(0,0,0); border-radius: 15px; width: 256px; height: 174px; background-color: rgb(236,170,92); position: relative; right: 4px; bottom: 609px; } what do I need to add and how to make it compatible for phone/ipad? This post has been edited by fattycss: Jan 18 2014, 12:19 PM |
Lo-Fi Version | Time is now: 18th April 2024 - 10:10 PM |