Giriş yapmadınız.

CSS dersleri 01

AllaTurkaa

Teknik

  • "AllaTurkaa" bir erkek
  • Konuyu başlatan "AllaTurkaa"

Mesajlar: 1,603

Kayıt tarihi: Apr 8th 2010

Konum: Mönchengladbach

  • 1001
  • Özel mesaj gönder

1

Wednesday, 3.12.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

Alıntı

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

Alıntı

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

Alıntı

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

Alıntı

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


Alıntı

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

Usta

  • "slowcu" bir erkek

Mesajlar: 3,614

Kayıt tarihi: Jun 2nd 2007

Konum: İstanbul

  • Özel mesaj gönder

2

Wednesday, 3.12.2008, 20:17

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

D3NiZLi-Li

Usta

  • "D3NiZLi-Li" bir erkek

Mesajlar: 3,304

Kayıt tarihi: Jul 29th 2007

Konum: Denizli

  • Özel mesaj gönder

3

Wednesday, 3.12.2008, 20:52

AllaTurkaa, guzel anlatim olmus
emegine saglik abi

EviL

Profesyonel

  • "EviL" adlı kullanıcı yasaklandı

Mesajlar: 1,235

  • Özel mesaj gönder

4

Wednesday, 3.12.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

Orta Düzey

Mesajlar: 430

Kayıt tarihi: Jan 8th 2008

Konum: Solingen

  • Özel mesaj gönder

5

Thursday, 4.12.2008, 11:58

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

Asuman

Stajyer

  • "Asuman" bir kadın

Mesajlar: 136

Kayıt tarihi: Nov 16th 2007

Konum: Meerbusch

  • Özel mesaj gönder

6

Thursday, 4.12.2008, 12:11

Alıntı

anlamadigim naSil ortalandigi

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

EviL

Profesyonel

  • "EviL" adlı kullanıcı yasaklandı

Mesajlar: 1,235

  • Özel mesaj gönder

7

Thursday, 4.12.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

Orta Düzey

Mesajlar: 430

Kayıt tarihi: Jan 8th 2008

Konum: Solingen

  • Özel mesaj gönder

8

Thursday, 4.12.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

Stajyer

  • "Asuman" bir kadın

Mesajlar: 136

Kayıt tarihi: Nov 16th 2007

Konum: Meerbusch

  • Özel mesaj gönder

9

Thursday, 4.12.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

Profesyonel

  • "EviL" adlı kullanıcı yasaklandı

Mesajlar: 1,235

  • Özel mesaj gönder

10

Thursday, 4.12.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

Orta Düzey

Mesajlar: 430

Kayıt tarihi: Jan 8th 2008

Konum: Solingen

  • Özel mesaj gönder

11

Thursday, 4.12.2008, 13:17

ASU kadar akilli olmaSamda anladim Sonunda

CSS ögrenene bir bahcivan bedava :D

Sagolun :0002:

EviL

Profesyonel

  • "EviL" adlı kullanıcı yasaklandı

Mesajlar: 1,235

  • Özel mesaj gönder

12

Thursday, 4.12.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

Stajyer

  • "Beheycan27" bir erkek

Mesajlar: 76

Kayıt tarihi: Nov 6th 2008

  • Özel mesaj gönder

13

Friday, 24.07.2009, 04:01

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

EzeLimFm

Acemi

Mesajlar: 31

Kayıt tarihi: Jul 16th 2009

Konum: Marchegg

  • Özel mesaj gönder

14

Tuesday, 8.09.2009, 20:53

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

mehnaz

Stajyer

Mesajlar: 13

Kayıt tarihi: Jun 10th 2009

Konum: adana

  • Özel mesaj gönder

15

Wednesday, 7.10.2009, 00:39

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