<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Working with CSS</title>
<script type="text/javascript" src="jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
});
</script>
<style type="text/css">
body {
background:#f0f0f0;
transition:background-color ease 2s;
-moz-transition:background-color ease 2s;
}
#wrapper {width:960px;margin:0 auto;}
header {height:150px;background:#fff;border:1px solid #ccc;}
nav {height:40px;border:1px solid #ccc;margin-top:10px;background:#fff;}
ul#menu {padding:0;margin:0;list-style:none;font:12px sans-serif;}
ul#menu li {float:left;}
ul#menu li a {display:block;text-decoration:none;line-height:40px;padding:0 20px;color:#000;}
ul#menu li a:hover {color:#fff;background:#000;}
#main {margin-top:10px;}
section {float:left;width:698px;background:#fff;border:1px solid #ccc;}
aside {float:right;width:250px;height:500px;background:#fff;border:1px solid #ccc;margin-left:8px;}
footer {background:#fff;border:1px solid #ccc;height:40px;clear:both;margin-top:10px;}
.clear {clear:both;}
article {padding:20px;border-bottom:1px dotted #ccc;}
article h2 {font:bolder 34px sans-serif;padding:0;margin:0;letter-spacing:-1px;}
article p {padding:0;margin:0;font:12px sans-serif;line-height:24px;letter-spacing:1px;text-align:justify;}
@media screen and (max-width:500px){
body {background-color:#c03;}
#wrapper {width:100%;}
nav {height:auto !important;}
ul#menu li {float:none;}
ul#menu li a {border-bottom:1px dotted #ccc;}
section {width:100%;}
aside {width:100%;}
article h2 {font:bolder 14px sans-serif;}
article p {font:11px sans-serif;margin-top:5px;line-height:22px;letter-spacing:1px;}
}
@media screen and (max-width:700px){
body {background-color:tomato;}
#wrapper {width:100%;}
nav {height:auto !important;}
ul#menu li {float:none;}
ul#menu li a {border-bottom:1px dotted #ccc;}
section {width:48%;}
aside {width:48%;}
article h2 {font:bolder 14px sans-serif;}
article p {font:11px sans-serif;margin-top:5px;line-height:22px;letter-spacing:1px;}
}
</style>
</head>
<body>
<div id="wrapper">
<header></header>
<nav>
<ul id="menu">
<li><a href="#">Anasayfa</a></li>
<li><a href="#">Hakkımızda</a></li>
<li><a href="#">Referanslar</a></li>
<li><a href="#">Galeri</a></li>
<li><a href="#">İletişim</a></li>
</ul>
</nav>
<div id="main">
<section>
<article>
<h2>Lorem İpsum</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
</article>
<article>
<h2>Lorem İpsum</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
</article>
</section>
<aside></aside>
</div>
<div class="clear"></div>
<footer></footer>
</div>
</body>
</html>--R10.NET; Flood Engellendi -->-> Yeni yazılan mesaj 22:15:18 -->-> Daha önceki mesaj 22:08:51 --
Kahretsin yine bocalaya bocalaya deneye deneye kendim buldum belki başka birisinin başına gelir diye nasıl yaptığımı anlatıyorum
@media screen and (max-width:700px){
body {background-color:#c03;}
#wrapper {width:100%;}
nav {height:auto !important;}
ul#menu li {float:none;}
ul#menu li a {border-bottom:1px dotted #ccc;}
section {width:48%;}
aside {width:48%;}
article h2 {font:bolder 14px sans-serif;}
article p {font:11px sans-serif;margin-top:5px;line-height:22px;letter-spacing:1px;}
@media screen and (max-width:500px){
body {background-color:#000;}
#wrapper {width:100%;}
nav {height:auto !important;}
ul#menu li {float:none;}
ul#menu li a {border-bottom:1px dotted #ccc;}
section {width:100%;}
aside {width:100%;margin-top:10px;}
article h2 {font:bolder 14px sans-serif;}
article p {font:11px sans-serif;margin-top:5px;line-height:22px;letter-spacing:1px;}
}
@media screen and (max-width:300px){
body {background-color:green;}
#wrapper {width:100%;}
nav {height:auto !important;}
ul#menu li {float:none;}
ul#menu li a {border-bottom:1px dotted #ccc;}
section {width:100%;}
aside {width:100%;margin-top:10px;}
article h2 {font:bolder 14px sans-serif;}
article p {font:11px sans-serif;margin-top:5px;line-height:22px;letter-spacing:1px;}
}
}media queryleri iç içe yazınca oluyormuş--R10.NET; Flood Engellendi -->-> Yeni yazılan mesaj 22:16:49 -->-> Daha önceki mesaj 22:15:18 --
Makravonum olaydı goruntülü ders çeger idim nasıl responsiv dasarım yabılır diyerekten