ilk psd to css denemem. hatalarım neler?

Kesshh · 1 05-02-2012, 00:30:45

merhabalar psd to css e merak saldım. bir tanesine göz kestirdim. bazen uğraştırdığı yerler oldu ama sonunda bitti. tasarımı internetten buldum. ***** olup olmadığını bilmiyorum doğrusu. kodlarımı inceleyip hatalarımın neler olduğunu söylerseniz çok memnun olurum.

demo

NOT : Aktif Menü buton kısmını ve slider bölümünü yapamadım. + valid değil onları çözmeye çalışıyorum..

**DerinSular** · 2 05-02-2012, 08:14:03

Menüleri açılır kapanır şekilde daha görsel yapabilirsin.
Mesela "Devamını Oku" gibi linklere hover vererek daha hoş görüntüler elde edebilirsin.
Sayfalama kısmında çok büyük alan kullanmışsın. Daha küçük bir alan iş görebilir ve göze daha iyi hitap edebilir.
http://validator.w3.org/ 'ün algıladığı 1 adet hata var.
İlk çalışmana göre başarılı olduğunu söyleyebilirim.
Başarılarının devamını dilerim.

Kesshh · 3 05-02-2012, 11:23:43

Alıntı:

DerinSular Nickli Üyeden Alıntı

Menüleri açılır kapanır şekilde daha görsel yapabilirsin.
Mesela "Devamını Oku" gibi linklere hover vererek daha hoş görüntüler elde edebilirsin.
Sayfalama kısmında çok büyük alan kullanmışsın. Daha küçük bir alan iş görebilir ve göze daha iyi hitap edebilir.
http://validator.w3.org/ 'ün algıladığı 1 adet hata var.
İlk çalışmana göre başarılı olduğunu söyleyebilirim.
Başarılarının devamını dilerim.

Sayfalama dediğiniz yer 30px yüksekliğinde. orayı daha ufak yapabilirdim ama bu sefer daha fazla div kullanmam gerekecekti. o yüzden bu şekilde yaptım. Dediklerinizi dikkate alacağım. yorumunuz için teşekkür ederim.

benoben · 4 05-02-2012, 19:13:54

http://validator.w3.org/ ne zamandır bakmıyordum 30 tane hata varmış vay halimize

link açılmadı bizde baksaydık bi

hackangel · 5 06-02-2012, 16:30:57

link ölmüş

mystec · 6 07-02-2012, 18:50:58

gereksiz yere fazlasıyla position:relative ve position:absolute kullanmışsın. ilk deneme için gayet başarılı.

Kesshh · 7 07-02-2012, 19:02:32

Alıntı:

mystec Nickli Üyeden Alıntı

gereksiz yere fazlasıyla position:relative ve position:absolute kullanmışsın. ilk deneme için gayet başarılı.

aslında o konuyu tam kavradım desem yalan olur. açıklarsanız memnun olurum.

mystec · 8 07-02-2012, 19:17:28

position özelliği aslında adından kendini ele veriyor. elementlere pozisyon vermek için kullanılır ve genelde bir elementi öne, arkaya getirmek için kullanılır. tabiki sağa ve sola, yukarıya, aşağıya dayamak için de kullanılır ama bunun için ilk yol position olmamalı. yaptığın çalışmada genelde sağa sola dayamak için kullanmışsın ama bunu float: ile de yapabilirsin. bikaç örnek verelim:

position:absolute özelliği olan bir divi top: left: right: bottom: değerleri vererek istediğin gibi oynatabilirsin. z-index vererek diğer elementlerin üstüne altına koyabilirsin, gizleyebilirsin. sonradan javascript ile veya css ile yerini değiştirebilirsin.

mesela a.oynak {position:absolute; top:0; left:0;} oynak classına sahip a elementi sol üste dayanır.
a.oynak:hover {left:20px} a elementinin üstüne gelince soldan 20 pixel uzaklaşır.

Kesshh · 9 07-02-2012, 19:40:22

Alıntı:

mystec Nickli Üyeden Alıntı

position özelliği aslında adından kendini ele veriyor. elementlere pozisyon vermek için kullanılır ve genelde bir elementi öne, arkaya getirmek için kullanılır. tabiki sağa ve sola, yukarıya, aşağıya dayamak için de kullanılır ama bunun için ilk yol position olmamalı. yaptığın çalışmada genelde sağa sola dayamak için kullanmışsın ama bunu float: ile de yapabilirsin. bikaç örnek verelim:

position:absolute özelliği olan bir divi top: left: right: bottom: değerleri vererek istediğin gibi oynatabilirsin. z-index vererek diğer elementlerin üstüne altına koyabilirsin, gizleyebilirsin. sonradan javascript ile veya css ile yerini değiştirebilirsin.

mesela a.oynak {position:absolute; top:0; left:0;} oynak classına sahip a elementi sol üste dayanır.
a.oynak:hover {left:20px} a elementinin üstüne gelince soldan 20 pixel uzaklaşır.

ama şöyle birşey var. position:absolute olarak kullanınca sayfanın tümüne göre alıyor. şöyleki;mesela bir divde position:absolute; kullanınca en üste atıyor kendisini. ben bunu aşağıya indirmek için. büyük değerler girmek zorunda kalacağım. top:100px; gibi böylede olunca yanlış yaptığımı düşünüyorum.

mystec · 10 07-02-2012, 19:55:14

şöyle diyelim o halde; position:absolute özelliğine sahip bir element,

1)kendisi birinci dereceden sadece body elementine bağlı ise top, left, right, bottom gibi değerlerle body içerisinde yer değiştirir.
Örnek: <body><div style="position:absolute; top:100px;"></div>...
2)bağlı olduğu elemente atanmış herhangi bir position:relative değeri yoksa yine top, left, right, bottom gibi değerlerle body içerisinde yer değiştirir.
Örnek: <body>...<div id="positionkapsar"><div style="position:absolute; top:100px;"></div></div>....
3)bağlı olduğu elemente atanmış bir position:relative değeri var ise top, left, right, bottom gibi değerlerle bağlı olduğu elementin içerisinde yer değiştirir.
Örnek: <body>...<div id="positionkapsar" style="position:relative"><div style="position:absolute; top:100px;"></div></div>....

3. örnekte position:absolute değerine sahip div, positionkapsarın içerisinde gezinir yani onun en üstünden 100px aşağıda başlar sayfanın başından 100px aşağıda başlamaz.

biraz karmaşık gelmiş olabilir

Seçenekler
Yazdırılabilir şekli göster Sayfayı E-Mail olarak gönder