Aynı div içinde farklı backgroundlar vermek

02-03-2013, 23:38:32

Kimlik doğrulama veya yönetimden onay bekliyor.

Html ve css çalışırken kafama bir şey takıldı ve size danışmak istedim. Öncelikle yardımlarınız için şimdiden teşekkür ederim.

Bir başlık divi kodladım ve her menü için başına farklı bi icon koymak istiyorum bunun için ayrı ayrı divler mi yapmalıyım yoksa css'den değilde html'den mi background vermeliyim daha basit yolu var mıdır?

Söylemek istediğimi gözünüzde canlandırmanız ve kodlarına bakmanız için ftpye attım.
http://www.indirek.net/yeni
Sağ ve soldaki sidebarlardaki iconları göreceksiniz...

02-03-2013, 23:42:33

#2

Berkay

yeni div oluşturabilirsiniz.

02-03-2013, 23:55:04

#3

phpr10

yeni div oluşturmakta tam çözüm sunmuyor divin bir bölümünü düzenlemek istediğinizde hepsi için ayrı ayrı yapmak zorunda kalıyosunuz ve css dosyanızın boyutu büyüyor

03-03-2013, 00:28:08

#4

Dzyn3

Aşağıdaki gibi bir yapı kullanabilirsiniz.

.MenuBaslik {
    background: url("images/folder.png") no-repeat scroll 6px 4px #F7F7F7;
    color: #393939;
    font-size: 17px;
    height: 25px;
    line-height: 23px;
    padding: 0 0 0 25px;
}
.MenuBaslik .HerEveLazim{ background-image: url("images/hereve.png");}
.MenuBaslik .CokIndirilenler{ background-image: url("images/cokindirilenler.png");}

<div class='MenuBaslik HerEveLazim'>Her Eve Lazım</div>
<div class='MenuBaslik CokIndirilenler'>Çok İndirilenler</div>

03-03-2013, 02:23:29

#5

SNCR_1

divler aynı olsun hocam sorun yoksa bu tür işlemlerde ek div kullanmak istemiyorsanız.

html dökümanları ;
<div id="baslik">
<img src="http://www.indirek.net/yeni/images/folder.png" />başlık buraya</div>

css dökümanları;
#baslik{ font-size:17px; color:#393939;}

04-03-2013, 14:23:54

#6

phpr10

Dzyn3 adlı üyeden alıntı: mesajı görüntüle

Aşağıdaki gibi bir yapı kullanabilirsiniz.

.MenuBaslik {
    background: url("images/folder.png") no-repeat scroll 6px 4px #F7F7F7;
    color: #393939;
    font-size: 17px;
    height: 25px;
    line-height: 23px;
    padding: 0 0 0 25px;
}
.MenuBaslik .HerEveLazim{ background-image: url("images/hereve.png");}
.MenuBaslik .CokIndirilenler{ background-image: url("images/cokindirilenler.png");}

<div class='MenuBaslik HerEveLazim'>Her Eve Lazım</div>
<div class='MenuBaslik CokIndirilenler'>Çok İndirilenler</div>

Dediğiniz şekilde denedim ama çalışmadı backgroundlar görünmüyo

--R10.NET; Flood Engellendi -->-> Yeni yazılan mesaj 14:23:54 -->-> Daha önceki mesaj 14:22:28 --

SNCR_1 adlı üyeden alıntı: mesajı görüntüle

divler aynı olsun hocam sorun yoksa bu tür işlemlerde ek div kullanmak istemiyorsanız.

html dökümanları ;
<div id="baslik">
<img src="http://www.indirek.net/yeni/images/folder.png" />başlık buraya</div>

css dökümanları;
#baslik{ font-size:17px; color:#393939;}

Yardımınız için teşekkürler ama direk resim eklemek istemiyorum

04-03-2013, 14:30:26

#7

Dzyn3

phpr10 adlı üyeden alıntı: mesajı görüntüle

Dediğiniz şekilde denedim ama çalışmadı backgroundlar görünmüyo[COLOR="Silver"]

resim yollarını doğru ayarladığınızdan ve resimlerin var olduğundan emin olun. ondan sonra çalışacaktır

04-03-2013, 14:40:33

#8

phpr10

cssi bu şekilde düzenledim

.menubaslik {background:#f7f7f7 no-repeat 6px 3px; height:25px; padding:0px 0px 0px 25px; color:#393939; font-size:17px; line-height:23px;}
.menubaslik .download {background: url(images/download.png)}
.menubaslik .eklenenler {background:url(images/add.png)}
.menubaslik .kategoriler {background:url(images/folder.png)}
.menubaslik .tags {background: url(images/tags.png)}
.menubaslik .tools {background: url(images/tags.png)}

kullanırken de <div class="menubaslik download">İndirilenler</div> şeklinde kullandım ama backgroundlar gelmedi bu şekilde kullanıldığından emin misiniz?

04-03-2013, 14:58:45

#9

frdtrkc

phpr10 adlı üyeden alıntı: mesajı görüntüle

cssi bu şekilde düzenledim

.menubaslik {background:#f7f7f7 no-repeat 6px 3px; height:25px; padding:0px 0px 0px 25px; color:#393939; font-size:17px; line-height:23px;}
.menubaslik .download {background: url(images/download.png)}
.menubaslik .eklenenler {background:url(images/add.png)}
.menubaslik .kategoriler {background:url(images/folder.png)}
.menubaslik .tags {background: url(images/tags.png)}
.menubaslik .tools {background: url(images/tags.png)}

kullanırken de <div class="menubaslik download">İndirilenler</div> şeklinde kullandım ama backgroundlar gelmedi bu şekilde kullanıldığından emin misiniz?

CSS sınıf isimleri arasındaki boşluğa dikkat!
Aynı element içinde birden fazla sınıf belirtilecek ise css ortamında sınıf isimleri birleşik yazılır, aksi taktirde alt elementlerde kullanılmak için oluşturulmuş bir sınıf olur.

.menubaslik {background:#f7f7f7 no-repeat 6px 3px; height:25px; padding:0px 0px 0px 25px; color:#393939; font-size:17px; line-height:23px;}
.menubaslik.download {background: url(images/download.png)}

<div class="menubaslik download">İndirilenler</div>

.menubaslik {background:#f7f7f7 no-repeat 6px 3px; height:25px; padding:0px 0px 0px 25px; color:#393939; font-size:17px; line-height:23px;}
.menubaslik .download {background: url(images/download.png)}

<div class="menubaslik"><span class="download">İndirilenler</span></div>

---