Jump to content
Forumu Destekleyenlere Katılın ×
Paticik Forumları
2000 lerden beri faal olan, çok şukela bir paylaşım platformuyuz. Hoşgeldiniz.

css' de yerleşim ve web aplikasyonlarıyla ilgili kombo soru.

Fly

Son yazan: Fly
yeri: Donanım & Yazılım

 Paylaş

Öne çıkan mesajlar

Fly Grand Master

Fly

Mesaj tarihi:
Mesaj tarihi:
1)

css ile uğraşayım dedim, kabaca wowheadde gördüğünüz ikon-isim-açıklama tarzı 3 parçalı bir blok oluşturmaya çalışıyorum ,

sorun şu ki 3 parça divi başka bir elemanın içine "koymak" mümkün olmuyor relative/absolute yerleşim yaptırarak,

bu durumda paragrafa arkaplanla aynı renkte bir karakter koyup manual olarak margin-bottom ayarlıyorum, eh oluyor öyle yarım yamalak bir şekilde.

relative falan kullanmadan biraz yapasım geldi de, istediğim gibi gözükmüyor tabi öyle de. paragraf/div/her-neyse otomatik uzamıyor öteki türlü de, sorun burada işte.

nasıl yapılır ?



	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

	<html xmlns="http://www.w3.org/1999/xhtml">

	<head>

		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

		<title>Untitled Document</title>

		<style type="text/css">

	img.icon {

		width:3em;

		height:3em;

		border:solid 0.3px gray;

	}

	p {

		color:white;

		line-height:1.2em;

		border:1px solid black;

	}

	span.skill{

		position:relative;

		color:black;

	}

	.ikon, .name, .desc {

		position:absolute;

		font-size:0.9em;

		font-family:Arial, Helvetica, sans-serif;

	}

	.ikon{	

		top:0.2em;

		left:0.2em;

		width:3em;

		height:3em;		

	}

	.name {

		top:0.2em;

		left:3.4em;

		border:solid 0.3px #bfbfbf;

		height:2.6em;

		width:20.6em;

		padding:0.2em;

	}

	.name .cost{

		float:left;

	}

	.name .cost .mana{

		color:#000993;

	}

	.name .cost .rage{

		color:#ae0a00;

	}

	.desc {

		top:3.4em;

		left:3.4em;

		width:20.6em;

		text-align:left;

		padding:0.2em 0.2em 0.2em 0.2em;

	}

	#dskj {

		width:200px;

		color:black;

	}	

	#test {

		color:black;

		border:1px gray solid;

	}

	#test.kvlt {

		margin-left:3.1em;

	}

		</style>

	</head>

	<body>

	<p style="margin-bottom:9.6em">.

	<span class="skill">

	<div class="ikon"><img class="icon" src="asd.jpg"/></div>

	<div class="name">ölüm Vuruşu<span class="cost"><span class="rage">10 Rage</span></div>

	<div class="desc">dvhjsdfkgjhdıfshukjfyhdsufjhds<br />sdsd<br />sda

	<br />fdfg</div>	

	</span></p>

	<p style="margin-bottom:6em">.

	<span class="skill">

	<div class="ikon"><img class="icon" src="asd.jpg"/></div>

	<div class="name">kalım vuruşu<span class="cost"><span class="mana">10 Mana</span></div>

	<div class="desc">kfjgıdsj</div>	

	</span></p>

	<p><img class="icon" src="asd.jpg" /><span id="test">VDFADDA</span><br /><span id="test" class="kvlt">dsf</span></p>

	<p><img class="icon" src="asd.jpg" /><span id="test">DVBZCSDS</span><br /><span id="test" class="kvlt">dsfĞGD</span></p>

	</body>

	</html>


ilk ikisi işte az çok istediğim şey. sadece paragraf otomatik büyümüyor, ek olarak başına bir karakter koymam gerekiyor falan fıstık.
son ikisinde de paragraflar falan otomatik ayrık gözüküyor ammavelakin layout istediğim gibi değil. relative/absolute hedelerini kullanmadan sadece padding ve margin ile yapamadım bir türlü.

div-spanlerin yeri değişebilir bir de sanırım, div diğerlerini kapsamalı span içeride olmalı da öyle yapınca da pek fark olmadı.

2)birkaç ay önce de açmıştım konu da, daha temiz olsun diye :

önce bir blog, sonra da minik bir browser game pratiği yapacağım. (php ile başla/neyine yetmiyor diyeceksiniz muhtemelen, pratik yapmış olmak için istiyorum, amacım çalışır halde bir site oluşturmak değil yani, daha ziyade araç.)

sorun şu ki c++ cgi ile (fastcgi/scgi daha spesifik olmak gerekirse) uğraştım, 3 günümü harcadım ve sonunda "php kullan yea ne uğraşıyorsun :)))))" oldu aldığım cevapların özeti, daha çalıştıramıyorken bir de dilin web uygulamaları için çıkarttığı sorunlarla uğraşmayayım dedim, yanlış mı demişim yoksa mantıklı mı ?

neyse, bunun üzerine ya python (lighttpd üstünden scgi ile pylons düşünüyorum) ya da java kullanma fikri cazip gözüktü (seneye java dersi varmış zaten, baştan halletmiş olayım zaten çok yoğun olacak).

pylons framework olayına dalmak istemediğim için biraz çekindiğim bir şey, ama hiç olmaz değil.

java için oop öğrenmek ve web kısmıyla yoğunlaşmak için ideal denmişti diğer topicte, jsp'ye giriyor sanırım burada istediğim ?

lakin tomcat kur yok bekle jetty kur hayır apache hedele hödöle şunu bunu yap diye her kafadan bir ses çıkmış, zaten karman çorman oldu konfigürasyonlar, "şunu şunu yap GERİSİNİ ÇÖZERSİN HACI YEA" modunda ilerlemek istemiyorum.

bu iki çözümü karşılaştırırsak avantaj/dezavantajları neler olur ? jsp şirkette falan değilsen bir opsiyon değil deniyor bir de, tomcat vs çok mu kötü ? (bir de ufak sayfalar için gereksiz uzunlukta kod yazılıyor sanırım)

bir de "ben kullandım, biliyorum" diye önemli kurulum adımlarını anlatabilecek varsa çok sevinirim. c++ ile fastcgi kullanayım dedim, herifler dökümantasyonda sanki sadece php varmış gibi anlatıp, sonunda c/c++ için çalışmayan bir çözüm sunmuşlar (boş sayfa geliyor 2 gün çabadan sonra), bıktım artık.

teşekkürler.
Link to comment
Sosyal ağlarda paylaş
riglous Mentor

riglous

Mesaj tarihi:
Mesaj tarihi:
Yanlis anlamadiysam ilk sorun icin, http://matthewjamestaylor.com/blog/perfect-3-column.htm

Ikinci sorun icin, JSP ayri bir sey. Sen Java ile Applet yapmak istiyorsun (JavaApplet). Bunlarin modasi epey bir gecti. Soyle ki eskiden flash yokken herkes bunlarla cebellesirdi. Saatlerce yuklenmesi surerdi. Sonra cok sugar isler yapilirdi. Hala internet uzerinden oyun oynatan yerler bununla cebellesiyor ki pek mantikli degil. Zaten bu nedenle, online oyun devi yahoo bile Flash'la yapilan sisteme gecti. Tavsiyem oyun tarzi seyler icin Flash kullanman ki onda da OOP kullanabilirsin.

Python konusunda da soyledigin framework'u kullanmadigim icin pek bir sey diyemeyecegim; ancak emin ol ki python bilmekle framework'u bilmek ayni seyler degil. Python'la istedigini yapabileceginden supheliyim; ama cok cok farkli ozellikler olabiliyor framework'lerde -ki bu nedenle soyledigin framework ile istedigini belki yapabilirsin.
Link to comment
Sosyal ağlarda paylaş
Fly Grand Master

Fly

Mesaj tarihi:
  • Konuyu açan
Mesaj tarihi:
applet değil de, php gibi daha genel amaçlarla kullanmak için istiyorum, (oyun dediysem de metin tabanlı ogame falan gibi olacak zaten), phpdeki gibi taglerin içine alıp script yazar gibi kullanılıyormuş, bu jsp' ye giriyor sanırım ?

aslında "ciddi kullanmak için para yatırmak gerekiyor" kısmını merak ediyorum, tomcat falan çok rezil diyorlar.

mesela geleneksel php kullanımına göre daha mı hızlı olur, kaynak tüketimi nasıl vs vs onları merak ediyorum aslında. google'da hep benchmark var çünkü makinamda çalıştırdım java phpden hızlı diye, hiç web ortamında kullanımla ilgili ciddi yazılar göremedim.

evet framework olayına ben de sıcak bakmıyorum, django mesela blog veya içerik sunmak isteyene bir çırpıda kurdurmak için gibi gözüktü, baktım biraz browser mmo örneklerine de, pek iç açıcı değildi.

pylons daha özgür kılıyor gibi geldi, ondan acaba diyordum.
Link to comment
Sosyal ağlarda paylaş
riglous Mentor

riglous

Mesaj tarihi:
Mesaj tarihi:
Hmm text-based oyunsa isler biraz daha farkli tabi. django eglenceli, ama sadece eglenceli :). Onu kullanmaktansa PHP'yi kullanmayi tercih ederim. OOP PHP kullanirsan hele kanimca hic gerek yok boyle hedelere.

Forumun birinde AJAX'tan bahsederkene brainstorming sonrasinda dedik ki JS bu is icin cok salak bi yontem; framework'ler falan hikaye. Bunun object duzeyinde paketlenerek yollanmasi daha mantikli dedik. Sonra bizim dememize kalmadan birisi JSP dedi, cok da guzel dedi. Oturup incelemek lazim, guzel, ama tek sorun bana JSP'nin sagladigi avantaj, JS'ye oranla o kadar az ki, gercekten sistem yoran bir is yapilmiyorsa degmez.

Butun bunlarin disinda, gerek JSP gerek Python icin sunucuya erisimin olmak zorunda. Standart disi yukleme yapmak icin.

Son olarak da python'da su sorunun var. django diyor ki, "bizim sana sagladigimiz sunucu programi sadece deneme amaclidir, biz bu servisi saglamiyoruz, sagladigimizi iddia etmiyoruz. Cok kullanici baglanmaya kalktiginda patlarsa bize gelmeyin." Hal boyle olunca bir de bunun icin ucret derdin var tabi... Hos sen illaki acmicam, sadece kendim ogrenecem diyorsun. Bu tip seyleri ogrenirken, cok kisiye gore ayarlanmasi daha dogru olur; optimizasyon buyuk dert cunku.
Link to comment
Sosyal ağlarda paylaş
  • 2 hafta sonra ...
Fly Grand Master

Fly

Mesaj tarihi:
  • Konuyu açan
Mesaj tarihi:
yeni sorumsu :

frameworklerin çoğundaki gibi dizayn ile kodu ayırmak istiyorum ama symfony falan kullanmadan (tek isteğim dizaynın olacağı sayfanın daha temiz durması, mvc falan değil), include ile sayfada kullanılacak kodların olduğu harici bir php dosyasını çağırtıp oradan kullanmaktan daha "profesyönel" bir yöntem var mı ?

bir de hıza ne derece etkisi olur include ile çağırmanın diye sormak istiyorum.

ha php bu arada, unuttum sdfs
Link to comment
Sosyal ağlarda paylaş
Ractamainus Mentor

Ractamainus

Mesaj tarihi:
Mesaj tarihi:
1. sorunda elementleri amaçları dışında kullanmışsın. şöyle bir şey yapabilirsin:



	<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

	<html>

	<head>

	<style>

	body { font-size: 62.5%; }

	.tooltip { width: 25.5em; display: inline-block; }

	.icon { float: left; width: 3.6em; }

	.content { float: right; width: 21.4em; }

	</style>

	</head>

	<body>

	<div class="tooltip">

	<img class="icon" src="wowheadde36pxlikresim.jpg" />

	<div class="content">

	<h1>Işın Kılıcı</h1>

	<h2>Kılıç özelliği vs.</h2>

	<p>Kılıcın tanımı vs. bla bla bla bla bla bla bla blabla bla bla blabla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla</p>

	</div>

	</div>

	</html>


"content" classına sahip div'in içine istediğin metin elementlerini (span, h1, p vs..) ekleyebilirsin, yazmak istediğine göre..

body'de tanımladığım font-size, sadece em'leri kolay yazabilmem içinde.. sen yazmayıp, o orantıda kendi değerlerini kullanabilirsin.
Link to comment
Sosyal ağlarda paylaş
Fly Grand Master

Fly

Mesaj tarihi:
  • Konuyu açan
Mesaj tarihi:
hm evet daha temiz bu, teşekkürler :)
yine de bir iki şey sormak istiyorum :

div'lerin önceden tanımlı özellikleri olması gibi bir şey hatırlıyorum, o yüzden divleri spanin içinde kullanmam yanlış mıydı ?

relative-absolute şekilde bir div' in içindeki spanleri yerleştirmek mümkün mesela, bunun yerine margin ile yapmanın avantaj/dezavantajları neler olur ?

div'in boyutlarını elle ayarlayınca sorun yok, başka bir divle çakışmaması için margin yetebiliyor tabii ki ama o contentin ne kadar uzun olacağı belli değil, onu cssten halletmek mümkün mü ? asıl sorunum bu aslında, bir alan içinde belirli noktalarda duracak birkaç element olacak ama bunlardan bazılarının içerdiği yazının uzunluğu belli olmadığı için bloklar üst üste biniyor.
Link to comment
Sosyal ağlarda paylaş
Ractamainus Mentor

Ractamainus

Mesaj tarihi:
Mesaj tarihi:
Fly said:

div'lerin önceden tanımlı özellikleri olması gibi bir şey hatırlıyorum, o yüzden divleri spanin içinde kullanmam yanlış mıydı ?

div'lerin önceden tanımlı özellikleri derken? böyle bir zorunluluk yok. ama bazı durumlarda width ve height vermek gerekebiliyor. bunun için de span'in içine koymana gerek yok. bir de şu var.. span, p gibi elementler anlamsal olarak metinleri şekillendirmek için yapılmıştır. dolayısıyla bir div'i, illa bir wrapper'ın içine koyacaksan yapacağın başka bir div'in içine koymak olmalı. yani span ile de yapabilirsin ama anlamsal olarak doğru olan bu olmaz.
Fly said:

relative-absolute şekilde bir div' in içindeki spanleri yerleştirmek mümkün mesela, bunun yerine margin ile yapmanın avantaj/dezavantajları neler olur ?

margin ile relative/absolute çok farklı şeyler özellikler aslında. mantıksal olarak bakarsak; relative/absolute konumlandırmak amaçlı özelliklerken, margin daha çok şekillendirmek için kullanılır. işlevsel anlamda ise margin, relative ya da absolute un görevini yerine getiremez. tam tersi de olama. bunu bir yerden okuyabilirsin.
Fly said:

div'in boyutlarını elle ayarlayınca sorun yok, başka bir divle çakışmaması için margin yetebiliyor tabii ki ama o contentin ne kadar uzun olacağı belli değil, onu cssten halletmek mümkün mü ? asıl sorunum bu aslında, bir alan içinde belirli noktalarda duracak birkaç element olacak ama bunlardan bazılarının içerdiği yazının uzunluğu belli olmadığı için bloklar üst üste biniyor.

benim verdiğim örnekte elementlerin üst üste binme şansı yok. yazıdan dolayı birisi uzarsa, diğerleri de aşağıya kaymaya devam eder. ama dediğin örnek çoğu zaman "bir çok farklı sebepten" başına gelebilecek bir durum. misal benim örneğimde tooltip class'ında "display: inline-block" kullanmasaydım, içindeki elementlerin float özelliğinden dolayı, tooltip içinde element yokmuş gibi davranacak ve uzamayacaktı. float özelliğinden gelen bir durumdur misal bu. ama şu anda içindeki content class'ı (metinten dolayı) ne kadar uzarsa, kendisi de o kadar uzayacak. bunun gibi bir çok değişken faktör var bu durumu etkileyen..
Link to comment
Sosyal ağlarda paylaş
 Paylaş
Konu listesine dön
×
×
  • Yeni Oluştur...