Cevap: CSS ÖĞRENİYORUM

13 yıl

Yüzbaşı

Konu Sahibi

CSS Anahat

Öğelerin dikkat çekmesi için kenarlıkların dışında bir anahat oluşturabilirsiniz.

Anahat özellikleri stil, renk, ve genişliktir.

Örnekler;

1.örnek Kenarlık etrafında anahat çizme

<!DOCTYPE html> 
  <html> 
  <head> 
  <style type="text/css"> 
  p  
  { 
  border:1px solid red; 
  outline:green dotted thick; 
  } 
  </style> 
  </head> 
   
  <body> 
  <p><b>Note:</b> İE 8 !DOCTYPE belirtilmezse bu özelliği tanımazmış.</p> 
  </body> 
  </html>

2. örnek Anahat stilini ayarlama

<!DOCTYPE html> 
  <html> 
  <head> 
  <style type="text/css"> 
  p {border:1px solid red;} 
  p.dotted {outline-style:dotted;} 
  p.dashed {outline-style:dashed;} 
  p.solid {outline-style:solid;} 
  p.double {outline-style:double;} 
  p.groove {outline-style:groove;} 
  p.ridge {outline-style:ridge;} 
  p.inset {outline-style:inset;} 
  p.outset {outline-style:outset;} 
  </style> 
  </head> 
  <body> 
   
  <p class="dotted">A dotted anahat</p> 
  <p class="dashed">A dashed anahat</p> 
  <p class="solid">A solid anahat</p> 
  <p class="double">A double anahat</p> 
  <p class="groove">A groove anahat</p> 
  <p class="ridge">A ridge anahat</p> 
  <p class="inset">An inset anahat</p> 
  <p class="outset">An outset anahat</p> 
  <b>Note:</b> İE 8 !DOCTYPE belirtilmezse bu özelliği tanımazmış. 
  </body> 
  </html>

3. örnek Anahat rengini ayarlama

<!DOCTYPE html> 
  <html> 
  <head> 
  <style type="text/css"> 
  p  
  { 
  border:1px solid red; 
  outline-style:dotted; 
  outline-color:#00ff00; 
  } 
  </style> 
  </head> 
   
  <body> 
  <p><b>Note:</b>  İE 8 !DOCTYPE belirtilmezse bu özelliği tanımazmış.</p> 
  </body> 
  </html>

4. örnek Anahattın genişliğini ayarlama

<!DOCTYPE html> 
  <html> 
  <head> 
  <style type="text/css"> 
  p.one 
  { 
  border:1px solid red; 
  outline-style:solid; 
  outline-width:thin; 
  } 
  p.two 
  { 
  border:1px solid red; 
  outline-style:dotted; 
  outline-width:10px; 
  } 
  </style> 
  </head> 
  <body> 
   
  <p class="one">Bu bir paragraftır.</p> 
  <p class="two">Bu bir paragraftır.</p> 
   
  <p><b>Note:</b> İE 8 !DOCTYPE belirtilmezse bu özelliği tanımazmış.</p> 
  </body> 
  </html>

Anahat öğeler etrafında dikkat çekmesi için çizlilen bir çizgidir.
kenarlık özlelliğinden farklıdır.
Anahat öğelerin boyutunun bir parçası değildir.Öğenin toplam genişliği ve yüksekliği anahat genişliğini etkilemez.

< Resime gitmek için tıklayın >

Tüm CSS Anahat Özellikleri

Özellik Açıklama Değer

outline -----------Bu bildirim tüm anahat özelliklerini belirler ---------outline-color,outline-style,outline-width,inherit
outline-color-----Anahat rengini ayarlar----------------------------------color_name,hex_number,rgb_number,invert,inherit
outline-style-----Anahat stilini ayarlar------------------------------------none,dotted,dashed,solid,double,groove,ridge,inset,outset,inherit
outline-width-----Anahat genişliği-----------------------------------------thin,medium,thick,length,inherit

Bu mesaja 1 cevap geldi.

D

Dr.Hrn

13 yıl

Yüzbaşı

Konu Sahibi

CSS Margin (Kenar Boşluğu)

CSS kenar boşluğu öğelerin etrafındaki boşluğu tanımlar.

Margin öğelerin etrafındaki(kenarlığın dışı) bir alanı temizler.Marjın arkaplan

rengi yoktur ve tamamen şeffaftır.

Sağ sol alt ve üst kenar boşlukları farklı özellikler kullanılarak bağımsız olarak

değiştirilebilir.Kestirme özellik kullanarak bir kerede tüm kenar boşluklarınıda

değiştrebilirsiniz.

Olası Değerler

Değer Açıklama

auto------------Tarayıcı boşluğu belirler.
length----------Px, pt, cm ile boşluk boyutunu belirleyebilirsiniz.varsayılan değer

0px tir

%---------------Öğenin boyutuna göre % olarak boşluk belirler.
inherit----------Specifies that the margin should be inherited from the parent element(çeviremedim)

Not:İçerikle örtüşmesi için negatif değer kullanılabilir.

Kenar Boşluğu - Bağımsız taraflar

CSS'de her kenar için farklı bir boşluk belirtebilirsiniz.

<!DOCTYPE html> 
  <html> 
  <head> 
  <style type="text/css"> 
  p 
  { 
  background-color:yellow; 
  } 
  p.margin 
  { 
  margin-top:100px; 
  margin-bottom:100px; 
  margin-right:50px; 
  margin-left:50px; 
  } 
  </style> 
  </head> 
  <body> 
  <p>Bu margin özellikleri belirtilmemiş bir paragraftır.</p> 
  <p class="margin">Bu da margin özellikleri belirtilmiş bir paragraftır.</p> 
  </body> 
  </html>

Kenar Boşluğu - Kestirme özelliği

Kodu kısaltmak için tüm margin özelliklerini tek bir özellikte belirtebiliriz.Buna

kestirme özellik denir.

<!DOCTYPE html> 
  <html> 
  <head> 
  <style type="text/css"> 
  p 
  { 
  background-color:yellow; 
  } 
  p.margin 
  { 
  margin:100px 50px; 
  } 
  </style> 
  </head> 
  <body> 
  <p>Bu margin özellikleri belirtilmemiş bir paragraftır.</p> 
  <p class="margin">Bu da margin özellikleri kestirme olarak  belirtilmiş bir  
   
  paragraftır.</p> 
  </body> 
  </html>

Margin özelliği bir değerden dört değere kadar olabilir.

margin:25px 50px 75px 100px;

üst margin 25px
sağ margin 50px
alt margin 75px
sol margin 100px

margin:25px 50px 75px;

üst margin is 25px
sağ and left margins are 50px
alt margin is 75px

margin:25px 50px;

üst ve alt marginler 25px
sağ ve sol marginler 50px

margin:25px;

Bütün boşluklar 25px

Örnek 1

<!DOCTYPE html> 
  <html> 
  <head> 
  <style type="text/css"> 
  p.örnek {margin-top:5cm;} 
  </style> 
  </head> 
   
  <body> 
   
  <p>Margin özelliği belirtilmemiş paragraf.</p> 
  <p class="örnek">Üst boşluğu 5 cm olan paragraf.</p> 
  <p>Margin özelliği belirtilmemiş paragraf.</p> 
   
  </body> 
  </html>

Örnek 2

<!DOCTYPE html> 
  <html> 
  <head> 
  <style type="text/css"> 
  p.altboşluk {margin-bottom:25%;} 
  </style> 
  </head> 
  <body> 
   
  <p>Margin özelliği belirtilmemiş paragraf.</p> 
  <p class="altboşluk"> Margin özelliği belirtilmiş bir paragraf.</p> 
  <p>Margin özelliği belirtilmemiş paragraf.</p> 
   
  </body> 
  </html>

Bu mesaja 1 cevap geldi.

D

Dr.Hrn

13 yıl

Yüzbaşı

Konu Sahibi

CSS Padding (Dolgu)

CSS padding özellikleri elemanın kenarlığı ve element içeriği arasındaki boşluğu tanımlar.

Padding öğeni içeriğinin etrafını temizler ve öğenin arka plan renginiden etkilenir.

Ayrı belirtilerek sağ sol alt ve üst dolgular bağımsız olarak değiştirilebilir.

Kısaltma dolgu özelliği kullanılarak bütün dolguları bir kerede düzenleyebilirsiniz.

Muhtemel Değerler

length =sabit bir değeri tanımlar (piksel, pt, em, vb)

% =öğenin belli bir yüzdesini tanımlar

Dolgu - Bağımsız taraflar

Farklı taraflar için farklı değerler vermek mümkündür.

<!DOCTYPE html> 
  <html> 
  <head> 
  <style type="text/css"> 
  p 
  { 
  background-color:yellow; 
  } 
  p.padding 
  { 
  padding-top:25px; 
  padding-bottom:25px; 
  padding-right:50px; 
  padding-left:50px; 
  } 
  </style> 
  </head> 
   
  <body> 
  <p>Padding özelliği belirtilmemiş bir paragraf.</p> 
  <p class="padding">Padding değerleri verilmiş bir paragraf.</p> 
  </body> 
   
  </html>

Dolgu - Kestirme özelliği

Bütün dolgu özelliklerini tek bir özellikte belirtmek mümkündür .Buna kestirme özellik denir.

<!DOCTYPE html> 
  <html> 
  <head> 
  <style type="text/css"> 
  p 
  { 
  background-color:yellow; 
  } 
  p.padding 
  { 
  padding:25px 50px; 
  } 
  </style> 
  </head> 
   
  <body> 
  <p>Padding özelliği belirtilmemiş bir paragraf..</p> 
  <p class="padding">Padding değerleri kestirme olarak verilmiş bir paragraf..</p> 
  </body> 
   
  </html>

Doldurma özelliği bir değerden dört değere kadar olabilir.

padding:25px 50px 75px 100px;
üst dolgu 25px
sağ dolgu 50px
alt dolgu 75px
sol dolgu 100px

padding:25px 50px 75px;
üst dolgu 25 px
sağ ve sol dolgular 50 px
alt dolgu 75px

padding:25px 50px;
üst ve alt dolgular 25px
sağ ve sol dolgular 50px

padding:25px;
bütün kenarlar 25px olur

Örnek 1

Tek bildirimde tüm padding özellikleri

<!DOCTYPE html> 
  <html> 
  <head> 
  <style type="text/css"> 
  p.ex1 {padding:2cm;} 
  p.ex2 {padding:0.5cm 3cm;} 
  </style> 
  </head> 
   
  <body> 
  <p class="ex1">Bu metinde her iki tarafta da eşit dolgu vardır.Dolgular iki santimliktir.</p> 
  <p class="ex2">Bu metinde ise altta ve üstte 0.5 cm sağda ve solda 3 cm dolgu vardır.</p> 
  </body> 
  </html>

Örnek 2

Sol dolgu değerini ayarlamak

<!DOCTYPE html> 
  <html> 
  <head> 
  <style type="text/css"> 
  p.padding {padding-left:2cm;} 
  p.padding2 {padding-left:50%;} 
  </style> 
  </head> 
   
  <body> 
  <p>Bu metinde dolgu özelliği kullanılmamıştır.</p> 
  <p class="padding">Bu metinde sol dolgu değeri 2 cm dir.</p> 
  <p class="padding2">Bu metinde sol dolgu değeri %50 dir.</p> 
  </body> 
  </html>

< Bu mesaj bu kişi tarafından değiştirildi Dr.Hrn -- 9 Eylül 2012; 14:57:35 >
Bu mesaja 1 cevap geldi.

D

Dr.Hrn

13 yıl

Yüzbaşı

Konu Sahibi

CSS Gruplandırma ve İç içe Seçiciler

Gruplandırma seçicileri

Stil sayfalarında sıklıkla aynı stille gösterilen öğeler mevcuttur.

h1 
  { 
  color:green; 
  } 
  h2 
  { 
  color:green; 
  } 
  p 
  { 
  color:green; 
  }

Kodu en aza indirgemek için grup seçici kullanabilirsiniz.

Virgül ile tüm seçicileri ayırmanız gerekir.

Aşağıdaki örnekte yukarıdaki koddaki seçicileri nasıl gruplandıracağımızı görebilirsiniz.

<!DOCTYPE html> 
  <html> 
  <head> 
  <style type="text/css"> 
  h1,h2,p 
  { 
  color:green; 
  } 
  </style> 
  </head> 
   
  <body> 
  <h1>Merhaba Dünya!</h1> 
  <h2>Daha küçük başlık!</h2> 
  <p>Bu bir paragraftır.</p> 
  </body> 
  </html>

İç içe Seçiciler

Bir seçici içinde bir seçici için bir tarz uygulamak mümkündür.(?)

Aşağıdaki örnekte , bir stil bütün paragraf öğeleri için belirlenir ,bir stil marked ile sınıflandırılmış tüm öğeler için belirlenir ve üçüncü bir stil se sadecemarked ile sınıflandırılmış paragraf öğeleri için belirlenmiştir.

<!DOCTYPE html> 
  <html> 
  <head> 
  <style type="text/css"> 
  p 
  { 
  color:blue; 
  text-align:center; 
  } 
  .marked 
  { 
  background-color:red; 
  } 
  .marked p 
  { 
  color:yellow; 
  } 
  </style> 
  </head> 
   
  <body> 
  <p>Bu yazı mavidir ve ortalanmıştır.</p> 
  <div class="marked"> 
  <p>Bu p öğesi kırmızı arkaplan rengi üzerinde sarı yazılmış olmalıdır.</p> 
  </div> 
  <p>p elements inside a "marked" classed element keeps the alignment style, but has a different text color.( Burayı çeviremedim)</p> 
  </div> 
   
  </body> 
  </html>

< Bu mesaj bu kişi tarafından değiştirildi Dr.Hrn -- 10 Eylül 2012; 15:26:51 >
Bu mesaja 1 cevap geldi.

D

Dr.Hrn

13 yıl

Yüzbaşı

Konu Sahibi

CSS Boyut

CSS boyut özellikleri bir öğenin yükseklik ve genişliğini kontrol etmenizi sağlar.

Örnek 1

Öğenin yüksekliğini ayarlama
Bu örnek, farklı öğelerin yüksekliğini nasıl ayarlanacağını gösterir.

<!DOCTYPE html> 
  <html> 
  <head> 
  <style type="text/css"> 
  img.normal 
  { 
  height:auto; 
  } 
  img.big 
  { 
  height:200px; 
  } 
  p.ex 
  { 
  height:100px; 
  width:100px; 
  } 
  </style> 
  </head> 
   
  <body> 
  <img class="normal" src="http://www.w3schools.com/css/logocss.gif" width="95" height="84" /><br /> 
  <img class="big" src="http://www.w3schools.com/css/logocss.gif" width="95" height="84" /> 
  <p class="ex">Bu paragraf için yükseklik ve genişlik 100 pikseldir.</p> 
  <p>Bu paragraf için herhangi bir yükseklik ve genişlik belirtilmemiştir. 
  Bu paragraf için herhangi bir yükseklik ve genişlik belirtilmemiştir. 
  Bu paragraf için herhangi bir yükseklik ve genişlik belirtilmemiştir.</p> 
  </body> 
  </html>

Örnek 2

Yüzde kullanarak bir görüntünün yüksekliğini ayarlayabilirsiniz.

<!DOCTYPE html> 
  <html> 
  <head> 
  <style type="text/css"> 
  html {height:100%;} 
  body {height:100%;} 
  img.normal {height:auto;} 
  img.big {height:40%;} 
  img.small {height:10%;} 
  </style> 
  </head> 
   
  <body> 
  <img class="normal" src="http://www.w3schools.com/css/logocss.gif" width="95" height="84" /><br /> 
  <img class="big" src="http://www.w3schools.com/css/logocss.gif" width="95" height="84" /><br /> 
  <img class="small" src="http://www.w3schools.com/css/logocss.gif" width="95" height="84" /> 
  </body> 
  </html>

Örnek 3

Bir piksel değeri kullanarak bir öğenin genişliğini ayarlayabilirsiniz.

<!DOCTYPE html> 
  <html> 
  <head> 
  <style type="text/css"> 
  img {width:200px;} 
  </style> 
  </head> 
  <body> 
   
  <img src="http://www.w3schools.com/css/logocss.gif" width="95" height="84" /> 
   
  </body> 
  </html>

Örnek 4

Bir öğenin maksimum yüksekliği ayarlamak

<!DOCTYPE html> 
  <html> 
  <head> 
  <style type="text/css"> 
  p 
  { 
  max-height:50px; 
  background-color:red; 
  } 
  </style> 
  </head> 
   
  <body> 
  <p>Bu paragrafın maksimum yüksekliği 50pxdir. Bu paragrafın maksimum yüksekliği 50pxdir.Bu paragrafın maksimum yüksekliği 50pxdir.Bu paragrafın maksimum yüksekliği 50pxdir.Bu paragrafın maksimum yüksekliği 50pxdir.Bu paragrafın maksimum yüksekliği 50pxdir.Bu paragrafın maksimum yüksekliği 50pxdir.Bu paragrafın maksimum yüksekliği 50pxdir.Bu paragrafın maksimum yüksekliği 50pxdir.Bu paragrafın maksimum yüksekliği 50pxdir.Bu paragrafın maksimum yüksekliği 50pxdir.Bu paragrafın maksimum yüksekliği 50pxdir.Bu paragrafın maksimum yüksekliği 50pxdir.</p> 
  </body> 
  </html>

Örnek 5

Yüzde kullanarak bir elemanın maksimum genişliğini ayarlamak

<!DOCTYPE html> 
  <html> 
  <head> 
  <style type="text/css"> 
  p 
  { 
  max-width:20%; 
  background-color:yellow; 
  } 
  </style> 
  </head> 
  <body> 
   
  <p>Bu bir paragraftır.Bu bir paragraftır.Bu bir paragraftır.Bu bir paragraftır.Bu bir paragraftır.Bu bir paragraftır.Bu bir paragraftır.Bu bir paragraftır.Bu bir paragraftır.Bu bir paragraftır.Bu bir paragraftır.Bu bir paragraftır.Bu bir paragraftır.Bu bir paragraftır.Bu bir paragraftır.Bu bir paragraftır.Bu bir paragraftır.Bu bir paragraftır.Bu bir paragraftır.Bu bir paragraftır.</p> 
   
  </body> 
  </html>

Örnek 6

Bir öğenin minimum yükseklik ayarlamak

<!DOCTYPE html> 
  <html> 
  <head> 
  <style type="text/css"> 
  p 
  { 
  min-height:100px; 
  background-color:yellow; 
  } 
  </style> 
  </head> 
   
  <body> 
  <p>Bu paragrafın minimum yüksekliği 100px ayarlanır.</p> 
  </body> 
  </html>

Örnek 7

Bir piksel değeri kullanarak Bir öğenin minimum genişliğini ayarlamak.

<!DOCTYPE html> 
  <html> 
  <head> 
  <style type="text/css"> 
  p 
  { 
  min-width:150px; 
  background-color:yellow; 
  } 
  </style> 
  </head> 
   
  <body> 
  <p>Bu paragrafın minimum genişliği 150px ayarlanır.</p> 
  </body> 
  </html>

< Bu mesaj bu kişi tarafından değiştirildi Dr.Hrn -- 12 Eylül 2012; 10:50:49 >
Bu mesaja 1 cevap geldi.

U

ucan-laz

13 yıl

Binbaşı

Güzel gidiyor.

Kutu mantığını float özelliğini bekliyor gençler :)

Bu mesaja 2 cevap geldi.

D

Dr.Hrn

13 yıl

Yüzbaşı

Konu Sahibi

Bir kaç ders sonra float özelliğine sıra gelecek

Bu mesaja 1 cevap geldi.

D

Dr.Hrn

13 yıl

Yüzbaşı

Konu Sahibi

CSS Görüntü ve Görünürlük

Bir elemanın gizlenmesi görüntü(display) özelliği "none" veya görünürlük(visibility) özelliği "hidden" ayarlanarak yapılabilir.Ancak bu iki yöntem farklı sonuçlar ortaya çıkarabilir.

Bu kısmı çevirmekte zorlandım .örnekleri inceleyerek konuyu daha iyi kavrayabiliriz sanırım.

<!DOCTYPE html> 
  <html> 
  <head> 
  <style type="text/css"> 
  h1.hidden {visibility:hidden;} 
  </style> 
  </head> 
   
  <body> 
  <h1>Bu görünür bir başlıktır.</h1> 
  <h1 class="hidden">Bu gizli bir başlıktır.Sayfanızda görünmeyecektir.</h1> 
  <p>Gizli başlığın hala yer kapladığını fark ettinizmi?..</p> 
  </body> 
  </html>

display:none kullanıldığı öğeyi gizler ve herhangi bir yer kaplamasını önler.Öğe sanki yokmuş gibi görüntülenir.

<!DOCTYPE html> 
  <html> 
  <head> 
  <style type="text/css"> 
  h1.hidden {display:none;} 
  </style> 
  </head> 
   
  <body> 
  <h1>Bu görünür bir başlıktır.</h1> 
  <h1 class="hidden">Bu gizli bir başlıktır.</h1> 
  <p>Gizli başlık bu sefer yer kaplamayacaktır.</p> 
  </body> 
   
  </html>

(Çevirisini tam yapamadığım için olduğu gibi kopyalıyorum bu kalan kısmı.)

Block and Inline Öğeleri

A block element is an element that takes up the full width available, and has a line break before and after it.

Examples of block elements:

<h1>
<p>
<div>
An inline element only takes up as much width as necessary, and does not force line breaks.

Examples of inline elements:

<span>
<a>

Changing How an Element is Displayed

Changing an inline element to a block element, or vice versa, can be useful for making the page look a specific way, and still follow web standards.

The following example displays list items as inline elements:

<!DOCTYPE html> 
  <html> 
  <head> 
  <style type="text/css"> 
  li{display:inline;} 
  </style> 
  </head> 
  <body> 
   
  <p>Display this link list as a horizontal menu:</p> 
   
  <ul> 
  <li><a data-test="test" rel="nofollow" style="word-wrap: break-word; text-decoration: underline;" target="_blank" onclick="return dhExternalLinkRedirect(this)" href="/ExternalLinkRedirect?module=pgdcode&messageId=65730456&url=http://www.w3schools.com/html/default.asp" target="_blank" data-href="http://www.w3schools.com/html/default.asp" target="_blank">HTML</a></li> 
  <li><a data-test="test" rel="nofollow" style="word-wrap: break-word; text-decoration: underline;" target="_blank" onclick="return dhExternalLinkRedirect(this)" href="/ExternalLinkRedirect?module=pgdcode&messageId=65730456&url=http://www.w3schools.com/css/default.asp" target="_blank" data-href="http://www.w3schools.com/css/default.asp" target="_blank">CSS</a></li> 
  <li><a data-test="test" rel="nofollow" style="word-wrap: break-word; text-decoration: underline;" target="_blank" onclick="return dhExternalLinkRedirect(this)" href="/ExternalLinkRedirect?module=pgdcode&messageId=65730456&url=http://www.w3schools.com/js/default.asp" target="_blank" data-href="http://www.w3schools.com/js/default.asp" target="_blank">JavaScript</a></li> 
  <li><a data-test="test" rel="nofollow" style="word-wrap: break-word; text-decoration: underline;" target="_blank" onclick="return dhExternalLinkRedirect(this)" href="/ExternalLinkRedirect?module=pgdcode&messageId=65730456&url=http://www.w3schools.com/xml/default.asp" target="_blank" data-href="http://www.w3schools.com/xml/default.asp" target="_blank">XML</a></li> 
  </ul> 
   
  </body> 
  </html>

The following example displays span elements as block elements:

<!DOCTYPE html> 
  <html> 
  <head> 
  <style type="text/css"> 
  span 
  { 
  display:block; 
  } 
  </style> 
  </head> 
  <body> 
   
  <h2>Nirvana</h2> 
  <span>Record: MTV Unplugged in New York</span> 
  <span>Year: 1993</span> 
  <h2>Radiohead</h2> 
  <span>Record: OK Computer</span> 
  <span>Year: 1997</span> 
   
  </body> 
  </html>

Şimdilik bu bölümü böyle idare edelim .
CSS bittikten sonra HTML ce CSS için yazdıklarımı hem wordpress kurulu sitemde düzenleyeceğim hemde bütün kodlarını kendim yazacağım sitemde düzenleyeceğim.

< Bu mesaj bu kişi tarafından değiştirildi Dr.Hrn -- 19 Eylül 2012; 9:22:45 >
Bu mesaja 1 cevap geldi.

D

Dr.Hrn

13 yıl

Yüzbaşı

Konu Sahibi

CSS Konumlandırma

CSS positioning özelliği herhangi bir öğeyi konumlandırmanızı sağlar.Aynı zamanda bir öğenin arkasına başka birini yerleştirebilir ve öğenin içeriği çok büyükse ne yapılması gerektiğini belirtebilirsiniz.

Ögeler üst, alt, sol ve sağ özellikleri kullanılarak yerleştirilebilir.Ancak,position özelliği ilk önce ayarlanmazsa bu özellikler çalışmaz.

Dört farklı konumlandırma yöntemi vardır.

Statik Konumlandırma

HTML elemanları varsayılan olarak statik konumlandırılmıştır. Statik konumlandırılmış öğeler her zaman sayfanın normal akışına göre konumlandırılır.

Statik konumlandırılmış öğeler üst, alt, sol ve sağ özelliklerinden etkilenmez.

Sabit Konumlandırma

Sabit pozisyonda olan bir eleman tarayıcı penceresine göre konumlandırılır.

Penceresi kaydırılsa bile bu hareket etmeyecektir:

<!DOCTYPE html> 
  <html> 
  <head> 
  <style type="text/css"> 
  p.pos_fixed 
  { 
  position:fixed; 
  top:30px; 
  right:50px; 
  } 
  </style> 
  </head> 
  <body> 
   
  <p class="pos_fixed">Sabit konumlandırılmış metin</p> 
  <p><b>Note:</b> IE7 ve IE8 sadece !DOCTYPE belirtilmişse sabit konumlandırmayı destekler. </p> 
  <p>Örnek yazı</p><p>Örnek yazı</p><p>Örnek yazı</p><p>Örnek yazı</p><p>Örnek yazı</p><p>Örnek yazı</p><p>Örnek yazı</p><p>Örnek yazı</p><p>Örnek yazı</p><p>Örnek yazı</p><p>Örnek yazı</p><p>Örnek yazıt</p><p>Örnek yazı</p><p>Örnek yazı</p><p>Örnek yazı</p><p>Örnek yazı</p> 
  </body> 
  </html>

Sabit konumlandırılmış öğeler normal akıştan kaldırılır.Belge ve diğer öğeler sabit konumlandırılmış öğe yok gibi davranırlar.

Sabit konumlandırılmış öğeler diğer öğelerle çakışabilir.

Göreceli Konumlandırma

Göreceli konumlandırılmış öğe normal konumuna göre konumlandırılır.

<!DOCTYPE html> 
  <html> 
  <head> 
  <style type="text/css"> 
  h2.pos_left 
  { 
  position:relative; 
  left:-50px; 
  } 
   
  h2.pos_right 
  { 
  position:relative; 
  left:50px; 
  } 
  </style> 
  </head> 
   
  <body> 
  <h2>Bu konumlandırılmamış bir başlıktır.</h2> 
  <h2 class="pos_left">Bu başlık normal pozisyonuna göre sola konumlandırılmıştır.</h2> 
  <h2 class="pos_right">Bu başlık ise normal konumuna göre sağa konumlandırılmıştır.</h2> 
  <p>Göreceli konumlandırmada öğe orijinal konumuna göre hareket eder. </p> 
  <p>"left:-50px" değeri öğenin orijinal konumuna göre 50 px solda olmasını sağlar.</p> 
  <p>"left:50px" değeri ise öğenin orijinal konumuna göre 50 px solda olmasını sağlar.</p> 
  </body> 
   
  </html>

Göreceli konumlandırılmış öğeler diğer öğelerle üst üste gelebilir.

<!DOCTYPE html> 
  <html> 
  <head> 
  <style type="text/css"> 
  h2.pos_top 
  { 
  position:relative; 
  top:-40px; 
  color:red; 
  } 
  </style> 
  </head> 
   
  <body> 
  <h2>Bu konumlandırılmamış bir başlıktır.</h2> 
  <h2 class="pos_top">Bu başlık normal konumuna göre yukarı doğru konumlandırılmıştır.</h2> 
  <p><b>Not:</b> Göreceli olarak konumlandırılmış öğenin içerik hareket ettirildiğinde bile , öğe için ayrılan alan hala normal akışiçinde korunur.  </p> 
  </body> 
   
  </html>

Mutlak Konumlandırma

Mutlak konumlandırma ile, bir öğe bir sayfada herhangi bir yere yerleştirilebilir.

<!DOCTYPE html> 
  <html> 
  <head> 
  <style type="text/css"> 
  h2 
  { 
  position:absolute; 
  left:100px; 
  top:150px; 
  } 
  </style> 
  </head> 
   
  <body> 
  <h2>Bu başlık mutlak konumlandırılmıştır</h2> 
  <p>Mutlak konumlandırma ile, bir öğe bir sayfada herhangi bir yere yerleştirilebilir. Aşağıdaki başlık sayfanın solundan 100 px ve sayfanın üst sınırından 150 px uzaklıkta konumlandırılmıştır.</p> 
  </body> 
   
  </html>

Mutlak konumlandırılmış öğeler normal akıştan bağımsızdır.Belge ve diğer öğeler mutlak konumlandırılmış öğe yokmuş gibi görüntülenir.Bu nedenle mutlak konumlandırılmış öğeler diğer öğelerle çakışabilir.

Çakışan Ögeler

Öğeler normal akış dışında konumlandırılmış ise diğer öğelerle çakışabilirler.

z-index özelliği ile çakışan öğelerden hangisinin üstte veya alta olacağını belirtebilirsiniz.

<!DOCTYPE html> 
  <html> 
  <head> 
  <style type="text/css"> 
  img 
  { 
  position:absolute; 
  left:0px; 
  top:0px; 
  z-index:-1; 
  } 
  </style> 
  </head> 
   
  <body> 
  <h1>Bu bir başlıktır.</h1> 
  <img src="http://www.w3schools.com/images/w3schoolslogo.gif" width="200" height="200" /> 
  <p>Z-index değeri -1 olduğu için imaj resmi yazıların arkasında görünecektir.Eğer z-index değeri -1 değilde 1 olsaydaı imaj resmi yazıların üzerinde görünecektir</p> 
  </body> 
  </html>

Eğer z-index değeri verilmemiş iki öğe çakışırsa HTML kodunda hangi öğe sonra yazıldıysa o öğe üstte gösterilecektir.

Örnek 1

Bir elemanın şeklini ayarlama

Bu örnek, bir öğenin şeklini nasıl ayarlanacağınızı gösterir.Eleman ayarladığınız şekilde kırpılır ve görüntülenir.

<!DOCTYPE html> 
  <html> 
  <head> 
  <style type="text/css"> 
  img  
  { 
  position:absolute; 
  clip:rect(0px,60px,200px,0px); 
  } 
  </style> 
  </head> 
   
  <body> 
  <img src="http://www.w3schools.com/images/w3html.gif" width="100" height="140" /> 
  </body> 
  </html>

Örnek 2

Bu örnek, bir elemanın içeriği belirtilen bir alana sığmayacak kadar büyük olduğunda, bir kaydırma çubuğu oluşturmak için taşma özelliği nasıl ayarlanacağını gösterir.

<!DOCTYPE html> 
  <html> 
  <head> 
  <style type="text/css"> 
  div.scroll 
  { 
  background-color:#00FFFF; 
  width:100px; 
  height:100px; 
  overflow:scroll; 
  } 
   
  div.hidden  
  { 
  background-color:#00FF00; 
  width:100px; 
  height:100px; 
  overflow:hidden; 
  } 
  </style> 
  </head> 
   
  <body> 
  <p>overflow özelliği ile bir öğenin içeriğinin kutu boyunu aşması halinde ne yapacağını belirlersiniz.</p> 
   
  <p>overflow:scroll</p> 
  <div class="scroll">You can use the overflow property when you want to have better control of the layout. The default value is visible.</div> 
   
  <p>overflow:hidden</p> 
  <div class="hidden">You can use the overflow property when you want to have better control of the layout. The default value is visible.</div> 
  </body> 
  </html>

Örnek 3

overflow özelliğini tarayıcının otomatik ayarlamasını sağlayabilirsiniz.

<!DOCTYPE html> 
  <html> 
  <head> 
  <style type="text/css"> 
  div  
  { 
  background-color:#00FFFF; 
  width:150px; 
  height:150px; 
  overflow:auto; 
  } 
  </style> 
  </head> 
   
  <body> 
  <p>Overflow özelliği eğer içerik verilen yükseklik ve genişlik değerleri aşarsa ne yapacağına otomatik karar verebilir.</p> 
   
  <div> 
  Eğer düzeni daha iyi kontrol etmek istiyorsanız overflow özelliğini kullanabilirsiniz. Bu örnekte overflow değerini: visible, hidden, scroll, veya inherit olarak değiştirip ne işe yaradıklarınnı görebilirsiniz.  
  </div> 
  </body> 
   
  </html>

Örnek 4

İmleç değiştirme

<!DOCTYPE html> 
  <html> 
  <body> 
  <p>Fareyi kelimelerin üzerinde gezdirdiğinizde imlecin nasıl değiştiğini görebilirsiniz.</p> 
  <span style="cursor:auto">auto</span><br /> 
  <span style="cursor:crosshair">crosshair</span><br /> 
  <span style="cursor:default">default</span><br /> 
  <span style="cursor:e-resize">e-resize</span><br /> 
  <span style="cursor:help">help</span><br /> 
  <span style="cursor:move">move</span><br /> 
  <span style="cursor:n-resize">n-resize</span><br /> 
  <span style="cursor:ne-resize">ne-resize</span><br /> 
  <span style="cursor:nw-resize">nw-resize</span><br /> 
  <span style="cursor:pointer">pointer</span><br /> 
  <span style="cursor:progress">progress</span><br /> 
  <span style="cursor:s-resize">s-resize</span><br /> 
  <span style="cursor:se-resize">se-resize</span><br /> 
  <span style="cursor:sw-resize">sw-resize</span><br /> 
  <span style="cursor:text">text</span><br /> 
  <span style="cursor:w-resize">w-resize</span><br /> 
  <span style="cursor:wait">wait</span><br /> 
  </body> 
  </html>

< Bu mesaj bu kişi tarafından değiştirildi Dr.Hrn -- 20 Eylül 2012; 9:12:44 >
Bu mesaja 1 cevap geldi.

D

Dr.Hrn

13 yıl

Yüzbaşı

Konu Sahibi

CSS Float nedir?

CSS float özelliği ile bir öğe sağa veya sola itilebilir ,diğer öğelerin etrafını sarabilir.?

Float sıklıkla imajlar için kullanılır ama düzen oluşturmak içinde faydalıdır.

Float özelliğinin kullanımı

Float özelliği horizontal olarak ayarlandığında öğeler sağa veya sola kaydırılabilir ancak aşağı veya yukarı kaydırılamaz.Kaydırılımış öğe mümkün oluğu adar sağa ve sola kayar.
Diğer öğeler kaydırılmış öğenin etrafında görüntülenir.
Kaydırılmış öğeden önceki elemanlar etkilenmeyecektir.

<!DOCTYPE html> 
  <html> 
  <head> 
  <style type="text/css"> 
  img  
  { 
  float:right; 
  } 
  </style> 
  </head> 
   
  <body> 
  <p>Aşağıdaki paragrafa <b>float:right</b> özelliği ile bir resim ekledik.Bu şekilde resim sağda görünecek ve paragraf resmin etrafında görüntülenecektir.</p> 
  <p> 
  <img src="http://www.w3schools.com/css/logocss.gif" width="95" height="84" /> 
  Bu bir örnek metindir.Bu bir örnek metindir.Bu bir örnek metindir.Bu bir örnek metindir.Bu bir örnek metindir.Bu bir örnek metindir.Bu bir örnek metindir.Bu bir örnek metindir.Bu bir örnek metindir.Bu bir örnek metindir.Bu bir örnek metindir.Bu bir örnek metindir.Bu bir örnek metindir.Bu bir örnek metindir.Bu bir örnek metindir.Bu bir örnek metindir.Bu bir örnek metindir.Bu bir örnek metindir.Bu bir örnek metindir.Bu bir örnek metindir.Bu bir örnek metindir.Bu bir örnek metindir.Bu bir örnek metindir.Bu bir örnek metindir.Bu bir örnek metindir.Bu bir örnek metindir.Bu bir örnek metindir.Bu bir örnek metindir.Bu bir örnek metindir.Bu bir örnek metindir.Bu bir örnek metindir.Bu bir örnek metindir.Bu bir örnek metindir.Bu bir örnek metindir. 
  </p> 
  </body> 
   
  </html>

Sıra sıra kaydırılmış öğeler

Birbiri ardına kaydırılmış öğe koyarsak yan yana dizilir.
Aşağıdaki örnekte birbiri ardına float kullanarak bir resim galerisi yaptık.

<!DOCTYPE html> 
  <html> 
  <head> 
  <style type="text/css"> 
  .thumbnail  
  { 
  float:left; 
  width:110px; 
  height:90px; 
  margin:5px; 
  } 
  </style> 
  </head> 
   
  <body> 
  <h3>Resim galerisi</h3> 
   
  <img class="thumbnail" src="http://www.w3schools.com/css/klematis_small.jpg" width="107" height="90"> 
  <img class="thumbnail" src="http://www.w3schools.com/css/klematis2_small.jpg" width="107" height="80"> 
  <img class="thumbnail" src="http://www.w3schools.com/css/klematis3_small.jpg" width="116" height="90"> 
  <img class="thumbnail" src="http://www.w3schools.com/css/klematis4_small.jpg" width="120" height="90"> 
  <img class="thumbnail" src="http://www.w3schools.com/css/klematis_small.jpg" width="107" height="90"> 
  <img class="thumbnail" src="http://www.w3schools.com/css/klematis2_small.jpg" width="107" height="80"> 
  <img class="thumbnail" src="http://www.w3schools.com/css/klematis3_small.jpg" width="116" height="90"> 
  <img class="thumbnail" src="http://www.w3schools.com/css/klematis4_small.jpg" width="120" height="90"> 
  </body> 
  </html>

Float kapatılması clear özelliği

Bu özelliği kullanarak ardı ardına kaydırılmış öğelerin arasına başka öğeler koyabilirsiniz.Ne şe yaradığını görmek için aşağıdaki ve yukarıdaki örneği karşılaştırabilirsiniz.

<!DOCTYPE html> 
  <html> 
  <head> 
  <style type="text/css"> 
  .thumbnail  
  { 
  float:left; 
  width:110px; 
  height:90px; 
  margin:5px; 
  } 
  .text_line 
  { 
  clear:both; 
  margin-bottom:10px; 
  } 
  </style> 
  </head> 
   
  <body> 
  <h3>resim galerisi </h3> 
   
  <img class="thumbnail" src="http://www.w3schools.com/css/klematis_small.jpg" width="107" height="90"> 
  <img class="thumbnail" src="http://www.w3schools.com/css/klematis2_small.jpg" width="107" height="80"> 
  <img class="thumbnail" src="http://www.w3schools.com/css/klematis3_small.jpg" width="116" height="90"> 
  <img class="thumbnail" src="http://www.w3schools.com/css/klematis4_small.jpg" width="120" height="90"> 
  <h3 class="text_line">İkinci sıra </h3> 
  <img class="thumbnail" src="http://www.w3schools.com/css/klematis_small.jpg" width="107" height="90"> 
  <img class="thumbnail" src="http://www.w3schools.com/css/klematis2_small.jpg" width="107" height="80"> 
  <img class="thumbnail" src="http://www.w3schools.com/css/klematis3_small.jpg" width="116" height="90"> 
  <img class="thumbnail" src="http://www.w3schools.com/css/klematis4_small.jpg" width="120" height="90"> 
  </body> 
  </html>

Örnek 1

Kaydırılmış bir öğede resme kenarlık ve kenar boşluğu ekleme

<!DOCTYPE html> 
  <html> 
  <head> 
  <style type="text/css"> 
  img  
  { 
  float:right; 
  border:5px dotted black; 
  margin:0px 0px 15px 20px; 
  } 
  </style> 
  </head> 
   
  <body> 
  <p> 
  Aşağıdaki paragrafta resim sağa kaydırılmıştır. Resme (dotted black border) siyah noktalı kenarlık eklenmiştir.  </br> 
  Paragrafı resimden uzaklaştırmak içinde üst ve sağ tarafa 0 px alt kenara 15px sol tarafa 20 px kenar boşluğu bıraktık. 
  </p> 
  <p> 
  <img src="http://www.w3schools.com/css/logocss.gif" width="95" height="84" /> 
  Bu bir örnek yazıdır. Bu bir örnek yazıdır. Bu bir örnek yazıdır. Bu bir örnek yazıdır. Bu bir örnek yazıdır. Bu bir örnek yazıdır. Bu bir örnek yazıdır. Bu bir örnek yazıdır. Bu bir örnek yazıdır. Bu bir örnek yazıdır. Bu bir örnek yazıdır. Bu bir örnek yazıdır. Bu bir örnek yazıdır. vBu bir örnek yazıdır. Bu bir örnek yazıdır. Bu bir örnek yazıdır. Bu bir örnek yazıdır. Bu bir örnek yazıdır. Bu bir örnek yazıdır. Bu bir örnek yazıdır. Bu bir örnek yazıdır. Bu bir örnek yazıdır. Bu bir örnek yazıdır. Bu bir örnek yazıdır. Bu bir örnek yazıdır. Bu bir örnek yazıdır. Bu bir örnek yazıdır. Bu bir örnek yazıdır. vBu bir örnek yazıdır. Bu bir örnek yazıdır. Bu bir örnek yazıdır. Bu bir örnek yazıdır. Bu bir örnek yazıdır. Bu bir örnek yazıdır. Bu bir örnek yazıdır. Bu bir örnek yazıdır.  
  </p> 
  </body> 
   
  </html>

Örnek 2

Başlıklı sağa kaydırılmış resim

<!DOCTYPE html> 
  <html> 
  <head> 
  <style type="text/css"> 
  div 
  { 
  float:right; 
  width:120px; 
  margin:0 0 15px 20px; 
  padding:15px; 
  border:1px solid black; 
  text-align:center; 
  } 
  </style> 
  </head> 
   
  <body> 
  <div> 
  CSS eğlencelidir! 
  <img src="http://www.w3schools.com/css/logocss.gif" width="95" height="84" /><br /> 
  CSS eğlencelidir! 
  </div> 
  <p> 
  Bu bir örnek yazıdır.Bu bir örnek yazıdır.Bu bir örnek yazıdır.Bu bir örnek yazıdır.Bu bir örnek yazıdır.Bu bir örnek yazıdır.Bu bir örnek yazıdır.Bu bir örnek yazıdır.Bu bir örnek yazıdır.Bu bir örnek yazıdır.Bu bir örnek yazıdır.Bu bir örnek yazıdır.Bu bir örnek yazıdır.Bu bir örnek yazıdır.Bu bir örnek yazıdır.Bu bir örnek yazıdır.Bu bir örnek yazıdır.Bu bir örnek yazıdır.Bu bir örnek yazıdır.Bu bir örnek yazıdır.Bu bir örnek yazıdır.Bu bir örnek yazıdır.Bu bir örnek yazıdır.Bu bir örnek yazıdır.Bu bir örnek yazıdır.Bu bir örnek yazıdır.Bu bir örnek yazıdır.Bu bir örnek yazıdır.Bu bir örnek yazıdır.Bu bir örnek yazıdır.Bu bir örnek yazıdır.Bu bir örnek yazıdır.Bu bir örnek yazıdır.Bu bir örnek yazıdır.Bu bir örnek yazıdır.Bu bir örnek yazıdır.Bu bir örnek yazıdır.Bu bir örnek yazıdır.Bu bir örnek yazıdır.Bu bir örnek yazıdır. 
  </p> 
   
  <p> 
  Yukarıdaki örnekte div öğesi 120 px genişliğindedir ve bir resim içermektedir.</br> 
  Div öğesi sağa kaydırılmıştır. 
   
  </p> 
  </body> 
   
  </html>

Örnek 3

Bir paragrafın ilk harfini büyütüp sola kaydırabilirsiniz.

<!DOCTYPE html> 
  <html> 
  <head> 
  <style type="text/css"> 
  span 
  { 
  float:left; 
  width:1.4em; 
  font-size:400%; 
  font-family:algerian,courier; 
  line-height:80%; 
  } 
  </style> 
  </head> 
   
  <body> 
  <p> 
  <span>Bu</span> örnek bir metindir. 
   Bu örnek bir metindir.Bu örnek bir metindir.Bu örnek bir metindir.Bu örnek bir metindir.Bu örnek bir metindir.Bu örnek bir metindir.Bu örnek bir metindir.Bu örnek bir metindir.Bu örnek bir metindir.Bu örnek bir metindir.Bu örnek bir metindir.Bu örnek bir metindir.Bu örnek bir metindir.Bu örnek bir metindir.Bu örnek bir metindir.Bu örnek bir metindir.Bu örnek bir metindir. 
  </p> 
   
   
   
  </body> 
  </html>

Örnek 4

Yatay bir menü oluşturma

<!DOCTYPE html> 
  <html> 
  <head> 
  <style type="text/css"> 
  ul 
  { 
  float:left; 
  width:100%; 
  padding:0; 
  margin:0; 
  list-style-type:none; 
  } 
  a 
  { 
  float:left; 
  width:6em; 
  text-decoration:none; 
  color:yellow; 
  background-color:red; 
  padding:0.2em 0.6em; 
  border-right:1px solid white; 
  } 
  a:hover {background-color:#ff3300;} 
  li {display:inline;} 
  </style> 
  </head> 
   
  <body> 
  <ul> 
  <li><a data-test="test" rel="nofollow" style="word-wrap: break-word; text-decoration: underline;" target="_blank" onclick="return dhExternalLinkRedirect(this)" href="/ExternalLinkRedirect?module=pgdcode&messageId=66034727&url=#" data-href="#">Birinci link</a></li> 
  <li><a data-test="test" rel="nofollow" style="word-wrap: break-word; text-decoration: underline;" target="_blank" onclick="return dhExternalLinkRedirect(this)" href="/ExternalLinkRedirect?module=pgdcode&messageId=66034727&url=#" data-href="#">İkinci link</a></li> 
  <li><a data-test="test" rel="nofollow" style="word-wrap: break-word; text-decoration: underline;" target="_blank" onclick="return dhExternalLinkRedirect(this)" href="/ExternalLinkRedirect?module=pgdcode&messageId=66034727&url=#" data-href="#">Üçüncü link</a></li> 
  <li><a data-test="test" rel="nofollow" style="word-wrap: break-word; text-decoration: underline;" target="_blank" onclick="return dhExternalLinkRedirect(this)" href="/ExternalLinkRedirect?module=pgdcode&messageId=66034727&url=#" data-href="#">Dördüncü link</a></li> 
  </ul> 
   
  <p> 
  In the example above, we let the ul element and the a element float to the left. 
  The li elements will be displayed as inline elements (no line break before or after the element). This forces the list to be on one line. 
  The ul element has a width of 100% and each hyperlink in the list has a width of 6em (6 times the size of the current font). 
  We add some colors and borders to make it more fancy. 
  </p> 
   
  </body> 
  </html>

Örnek 5

Tablolar olmadan anasayfa oluşturma

<!DOCTYPE html> 
  <html> 
  <head> 
  <style type="text/css"> 
  div.container 
  { 
  width:100%; 
  margin:0px; 
  border:10px solid red; 
  line-height:150%; 
  } 
  div.header,div.footer 
  { 
  padding:0.5em; 
  color:black; 
  background-color:powderblue; 
  clear:left; 
  } 
  h1.header 
  { 
  padding:0; 
  margin:0; 
  } 
  div.left 
  { 
  float:left; 
  width:160px; 
  margin:0; 
  padding:1em; 
  } 
  div.content 
  { 
  margin-left:190px; 
  border-left:5px solid red; 
  padding:1em; 
  } 
  </style> 
  </head> 
  <body> 
   
  <div class="container"> 
  <div class="header"><h1 class="header">W3Schools.com</h1></div> 
  <div class="left"><p>"Never increase, beyond what is necessary, the number of entities required to explain anything." William of Ockham (1285-1349)</p></div> 
  <div class="content"> 
  <h2>Free Web Building Tutorials</h2> 
  <p>At W3Schools you will find all the Web-building tutorials you need, 
  from basic HTML and XHTML to advanced XML, XSL, Multimedia and WAP.</p> 
  <p>W3Schools - The Largest Web Developers Site On The Net!</p></div> 
  <div class="footer">Copyright 1999-2005 by Refsnes Data.</div> 
  </div> 
   
  </body> 
  </html>

< Bu mesaj bu kişi tarafından değiştirildi Dr.Hrn -- 20 Eylül 2012; 15:36:48 >

D

Dr.Hrn

13 yıl

Yüzbaşı

Konu Sahibi

quote:

Orijinalden alıntı: yusufcetin

Güzel gidiyor.

Kutu mantığını float özelliğini bekliyor gençler :)

float bölümünün çevirisini yaptım inceleyebilirsiniz.

Bu mesaja 1 cevap geldi.

U

ucan-laz

13 yıl

Binbaşı

quote:

Orijinalden alıntı: Dr.Hrn

quote:

Orijinalden alıntı: yusufcetin

Güzel gidiyor.

Kutu mantığını float özelliğini bekliyor gençler :)

float bölümünün çevirisini yaptım inceleyebilirsiniz.

Elinize sağlık çok güzel bir çalışma oldu...

Şimdi sırada ne var.

Bu mesaja 1 cevap geldi.

D

Dr.Hrn

13 yıl

Yüzbaşı

Konu Sahibi

CSS Align
CSS Pseudo-class
CSS Pseudo-element
CSS Navigation Bar
CSS Image Gallery
CSS Image Opacity
CSS Image Sprites
CSS Media Types
CSS Attribute Selectors

çeviri için bu bölümler kaldı CSS de

Bu mesaja 1 cevap geldi.

B

Bir Kedi Gördüm Sanki

13 yıl

Yüzbaşı

quote:

Orijinalden alıntı: Dr.Hrn

CSS Align
CSS Pseudo-class
CSS Pseudo-element
CSS Navigation Bar
CSS Image Gallery
CSS Image Opacity
CSS Image Sprites
CSS Media Types
CSS Attribute Selectors

çeviri için bu bölümler kaldı CSS de

Ellerinize emeğinize sağlık. Konunun takipçisi olacağım.

Bu mesaja 1 cevap geldi.

D

Dr.Hrn

13 yıl

Yüzbaşı

Konu Sahibi

quote:

Orijinalden alıntı: Bir Kedi Gördüm Sanki

quote:

Orijinalden alıntı: Dr.Hrn

CSS Align
CSS Pseudo-class
CSS Pseudo-element
CSS Navigation Bar
CSS Image Gallery
CSS Image Opacity
CSS Image Sprites
CSS Media Types
CSS Attribute Selectors

çeviri için bu bölümler kaldı CSS de

Ellerinize emeğinize sağlık. Konunun takipçisi olacağım.

Teşekkür ederim . Ben öğrenmek için çeviriyordum. Umarım birçok kişiye faydası olur.www.w3schools.com sitesinin çevirisini yapan bir ekip var onlar daha profesyonel şekilde çeviriye başladılar. İnşallah yakında daha hızlı çeviri yaparak asp php gibi bölümleri de çeviriler ve yayınlamaya başlarlarsa linkini size yollarım. CSS bittikten sonra Html ve CSS yi derleyip toplayacam.sonrasında yine bu forumda JAVASCRİPT ÖĞRENİYORUM diye başlık açıp ordan devam edecem . benim 9 ayda öğrendiğimi çok daha kısa sürede öğrenebilirsiniz. Başarılar dilerim.

Bu mesaja 1 cevap geldi.

D

Dr.Hrn

13 yıl

Yüzbaşı

Konu Sahibi

CSS Yatay Hizalama

Blok Öğeleri hizalama

Bir blok öğesi uygun olan tüm genişliği kaplayan, öncesi ve sonrasında bir satır sonu bırakan bir öğedir.

Blok öğeleri örnekleri:

<h1>
<p>
<div>

Bu bölümde yatay düzenleme amacıyla blok öğeleri nasıl hizalayacağımızı göreceğiz.

Margin özelliği kullanarak merkezi hizalama

Blok öğeleri sağ ve sol öğeleri auto ayarlanarak merkezi hizalanabilir.

! DOCTYPE bildirimi yapılmadıysa margin:auto kullanımı İE 8 ve öncesi sürümlerinde çalışmaz.

Sağ ve sol margin özelliğinin auto olarak ayarlanması sağ ve sol kenar boşluklarının eşit olması gerektiğini bildirir.Sonuç merkezi ortalama olur.

<!DOCTYPE html> 
  <html> 
  <head> 
  <style type="text/css"> 
  .center 
  { 
  margin:auto; 
  width:70%; 
  background-color:#b0e0e6; 
  } 
  </style> 
  </head> 
   
  <body> 
  <div class="center"> 
  <p>Margin özelliği kullanarak merkezi hizalama</br> 
   
  Blok öğeleri sağ ve sol öğeleri auto ayarlanarak merkezi hizalanabilir.</br> 
   
  ! DOCTYPE bildirimi yapılmadıysa margin:auto kullanımı İE 8 ve öncesi sürümlerinde çalışmaz.</br> 
   
  Sağ ve sol margin özelliğinin auto olarak ayarlanması sağ ve sol kenar boşluklarının eşit olması gerektiğini bildirir.Sonuç merkezi ortalama olur.</p> 
  </div> 
   
   
  <p>Margin özelliği kullanarak merkezi hizalama</br> 
   
  Blok öğeleri sağ ve sol öğeleri auto ayarlanarak merkezi hizalanabilir.</br> 
   
  ! DOCTYPE bildirimi yapılmadıysa margin:auto kullanımı İE 8 ve öncesi sürümlerinde çalışmaz.</br> 
   
  Sağ ve sol margin özelliğinin auto olarak ayarlanması sağ ve sol kenar boşluklarının eşit olması gerektiğini bildirir.Sonuç merkezi ortalama olur.</p> 
   
  </body> 
  </html>

Not: width yani genişlik %100 ise hizalamanın herhangi bir anlamı yoktur.

Position özelliği kullanarak sağa ve sola hizalama

Öğeleri hizalama yöntemlerinden biride mutlak konumlamadır.

<!DOCTYPE html> 
  <html> 
  <head> 
  <style type="text/css"> 
  .right 
  { 
  position:absolute; 
  right:20px; 
  width:300px; 
  background-color:#b0e0e6; 
  } 
  </style> 
  </head> 
   
  <body> 
  <div class="right"> 
  <p>Tarih, çocuklarının yeteneklerini keşfedememiş anne ve babaların cinayet derecesine varan hatalarıyla doludur.</p> 
  <p>Öğrenmenin bir parçan haline gelmesinden korkmamalısın.Nefes alıp vermen gibi hissedebilmelisin öğrenmeyi!!!</p> 
  </div> 
  </body> 
  </html>

Crossbrowser Compatibility Issues (Crossbrowser Uyumluluk Sorunları)

Öğeleri bu şekilde hizalamak , body öğesi için kenar boşluğu ve dolguları önceden ayarlamak iyi bir fikirdir.Farlı tarayıcılarda görsel farklılıklardan kaçınabilirsiniz.

İE8 ve önceki sürümlerinde hizalama özelliği kullanmak sıkıntılıdır. !DOCTYPE bildirimi kullanılmazsa İE8 ve önceki sürümlerinde sağ kenar boşluğuna 17 px lik bir alan eklenecektir.Bu da kaydırma çubuğu için ayrılmış bir alanmış gibi görünür.Bu nedenle float özelliğini kullanırken !DOCTYPE bildirimini mutlaka kullanın

<!DOCTYPE html> 
  <html> 
  <head> 
  <style type="text/css"> 
  body 
  { 
  margin:0; 
  padding:0; 
  } 
  .container 
  { 
  position:relative; 
  width:100%; 
  } 
  .right 
  { 
  position:absolute; 
  right:0px; 
  width:300px; 
  background-color:#b0e0e6; 
  } 
  </style> 
  </head> 
  <body> 
  <div class="container"> 
  <div class="right"> 
  <p><b>Note: </b>Position özelliğini kullanarak hizalama yaptığınızda mutlaka !DOCTYPE  bildirimini kullanın. Kullanılmazsa İE tarayıcılarda garip sonuçlar üretebilir. </p> 
  </div> 
  </div> 
   
  </body> 
  </html>

< Bu mesaj bu kişi tarafından değiştirildi Dr.Hrn -- 25 Eylül 2012; 16:02:53 >
Bu mesaja 1 cevap geldi.

D

Dr.Hrn

13 yıl

Yüzbaşı

Konu Sahibi

CSS Pseudo-classes (sözde sınıflar)

CSS pseudo-classes bazı seçicilere özel efektler eklemek için kullanılır.

Sözdizimi

Sözde sınıflar sözdizimi:

selector:pseudo-class {property:value;}

CSS sınıfları da sözde sınıfları ile kullanılabilir:

selector.class:pseudo-class {property:value;}

Anchor Pseudo-classes (link sözde sınıfları)

Linkler CSS destekli tarayıcılarda farklı şekillerde görüntülenebilir:

<!DOCTYPE html> 
  <html> 
  <head> 
  <style type="text/css"> 
  a:link {color:black}    /* unvisited link */ 
  a:visited {color:red} /* visited link */ 
  a:hover {color:blue}   /* mouse over link */ 
  a:active {color:yellow}  /* selected link */ 
  </style> 
  </head> 
   
  <body> 
  <p><b><a data-test="test" rel="nofollow" style="word-wrap: break-word; text-decoration: underline;" target="_blank" onclick="return dhExternalLinkRedirect(this)" href="/ExternalLinkRedirect?module=pgdcode&messageId=66280705&url=http://www.yabanciklipizle.net/" target="_blank" data-href="http://www.yabanciklipizle.net/" target="_blank">Bu bir linktir.</a></b></p> 
  <p><b>Not:</b> a:hover özelliğinin etkili olması için a:link ve a:visited özelliklerinden sonra yazılmalıdır.</p> 
  <p><b>Not:</b> a:active özelliğinin etkili olması için a:hover özelliklerinden sonra yazılmalıdır.</p> 
  </body> 
  </html>

Pseudo-classes and CSS Classes

Sözde sınıflar CSS sınıfları ile kombine edilebilir:

a.red:visited {color:#FF0000;}

<a data-test="test" rel="nofollow" style="word-wrap: break-word; text-decoration: underline;" target="_blank" onclick="return dhExternalLinkRedirect(this)" href="/ExternalLinkRedirect?module=pgdcode&messageId=66280705&url=css_syntax.asp" data-href="css_syntax.asp">CSS Syntax</a>

Yukarıdaki örnekteki link daha önce ziyaret edildiyse link kırmızı görünecektir.

CSS - The :first-child Pseudo-class

The :first-child pseudo-class başka bir öğenin first child ının belirtilmiş özelliğiyle eşleşir.

:first-child özelliğinin İE8 ve öncesi sürümlerinde çalışması için !DOCTYPE bildirimi yapılmış olmalıdır.

İlk <p> elemanını eşleştirme örneği

<!DOCTYPE html> 
  <html> 
  <head> 
  <style type="text/css"> 
  p:first-child 
  { 
  color:red; 
  }  
  </style> 
  </head> 
   
  <body> 
  <p>Bu örnek bir metindir.</p> 
  <p>Bu örnek bir metindir.</p> 
  </body> 
  </html>

Paragraflardaki ilk i öğesi eşleştirme örneği

<!DOCTYPE html> 
  <html> 
  <head> 
  <style type="text/css"> 
  p > i:first-child 
  { 
  color:blue; 
  }  
  </style> 
  </head> 
   
  <body> 
  <p>Ben  <i>özgür</i> biriyim. Ben  <i>özgür</i> biriyim. </p> 
  <p>Ben  <i>özgür</i> biriyim. Ben  <i>özgür</i> biriyim. </p> 
  </body> 
  </html>

< Bu mesaj bu kişi tarafından değiştirildi Dr.Hrn -- 27 Eylül 2012; 14:25:01 >
Bu mesaja 1 cevap geldi.

D

Dr.Hrn

13 yıl

Yüzbaşı

Konu Sahibi

CSS pseudo-elements (CSS sözde öğeleri)

CSS sözde öğeleri bazı seçicilere özel efektler eklemek için kullanılır.

Sözde öğelerin kullanımı;

selector:pseudo-element {property:value;}

CSS sınıfları da sözde öğeleri ile birlikte kullanılabilir:

selector.class:pseudo-element {property:value;}

The :first-line Pseudo-element

"First-line" sözde öğesii bir metnin ilk satırına özel stil eklemek için kullanılır.

Aşağıdaki örnekte paragrafın ilk satırının first-line sözde öğesinde belirtildiği gibi görüntülendiğini görebilirsiniz.

<!DOCTYPE html> 
  <html> 
  <head> 
  <style type="text/css"> 
  p:first-line  
  { 
  color:#ff0000; 
  font-variant:small-caps; 
  } 
  </style> 
  </head> 
   
  <body> 
  <p>:Bir metnin ilk satırına özel bir efekt vermek için first-line pseudo-element özelliğini kullanabilirsiniz.</p> 
  </body> 
  </html>

Yukarıdaki kodu notepade kopyalayıp daosyaadı.htm diye kaydedip açıktan sonra ne işe yaradığını görmek için tarayıcıyı küçültün.

Not: "first-line" sözde öğesi blok düzeyi öğelerde (block-level elements) kullanılabilir.

Not: Aşağıdaki özellikler için "first-line" sözde öğesi geçerlidir. ???

font properties
color properties
background properties
word-spacing
letter-spacing
text-decoration
vertical-align
text-transform
line-height
clear

The :first-letter Pseudo-element

"First-letter" sözde öğesi bir metnin ilk harfine özel stil eklemek için kullanılır:

<!DOCTYPE html> 
  <html> 
  <head> 
  <style type="text/css"> 
  p:first-letter  
  { 
  color:#ff0000; 
  font-size:xx-large; 
  } 
  </style> 
  </head> 
   
  <body> 
  <p>Bir metnin ilk harfine özel efekt eklemek için the :first-letter pseudo-element özelliğini kullanabilirsiniz!</p> 
  </body> 
  </html>

Not: "first-line" sözde öğesi blok düzeyi öğelerde (block-level elements) kullanılabilir.

Not: Aşağıdaki özellikler için "first-line" sözde öğesi geçerlidir. ???

font properties
color properties
background properties
word-spacing
letter-spacing
text-decoration
vertical-align
text-transform
line-height
clear

Pseudo-elements and CSS Classes ( Sözde öğeler ve CSS sınıfları)

Sözde öğeler CSS sınıfları ile kombine edilebilir:

p.article:first-letter {color:#ff0000;}

<p class="article">A paragraph in an article</p>

Yukarıdaki kod her paragrafın ilk harfinin kırmızı görünmesini sağlar.

Birden çok sözde öğe

Birçok sözde öğe kombine edilebilir.

Bir paragrafın ilk harfi ve ilk satırına özel efekt eklemek için first-letter ve :first-line sözde öğelerini kombine edenilirsiniz.!

<!DOCTYPE html> 
  <html> 
  <head> 
  <style type="text/css"> 
  p:first-letter 
  { 
  color:#ff0000; 
  font-size:xx-large; 
  } 
  p:first-line  
  { 
  color:#0000ff; 
  font-variant:small-caps; 
  } 
  </style> 
  </head> 
   
  <body> 
  <p>Bir paragrafın ilk harfi ve ilk satırına özel efekt eklemek için first-letter ve :first-line sözde öğelerini kombine edenilirsiniz.!</p> 
  </body> 
  </html>

CSS - The :before Sözde öğesi

": Before" sözde öğesi bir öğenin önüne bazı içerikleri eklemek için kullanılır.

Aşağıdaki örnekte her <h1> öğesinden önce nasıl resim ekleyebileceğinizi görebilirsiniz.

<!DOCTYPE html> 
  <html> 
  <head> 
  <style type="text/css"> 
  h1:before {content:url(http://www.w3schools.com/images/w3css.gif);} 
  </style> 
  </head> 
   
  <body> 
  <h1>Bu bir başlıktır.</h1> 
  <p>The :before sözde öğesi ile içerikten önce resim ekleyebilirsiniz..</p> 
  <h1>Bu bir başlıktır.</h1> 
  <p><b>Not:</b> IE8 in bu özelliği desteklemesi için !DOCTYPE bildiriminin yapılmış olması gerekir.</p> 
  </body> 
  </html>

CSS - The :after sözde öğesi

": after" sözde öğesi bir öğenin sonuna bazı içerikleri eklemek için kullanılır.

Aşağıdaki örnekte her <h1> öğesinden sonra nasıl resim ekleyebileceğinizi görebilirsiniz.

<!DOCTYPE html> 
  <html> 
  <head> 
  <style type="text/css"> 
  h1:after {content:url(http://www.w3schools.com/images/w3css.gif);} 
  </style> 
  </head> 
   
  <body> 
  <h1>Bu bir başlıktır.</h1> 
  <p>The :after sözde öğesi ile içerikten sonra bir resim ekleyebilirsiniz.</p> 
  <h1>Bu bir başlıktır.</h1> 
  <p><b>Not:</b> IE8 in bu özelliği desteklemesi için !DOCTYPE bildirimi yapılmış olmalıdır.</p> 
  </body> 
  </html>

< Bu mesaj bu kişi tarafından değiştirildi Dr.Hrn -- 1 Ekim 2012; 13:23:15 >
Bu mesaja 1 cevap geldi.

D

Dr.Hrn

13 yıl

Yüzbaşı

Konu Sahibi

Navigation Bars (Gezinti Çubukları :)

Kullanımı kolay navigasyon barları web siteleri için önemlidir.

CSS ile sıkıcı görünümlü HTML menülerini daha güzel görünen menülere dünüştürebilirsiniz.

Navigation Bar = Linklerin listesi

Navigation bar temel olarak standart HTML gerektirir.

İlk örneğimizde standart HTML listesi ile bir navigasyon bar oluşturacağız.

Navigation bar temelde linklerin bir listesidir. Bu nedenle <ul> ve <li> etiketlerini kullanmak mantıklıdır.

<!DOCTYPE html> 
  <html> 
  <body> 
  <ul> 
  <li><a data-test="test" rel="nofollow" style="word-wrap: break-word; text-decoration: underline;" target="_blank" onclick="return dhExternalLinkRedirect(this)" href="/ExternalLinkRedirect?module=pgdcode&messageId=66533260&url=http://www.yabanciklipizle.net" data-href="http://www.yabanciklipizle.net">Yabancı Klip İzle</a></li> 
  <li><a data-test="test" rel="nofollow" style="word-wrap: break-word; text-decoration: underline;" target="_blank" onclick="return dhExternalLinkRedirect(this)" href="/ExternalLinkRedirect?module=pgdcode&messageId=66533260&url=#haberler" data-href="#haberler">Haberler</a></li> 
  <li><a data-test="test" rel="nofollow" style="word-wrap: break-word; text-decoration: underline;" target="_blank" onclick="return dhExternalLinkRedirect(this)" href="/ExternalLinkRedirect?module=pgdcode&messageId=66533260&url=#iletişim" data-href="#iletişim">İletişim</a></li> 
  <li><a data-test="test" rel="nofollow" style="word-wrap: break-word; text-decoration: underline;" target="_blank" onclick="return dhExternalLinkRedirect(this)" href="/ExternalLinkRedirect?module=pgdcode&messageId=66533260&url=#hakkımızda" data-href="#hakkımızda">Hakkımızda</a></li> 
  </ul> 
   
  <p>Not:  href="#....." bölümü deneme içindir. Gerçek web sitelerinde bu kısma ilk linkteki gibi açılmasını istediğiniz sayfanın URL sini girmeniz gerekir.</p> 
   
  </body> 
  </html>

Aşağıdaki örnekte ise liste işaretlerini kenar boşluğu ve dolguyu nasıl kaldırabileceğinizi görebilirsiniz.

<!DOCTYPE html> 
  <html> 
  <head> 
  <style> 
  ul 
  { 
  list-style-type:none; 
  margin:0; 
  padding:0; 
  } 
  </style> 
  </head> 
  <body> 
  <ul> 
  <li><a data-test="test" rel="nofollow" style="word-wrap: break-word; text-decoration: underline;" target="_blank" onclick="return dhExternalLinkRedirect(this)" href="/ExternalLinkRedirect?module=pgdcode&messageId=66533260&url=http://www.yabanciklipizle.net" data-href="http://www.yabanciklipizle.net">Yabancı Klip İzle</a></li> 
  <li><a data-test="test" rel="nofollow" style="word-wrap: break-word; text-decoration: underline;" target="_blank" onclick="return dhExternalLinkRedirect(this)" href="/ExternalLinkRedirect?module=pgdcode&messageId=66533260&url=#haberler" data-href="#haberler">Haberler</a></li> 
  <li><a data-test="test" rel="nofollow" style="word-wrap: break-word; text-decoration: underline;" target="_blank" onclick="return dhExternalLinkRedirect(this)" href="/ExternalLinkRedirect?module=pgdcode&messageId=66533260&url=#iletişim" data-href="#iletişim">İletişim</a></li> 
  <li><a data-test="test" rel="nofollow" style="word-wrap: break-word; text-decoration: underline;" target="_blank" onclick="return dhExternalLinkRedirect(this)" href="/ExternalLinkRedirect?module=pgdcode&messageId=66533260&url=#hakkımızda" data-href="#hakkımızda">Hakkımızda</a></li> 
  </ul> 
  </body> 
  </html>

Vertical Navigation Bar( Dikey gezinti çubuğu)

Dikey bir navigasyon çubuğu oluşturmak için yukarıdaki kodlara ek olarak sadece <a> etiketine stil vermemiz gerekir.

<!DOCTYPE html> 
  <html> 
  <head> 
  <style type="text/css"> 
  ul 
  { 
  list-style-type:none; 
  margin:0; 
  padding:0; 
  } 
  a 
  { 
  display:block; 
  width:80px; 
  background-color:#cccccc; 
  } 
  </style> 
  </head> 
   
  <body> 
  <ul> 
  <li><a data-test="test" rel="nofollow" style="word-wrap: break-word; text-decoration: underline;" target="_blank" onclick="return dhExternalLinkRedirect(this)" href="/ExternalLinkRedirect?module=pgdcode&messageId=66533260&url=http://www.yabanciklipizle.net" data-href="http://www.yabanciklipizle.net">Yabancı Klip İzle</a></li> 
  <li><a data-test="test" rel="nofollow" style="word-wrap: break-word; text-decoration: underline;" target="_blank" onclick="return dhExternalLinkRedirect(this)" href="/ExternalLinkRedirect?module=pgdcode&messageId=66533260&url=#haberler" data-href="#haberler">Haberler</a></li> 
  <li><a data-test="test" rel="nofollow" style="word-wrap: break-word; text-decoration: underline;" target="_blank" onclick="return dhExternalLinkRedirect(this)" href="/ExternalLinkRedirect?module=pgdcode&messageId=66533260&url=#iletişim" data-href="#iletişim">İletişim</a></li> 
  <li><a data-test="test" rel="nofollow" style="word-wrap: break-word; text-decoration: underline;" target="_blank" onclick="return dhExternalLinkRedirect(this)" href="/ExternalLinkRedirect?module=pgdcode&messageId=66533260&url=#hakkımızda" data-href="#hakkımızda">Hakkımızda</a></li> 
  </ul> 
   
  <p>Link alanını belirlemek için linklerin arkaplan rengi belirtilmiştir.</p> 
  <p>Sadece linke değil aynı zamanda link alanı içinde yazı dışında boş bir yere tıklasanızda link çalışır.</p> 
  </body> 
  </html>

Aşağıdaki full stil verilmiş navigasyon bar örneğinin inceleyebilirsiniz.

<!DOCTYPE html> 
  <html> 
  <head> 
  <style type="text/css"> 
  ul 
  { 
  list-style-type:none; 
  margin:0; 
  padding:0; 
  } 
  a:link,a:visited 
  { 
  display:block; 
  font-weight:bold; 
  color:#FFFFFF; 
  background-color:#98bf21; 
  width:120px; 
  text-align:center; 
  padding:4px; 
  text-decoration:none; 
  text-transform:uppercase; 
  } 
  a:hover,a:active 
  { 
  background-color:#7A991A; 
  } 
  </style> 
  </head> 
   
  <body> 
  <ul> 
  <li><a data-test="test" rel="nofollow" style="word-wrap: break-word; text-decoration: underline;" target="_blank" onclick="return dhExternalLinkRedirect(this)" href="/ExternalLinkRedirect?module=pgdcode&messageId=66533260&url=http://www.yabanciklipizle.net" data-href="http://www.yabanciklipizle.net">Yabancı Klip İzle</a></li> 
  <li><a data-test="test" rel="nofollow" style="word-wrap: break-word; text-decoration: underline;" target="_blank" onclick="return dhExternalLinkRedirect(this)" href="/ExternalLinkRedirect?module=pgdcode&messageId=66533260&url=#haberler" data-href="#haberler">Haberler</a></li> 
  <li><a data-test="test" rel="nofollow" style="word-wrap: break-word; text-decoration: underline;" target="_blank" onclick="return dhExternalLinkRedirect(this)" href="/ExternalLinkRedirect?module=pgdcode&messageId=66533260&url=#iletişim" data-href="#iletişim">İletişim</a></li> 
  <li><a data-test="test" rel="nofollow" style="word-wrap: break-word; text-decoration: underline;" target="_blank" onclick="return dhExternalLinkRedirect(this)" href="/ExternalLinkRedirect?module=pgdcode&messageId=66533260&url=#hakkımızda" data-href="#hakkımızda">Hakkımızda</a></li> 
  </ul> 
  </body> 
  </html>

Horizontal Navigation Bar (Yatay navigasyon bar )

Yatay navigasyon bar oluşturmanın iki yolu vardır. inline ve floating liste öğelerini kullanabilirsiniz.

Her iki yöntemde iyi çalışır ancak linklerin aynı boyutta olmasını istiyorsanız float yöntemini kullanmanız gerekir.

Inline Liste Öğeleri ( sıralı liste öğeleri)

Yatay navigasyon barları oluşturmanın yollarından biri yukarıdaki standart kodlara ek olarak <li> öğesine inline özelliği eklemekmiş.

<!DOCTYPE html> 
  <html> 
  <head> 
  <style> 
  ul 
  { 
  list-style-type:none; 
  margin:0; 
  padding:0; 
  } 
  li 
  { 
  display:inline; 
  } 
  </style> 
  </head> 
   
  <body> 
  <ul> 
  <li><a data-test="test" rel="nofollow" style="word-wrap: break-word; text-decoration: underline;" target="_blank" onclick="return dhExternalLinkRedirect(this)" href="/ExternalLinkRedirect?module=pgdcode&messageId=66533260&url=http://www.yabanciklipizle.net" data-href="http://www.yabanciklipizle.net">Yabancı Klip İzle</a></li> 
  <li><a data-test="test" rel="nofollow" style="word-wrap: break-word; text-decoration: underline;" target="_blank" onclick="return dhExternalLinkRedirect(this)" href="/ExternalLinkRedirect?module=pgdcode&messageId=66533260&url=#haberler" data-href="#haberler">Haberler</a></li> 
  <li><a data-test="test" rel="nofollow" style="word-wrap: break-word; text-decoration: underline;" target="_blank" onclick="return dhExternalLinkRedirect(this)" href="/ExternalLinkRedirect?module=pgdcode&messageId=66533260&url=#iletişim" data-href="#iletişim">İletişim</a></li> 
  <li><a data-test="test" rel="nofollow" style="word-wrap: break-word; text-decoration: underline;" target="_blank" onclick="return dhExternalLinkRedirect(this)" href="/ExternalLinkRedirect?module=pgdcode&messageId=66533260&url=#hakkımızda" data-href="#hakkımızda">Hakkımızda</a></li> 
  </ul> 
   
  </body> 
  </html>

Başka bir örnek

<!DOCTYPE html> 
  <html> 
  <head> 
  <style> 
  ul 
  { 
  list-style-type:none; 
  margin:0; 
  padding:0; 
  padding-top:6px; 
  padding-bottom:6px; 
  } 
  li 
  { 
  display:inline; 
  } 
  a:link,a:visited 
  { 
  font-weight:bold; 
  color:#FFFFFF; 
  background-color:#98bf21; 
  text-align:center; 
  padding:6px; 
  text-decoration:none; 
  text-transform:uppercase; 
  } 
  a:hover,a:active 
  { 
  background-color:#7A991A; 
  } 
   
  </style> 
  </head> 
   
  <body> 
  <ul> 
  <li><a data-test="test" rel="nofollow" style="word-wrap: break-word; text-decoration: underline;" target="_blank" onclick="return dhExternalLinkRedirect(this)" href="/ExternalLinkRedirect?module=pgdcode&messageId=66533260&url=http://www.yabanciklipizle.net/" data-href="http://www.yabanciklipizle.net/">Home</a></li> 
  <li><a data-test="test" rel="nofollow" style="word-wrap: break-word; text-decoration: underline;" target="_blank" onclick="return dhExternalLinkRedirect(this)" href="/ExternalLinkRedirect?module=pgdcode&messageId=66533260&url=http://www.yabanciklipizle.net/" data-href="http://www.yabanciklipizle.net/">News</a></li> 
  <li><a data-test="test" rel="nofollow" style="word-wrap: break-word; text-decoration: underline;" target="_blank" onclick="return dhExternalLinkRedirect(this)" href="/ExternalLinkRedirect?module=pgdcode&messageId=66533260&url=http://www.yabanciklipizle.net/" data-href="http://www.yabanciklipizle.net/">Contact</a></li> 
  <li><a data-test="test" rel="nofollow" style="word-wrap: break-word; text-decoration: underline;" target="_blank" onclick="return dhExternalLinkRedirect(this)" href="/ExternalLinkRedirect?module=pgdcode&messageId=66533260&url=http://www.yabanciklipizle.net/" data-href="http://www.yabanciklipizle.net/">About</a></li> 
  </ul> 
   
  <p><b>Not:</b> Eğer ul öğesi için padding özelliğini ayarlamaz  sadece a öğesi için padding özelliğini belirtirseniz linkler ul öğesinin dışına taşacaktır. Bu nedenle ul öğesi için padding-top ve padding-bottom değerleri belirtilmiştir .</p> 
  </body> 
  </html>

Floating Liste Öğeleri

Yukarıdaki örnekteki linkler farklı boyutlara sahiptir.

Tüm linklerin eşit genişlikte olması için li öğesi için float özelliği belirtilmeli a öğeleri içinde bir genişlik belirtilmeliymiş.

<!DOCTYPE html> 
  <html> 
  <head> 
  <style> 
  ul 
  { 
  list-style-type:none; 
  margin:0; 
  padding:0; 
  overflow:hidden; 
  } 
  li 
  { 
  float:left; 
  } 
  a 
  { 
  display:block; 
  width:60px; 
  background-color:#dddddd; 
  } 
  </style> 
  </head> 
   
  <body> 
  <ul> 
  <li><a data-test="test" rel="nofollow" style="word-wrap: break-word; text-decoration: underline;" target="_blank" onclick="return dhExternalLinkRedirect(this)" href="/ExternalLinkRedirect?module=pgdcode&messageId=66533260&url=http://www.yabanciklipizle.net/" data-href="http://www.yabanciklipizle.net/">Home</a></li> 
  <li><a data-test="test" rel="nofollow" style="word-wrap: break-word; text-decoration: underline;" target="_blank" onclick="return dhExternalLinkRedirect(this)" href="/ExternalLinkRedirect?module=pgdcode&messageId=66533260&url=http://www.yabanciklipizle.net/" data-href="http://www.yabanciklipizle.net/">News</a></li> 
  <li><a data-test="test" rel="nofollow" style="word-wrap: break-word; text-decoration: underline;" target="_blank" onclick="return dhExternalLinkRedirect(this)" href="/ExternalLinkRedirect?module=pgdcode&messageId=66533260&url=http://www.yabanciklipizle.net/" data-href="http://www.yabanciklipizle.net/">Contact</a></li> 
  <li><a data-test="test" rel="nofollow" style="word-wrap: break-word; text-decoration: underline;" target="_blank" onclick="return dhExternalLinkRedirect(this)" href="/ExternalLinkRedirect?module=pgdcode&messageId=66533260&url=http://www.yabanciklipizle.net/" data-href="http://www.yabanciklipizle.net/">About</a></li> 
  </ul> 
   
  <p><b>Not:</b>!DOCTYPE bildirimi yapılmazsa farklı sonuşlar alabilirsiniz.</p> 
   
  <p>Link alanını göstermek için bir arkaplan rengi ekleyebilirsiniz.Bu aynı zamanda sadece link adı dışında link alanında yazı dışında bir yere tıklansa da linkinizin çalışmasını sağlar.</p> 
   
  <p><b>Not:</b> li öğesi listenin dışına taşmasın diye ul öğesine overflow:hidden özellğini eklemek gerekir.</p> 
   
  </body> 
  </html>

< Bu mesaj bu kişi tarafından değiştirildi Dr.Hrn -- 10 Ekim 2012; 23:20:14 >
Bu mesaja 1 cevap geldi.

D

Dr.Hrn

13 yıl

Yüzbaşı

Konu Sahibi

CSS Resim Galerisi

CSS bir resim galerisi oluşturmak için kullanılabilir.

Aşağıdaki resim galerisi CSS oluşturulmuştur.

<!DOCTYPE html> 
  <html> 
  <head> 
  <style> 
  div.img 
  { 
    margin: 2px; 
    border: 1px solid #0000ff; 
    height: auto; 
    width: auto; 
    float: left; 
    text-align: center; 
  }	 
  div.img img 
  { 
    display: inline; 
    margin: 3px; 
    border: 1px solid #ffffff; 
  } 
  div.img a:hover img {border: 1px solid #0000ff;} 
  div.desc 
  { 
    text-align: center; 
    font-weight: normal; 
    width: 120px; 
    margin: 2px; 
  } 
  </style> 
  </head> 
  <body> 
   
  <div class="img"> 
   <a data-test="test" rel="nofollow" style="word-wrap: break-word; text-decoration: underline;" target="_blank" onclick="return dhExternalLinkRedirect(this)" href="/ExternalLinkRedirect?module=pgdcode&messageId=66779442&url=http://www.yabanciklipizle.net/" data-href="http://www.yabanciklipizle.net/"><img src="http://www.w3schools.com/css/klematis_small.jpg" alt="Klematis" width="110" height="90" /></a> 
   <div class="desc">Buraya resmin açıklamasını yazabilirsiniz.</div> 
  </div> 
  <div class="img"> 
   <a data-test="test" rel="nofollow" style="word-wrap: break-word; text-decoration: underline;" target="_blank" onclick="return dhExternalLinkRedirect(this)" href="/ExternalLinkRedirect?module=pgdcode&messageId=66779442&url=http://www.yabanciklipizle.net/" data-href="http://www.yabanciklipizle.net/"><img src="http://www.w3schools.com/css/klematis2_small.jpg" alt="Klematis" width="110" height="90" /></a> 
   <div class="desc">Buraya resmin açıklamasını yazabilirsiniz.</div> 
  </div> 
  <div class="img"> 
   <a data-test="test" rel="nofollow" style="word-wrap: break-word; text-decoration: underline;" target="_blank" onclick="return dhExternalLinkRedirect(this)" href="/ExternalLinkRedirect?module=pgdcode&messageId=66779442&url=http://www.yabanciklipizle.net/" data-href="http://www.yabanciklipizle.net/"><img src="http://www.w3schools.com/css/klematis3_small.jpg" alt="Klematis" width="110" height="90" /></a> 
   <div class="desc">Buraya resmin açıklamasını yazabilirsiniz.</div> 
  </div> 
  <div class="img"> 
   <a data-test="test" rel="nofollow" style="word-wrap: break-word; text-decoration: underline;" target="_blank" onclick="return dhExternalLinkRedirect(this)" href="/ExternalLinkRedirect?module=pgdcode&messageId=66779442&url=http://www.yabanciklipizle.net/" data-href="http://www.yabanciklipizle.net/"><img src="http://www.w3schools.com/css/klematis4_small.jpg" alt="Klematis" width="110" height="90" /></a> 
   <div class="desc">Buraya resmin açıklamasını yazabilirsiniz.</div> 
  </div> 
   
  </body> 
  </html>

Bu örnekte resimlerden birine tıkladığınızda resmin büyük halini gösterecek başka bir html sayfasının linkini verebilirsiniz.Ben örnek olsun diye kendi sitemin linkini verdim.

Bu mesaja 1 cevap geldi.