***** Siteler için CSS Template (ilk tasarımım)

13-06-2010, 02:47:10

Üyeliği durduruldu

Slm Arkadaşlar,

Öncelikle hayatım boyunca hep hazır tasarımlar kullanmış biri olarak, artık kendimi Çizim ve Tasarım (css) alanında geliştirmeye karar verdim.

Zaten az - çok css bilgim vardı. Fakat sıfırdan çizip, css e aktaracak kadar değildi ve ansızın gelen bir gaz ile Fireworks 'ü açıp çizimimi gerçekleştirdim. Birkaç saatlik çalışma sonunda çizim bitti ve iş CSS 'e aktarmaya geldi. Zaman zaman zorluklar yaşadım fakat çözümü araştırarak buldum ve en sonunda böyle bir tasarım ortaya çıktı.

Neden ***** Video Tasarımı? diye sorabilirsiniz, Özel bir nedeni yok. Sadece başlangıç için en pratik olan sanırım buydu ve böyle birşey yapmaya karar verdim.

# Şunu Belirteyim: Tamamen kendi çizimim ve csse de kendi aktarımımdır. Benzeri vs. olur felan yanlışlık olmasın. Sadece esinlendiğim birkaç site oldu hepsi o. Yoksa kodlarını kullanmadım...

__________________________________________________ ________
Anasayfa Önizlemesi:

İzleme Sayfası Önizlemesi:

__________________________________________________ ___________________________

Lütfen yorumlarınızı belirtiniz. "Şunu yanlış kullanmışsın, Bunu burada kullanmayabilirdin, Şunu kullanman gereksiz olmuş, Şu w3 standardının dışındadır" vs. gibisinden yorumda bulunursanız çok sevinirim. Çünkü bu konuda yanlış kullandığım bazı şeyleri değiştirmem gerekiyor

(Bu arada Dört dörtlük bir çalışma değil fakat yaptığım ilk CSS template 'dir. Ona göre yorumda bulunursak sevinirim)

// İndirmeyip baksam diyenler için: Ana Sayfa | İzleme Sayfası

// İndirip arşive atayım belki lazım olur diyenler için: Link 1 | Alternatif | Alternatif 2 | Alternatif 3 | Boyut: 132 KB

Okuyan herkese teşekkürler...

13-06-2010, 04:06:23

#2

Direct

İlk Çalışmana Ragmen İyi Dostum.

13-06-2010, 06:09:35

#3

triposi

Benim ilk çalışmama kıyaslayacak olursak mükemmel ötesi dostum tebrik ederim. Tavsiyede bulunmak gerekirse de sakın css ile uğraşmayı bırakma, aşırı zevkli ve eğlenceli olduğunu göreceksin uğraştıkça.

13-06-2010, 06:30:13

#4

x2841x

firefoxda kayıyor demo
http://i1006.hizliresim.com/2010/6/13/983.jpg
eline saglık güzel olmuş

13-06-2010, 07:49:20

#5

~~SahiNET~~

Üyeliği durduruldu

@ Teşekkürler arkadaşlar. Aynen devam tabikide

Ayrıca o kayma sorununu biliyorum çözünürlükle alakalı ne yaptıysam halledemedim

sol ve içerik adında 2 div var. sol divin genişliği zaten belli. Sağdakine ise 100% veremedim. Bende mecburen px olarak değer verdiğimden kayması normal

(örn. alttaki kodu nasıl istediğim gibi yapabilirim?)

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1254">
<title>Yeni Sayfa 1</title>
<style>
#ana{
width:800px;
height:100px;
border: 1px solid;
}

#sol{
width:100px;
float:left;
height:90px;
border: 1px solid;
}

#icerik{
width:100%;
height:90px;
float:left;
}
</style>
</head>

<body>
<div id="ana">
<div id="sol">sol</div>
<div id="icerik">içerik</div>


</div>
</body>

</html>

14-06-2010, 04:27:36

#6

triposi

Temanın css dosyasını açıp orjinalini bulup aşağıdakiyle değiştir:

Alıntı

/* İçerik Bölümü - Sağ kısımda diyebiliriz. */
#icerik {width:890px;height:auto;background-color: #36393D;margin-top:6px;float:left;}

Aşağıdaki resim gibi bi görüntü oluşacaktır:
resim linki

Açıklamasına gelecek olursak şöyle anlatayım. Soldaki menüye zaten float:left; demişsin, videoların olduğu bölüme de float:right; , bunları genel bir div'e almadığın için video bölümüne float:right; dersen otomatik olarak sayfa dışına taşacaktır. Genel div vermediğin için şöyle birşey yaptım, #icerik bölümüne de float:left; dedim sola dayadım, daha sonra da width değerini ayarladım ve oldu. Ufak bi öneri istersen siteyi genel bi div içine al, atıyorum 900px olsun, soldaki menüye 200px verdiysen geriye kaç px kaldığını bilir, tasarımını ona göre yaparsın.

Umarım işine yarar, eğer genel div olayının mantığını çözemediysen imzamdaki sitenin kaynak koduna bak, <div id="main"> genel div'im, css dosyasından da ne şekilde olduğuna bakarsın. Hadi kolay gelsin.

14-06-2010, 04:31:12

#7