CSS Yardım Lütfen

09-07-2015, 13:16:39

Merhabalar

Bir class da 9 tane ikon var ve bunların bazılarının arasında 6px bazılarının arasında 7px boşluk var. Bunları ayarlamalıyım ve 9 ikonun genişlemesine kapladığı alanın 300px olmasını sağlamalıyım. Bir türlü halledemedim yardımcı olursanız çok sevinirim.

Hepsine tek tek img style="margin:6px;" şeklinde veriyorum. Onda da normalde fazla gözüküyor.

09-07-2015, 13:27:03

#2

cemsina

iconları <i> ile gösterdiğinizi var sayarak yazıyorum.

<div style="width:300px;float:left;text-align:center;">
	<i></i>
	<i></i>
	<i></i>
	<i></i>
        <i></i>
	<i></i>
	<i></i>
	<i></i>
	<i></i>
</div>

09-07-2015, 13:32:32

#3

Informative

Kodları şu şekilde deneyin;
<div class="ikonlar>
<div class="ikonn">İkon 1 </div>
<div class="ikonn">İkon 2 </div>
<div class="ikonn">İkon 3 </div>
<div class="ikonn">İkon 4 </div>
<div class="ikonn">İkon 5 </div>
<div class="ikonn">İkon 6 </div>
<div class="ikonn">İkon 7 </div>
<div class="ikonn">İkon 8 </div>
<div class="ikonn">İkon 9 </div>
</div>

CSS'te de şu şekilde deneyin;
.ikonlar {
width: 300px;
}
.ikonn {
width: 32px;
}

09-07-2015, 13:57:39

#4

Drowlyt

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

Kodları şu şekilde deneyin;
<div class="ikonlar>
<div class="ikonn">İkon 1 </div>
<div class="ikonn">İkon 2 </div>
<div class="ikonn">İkon 3 </div>
<div class="ikonn">İkon 4 </div>
<div class="ikonn">İkon 5 </div>
<div class="ikonn">İkon 6 </div>
<div class="ikonn">İkon 7 </div>
<div class="ikonn">İkon 8 </div>
<div class="ikonn">İkon 9 </div>
</div>

CSS'te de şu şekilde deneyin;
.ikonlar {
width: 300px;
}
.ikonn {
width: 32px;
}

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

iconları <i> ile gösterdiğinizi var sayarak yazıyorum.

<div style="width:300px;float:left;text-align:center;">
	<i></i>
	<i></i>
	<i></i>
	<i></i>
        <i></i>
	<i></i>
	<i></i>
	<i></i>
	<i></i>
</div>

Üzgünüm beyler ikisi de çözüm getirmedi sorunuma.

--R10.NET; Flood Engellendi -->-> Yeni yazılan mesaj 13:57:39 -->-> Daha önceki mesaj 13:51:54 --

Bir de anlamadığım sebepten ötürü ikonlar üst üste geldi.

09-07-2015, 14:40:44

#5

yumuX

ul li kullanarak deneyebilirsin.

09-07-2015, 19:32:42

#6

Hunper

Tek satır olacak ve yanyana olacak diye anladım eğer bu şekilde ise ve her icon arası 6px olarak varsayar isek şu şekilde olacaktır.

Demo için tıklayın

.icons {
	width:300px;
}
.icons ul {
	display:block;
	margin:0;
	padding:0
}
.icons ul li {
	float:left;
	list-style:none;
	width:32px;
	margin-right:6px;
	text-align:center;
}
.icons ul li img {
	max-width:32px;
}
.icons ul li:nth-last-child(2) {
	margin-left:1px
}
.icons ul li:last-child {
	margin-right:0;
	float:right
}
.c-cle {
	clear:both
}

<div class="icons">
	<ul>
		<li> <img src="icon.png" alt="" /> </li>
		<li> <img src="icon.png" alt="" /> </li>
		<li> <img src="icon.png" alt="" /> </li>
		<li> <img src="icon.png" alt="" /> </li>
		<li> <img src="icon.png" alt="" /> </li>
		<li> <img src="icon.png" alt="" /> </li>
		<li> <img src="icon.png" alt="" /> </li>
		<li> <img src="icon.png" alt="" /> </li>
	</ul>
	<div class="c-cle"></div>
</div>

Bu şekilde araları 6px boşluklu şekilde ve max genişlik 28px olacak şekilde ayarlanmıştır. Eğer aradaki boşlukların genişliklerini değiştirecekseniz benim son satırı yakaladığım gibi(:last-child fontsiyonu ile) sizde istediğiniz satırları :nth-child(satır sayısı buraya) fonksiyonu ile yakalayarak margin-right değeri verip düzenleme yapabilirsiniz. Ancak örneğin birine 7 verirseniz bir diğerini 5 yapmalısınız aşağı düşme olmasın diye.

10-07-2015, 16:32:05

#7

Drowlyt

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

Tek satır olacak ve yanyana olacak diye anladım eğer bu şekilde ise ve her icon arası 6px olarak varsayar isek şu şekilde olacaktır.

Demo için tıklayın

.icons {
	width:300px
}
.icons ul {
	display:block;
	margin:0;
	padding:0
}
.icons ul li {
	float:left;
	list-style:none;
	width:28px;
	margin-right:6px;
	text-align:center
}
.icons ul li img {
	max-width:28px
}
.icons ul li:last-child {
	margin-right:0
}
.c-cle {
	clear:both
}

<div class="icons">
	<ul>
		<li> <img src="icon.png" alt="" /> </li>
		<li> <img src="icon.png" alt="" /> </li>
		<li> <img src="icon.png" alt="" /> </li>
		<li> <img src="icon.png" alt="" /> </li>
		<li> <img src="icon.png" alt="" /> </li>
		<li> <img src="icon.png" alt="" /> </li>
		<li> <img src="icon.png" alt="" /> </li>
		<li> <img src="icon.png" alt="" /> </li>
		<li> <img src="icon.png" alt="" /> </li>
	</ul>
	<div class="c-cle"></div>
</div>

Bu şekilde araları 6px boşluklu şekilde ve max genişlik 28px olacak şekilde ayarlanmıştır. Eğer aradaki boşlukların genişliklerini değiştirecekseniz benim son satırı yakaladığım gibi(:last-child fontsiyonu ile) sizde istediğiniz satırları :nth-child(satır sayısı buraya) fonksiyonu ile yakalayarak margin-right değeri verip düzenleme yapabilirsiniz. Ancak örneğin birine 7 verirseniz bir diğerini 5 yapmalısınız aşağı düşme olmasın diye.

Hocam ne kadar teşekkür etsem az cidden.

Oldu ancak 1px daha sağa kayması gerekiyor. Bir türlü beceremedim. 8 adet ikondan 32px her biri.

10-07-2015, 17:12:04

#8

Hunper

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

Hocam ne kadar teşekkür etsem az cidden.

Oldu ancak 1px daha sağa kayması gerekiyor. Bir türlü beceremedim. 8 adet ikondan 32px her biri.

İlk mesajımda düzenlemeyi yaptım, son elemanı sağa yasladım direkt sondan bir önceki elemanada margin-left: 1px değeri verdim, yani 2 icon arası 7px boşluk diğerleri 6px boşluk oldu. Kısacası 32px lik iconlar ile araları eşit boşluk olarak 300px alana tam sığmış oldu.

10-07-2015, 17:19:46

#9

Drowlyt

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

İlk mesajımda düzenlemeyi yaptım, son elemanı sağa yasladım direkt sondan bir önceki elemanada margin-left: 1px değeri verdim, yani 2 icon arası 7px boşluk diğerleri 6px boşluk oldu. Kısacası 32px lik iconlar ile araları eşit boşluk olarak 300px alana tam sığmış oldu.

float'ı verememişim.

Çok teşekkür ediyorum tekrardan.