0
Kayıt Ol

Bu tarz birşey css ile yapılır mı ?

3

●

696

  • 13-01-2010, 13:11:20
    #1
    triposi
    triposi
    Şu resimdeki gibi birşeyi css ile nasıl yapabilirim ? Genel bi div açıp onu 2 ye bölüp, daha sonra onlarıda kendi içinde 2ye bölmeyi denedim ama ya ben beceremedim yada olmuyor, bilen arkadaşlar yardım ederlerse çok sevinirim. Bir sorum daha olacak resimlere link verdiğim zaman arka plana renk geliyor, border:none; ile düzelmesi gerekmez mi ?
  • 13-01-2010, 14:12:45
    #2
    felix59
    felix59
    1. her gördüğünüz yere div açmasanız daha iyi olur. Örnek bu:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>TEST</title>
<style type="text/css">
*{padding:0px;margin:0px;}
body{margin:0px;padding:0px;font-family:Arial;font-size:12px;color:#000;background:#fff;}
.tablo{border-top:2px solid #0ab0f7;background:#93d1f0;padding-left:24px;padding-right:12px;margin:0px auto;width:930px;}
.tablo ul{list-style-type:none;float:left;width:230px;}
.tablo ul li{list-style-type:none;}
.c0{clear:both;}
</style>
</head>
<body>
<div class="tablo">
	<ul><li>Lorem ipsum dolor sit amet,</li><li>consectetur adipisicing elit,</li><li>Lorem ipsum dolor sit amet,</li><li>consectetur adipisicing elit,</li><li>Lorem ipsum dolor sit amet,</li><li>consectetur adipisicing elit,</li><li>Lorem ipsum dolor sit amet,</li><li>consectetur adipisicing elit,</li><li>Lorem ipsum dolor sit amet,</li><li>consectetur adipisicing elit,</li><li>Lorem ipsum dolor sit amet,</li><li>consectetur adipisicing elit,</li><li>Lorem ipsum dolor sit amet,</li><li>consectetur adipisicing elit,</li><li>Lorem ipsum dolor sit amet,</li><li>consectetur adipisicing elit,</li><li>Lorem ipsum dolor sit amet,</li><li>consectetur adipisicing elit,</li><li>Lorem ipsum dolor sit amet,</li><li>consectetur adipisicing elit,</li><li>Lorem ipsum dolor sit amet,</li><li>consectetur adipisicing elit,</li><li>Lorem ipsum dolor sit amet,</li><li>consectetur adipisicing elit,</li><li>Lorem ipsum dolor sit amet,</li><li>consectetur adipisicing elit,</li><li>Lorem ipsum dolor sit amet,</li><li>consectetur adipisicing elit,</li><li>Lorem ipsum dolor sit amet,</li><li>consectetur adipisicing elit,</li><li>Lorem ipsum dolor sit amet,</li><li>consectetur adipisicing elit,</li><li>Lorem ipsum dolor sit amet,</li><li>consectetur adipisicing elit,</li><li>Lorem ipsum dolor sit amet,</li><li>consectetur adipisicing elit,</li><li>Lorem ipsum dolor sit amet,</li><li>consectetur adipisicing elit,</li><li>Lorem ipsum dolor sit amet,</li><li>consectetur adipisicing elit,</li><li>Lorem ipsum dolor sit amet,</li><li>consectetur adipisicing elit,</li><li>Lorem ipsum dolor sit amet,</li><li>consectetur adipisicing elit,</li><li>Lorem ipsum dolor sit amet,</li><li>consectetur adipisicing elit,</li><li>Lorem ipsum dolor sit amet,</li><li>consectetur adipisicing elit,</li><li>Lorem ipsum dolor sit amet,</li><li>consectetur adipisicing elit,</li><li>Lorem ipsum dolor sit amet,</li><li>consectetur adipisicing elit,</li><li>Lorem ipsum dolor sit amet,</li><li>consectetur adipisicing elit,</li><li>Lorem ipsum dolor sit amet,</li><li>consectetur adipisicing elit,</li><li>Lorem ipsum dolor sit amet,</li><li>consectetur adipisicing elit,</li><li>Lorem ipsum dolor sit amet,</li><li>consectetur adipisicing elit,</li><li>Lorem ipsum dolor sit amet,</li><li>consectetur adipisicing elit,</li><li>Lorem ipsum dolor sit amet,</li><li>consectetur adipisicing elit,</li><li>Lorem ipsum dolor sit amet,</li><li>consectetur adipisicing elit,</li><li>Lorem ipsum dolor sit amet,</li><li>consectetur adipisicing elit,</li><li>Lorem ipsum dolor sit amet,</li><li>consectetur adipisicing elit,</li><li>Lorem ipsum dolor sit amet,</li><li>consectetur adipisicing elit,</li><li>Lorem ipsum dolor sit amet,</li><li>consectetur adipisicing elit,</li><li>Lorem ipsum dolor sit amet,</li><li>consectetur adipisicing elit,</li><li>Lorem ipsum dolor sit amet,</li><li>consectetur adipisicing elit,</li><li>Lorem ipsum dolor sit amet,</li><li>consectetur adipisicing elit,</li><li>Lorem ipsum dolor sit amet,</li><li>consectetur adipisicing elit,</li><li>Lorem ipsum dolor sit amet,</li><li>consectetur adipisicing elit,</li><li>Lorem ipsum dolor sit amet,</li><li>consectetur adipisicing elit,</li><li>Lorem ipsum dolor sit amet,</li><li>consectetur adipisicing elit,</li><li>Lorem ipsum dolor sit amet,</li><li>consectetur adipisicing elit,</li><li>Lorem ipsum dolor sit amet,</li><li>consectetur adipisicing elit,</li><li>Lorem ipsum dolor sit amet,</li><li>consectetur adipisicing elit,</li><li>Lorem ipsum dolor sit amet,</li><li>consectetur adipisicing elit,</li><li>Lorem ipsum dolor sit amet,</li><li>consectetur adipisicing elit,</li><li>Lorem ipsum dolor sit amet,</li><li>consectetur adipisicing elit,</li><li>Lorem ipsum dolor sit amet,</li><li>consectetur adipisicing elit,</li><li>Lorem ipsum dolor sit amet,</li><li>consectetur adipisicing elit,</li><li>Lorem ipsum dolor sit amet,</li><li>consectetur adipisicing elit,</li><li>Lorem ipsum dolor sit amet,</li><li>consectetur adipisicing elit,</li></ul>
	<ul><li>Lorem ipsum dolor sit amet,</li><li>consectetur adipisicing elit,</li><li>Lorem ipsum dolor sit amet,</li><li>consectetur adipisicing elit,</li><li>Lorem ipsum dolor sit amet,</li><li>consectetur adipisicing elit,</li><li>Lorem ipsum dolor sit amet,</li><li>consectetur adipisicing elit,</li><li>Lorem ipsum dolor sit amet,</li><li>consectetur adipisicing elit,</li><li>Lorem ipsum dolor sit amet,</li><li>consectetur adipisicing elit,</li><li>Lorem ipsum dolor sit amet,</li><li>consectetur adipisicing elit,</li><li>Lorem ipsum dolor sit amet,</li><li>consectetur adipisicing elit,</li><li>Lorem ipsum dolor sit amet,</li><li>consectetur adipisicing elit,</li><li>Lorem ipsum dolor sit amet,</li><li>consectetur adipisicing elit,</li><li>Lorem ipsum dolor sit amet,</li><li>consectetur adipisicing elit,</li><li>Lorem ipsum dolor sit amet,</li><li>consectetur adipisicing elit,</li><li>Lorem ipsum dolor sit amet,</li><li>consectetur adipisicing elit,</li><li>Lorem ipsum dolor sit amet,</li><li>consectetur adipisicing elit,</li><li>Lorem ipsum dolor sit amet,</li><li>consectetur adipisicing elit,</li><li>Lorem ipsum dolor sit amet,</li><li>consectetur adipisicing elit,</li><li>Lorem ipsum dolor sit amet,</li><li>consectetur adipisicing elit,</li><li>Lorem ipsum dolor sit amet,</li><li>consectetur adipisicing elit,</li><li>Lorem ipsum dolor sit amet,</li><li>consectetur adipisicing elit,</li><li>Lorem ipsum dolor sit amet,</li><li>consectetur adipisicing elit,</li><li>Lorem ipsum dolor sit amet,</li><li>consectetur adipisicing elit,</li><li>Lorem ipsum dolor sit amet,</li><li>consectetur adipisicing elit,</li><li>Lorem ipsum dolor sit amet,</li><li>consectetur adipisicing elit,</li><li>Lorem ipsum dolor sit amet,</li><li>consectetur adipisicing elit,</li><li>Lorem ipsum dolor sit amet,</li><li>consectetur adipisicing elit,</li><li>Lorem ipsum dolor sit amet,</li><li>consectetur adipisicing elit,</li><li>Lorem ipsum dolor sit amet,</li><li>consectetur adipisicing elit,</li><li>Lorem ipsum dolor sit amet,</li><li>consectetur adipisicing elit,</li><li>Lorem ipsum dolor sit amet,</li><li>consectetur adipisicing elit,</li><li>Lorem ipsum dolor sit amet,</li><li>consectetur adipisicing elit,</li><li>Lorem ipsum dolor sit amet,</li><li>consectetur adipisicing elit,</li><li>Lorem ipsum dolor sit amet,</li><li>consectetur adipisicing elit,</li><li>Lorem ipsum dolor sit amet,</li><li>consectetur adipisicing elit,</li><li>Lorem ipsum dolor sit amet,</li><li>consectetur adipisicing elit,</li><li>Lorem ipsum dolor sit amet,</li><li>consectetur adipisicing elit,</li><li>Lorem ipsum dolor sit amet,</li><li>consectetur adipisicing elit,</li><li>Lorem ipsum dolor sit amet,</li><li>consectetur adipisicing elit,</li><li>Lorem ipsum dolor sit amet,</li><li>consectetur adipisicing elit,</li><li>Lorem ipsum dolor sit amet,</li><li>consectetur adipisicing elit,</li><li>Lorem ipsum dolor sit amet,</li><li>consectetur adipisicing elit,</li><li>Lorem ipsum dolor sit amet,</li><li>consectetur adipisicing elit,</li><li>Lorem ipsum dolor sit amet,</li><li>consectetur adipisicing elit,</li><li>Lorem ipsum dolor sit amet,</li><li>consectetur adipisicing elit,</li><li>Lorem ipsum dolor sit amet,</li><li>consectetur adipisicing elit,</li><li>Lorem ipsum dolor sit amet,</li><li>consectetur adipisicing elit,</li><li>Lorem ipsum dolor sit amet,</li><li>consectetur adipisicing elit,</li><li>Lorem ipsum dolor sit amet,</li><li>consectetur adipisicing elit,</li><li>Lorem ipsum dolor sit amet,</li><li>consectetur adipisicing elit,</li><li>Lorem ipsum dolor sit amet,</li><li>consectetur adipisicing elit,</li><li>Lorem ipsum dolor sit amet,</li><li>consectetur adipisicing elit,</li><li>Lorem ipsum dolor sit amet,</li><li>consectetur adipisicing elit,</li><li>Lorem ipsum dolor sit amet,</li><li>consectetur adipisicing elit,</li><li>Lorem ipsum dolor sit amet,</li><li>consectetur adipisicing elit,</li><li>Lorem ipsum dolor sit amet,</li><li>consectetur adipisicing elit,</li></ul>
	<ul><li>Lorem ipsum dolor sit amet,</li><li>consectetur adipisicing elit,</li><li>Lorem ipsum dolor sit amet,</li><li>consectetur adipisicing elit,</li><li>Lorem ipsum dolor sit amet,</li><li>consectetur adipisicing elit,</li><li>Lorem ipsum dolor sit amet,</li><li>consectetur adipisicing elit,</li><li>Lorem ipsum dolor sit amet,</li><li>consectetur adipisicing elit,</li><li>Lorem ipsum dolor sit amet,</li><li>consectetur adipisicing elit,</li><li>Lorem ipsum dolor sit amet,</li><li>consectetur adipisicing elit,</li><li>Lorem ipsum dolor sit amet,</li><li>consectetur adipisicing elit,</li><li>Lorem ipsum dolor sit amet,</li><li>consectetur adipisicing elit,</li><li>Lorem ipsum dolor sit amet,</li><li>consectetur adipisicing elit,</li><li>Lorem ipsum dolor sit amet,</li><li>consectetur adipisicing elit,</li><li>Lorem ipsum dolor sit amet,</li><li>consectetur adipisicing elit,</li><li>Lorem ipsum dolor sit amet,</li><li>consectetur adipisicing elit,</li><li>Lorem ipsum dolor sit amet,</li><li>consectetur adipisicing elit,</li><li>Lorem ipsum dolor sit amet,</li><li>consectetur adipisicing elit,</li><li>Lorem ipsum dolor sit amet,</li><li>consectetur adipisicing elit,</li><li>Lorem ipsum dolor sit amet,</li><li>consectetur adipisicing elit,</li><li>Lorem ipsum dolor sit amet,</li><li>consectetur adipisicing elit,</li><li>Lorem ipsum dolor sit amet,</li><li>consectetur adipisicing elit,</li><li>Lorem ipsum dolor sit amet,</li><li>consectetur adipisicing elit,</li><li>Lorem ipsum dolor sit amet,</li><li>consectetur adipisicing elit,</li><li>Lorem ipsum dolor sit amet,</li><li>consectetur adipisicing elit,</li><li>Lorem ipsum dolor sit amet,</li><li>consectetur adipisicing elit,</li><li>Lorem ipsum dolor sit amet,</li><li>consectetur adipisicing elit,</li><li>Lorem ipsum dolor sit amet,</li><li>consectetur adipisicing elit,</li><li>Lorem ipsum dolor sit amet,</li><li>consectetur adipisicing elit,</li><li>Lorem ipsum dolor sit amet,</li><li>consectetur adipisicing elit,</li><li>Lorem ipsum dolor sit amet,</li><li>consectetur adipisicing elit,</li><li>Lorem ipsum dolor sit amet,</li><li>consectetur adipisicing elit,</li><li>Lorem ipsum dolor sit amet,</li><li>consectetur adipisicing elit,</li><li>Lorem ipsum dolor sit amet,</li><li>consectetur adipisicing elit,</li><li>Lorem ipsum dolor sit amet,</li><li>consectetur adipisicing elit,</li><li>Lorem ipsum dolor sit amet,</li><li>consectetur adipisicing elit,</li><li>Lorem ipsum dolor sit amet,</li><li>consectetur adipisicing elit,</li><li>Lorem ipsum dolor sit amet,</li><li>consectetur adipisicing elit,</li><li>Lorem ipsum dolor sit amet,</li><li>consectetur adipisicing elit,</li><li>Lorem ipsum dolor sit amet,</li><li>consectetur adipisicing elit,</li><li>Lorem ipsum dolor sit amet,</li><li>consectetur adipisicing elit,</li><li>Lorem ipsum dolor sit amet,</li><li>consectetur adipisicing elit,</li><li>Lorem ipsum dolor sit amet,</li><li>consectetur adipisicing elit,</li><li>Lorem ipsum dolor sit amet,</li><li>consectetur adipisicing elit,</li><li>Lorem ipsum dolor sit amet,</li><li>consectetur adipisicing elit,</li><li>Lorem ipsum dolor sit amet,</li><li>consectetur adipisicing elit,</li><li>Lorem ipsum dolor sit amet,</li><li>consectetur adipisicing elit,</li><li>Lorem ipsum dolor sit amet,</li><li>consectetur adipisicing elit,</li><li>Lorem ipsum dolor sit amet,</li><li>consectetur adipisicing elit,</li><li>Lorem ipsum dolor sit amet,</li><li>consectetur adipisicing elit,</li><li>Lorem ipsum dolor sit amet,</li><li>consectetur adipisicing elit,</li><li>Lorem ipsum dolor sit amet,</li><li>consectetur adipisicing elit,</li><li>Lorem ipsum dolor sit amet,</li><li>consectetur adipisicing elit,</li><li>Lorem ipsum dolor sit amet,</li><li>consectetur adipisicing elit,</li><li>Lorem ipsum dolor sit amet,</li><li>consectetur adipisicing elit,</li><li>Lorem ipsum dolor sit amet,</li><li>consectetur adipisicing elit,</li><li>Lorem ipsum dolor sit amet,</li><li>consectetur adipisicing elit,</li></ul>
	<ul><li>Lorem ipsum dolor sit amet,</li><li>consectetur adipisicing elit,</li><li>Lorem ipsum dolor sit amet,</li><li>consectetur adipisicing elit,</li><li>Lorem ipsum dolor sit amet,</li><li>consectetur adipisicing elit,</li><li>Lorem ipsum dolor sit amet,</li><li>consectetur adipisicing elit,</li><li>Lorem ipsum dolor sit amet,</li><li>consectetur adipisicing elit,</li><li>Lorem ipsum dolor sit amet,</li><li>consectetur adipisicing elit,</li><li>Lorem ipsum dolor sit amet,</li><li>consectetur adipisicing elit,</li><li>Lorem ipsum dolor sit amet,</li><li>consectetur adipisicing elit,</li><li>Lorem ipsum dolor sit amet,</li><li>consectetur adipisicing elit,</li><li>Lorem ipsum dolor sit amet,</li><li>consectetur adipisicing elit,</li><li>Lorem ipsum dolor sit amet,</li><li>consectetur adipisicing elit,</li><li>Lorem ipsum dolor sit amet,</li><li>consectetur adipisicing elit,</li><li>Lorem ipsum dolor sit amet,</li><li>consectetur adipisicing elit,</li><li>Lorem ipsum dolor sit amet,</li><li>consectetur adipisicing elit,</li><li>Lorem ipsum dolor sit amet,</li><li>consectetur adipisicing elit,</li><li>Lorem ipsum dolor sit amet,</li><li>consectetur adipisicing elit,</li><li>Lorem ipsum dolor sit amet,</li><li>consectetur adipisicing elit,</li><li>Lorem ipsum dolor sit amet,</li><li>consectetur adipisicing elit,</li><li>Lorem ipsum dolor sit amet,</li><li>consectetur adipisicing elit,</li><li>Lorem ipsum dolor sit amet,</li><li>consectetur adipisicing elit,</li><li>Lorem ipsum dolor sit amet,</li><li>consectetur adipisicing elit,</li><li>Lorem ipsum dolor sit amet,</li><li>consectetur adipisicing elit,</li><li>Lorem ipsum dolor sit amet,</li><li>consectetur adipisicing elit,</li><li>Lorem ipsum dolor sit amet,</li><li>consectetur adipisicing elit,</li><li>Lorem ipsum dolor sit amet,</li><li>consectetur adipisicing elit,</li><li>Lorem ipsum dolor sit amet,</li><li>consectetur adipisicing elit,</li><li>Lorem ipsum dolor sit amet,</li><li>consectetur adipisicing elit,</li><li>Lorem ipsum dolor sit amet,</li><li>consectetur adipisicing elit,</li><li>Lorem ipsum dolor sit amet,</li><li>consectetur adipisicing elit,</li><li>Lorem ipsum dolor sit amet,</li><li>consectetur adipisicing elit,</li><li>Lorem ipsum dolor sit amet,</li><li>consectetur adipisicing elit,</li><li>Lorem ipsum dolor sit amet,</li><li>consectetur adipisicing elit,</li><li>Lorem ipsum dolor sit amet,</li><li>consectetur adipisicing elit,</li><li>Lorem ipsum dolor sit amet,</li><li>consectetur adipisicing elit,</li><li>Lorem ipsum dolor sit amet,</li><li>consectetur adipisicing elit,</li><li>Lorem ipsum dolor sit amet,</li><li>consectetur adipisicing elit,</li><li>Lorem ipsum dolor sit amet,</li><li>consectetur adipisicing elit,</li><li>Lorem ipsum dolor sit amet,</li><li>consectetur adipisicing elit,</li><li>Lorem ipsum dolor sit amet,</li><li>consectetur adipisicing elit,</li><li>Lorem ipsum dolor sit amet,</li><li>consectetur adipisicing elit,</li><li>Lorem ipsum dolor sit amet,</li><li>consectetur adipisicing elit,</li><li>Lorem ipsum dolor sit amet,</li><li>consectetur adipisicing elit,</li><li>Lorem ipsum dolor sit amet,</li><li>consectetur adipisicing elit,</li><li>Lorem ipsum dolor sit amet,</li><li>consectetur adipisicing elit,</li><li>Lorem ipsum dolor sit amet,</li><li>consectetur adipisicing elit,</li><li>Lorem ipsum dolor sit amet,</li><li>consectetur adipisicing elit,</li><li>Lorem ipsum dolor sit amet,</li><li>consectetur adipisicing elit,</li><li>Lorem ipsum dolor sit amet,</li><li>consectetur adipisicing elit,</li><li>Lorem ipsum dolor sit amet,</li><li>consectetur adipisicing elit,</li><li>Lorem ipsum dolor sit amet,</li><li>consectetur adipisicing elit,</li><li>Lorem ipsum dolor sit amet,</li><li>consectetur adipisicing elit,</li><li>Lorem ipsum dolor sit amet,</li><li>consectetur adipisicing elit,</li><li>Lorem ipsum dolor sit amet,</li><li>consectetur adipisicing elit,</li><li>Lorem ipsum dolor sit amet,</li><li>consectetur adipisicing elit,</li></ul>
	<div class="c0"></div>
   </div>
</body>
</html>
    2. css de 
    a img{border:none;outline:none}
    <kd> arkadaştan hızlı davranmışık</kd>
  • 13-01-2010, 14:17:15
    #3
    metanek
    metanek
    Merhaba o resimdeki gibi css ile yapabilmniz mümkün o listeler için bence
    Alıntı
    <ul><li></li><ul>
    kullanırsanız çok daha iyi olur bir genel kapsayıcı div açınız ardından kaç sutun istiyorsanız link bloklarını okadar daha div açın kapsayıcı div in içine, sonra link elemenlerini kullanarak sıralayınız ardından bunlara class veriniz sonra bu classlardan satır araları yani default ayarlarla gelen değerleri düzenleyebilirsiniz kolay glesin


    Edit : felix59 ben yazarken sen cevap vermişsin kusura bakma
  • 13-01-2010, 17:14:50
    #4
    triposi
    triposi
    Çok teşekkürler harika oldu.