Sie sind nicht angemeldet.

CSS dersleri 01

AllaTurkaa

Technik

  • »AllaTurkaa« ist männlich
  • »AllaTurkaa« ist der Autor dieses Themas

Beiträge: 1 603

Registrierungsdatum: 8. April 2010

Wohnort: Mönchengladbach

  • 1001
  • Nachricht senden

1

Mittwoch, 3. Dezember 2008, 19:41

CSS dersleri 01

div :bir bölüm, kutucukta diyebiliriz.
id="isim" : özelestirmek ve diger kutucuklarda ayiredebilmek icin verdigimiz bir isim.
css de verdigimiz isme göre özelliklerine ekliyoruz #isim{özellikler}

önce css'siz bir html belgesi , icinde 3 kutucuk var.
ücünede farkli farkli isimler verdim evil , alpi ve murat

kirmizi ile yazili kodlara dikkat!

ÖN IZLEME

Zitat

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-9" />
<title>Css1</title>


</head>

<body>
<div id="evil"> evil kutusu </div>
<div id="alpi"> alpi kutusu </div>
<div id="murat"> murat kutusu </div>

</body>
</html>




simdi css de bunlara renk ve sabit boyut verecegiz.
css bilgileri ya farkli bir belgeye eklenir yada <head> arasina </head> koddaki degiskliklere dikkat!

ÖN IZLEME

Zitat

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-9" />
<title>Css2</title>


<style type="text/css">
<!--
#evil {
background-color: #66FF00;
height: 80px;
width: 150px;
}
#alpi {
background-color: #66FFFF;
height: 80px;
width: 150px;
}
#murat {
background-color: #FFFF00;
height: 80px;
width: 150px;
}
-->
</style>
</head>

<body>
<div id="evil"> evil kutusu </div>
<div id="alpi"> alpi kutusu </div>
<div id="murat"> murat kutusu </div>

</body>
</html>



kutucuklara renk verdikten sonra sabit pozisyonlarini belirliyoruz.
fark edilsin diye kutucuklari az farkla kaydirdim. soldan 10pxl

ÖN IZLEME

Zitat

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-9" />
<title>Css3</title>


<style type="text/css">
<!--
#evil {
background-color: #66FF00;
height: 80px;
width: 150px;
left: 10px;
top: 0px;
position: absolute;
}
#alpi {
background-color: #66FFFF;
height: 80px;
width: 150px;
position: absolute;
left: 20px;
top: 80px;
}
#murat {
background-color: #FFFF00;
height: 80px;
width: 150px;
position: absolute;
left: 30px;
top: 160px;
}
-->
</style>
</head>

<body>
<div id="evil"> evil kutusu </div>
<div id="alpi"> alpi kutusu </div>
<div id="murat"> murat kutusu </div>

</body>
</html>



Photoshop slices ile index hazirlayanlar bu örnekdeki sorunu iyi bilirler.
kutucuklari div align="center" ile arac penceresinin ortasina almaya calisiyoruz, ve absolute position bunu engelliyor.
div bölümündeki yazilar haric hic birsey ortalanmiyor.


ÖN IZLEME

Zitat

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-9" />
<title>Css4</title>


<style type="text/css">
<!--
#evil {
background-color: #66FF00;
height: 80px;
width: 150px;
left: 10px;
top: 0px;
position: absolute;
}
#alpi {
background-color: #66FFFF;
height: 80px;
width: 150px;
position: absolute;
left: 20px;
top: 80px;
}
#murat {
background-color: #FFFF00;
height: 80px;
width: 150px;
position: absolute;
left: 30px;
top: 160px;
}
-->
</style>
</head>

<body>
<div align="center">

<div id="evil"> evil kutusu </div>
<div id="alpi"> alpi kutusu </div>
<div id="murat"> murat kutusu </div>

</div>
</body>
</html>





bu sorunu cöze bilmek icin absolute olarak belirledigimiz 3 kutuyu baska bir kutunun icine relative olarak aliyoruz.
göze carpsin diye relativ kutusuna koyu bir renk veriyorum ve adini id="ortala" olarak özellestiriyorum.


ÖN IZLEME


Zitat

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-9" />
<title>Css5</title>


<style type="text/css">
<!--
#ortala {
position: relative;
height: 240px;
width: 300px;
background-color: #333333;
}
#evil {
background-color: #66FF00;
height: 80px;
width: 150px;
left: 10px;
top: 0px;
position: absolute;
}
#alpi {
background-color: #66FFFF;
height: 80px;
width: 150px;
position: absolute;
left: 20px;
top: 80px;
}
#murat {
background-color: #FFFF00;
height: 80px;
width: 150px;
position: absolute;
left: 30px;
top: 160px;
}
-->
</style>
</head>

<body>
<div align="center">
<div id="ortala">
<div id="evil"> evil kutusu </div>
<div id="alpi"> alpi kutusu </div>
<div id="murat"> murat kutusu </div>
</div>
</div>
</body>
</html>




simdi css de left ve top rakamlarini degistirerek kutucuklarimizi istedigimiz yere istedigimiz gibi tasiya biliriz.
sonrasina bir buton link yazi eklemek icinde tüm html belgesini degistirmemize gerek yok!

ÖN IZLEME

HTML

 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-9" />
<title>Css6</title>


<style type="text/css">
<!--
#ortala {
	position: relative;
	height: 240px;
	width: 300px;
	background-color: #333333;
}
#evil {
	background-color: #66FF00;
	height: 80px;
	width: 150px;
	left: 10px;
	top: 0px;
	position: absolute;
}
#alpi {
	background-color: #66FFFF;
	height: 80px;
	width: 150px;
	position: absolute;
	left: 75px;
	top: 40px;
}
#murat {
	background-color: #FFFF00;
	height: 80px;
	width: 150px;
	position: absolute;
	left: 30px;
	top: 160px;
}
-->
</style>
</head>

<body>
	<div align="center">
		<div id="ortala">
			<div id="evil"> evil kutusu </div>
			<div id="alpi"> alpi kutusu </div>
			<div id="murat"> murat kutusu </div>
		</div>
	</div>
</body>
</html>

slowcu

Meister

  • »slowcu« ist männlich

Beiträge: 3 614

Registrierungsdatum: 2. Juni 2007

Wohnort: İstanbul

  • Nachricht senden

2

Mittwoch, 3. Dezember 2008, 20:17

Allaturkaa Bilgiler için Tsk ederiz...
Umarim arkadaslarin işine yarar bu bilgiler

D3NiZLi-Li

Meister

  • »D3NiZLi-Li« ist männlich

Beiträge: 3 304

Registrierungsdatum: 29. Juli 2007

Wohnort: Denizli

  • Nachricht senden

3

Mittwoch, 3. Dezember 2008, 20:52

AllaTurkaa, guzel anlatim olmus
emegine saglik abi

EviL

Profi

  • »EviL« wurde gesperrt

Beiträge: 1 235

  • Nachricht senden

4

Mittwoch, 3. Dezember 2008, 23:11

Walla süper anlatım oldu. Eline sağlık. Çok işime yarıcak eminim. Bikaç deneme yapmam lazım indexlerde gerisi tamadır.
Teşekkürler anlatım için.

SheKerLee

Fortgeschrittener

Beiträge: 430

Registrierungsdatum: 8. Januar 2008

Wohnort: Solingen

  • Nachricht senden

5

Donnerstag, 4. Dezember 2008, 11:58

herSeyi anladim anladimdaaa
anlamadigim naSil ortalandigi, center ortalamiyor, relative niye ortaliyo :0002:

Asuman

Schüler

  • »Asuman« ist weiblich

Beiträge: 136

Registrierungsdatum: 16. November 2007

Wohnort: Meerbusch

  • Nachricht senden

6

Donnerstag, 4. Dezember 2008, 12:11

Zitat

anlamadigim naSil ortalandigi

anlamamanin nedeni isminin shekerlee olmasi,
eger evil, alpi veya murat olsaydi sende anlardin...
yada anlatimda birde seker kutusu olsaydi tzz

EviL

Profi

  • »EviL« wurde gesperrt

Beiträge: 1 235

  • Nachricht senden

7

Donnerstag, 4. Dezember 2008, 12:16

SheKerLee, Doğrumu yorumum bilmiyorum ama, div tag leri kesinlik kazandiriyor. yani kendi komutlari ile değiştirmedikçe yerleri ve kesinlikleri değişmiyor. zaten div tag lerinin amacida ayarlamalarimizda istemeden yerlerinin yada ayarlarinin değişmemesidir.
yani anladigim kadari ile o tag i değiştirmek istiyorsan kendine ait komutlarla olucak.
Yada ben böyle anladim:)

Yani kısaca bir indexi bitirdiginde ve eksik bişe unuttugunda bu kod; html içinde serbestçe dolaşan ve istedigin yere istedigini ekleyebilmeni saglayan komutlar:)

SheKerLee

Fortgeschrittener

Beiträge: 430

Registrierungsdatum: 8. Januar 2008

Wohnort: Solingen

  • Nachricht senden

8

Donnerstag, 4. Dezember 2008, 12:41

Simdi benim anladigim alpi, evil ve murat kutularini bir baSka kutunun iceriSine koyuyoruz cünkü hepSini birden ortalamaSini yapamiyoruz

bu kutunun iSmi relative, komutu yani id iSe ortala

degerleri kendimizmi veriyoruz, yokSa ortanin nereSi oldugunu naSil bilicem ?
galiba anlamamiSim demi :D

Asuman

Schüler

  • »Asuman« ist weiblich

Beiträge: 136

Registrierungsdatum: 16. November 2007

Wohnort: Meerbusch

  • Nachricht senden

9

Donnerstag, 4. Dezember 2008, 12:56

absolute kutularini ortaliyamayiz, cünkü pozisyonlari absolute yani sabit. ( bakis acisi internet araci (ekran penceresi))

absolute kutularini bir baska kutunun icine alinca, pozisyonlari o kutya yöneliyor, internet aracina degil.! (buna ana kutu diyelim)

anakutuyu relative yapinca istedigimiz yere tasiya biliriz...

bende öyle anladim....
ne akilliyim degilmi?! :D

EviL

Profi

  • »EviL« wurde gesperrt

Beiträge: 1 235

  • Nachricht senden

10

Donnerstag, 4. Dezember 2008, 13:08

Aslına isimler zor; komutlar deil:)

Kısaca denseki:)

Biz bir işçi aldık. Adı evil.
bu evilin görevleri nedir.
bir çiçek gördügünde sulamak budamak ve bahçeye taşımak.

İşçiyede bu listeyi verdik.
Tabi bilmeyenler içinde bir yazı hazırladık bunun kim ve ne görevi olduna dair.

dedikki;

adı : evil
görevi : bahçıvan
görevi : sulamak
görevi : budamak
görevi : bahçe taşımak.

orjinaline bakalım:)

<style type="text/css"> bu; görev tablomuzu herkesin okuyacağı yere astığımız kutu
<!--
#evil { bu bizim bahçıvanımız:)
background-color: #66FF00; görevi renk vermek
height: 80px; görevi 80cm çiçeği büyütmek
width: 150px; buda enine dogru çiçeği uzatmak:)
}
-->
</style> görev tablomuz bitti

iş verelim evil e:)
ama önce bu görevi ona söledimizi bilmeli.
nasil:
div = bu bir görev demek
id = kimin görevi
hemen verelim
<div id="evil">çiçek var</div>

yukarda verilen komuta göre evil naptı:
çiçek var yazısına; kendine verilen görevlerin hepsini uyguladı.

Adminimiz yukarda hiçbir masraftan kaçınmayarak size üç işçi almış:)
evil, alpi; murat.
Görevlerini şimdi siz bir daha kontrol edin isterseniz:)

<style type="text/css">
<!--
#evil {
background-color: #66FF00;
height: 80px;
width: 150px;
}
#alpi {
background-color: #66FFFF;
height: 80px;
width: 150px;
}
#murat {
background-color: #FFFF00;
height: 80px;
width: 150px;
}
-->
</style>


hahahaha:) ya bunu ben araba yaptım ev yaptım şekilden şekile sokup kendi kendime gülüyorum.
Walla bunu yollıcam bu sefer diğerlerini silmiştim:)

SheKerLee

Fortgeschrittener

Beiträge: 430

Registrierungsdatum: 8. Januar 2008

Wohnort: Solingen

  • Nachricht senden

11

Donnerstag, 4. Dezember 2008, 13:17

ASU kadar akilli olmaSamda anladim Sonunda

CSS ögrenene bir bahcivan bedava :D

Sagolun :0002:

EviL

Profi

  • »EviL« wurde gesperrt

Beiträge: 1 235

  • Nachricht senden

12

Donnerstag, 4. Dezember 2008, 13:23

Şimdi oku benim yazımı SheKerLee biraz anladıysan nasıl ortalıcanı anlatim:)
Bu işçilere birde şef belirledik.
Dedikki sen bunların yerlerini tayin et
en üst köşeye yani masaya oturttuk.
hani kodda vardı yaa;
#evil { altında görevleri

#alpi { altında görevleri

#murat { ve görevleri
şimdi bu evil alpi ve murat şefinden başkası bişe demedikçe yapmıyor.

bizde şefe sadece dedikki
bunlar seni gördüğü anda
hemen toplansınlar. Korkudan:):):):)

hemen tabloyada yazdık kimin ne görevi oldunu;

<!--
#ortala { bu şefin ismi hatta cidden sef bile diyebilirsiniz html kodunda
position: relative; buda korkudan toplanacakları üstünlük görevi
height: 240px;
width: 300px;
background-color: #333333;
}
#evil {
background-color: #66FF00;
....diye komut devam ediyor. artık kaç işçi yazarsınız size kalmış:)

#sef { yani ortala yerine verdigimiz işçimizin ismi
position: relative; buda görevi. tek görevi ortalamak


aşağıda evil alpi murat yan yatıyor:
<div align="center"> bu diger sefin emri. bizimkiler dinlemez
<div id="evil">yangelip yatar</div>
<div id="alpi">yangelip yatar</div>
<div id="murat">yangelip yatar</div>

korkutalım hemen:)
<div id="sef"> şefleri başlarına gelince hemen ortada toplanacaklar bak:) görevlerini yapıyorlar:)

<div id="sef">
<div align="center">
<div id="evil">yangelip yatar</div>
<div id="alpi">yangelip yatar</div>
<div id="murat">yangelip yatar</div>

Beheycan27

Schüler

  • »Beheycan27« ist männlich

Beiträge: 76

Registrierungsdatum: 6. November 2008

  • Nachricht senden

13

Freitag, 24. Juli 2009, 04:01

vallah süper bir anlatim ama ben birsey anlamdim ne ise yaradigini hala

EzeLimFm

Anfänger

Beiträge: 31

Registrierungsdatum: 16. Juli 2009

Wohnort: Marchegg

  • Nachricht senden

14

Dienstag, 8. September 2009, 20:53

BENCE DIREK TASARIMDAN ANLAMAYAN ARKADASLAR BIR PROGRAMLA BU ISI YAPABILIR SONRA KULLANDIGI GRAFIKLERI URL LIYIP HTML DEN AYARLIYABILIR

mehnaz

Schüler

Beiträge: 13

Registrierungsdatum: 10. Juni 2009

Wohnort: adana

  • Nachricht senden

15

Mittwoch, 7. Oktober 2009, 00:39

tşkr ederim güzel bir anlatım olmuş