You are not logged in.

CSS dersleri 01

Dear visitor, welcome to AllaTurkaa. If this is your first visit here, please read the Help. It explains in detail how this page works. To use all features of this page, you should consider registering. Please use the registration form, to register here or read more information about the registration process. If you are already registered, please login here.

AllaTurkaa

Administrator

  • "AllaTurkaa" is male
  • "AllaTurkaa" started this thread

Posts: 1,603

Date of registration: Apr 8th 2010

Location: Mönchengladbach

  • 1001
  • Send private message

1

Wednesday, December 3rd 2008, 7:41pm

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

Quoted

<!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

Quoted

<!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

Quoted

<!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

Quoted

<!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


Quoted

<!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

Master

  • "slowcu" is male

Posts: 3,614

Date of registration: Jun 2nd 2007

Location: İstanbul

  • Send private message

2

Wednesday, December 3rd 2008, 8:17pm

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

D3NiZLi-Li

Master

  • "D3NiZLi-Li" is male

Posts: 3,304

Date of registration: Jul 29th 2007

Location: Denizli

  • Send private message

3

Wednesday, December 3rd 2008, 8:52pm

AllaTurkaa, guzel anlatim olmus
emegine saglik abi

EviL

Professional

  • "EviL" has been banned

Posts: 1,235

  • Send private message

4

Wednesday, December 3rd 2008, 11:11pm

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

Intermediate

Posts: 430

Date of registration: Jan 8th 2008

Location: Solingen

  • Send private message

5

Thursday, December 4th 2008, 11:58am

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

Asuman

Trainee

  • "Asuman" is female

Posts: 136

Date of registration: Nov 16th 2007

Location: Meerbusch

  • Send private message

6

Thursday, December 4th 2008, 12:11pm

Quoted

anlamadigim naSil ortalandigi

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

EviL

Professional

  • "EviL" has been banned

Posts: 1,235

  • Send private message

7

Thursday, December 4th 2008, 12:16pm

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

Intermediate

Posts: 430

Date of registration: Jan 8th 2008

Location: Solingen

  • Send private message

8

Thursday, December 4th 2008, 12:41pm

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

Trainee

  • "Asuman" is female

Posts: 136

Date of registration: Nov 16th 2007

Location: Meerbusch

  • Send private message

9

Thursday, December 4th 2008, 12:56pm

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

Professional

  • "EviL" has been banned

Posts: 1,235

  • Send private message

10

Thursday, December 4th 2008, 1:08pm

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

Intermediate

Posts: 430

Date of registration: Jan 8th 2008

Location: Solingen

  • Send private message

11

Thursday, December 4th 2008, 1:17pm

ASU kadar akilli olmaSamda anladim Sonunda

CSS ögrenene bir bahcivan bedava :D

Sagolun :0002:

EviL

Professional

  • "EviL" has been banned

Posts: 1,235

  • Send private message

12

Thursday, December 4th 2008, 1:23pm

Ş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

Trainee

  • "Beheycan27" is male

Posts: 76

Date of registration: Nov 6th 2008

  • Send private message

13

Friday, July 24th 2009, 4:01am

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

EzeLimFm

Beginner

Posts: 31

Date of registration: Jul 16th 2009

Location: Marchegg

  • Send private message

14

Tuesday, September 8th 2009, 8:53pm

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

mehnaz

Trainee

Posts: 13

Date of registration: Jun 10th 2009

Location: adana

  • Send private message

15

Wednesday, October 7th 2009, 12:39am

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