Website toont niet goed in Iphone ed.

[lady johnny]

Mijn website toont niet goed op een Iphone. Een heel deel van de linkerkant valt weg (zo'n 200px) in de css code is dit dus de hele linkse kant, maar het loopt dus van boven naar onder. Deel header, deel menu, linkerboxen en deel footer is weg.

Welke code is daarvan de oorzaak en hoe op te lossen?

html code is gewoon simpel. Div container met daarin div header, menu, content, links rechts enz enz.

background-color: #ffffff;
background-image: url(../Images/bg.jpg);
background-repeat: repeat;
margin: 10px 0px 10px 0px;
padding: 0;
}

#container {
width: 1090px;
height: auto;
background-color: #ffffff;
left: 50%;
margin-left: -545px;
position: absolute;
border: 6px solid #f2f2f2;
}

#top {
width: 1080px;
height: 60px;
background-image: url(../Images/toplogo.jpg);
background-position: left;
background-repeat: no-repeat;
margin-left: 5px;
}

.zoekvenster {
padding-left: 800px;
padding-top: 20px;
float: left;
}

.opmaak1 {
border: 1px solid #d4d4d4;
border-top: 2px solid #d4d4d4;
border-left: 2px solid #d4d4d4;
font-family: Arial, Verdana;
font-size: 15px;
width: 150px;
padding-left: 2px;
margin-bottom: 3px;
}

.opmaakbutton {
width: 78px;
height: 23px;
background-image: url(../Images/zoeken.jpg);
border: 1px solid #ffffff;
font-family: Arial, Verdana;
font-size: 15px;
padding-left: 2px;
margin-bottom: 3px;
color: #ffffff;
}

#header {
width: 1080px;
height: 160px;
margin-left: 5px;
background-image: url(../Images/header.jpg);
background-repeat: no-repeat;
}

#menu {
width: 1080px;
height: 32px;
margin-left: 5px;
margin-top: 5px;
background-color: #8fbaf1;
text-align: center;
background-image: url(../Images/menu.jpg);
background-repeat: repeat-x;
}

#menu ul{
list-style: none;
padding: 6px 0 0 0;
margin: 0;
}

#menu li{
display: inline;
margin: 0 0 0 0;
padding: 0;
border-right: 1px solid #ffffff;
}

#menu li.geenstreep {
border-right: 0;
}

#menu a{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
text-decoration: none;
padding: 0 12px 0 12px;
color: #ffffff;
}

#menu a:link, a:visited{
color: #ffffff;
}

#menu a:hover, a:active{
color: #ffffff;
}

#middle {
width: 1090px;
height: auto;
margin-top: 15px;
}

#left {
width: 200px;
height: auto;
min-height: 500px;
float: left;
margin-left: 5px;
}

#kalender {
height: 330px;
background-color: #8fbaf1;
}

.kalendertekst {
padding: 4px;
color: #ffffff;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
}

.kalendertekst a {
color: #ffffff;
}

.kalendertitel {
height: 24px;
background-image: url(../Images/boxen.jpg);
background-repeat: repeat-x;
color: #ffffff;
font-family: Verdana, Geneva, sans-serif;
font-size: 14px;
padding-top: 7px;
padding-left: 30px;
text-decoration: none;
}

.kalendertitel a {
color: #ffffff;
text-decoration: none;
}

.kalendertitel a:hover {
color: #ffffff;
text-decoration: none;
}

#downloads {
height: 150px;
background-color: #8fbaf1;
margin-top: 15px;
}

.downloadstekst {
padding: 4px;
color: #ffffff;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
}

.downloadstekst a {
color: #ffffff;
}

.downloadstitel {
height: 24px;
background-image: url(../Images/boxen.jpg);
background-repeat: repeat-x;
color: #ffffff;
font-family: Verdana, Geneva, sans-serif;
font-size: 14px;
padding-top: 7px;
padding-left: 30px;
text-decoration: none;
}

.downloadstitel a {
color: #ffffff;
text-decoration: none;
}

.downloadstitel a:hover {
color: #ffffff;
text-decoration: none;
}

#buien {
height: 430px;
background-color: #8fbaf1;
margin-top: 15px;
margin-bottom: 20px;
}

.buientitel {
height: 24px;
background-image: url(../Images/boxen.jpg);
background-repeat: repeat-x;
color: #ffffff;
font-family: Verdana, Geneva, sans-serif;
font-size: 14px;
padding-top: 7px;
padding-left: 30px;
text-decoration: none;
}

.buientitel a {
color: #ffffff;
text-decoration: none;
}

.buientitel a:hover {
color: #ffffff;
text-decoration: none;
}

#content {
width: 680px;
height: auto;
float: left;
}

.contenttekst {
color: #000000;
font-family: Verdana;
font-size: 14px;
padding: 15px;
padding-top: 0px;
}

.contenttekst a {
color: #000000;
}

#right {
width: 200px;
height: auto;
min-height: 500px;
float: left;
margin-right: 5px;
}

#shop {
height: 495px;
background-color: #8fbaf1;
}

.shoptekst {
padding: 4px;
color: #ffffff;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
}

.shoptekst a {
color: #ffffff;
}

.shoptitel {
height: 24px;
background-image: url(../Images/boxen.jpg);
background-repeat: repeat-x;
color: #ffffff;
font-family: Verdana, Geneva, sans-serif;
font-size: 14px;
padding-top: 7px;
padding-left: 30px;
text-decoration: none;
}

.shoptitel a {
color: #ffffff;
text-decoration: none;
}

.shoptitel a:hover {
color: #ffffff;
text-decoration: none;
}

#links {
height: 430px;
background-color: #8fbaf1;
margin-top: 15px;
margin-bottom: 20px;
}

.linkstekst {
padding: 4px;
color: #ffffff;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
}

.linkstekst a {
color: #ffffff;
}

.linkstekst img {
border: none;
}

.linkstitel {
height: 24px;
background-image: url(../Images/boxen.jpg);
background-repeat: repeat-x;
color: #ffffff;
font-family: Verdana, Geneva, sans-serif;
font-size: 14px;
padding-top: 7px;
padding-left: 30px;
text-decoration: none;
}

.linkstitel a {
color: #ffffff;
text-decoration: none;
}

.linkstitel a:hover {
color: #ffffff;
text-decoration: none;
}

#footer {
width: 1080px;
height: 30px;
clear: both;
margin-left: 5px;
margin-bottom: 20px;
background-color: #8fbaf1;
}

.footertekst {
color: #ffffff;
font-family: Verdana, Geneva, sans-serif;
font-size: 14px;
text-align: center;
padding-top: 6px;
}

 

[lady johnny]

Weet iemand waar het aan ligt?

 

[hereistom]

Misschien moet je de breedte op auto zetten, zodat die zich aanpast aan het scherm.
Of je kan deze eens proberen;

<meta name="viewport" content="width=device-width">

 

[lady johnny]

Bedankt voor de reactie, het was niet de oplossing, uiteindelijk hebben we de container div anders gecentreerd door 0px auto als margin en position relative. Lijkt in alle browsers én op de iphone te werken!