Resimler Alt Alta Çıkıyor

0
Onaylı Üye
Üye
Katılım
11 Mayıs 2011
Mesajlar
264
Tepki puanı
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.
 
0
Onaylı Üye
Üye
Katılım
11 Mayıs 2011
Mesajlar
264
Tepki puanı
2
Konum
Ilkadim, Samsun, Turkey
Görüntülenme sayısına bakılırsa ilgilenen yok sanırım.
 
0
Onaylı Üye
Üye
Katılım
11 Mayıs 2011
Mesajlar
264
Tepki puanı
2
Konum
Ilkadim, Samsun, Turkey
Sorun günceldir.
 
0
Onaylı Üye
Üye
Katılım
2 Nisan 2011
Mesajlar
38
Tepki puanı
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.
 
0
Onaylı Üye
Üye
Katılım
11 Mayıs 2011
Mesajlar
264
Tepki puanı
2
Konum
Ilkadim, Samsun, Turkey
include ettiğim dosyanın başına girmişim en önemli div class'ı ondan böyle oluyormuş :)
 
Geri
Üst