Resimler Alt Alta Çıkıyor

Evan

0
İyinet Üyesi
Katılım
12 Mayıs 2011
Mesajlar
264
Reaction score
2
Konum
Ilkadim, Samsun, Turkey
Merhaba arkadaşlar bir projem için tema düzenliyorum fakat img scr ile eklediğim resimler alt alta çıkıyor. Bunun sorunu elbette CSS fakat neden olduğunu bir türlü anlayamadım.
Kod bütünü:
Kod:
	#news .ropo {
		float: left;
		width: 370px;
		margin-bottom: 30px;
		margin-left: 15px;
		background: url("../images/news_bk.png");
		border: 5px solid #e5e5e5;
		padding: 10px;
	}
	#news .ropo .title {
		width: 150px;
		margin: -15px 0 15px -15px;
		padding-left: 15px;
		background: #e65700 url("../images/arrows.png") no-repeat right;
		font-size: 22px;
		font-weight: bold;
		color: #FFF;
		text-transform: uppercase;
		line-height: 16px;
	}
	#news .ropo .ntitle {
		font-size: 9pt;
		margin-bottom: 5px;
		border: none;
	}
	#news .ropo .ntitle a {
		color: #c14900;
		text-decoration: none;
	}
	#news .ropo .ntitle a:hover {
		color: #c10000;
		text-decoration: underline;
	}
	#news .ropo .ntitle .edit img {
		border: 0;
		margin-left: 5px;
		
		style="filter:alpha(opacity=70);
		-moz-opacity: 0.7;
		-khtml-opacity: 0.7;
		opacity: 0.7;
	}
	#news .ropo .ntitle .edit img:hover {
		style="filter:alpha(opacity=100);
		-moz-opacity: 1;
		-khtml-opacity: 1;
		opacity: 1;
	}
	#news .ropo .ntitle .edit img:active {
		style="filter:alpha(opacity=50);
		-moz-opacity: 0.5;
		-khtml-opacity: 0.5;
		opacity: 0.5;
	}
	#news .ropo .text {
		font-size: 9pt;
		color: #444;
		line-height: 12pt;
		margin-bottom: 20px;
	}
	#news .ropo .text a {
		color: #0045d0;
		text-decoration: underline;
	}
	#news .ropo .text a:hover {
		text-decoration: none;
	}	
	#news .ropo .text img {
		background: #f2f2f2;
		padding: 5px;
		border: 1px solid #d8d8d8;
		margin: 0 8px 3px 0;
	}
	#news .ropo .stext {
		height: 105px;
		overflow: hidden;
		font-size: 8pt;
		color: #444;
		line-height: 12pt;
		margin-bottom: 15px;
	}
	#news .ropo .stext a {
		color: #0045d0;
		text-decoration: underline;
	}
	#news .ropo .stext a:hover {
		color: #c10000;		
		text-decoration: none;
	}
	#news .ropo .stext img {
		width: 90px;
		height: 90px;
		background: #f2f2f2;
		padding: 5px;
		border: 1px solid #d8d8d8;
		margin: 0 5px 3px 0;
	}
	
	#news .ropo .allnews a {
		float: right;
		background: #AAA;
		padding: 3px 6px 3px 6px;
		margin: -10px -15px 0 0;
		font-size: 8pt;
		font-style: italic;
		color: #FFF;
		text-decoration: none;
	}
	#news .ropo .allnews a:hover {
		background: #427837;
		text-decoration: underline;
	}

Benim kullandığım class:
Kod:
	#news .ropo .stext img {
		width: 90px;
		height: 90px;
		background: #f2f2f2;
		padding: 5px;
		border: 1px solid #d8d8d8;
		margin: 0 5px 3px 0;
	}

Yardımlarınız için teşekkürler.
 

wdr.leo

0
İyinet Üyesi
Katılım
2 Nisan 2011
Mesajlar
38
Reaction score
1
HTML:
#news .ropo .stext img {
		width: 90px;
		height: 90px;
		background: #f2f2f2;
		padding: 5px;
		border: 1px solid #d8d8d8;
		margin: 0 5px 3px 0;
                float:left;
	}

float:left; komutu sola yasla anlamına gelmekte böyle yapılırsa iki div yan yana yazıldığı zaman sonrakini de kendine yaslar ve doğal olarak sizin istediğiniz sonuç elde edilir.
Tabi burada width belirttiğiniz için (genişlik) bu değerde rol oynar.
float:left komutu olsa bile 100px genişlikte bir alana birisi 100px diğeri 100px toplamı 200pxlik iki tane resim koyarsanız belirttiğiniz genişliğe sığmayacağından taşacak ve otomatikman resim yine alta inecektir.

Burada yapmanız gereken iki resminizin genişliğini toplayın ve "width:90px;" bölümünü iki resmin toplamına eşit bir uzunlukta ayarlayın veya resim boyutlarını 90px lik bir alana sığdırmak için küçültün.

Onun haricinde sisteminizi tam bilmiyorum tasarımda nasıl gözükür bilmiyorum ama şunuda deneyebilirsiniz;
"width" değerini silersiniz tamamen kendi genişliğini kendi otomatik olarak atar.

Eğer sorununuz devam ederse ve cevap bulamazsanız [email protected] adresini ekleyebilirsiniz. Akşam 19:00 - 20:00 civarında açık oluyorum yardımcı olmaktan zevk duyarım.

İyi günler.
 

Türkiye’nin ilk webmaster forum sitesi iyinet.com'da forum üyeleri tarafından yapılan tüm paylaşımlardan; Türk Ceza Kanunu’nun 20. Maddesinin, 5651 Sayılı Kanununun 4. maddesinin 2. fıkrasına göre, paylaşım yapan üyeler sorumludur.

Backlink ve Tanıtım Yazısı için iletişime geçmek için Skype Adresimiz: .cid.1580508955483fe5

Elektronik Sigara Cicisex Porno
Üst