Bi Bakarmısınız ?

Web Tasarımı - Bi Bakarmısınız ? Sponsorlu Bağlantılar Merhaba Arkadaşlar.Kolay Gelsin. Bir Web Sitesi Hazırlamıştım. Ancak Anasayfadaki Butonlar Aşşağıya Doğru Sündü ve Diğer Tarayıcılarda Farklı Farklı Gözüküyor. Yardımlarınızı Bekliyorum.Kolay Gelsin...

Cevapla
Bi Bakarmısınız ?
Furkan Cinar isimli Üye şimdilik offline konumundadır

Furkan Cinar

Öğrenci (Diğer) / Çorum

Standart

Bi Bakarmısınız ?

Alt 08-06-2012 #1
Sponsorlu Bağlantılar

Merhaba Arkadaşlar.Kolay Gelsin.

Bir Web Sitesi Hazırlamıştım. Ancak Anasayfadaki Butonlar Aşşağıya Doğru Sündü ve Diğer Tarayıcılarda Farklı Farklı Gözüküyor.

Yardımlarınızı Bekliyorum.Kolay Gelsin Bi Bakarmısınız ?
Bu mesajdan alıntı yap
Sponsor Links

Grafikerler.net Reklamları

Y4s isimli Üye şimdilik offline konumundadır

Y4s(28)

Webmaster / Ankara

Standart
Alt 08-06-2012 #2
                             Sponsorlu Bağlantılar
tablo kullanımı aşırı fazla bunu minimuma indirmelisin class kullanmaya özen göster. Tek bi buton da 3 ayrı tr td var tek bi değişiklik için 3 ünüde değiştircek misin şimdi ? css i kr4l [at] live.com a gönderirsen düzenlemeni yapabilirim
Bu mesajdan alıntı yap
alicinki isimli Üye şimdilik offline konumundadır

alicinki

Grafiker / Ankara

Standart
Alt 08-06-2012 #3
DIV + CSS öğrenmek zorundasın. Üstüne de yağ bal olsun diye jquery eklersen bütün sorunlarından kurtulmuş olursun.
Kodlarında "Doctype" yok. Bunu eklemediğin sürece her browserde farklı çıkıyor diye daha çok uğraşırsın.

DIV ve CSS Kullanımı – 1

Posted by Ali Çınkı on Ara 8, 2008 in Web Tasarımı | 8 comments

Tüm web tasarımcılar gibi yeni ve heyecan verici bir teknoloji olarak her yanda adından bahsedilen ve TABLE’ın tahtını şiddetle sallayan DIV benim de ilgimi çekti. Fakat dar zamanlarda giriştiğim bir kaç deneme başarısızlıkla sonuçlandı ve acil yetişmesi gereken işler yüzünden geriye dönüp TABLE’ın kapısını çalmak zorunda kaldım.

Fakat bu konuda azimliydim ve Ramazan Bayramı tatilinde kendimi DIV ve CSS’e adayıp önemli bir mesafe kaydetmeyi başardım. Aşmakta zorlandığım sorunlar karşıma çıkmış olsa da bu sefer daha geniş zamana sahip olmanın avantajıyla birçoğunun üstesinde gelebildim. İşte bu öğrenme sürecinde karşıma çıkanları DIV ve CSS kategorisindeki yazılarımda bulabilirsiniz.

DIV ve CSS konusunda elbette internette çok fazla kaynak bulmak mümkün ve ben de ilk başladığımda bunlardan faydalandım. Ancak yeni başlayanlar için en basit şekilde ve adım adım anlatan bir yere rastladığımı hatırlamıyorum. Bu yüzden ben en baştan ve adım adım anlatma yöntemini benimseyeceğim. DIV ve CSS kodlarını ve hangi kodun ne işe yaradığını açıklamalarıyla birlikte anlatmaya çalışacağım. Bu ilk yazı giriş niteliğinde olduğu için metin kısmı biraz uzun oldu. Ancak bundan sonraki yazılar daha bilgi yoğun olacaktır.
DOCTYPE SEÇİMİ

Öncelikle tarayıcımıza, HTML ve XHTML kodlarımızı hangi standartlara göre yorumlayacağının bilgisini vermemizde yarar var. Tarayıcıya bu bilgiyi DOCTYPE etiketi aracılığı ile veriyoruz. Kullanılmaması durumunda tarayıcı programları (Firefox, IE, Opera vs.) sayfamızı farklı şekillerde yorumlayabilir. Tarayıcıların farklı yorumlamasının sebebini biz kodlarımızda ararken aslında sorun hiç aklımıza gelmeyen DOCTYPE bilgisinin eksikliğinden kaynaklanıyor olabilir (Tecrübeyle sabittir).
DOCTYPE türleri arasından hangisini kullanacağınız size kalmış. Ancak tavsiye edilen -bence de son derece mantıklı olan- bizi daha hatasız kodlama yapmaya zorlayan Strict tipidir. Bu durumda sayfamızın ilk satırı şu şekilde olmalıdır.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

CSS TİPLERİ

Bir sayfada CSS kullanmanın üç yöntemi vardır. Bazen tarayıcıların varsayılan CSS özellikleri de bu sınıfa dahi edilip bu sayı dörde çıkarılmaktadır. Bunların isimlendirilmesinde İngilizce kaynaklarda ve Türkçe çevirilerde tam bir standarda rastlamadığımı söylemeliyim. Ben bu isimleri aşağıdaki şekilde kullanmayı tercih ettim.

1. Varsayılan (Browser defaults): Hiçbir tanımlama yapmadığımızda tarayıcılar kendi öntanımlı stillerini sayfamıza uygulayacaktır.

2. Satıriçi (Inline): Her etiketin stil özellikleri doğrudan etiketin içinde tanımlanır.
1

<div style="float: left; margin: auto;">

3. İçsel (Internal): Her sayfada kullanılacak stiller head etiketi içinde listelenir.
1
2
3
4
5

<head>…

#ust {background:#CCC;
height:100px;}
</head>

4. Dışsal (External): Tanımlamalar harici bir .css dosyası içinde yapılır ve kullanılacağı sayfa içerisinde bu dosya adreslenir. En çok tercih edilen yöntem budur.
1

<link type="text/css" rel="stylesheet" href="global.css" />

Tercih edilmesi gereken yöntemin dördüncüsü olduğunu söylesek de kodları bir arada görebilmek için örneklerimizde üçüncü yöntemi kullanacağız.
İLK DIV ETİKETİMİZ

Öncelikle CSS olmadan DIV etiketinin tarayıcı tarafından nasıl yorumlandığına bir göz atalım. Bunun için en temel etiketleri içerin basit bir html sayfası oluşturalım. Web tasarımı ve kodlama konusunda Dreamweaver programını kullanmanızı tavsiye ederim.
1
2
3
4
5
6
7
8

<html>
<head>
<title>DIV ve CSS</title>
</head>
<body>
<div></div>
</body>
</html>

Bu kodları tarayıcımızda çalıştırdığımızda karşımıza hiçbir şey çıkmayacaktır. Ortaya birşeylerin çıkması için DIV etiketinin özellikleri STYLE aracılığı ile tanımlamalıyız.
Şimdilik sadece DIV’imizi görmemizi sağlayacak olan CSS özellikleriyle yetineceğiz. Zemin rengi ve yükseklik bunun için yeterli olacaktır. DIV’imize CSS içindeki hangi kısmı kullanacağını söylemeyi unutmamalıyız. Bunun için ID etiketini kullanıyoruz.
1
2
3
4
5
6
7
8
9
10
11
12

<html>
<head>
<title>www.cinki.com</title>
<style type="text/css">
#ust { background:#CCC;
height:100px; }
</style>
</head>
<body>
<div id="ust"></div>
</body>
</html>

Bundan sonraki örnek kodlarda sadece style etiketinin içeriğini vereceğiz.
Şimdi ilk DIV’imizi, eklediğimiz her stil özelliği ile biraz daha şekillendireceğiz ve her yeni özelliğin bize neler sağladığını görmeye çalışacağız.
WIDTH (Genişlik)

Width özelliği DIV’imizin ve daha başka bir çok etiketin genişliğini belirleyen özelliktir. Genişlik değişik birimlerle ifade edilebilir. Biz px (pixel) kullanacağız.
1
2
3

#ust { background:#CCC;
height:100px;
width: 700px;}
FLOAT

Float özelliği DIV’imizin yerleşimi konusunda yetkilidir. Kullanmadığımızda DIV’imiz sola yaslı olarak görünecektir. Şimdi sağa yaslı ve ortalı olması durumlarını da görelim.
Sağa yaslı
1
2
3
4

#ust { float:right;
background:#CCC;
height:100px;
width: 700px;}
Ortalı

DIV’imizi ortalamak istediğimizde FLOAT tek başına yeterli olmayacak ve MARGIN özelliğine de ihtiyaç duyacağız.
MARGIN

MARGIN aslında, DIV’imizin etrafındaki diğer nesneleri kendisinden ne kadar uzağı iteceğini gösterir. Onlarla arasında kalacak mesafeyi belirler. Bu uzaklaştırma mesafelerini margin-top, margin-right, margin-bottom, margin-left şeklinde tek tek verebileceğimiz gibi tek bir magrin özelliği içinde aralarında boşluk bırakarak her kenar için tek seferde de verebiliriz. Bu durumda değerler üsten başlayarak saat yönünde ilerler ve sırayla tüm kenarların en yakın nesneyle arasındaki mesafeyi tanımlar (üst, sağ, alt, sol). Şimdilik bu özelliklerden bahsetmekle yetinip MARGIN özelliğini DIV’imizi ortalamak için nasıl kullandığımıza bakacağız.
1
2
3
4
5

#ust { float: none;
margin:auto;
background:#CCC;
height:100px;
width: 700px;}

Gördüğünüz gibi artık DIV’imizi ortalamayı başardık. Aslında CSS kodumuzdan FLOAT özelliğini tamamen kaldırsanız da MARGIN bu haliyle ortalama için yeterli olacaktır. Ancak şu anda tek DIV’le çalıştığımızı unutmayın. Bu yüzden FLOAT özelliği önemsiz gibi görünmesin.
Tam bu aşamada yazımızın başında bahsettiğimiz DOCTYPE’ın nasıl bir fonksiyonu olduğunu açıkça görebilmek için önce CSS’imizdeki FLOAT özelliğini silin sonra da dokümanımızdaki DOCTYPE satırını kaldırın. Şimdi IE’nin ve Firefox’un sayfamızı nasıl farklı şekilde yorumladığını görün.
Bu mesajdan alıntı yap
Cevapla

Benzer Konular
Konu Konu Bilgileri Forum Cevaplar Son Mesaj
mrb bakarmısınız grafikçi_adayı ImageReady 1 25-09-2010 17:11:32
Bi bakarmısınız.... serhat7878 Photoshop Soru ve Sorunlarınız 3 05-09-2010 11:43:18

Kapat
Şifremi Unuttum?