-EDIT-
Хорошо, я обновлю свой вопрос в соответствии с моими успехами, которые вы можете увидеть здесь: http://piscolabis.info/licht/job_single.html
Моя единственная проблематеперь фоновые изображения не видны в iphone !!!
HTML-код
<body class="job_single">
<div id="contenedor">
<div id="head" class="section"><a href="index.html"><img src="img/logo_small.png" alt="lich-t" id="logo_small" /></a><h3><a href="locations.html"></a>JOBS</a></h3></div>
<div id="contenido">
<div id="panel" class="left">
<div id="heading">
<h1>PRODUCER FEIHER / PRODUCER</h1>
</div>
<div id="information">
<p>Duselheimer habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam.</p>
</div>
</div>
<div id="panel" class="right">
<ul class="right visible">
<li id="pink">
<a href="#">
<span class="liLeft"></span>
<span class="liRight">
<h2>BENEDIKT / HOCKTE</h2>
<p>3D - Artist</p>
</span>
</a>
</li>
<li id="orange">
<a href="#">
<span class="liLeft"></span>
<span class="liRight">
<h2>BEN SIEGLER</h2>
<p>Creative Director</p>
</span>
</a>
</li>
<li id="blue">
<a href="#">
<span class="liLeft"></span>
<span class="liRight">
<h2>ANDREAS FUS </h2>
<p>Asaberquépone</p>
</span>
</a>
</li>
</ul>
</div>
</div>
</div>
</body>
CSS-код
.visible{display:block !important;position:relative;}
.job_single #panel.left,
.job_single #panel.right{
margin-top:50px;
}
#panel.left{
float:left;width:50%;
}
#panel.left #heading{
float:left;
background:#000;
padding:20px;
font-size:40px;
line-height:40px;
}
#panel.left #information{
float:left;
margin-top:20px;
background:url(../img/bg_black_alpha.png);
font-size: 30px; line-height:30px;
padding:20px;
}
#panel.left #information, #panel.left #heading{
padding-left:30px;
color:#fff;
}
#panel.right{
width:40%;
clear:none;
float:right;
}
.job_single #panel.right ul.visible{margin-top:50px}
#panel.right ul.visible li{
margin-top:20px;
}
#panel.right ul.visible li,#panel.right ul.visible li a{width:95%;height:90px;float:right;}
#panel.right ul.visible li a{
background:black;
border-right:10px solid yellow;
}
#panel.right ul.visible li a span.liLeft{
width:95px;
float:left;height:100%;display:block;
position:relative;
right:40px;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
z-index:10;
}
#panel.right ul.visible li a span.liRight{
background:black !important;
color:#fff;
}
#panel.right ul.visible li a span.liRight{
z-index:9;
}
#panel.right ul.visible li#blue a{
border-color:#0C7CC3;
}
#panel.right ul.visible li#pink a{
border-color:#C21B7B;
}
#panel.right ul.visible li#orange a{
border-color:#E83B35;
}
#panel.right ul.visible li#blue a span.liLeft{
background-image:url(../img/azul.png);
}
#panel.right ul.visible li#pink a span.liLeft{
background-image:url(../img/rosa.png);
}
#panel.right ul.visible li#orange a span.liLeft{
background-image:url(../img/naranja.png);
}
#panel.right ul.visible li a span.liRight h2{
font-size:30px;
margin-top:10px;
}
#panel.right ul.visible li a span.liRight p{
font-size:30px;
margin-top:5px;
}
Есть мысли по поводу изображений ??
Поскольку я редактировал полный вопрос, обратите внимание, что этот файл будет использоваться только в iphone, сейчас я делаю альбомную ориентацию, а позже сделаю портретвкл (редактирование только правильных свойств .visible)