The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

> Website compatible for Iphone/Mobile
fattycss
post 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">&copy;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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Posts in this topic
fattycss   Website compatible for Iphone/Mobile   Jan 18 2014, 12:18 PM
Christian J   There are a few errors: http://validator.w3.org/c...   Jan 18 2014, 01:28 PM
jimlongo   Besides what Christian said, a technique that can ...   Jan 18 2014, 02:26 PM
fattycss   Thanks christian, It all sounds so complicated...   Jan 18 2014, 02:44 PM
Christian J   I'd start by removing the "position: rela...   Jan 18 2014, 03:58 PM
Frederiek   Really? Because of high resolutions of many, even...   Jan 18 2014, 05:32 PM
Christian J   Really? Because of high resolutions of many, eve...   Jan 18 2014, 07:28 PM
fattycss   What you people are saying is not using px's l...   Jan 18 2014, 05:39 PM
Christian J   What you people are saying is not using px's ...   Jan 18 2014, 07:36 PM
fattycss   Christian, could you show me 1 thing? You said ...   Jan 18 2014, 05:43 PM
fattycss   Christian, Apparantly div Kader is the bad one tha...   Jan 18 2014, 05:50 PM
Christian J   Christian, Apparantly div Kader is the bad one ...   Jan 18 2014, 07:34 PM
fattycss   I made it compatible with Iphones/Ipads. Just not ...   Jan 19 2014, 09:05 AM

« Next Oldest · Cascading Style Sheets · Next Newest »
 

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 

Display Mode: Switch to: Standard · Switch to: Linear+ · Outline

Track this topic · Email this topic · Print this topic · Subscribe to this forum

- Lo-Fi Version Time is now: 18th April 2024 - 01:18 PM
Invision Power Board © 2024  IPS, Inc.
Licensed to: HTMLHelp.com, LLC