<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>960 Grid System</title>
<link rel="stylesheet" href="960.css" />
<link rel="stylesheet" href="reset.css" />
<link rel="stylesheet" href="text.css" />
<style type="text/css">
.container_12 {background:#ccc;}
.grid_9 {background:skyblue;}
.grid_3 {background:pink;}
.grid_9 .grid_3 {background:#fff;padding:20px;-webkit-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box;-moz-box-sizing:border-box;}
.grid_2,.grid_1 {background:yellow;}
.container_12 .grid_12 {background:#456791;}
@media screen and (max-width:748px){
.container_12 {width:100% !important;}
.grid_3 {display:none;width:100%;}
.grid_9 {width:100% !important;}
.grid_9 .grid_3 {width:100% !important;display:block;margin:0 !important;}
}
</style>
</head>
<body>
<div class="container_12">
<div class="grid_9">
<div class="grid_3 alpha">
<h1>Hello World</h1>
<p>Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir. Lorem Ipsum, adı bilinmeyen bir matbaacının bir hurufat numune kitabı oluşturmak üzere bir yazı galerisini alarak karıştırdığı 1500'lerden beri endüstri standardı sahte metinler olarak kullanılmıştır. Beşyüz yıl boyunca varlığını sürdürmekle kalmamış, aynı zamanda pek değişmeden elektronik dizgiye de sıçramıştır. 1960'larda Lorem Ipsum pasajları da içeren Letraset yapraklarının yayınlanması ile ve yakın zamanda Aldus PageMaker gibi Lorem Ipsum sürümleri içeren masaüstü yayıncılık yazılımları ile popüler olmuştur.
</p>
</div>
<div class="grid_3">
<h1>Hello World</h1>
<p>Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir. Lorem Ipsum, adı bilinmeyen bir matbaacının bir hurufat numune kitabı oluşturmak üzere bir yazı galerisini alarak karıştırdığı 1500'lerden beri endüstri standardı sahte metinler olarak kullanılmıştır. Beşyüz yıl boyunca varlığını sürdürmekle kalmamış, aynı zamanda pek değişmeden elektronik dizgiye de sıçramıştır. 1960'larda Lorem Ipsum pasajları da içeren Letraset yapraklarının yayınlanması ile ve yakın zamanda Aldus PageMaker gibi Lorem Ipsum sürümleri içeren masaüstü yayıncılık yazılımları ile popüler olmuştur.
</p>
</div>
<div class="grid_3 omega">
<h1>Hello World</h1>
<p>Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir. Lorem Ipsum, adı bilinmeyen bir matbaacının bir hurufat numune kitabı oluşturmak üzere bir yazı galerisini alarak karıştırdığı 1500'lerden beri endüstri standardı sahte metinler olarak kullanılmıştır. Beşyüz yıl boyunca varlığını sürdürmekle kalmamış, aynı zamanda pek değişmeden elektronik dizgiye de sıçramıştır. 1960'larda Lorem Ipsum pasajları da içeren Letraset yapraklarının yayınlanması ile ve yakın zamanda Aldus PageMaker gibi Lorem Ipsum sürümleri içeren masaüstü yayıncılık yazılımları ile popüler olmuştur.
</p>
</div>
</div>
<div class="grid_3">
<div class="grid_3">
<h2>Lorem ipsum</h2>
<p>Lorem ipsum dolor sit amet.</p>
</div>
</div>
</div>
</body>
</html> Responsive Yazıyorum Ama Çalışmıyor
4
●805
- 25-11-2013, 11:27:42Kimlik doğrulama veya yönetimden onay bekliyor.960 grid sistemini kullanıyorum onun için responsive yazıyoru gridleri alt alta getirdim 748 pixeldeyken ama yine de sağa doğru scroll çıkıyor kodlarım aşağıda ki gibidir; çıldırma noktasına geldim
- 29-11-2013, 16:46:15Kimlik doğrulama veya yönetimden onay bekliyor.
- 29-11-2013, 20:31:24İşte hocam responsive özellikli bir grid sistem olmadığı için sıfırdan kendim yazayım diyorum o da olmuyorChloetasarim adlı üyeden alıntı: mesajı görüntüle
- 30-11-2013, 00:49:37Hocam ama bu şekilde doğru çalışmaz. "responsive grid system" diye aratırsanız, bir çok seçenek bulursunuz. sıfırdan yazmanıza hiç gerek yokPrestijTR adlı üyeden alıntı: mesajı görüntüle