Resimleri yatay ve dikey olarak ortalamak

[b1vRiP]

amacım şu;
en üstte büyük bir logo, sayfanın yatay ortasında duracak
onun altında yan yana 4 logo, bunlar da yatay ortada duracak
onların da altında yine bir resim bu da yatay ortada olacak
bunun altında da bir yazı ki bu da yatay ortalanmış olacak

ve bütün bu öğeler dikey olarak da sayfanın ortasında olacak.
ben şöyle yaptım:

kod

br /> "http://www.w3.org/TR/html4/strict.dtd">




type="text/css" href="style1.css" />

alt="Ana Logo" width="433" height="115" />

Şu anda yapım aşamasında.
Lütfen kısa aralıklarla denemeye devam ediniz.

olmadı ve kafam tamamen durdu. istediklerim olmadığı gibi hiç bir öğenin de margin-top değerleri dikkate alınmıyor var mı fikri olan?

[reyou]

bi paintte fln cizip koyarsan daha ii anlariz ne istedigini

[b1vRiP]

[IMG=http://img828.imageshack.us/img828/2083/resim.th.jpg][/IMG]

[Friedman]

öyle yapmışsın

[reyou]

http://snipt.org/VIj

bide dene bakam isine yarar belki

[Oce4n]

böle işteğ?

br /> "[www.w3.org];




type="text/css" href="style1.css" />

Şu anda yapım aşamasında.
Lütfen kısa aralıklarla denemeye devam ediniz.

[Bone]

code tagı var spoiler yerine onu kullanabilirsiniz.

[b1vRiP]

Oce4n said:

böle işteğ?

br /> "[www.w3.org];




type="text/css" href="style1.css" />

Şu anda yapım aşamasında.
Lütfen kısa aralıklarla denemeye devam ediniz.

vertical centered değil ama bu

[Oce4n]

ha onu görmemişim...
o zaman böle olur sanırsam¿

br /> "[www.w3.org];




type="text/css" href="style1.css" />

Şu anda yapım aşamasında.
Lütfen kısa aralıklarla denemeye devam ediniz.

code tagı kötü :/

[Bone]

code tagı güzel işte, spoiler gibi açman gerekmiyor.

[b1vRiP]

ya ben de absolute positioning ile yapmayı düşünmüştüm aslında ama şöyle bir problemle karşılaşılıyordu:
mesela ileride alttaki yazı ile en alttaki resmi silince yine position'ı ayarlamak gerekecek, doğru mudur?
ama sanırım tek yolu da bu gibi gözüküyor.çünkü hepsini bir div içine alsam bile onu sayfada vertical olarak ortalayamacağım çünküm body' dekileri vertical olarak ortalamam gerek, ki o da yok sanırım css3 ile gelir belki diyorlar.
yine de teşekkür ederim.

ayrıca bir iki şey soracağım Oce4n kodunla ilgili tamamen öğrenmek için. şimdi body { text-align: center; } diyerek sen

'de horizontal olarak ortaya almaya kasmamış oldun değil mi?
ve ayrıca positioningle oturttuğun için de vertical ortalama için de hiç bir şey yapmamış olduk di mi özel olarak?

bir de
div#annem { position:absolute; top:50%; left:50%; margin:-170px auto auto -310px; width: 620px; height: 340px; }
burada top ve left position'ı %50 olarak yaptıktan sonra neden margin'lerle de uğraştık bi de o margin değerlerinin sırası nedir?

[Oce4n]

içeriği değiştirirsen divin yerinde herhangi bir değişme olmayacaktır, ama geniş bi boşluk kalır... yani dediğin gibi yapılan değişikliklerde tekrar ayarlamak gerekir, fakat bu gibi sürekli içeriği değişmeyen bi sayfa çok da sorun olmaz bu olay..
ayarlarken veya kurcalarken css kısmına
div { border: 1px solid red; }
gibi bişi yazarsan daha rahat görürsün...

body { text-align: center; }
diyerek sayfadaki her öğenin (değiştirilmediği taktirde) yani resimler, yazılar filan ortada olması sağlanıyo işte. istersen bunu kaldırarak dene. zaten herşey default olarak sola dayalı olacaktır...

dedelerin çok büyük bi amacı yok aslında.. görünümü toparlamak, derli toplu olması amacıyla yazıldı. normalde imgleri ardarda sıralarsan sayfada yanyana gözükürler, burda da öyle davranmaya devam ediyolar işte.. dedeler divini sildiğinde resimlerin yer değiştirdiğini görürsün gene bunu bi nevi düzeltmek için dedeler yerine
yazsan da benzer bi görünüm elde edebilirsin zaten...

son olarak:
div#annem { position:absolute; top:50%; left:50%; margin:-170px auto auto -310px; width: 620px; height: 340px; }
buradaki top left olayı %50 evet ama divin tam orta noktasına göre değil. sol üst köşesini sayfanın tam ortasına yerleştiriyo. div fazla ileri gittiği için divin boyutunun yarısı kadar x ve y kadar geriye götürmek lazım işte...
margin ise:
margin:25px 50px 75px 100px;
top 25px
right 50px
bottom 75px
left 100px

[Mum_Chamber]

margin, border, padding gibi degerler yukaridan baslayip saat yonunde ilerler.

[b1vRiP]

her şey için teşekkürler.

[toggie]

Mum_Chamber said:

margin, border, padding gibi degerler yukaridan baslayip saat yonunde ilerler.

eger 4 deger yerine tek deger yazarsanız, her yonden aynı degeri vermis olursunuz.

bir de 2 deger yazabilirsiniz. o zaman da ilk yazdıgınız deger ust ve alt, ikinci yazdıgınız deger sag ve solu belirtir.

mesela

	margin: 10px 20px;

	

alt ust 10px, sag sol 20px margin yaptık.

[Friedman]

3 yapınca da

margin 10px 20px 30px

10 tepe 20 sağ sol 30 da alt