how to achieve this layout for iphone using CSS
-EDIT-
Well, i will update my question according to my progres wich you can see here: http://piscolabis.info/licht/job_single.html
My only problem now is that the background images are not seen in the iphone!!!
HTML CODE
<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" />&l开发者_C百科t;/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 CODE
.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;
}
Any thoughts about the images??
As I edited the full question, please note that this file will only be used in iphone, I am doing the landscape view now i will do the portrait later on (only editing the right propertie of .visible)
use mediaqueries to detect orientation
/* Portrait */
@media screen and (max-width: 320px)
{
body {display: none;}
}
/* Landscape */
@media screen and (min-width: 321px)
{
body {display: none;}
}
combined with
<meta name="viewport" content="width=device-width, initial-scale=1.0">
加载中,请稍侯......
精彩评论