Tema wordpress untuk tampilan di HP dan Mobile gan

Beranda
Komunitas
Tech
Programmer Forum
Tema wordpress untuk tampilan di HP dan Mobile gan

marefy005

30-03-2013 04:37

Tema wordpress untuk tampilan di HP dan Mobile gan

source file :
https://docs.google.com/file/d/0B2Aa...1pWG1fbDA/edit

Gan kemrin ane bikin web untuk di jadiin tema wordpress sesuai dengan tutorial yang ane liat gan :

( ini webnya )

Spoiler for web:

Tema wordpress untuk tampilan di HP dan Mobile gan

ini code HTML nya :

Quote:

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Indonesian Shadow Box</title>
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />

</head>

<body>

<div id="wrapper">

<div id="header_container">

<div id="header"></div>
</div>

<div id="intro">
<div id="nav">
<a href="#">About</a>
<a href="#">News</a>
<a href="#">Links</a>
<a href="#">Contact</a>
</div>
</div>

<div id="testimonials" align="justify">
<h2>News</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ornare sodales porta. Mauris laoreet tempor luctus. Nunc consequat </p>
</div>

<div id="products" align="justify">
<h1>Welcome to my Website</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ornare sodales porta. Mauris laoreet tempor luctus. Nunc consequat libero sit amet erat egestas rutrum. Proin sagittis imperdiet felis et laoreet. In molestie ipsum rhoncus eros cursus aliquet. Integer suscipit odio at libero varius aliquet. Vivamus bibendum, augue laoreet bibendum tempus, ante sapien aliquet ante, eget congue lorem leo sed diam. Donec vehicula leo vitae justo ornare ac ullamcorper odio volutpat. </p>

</div>

<div id="footer_container">

<div id="footer">

<p> Indonesian Shadow Boxing - Syar F Copyright © 2013</p>

</div>
</div>
</div>

</body>

</html>

dan ini CSSnya Gan :

Quote:

body {
background: #434343;
font: 14px Georgia, Times New Roman, Times, serif;
}

#wrapper { width: 980px; margin: 0 auto; }
#header_container { background:#F78153; color:white; border:1px solid #f76d36; height:30px; left:0; position:fixed; width:100%; top:0; }

#intro {

background: url(images/Home_03.gif) no-repeat ;
height: 79px;
width: 960px;
margin-top: 2em;

background-position: center;

}

#nav {

color:#F78153;
overflow:hidden;
padding:0 27px 0 27px;
margin-left:25%;
text-decoration:underline;
}
#nav a {
font-size:14px;
color:#F78153;
text-decoration:none;
display:block;
float:left;
padding:40px 27px 40px 27px;
text-decoration:underline;
}

#testimonials {
float: right;
width: 163px;
font-size:13px;
border: double #F78153;
padding:40px;
font-size:13px;
line-height:21px;

background: #FFF ;
line-height: 1.2em;
}

#testimonials h2 {
margin-top:0;
font-weight:normal;
font-size:27px;

}

#products {
margin-top:0em;
margin-right: 250px;
border: double #F78153;
padding: 55px;
background-color: #FFF;
line-height: 27px;
font-size:14px;

}
#products h1 {
color:#000000;
font-weight:normal;
font-size:32px;
margin-top:0
}
a {
color: :#F78153;
font-size:12px;
font-weight:bold;
font-family:Georgia, Times New Roman, Times, serif;

}

#footer_container {
background: #F78153;
color: white;
border: 1px solid #f76d36;
bottom: 0;
height: 70px;
left: 0;
position: fixed;
width: 100%;
font-family: Georgia, "Times New Roman", Times, serif;
}
#footer { line_height:60px; margin:0 auto; width:940px; text-align:center; }

}

#footer p {
line-height: 27px;
font-size:14px;
margin-top:0em;
}

yang ane bingung kok tampilan nya kaga berubah ketika browsernya ane rubah maximize dan minimize.

ini script yang ane tambahin untuk tampilan di phone nya gan :

Quote:

/* Wider viewports/higher resolutions (e.g. desktop) */
@media screen and (min-width:481px) {
.column {
margin: 10px 1.04166667% 0 0;
}
#visit {
width: 31.25%;
float: left;
}
#points {
width: 25%;
float: right;
}
#main {
margin: 10px 27.0833333% 0 26.0416667%;
}
#ontap {
margin: 10px 0 0 32%;
}
}

Quote:

/* Wider viewports/higher resolutions (e.g. desktop) */
@media screen and (min-width:481px) {
.#intro {
margin: 10px 1.04166667% 0 0;
}
#product {
width: 31.25%;
float: left;
}
#main {
width: 25%;
float: right;
}
#main {
margin: 10px 27.0833333% 0 26.0416667%;
}
#testimonials {
margin: 10px 0 0 32%;
}
}

Quote:

/* Mobile/lower-resolution devices */
@media screen and (max-width:480px) {
.#intro {
margin: 1em 0;
border-bottom: 1px dashed #7b96bc;
}
#products {
margin: 0 68.75% 0 0;
}

#main {
margin: 10px 27.0833333% 0 26.0416667%;
}
#testimonials {
width: 67%;
float: right;
margin: 10px 0 0 0;
}

kenapa gak berubah ya gan ?? emoticon-Bingung (S)

Diubah oleh marefy005 01-04-2013 08:00

587

Kutip

Balasan

Komentar yang asik ya

Komunitas Pilihan