web untuk tampilan di PC,HP dan smartphone gan

Beranda

...

Website, Webmaster, Webdeveloper
web untuk tampilan di PC,HP dan smartphone gan

marefy005

01-04-2013 09:09

web untuk tampilan di PC,HP dan smartphone 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:

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 09:10

770

Kutip

Balasan

Guest

Tulis komentar menarik atau mention replykgpt untuk ngobrol seru

Mari bergabung, dapatkan informasi dan teman baru!

Website, Webmaster, Webdeveloper

23.3KThread•4.3KAnggota

Guest

Tulis komentar menarik atau mention replykgpt untuk ngobrol seru