webdekurs logoCanlidizi.com
anasayfaanasayfa hakkımızdahakkımızda duyurularduyurular derslerdersler dökümanlardökümanlar istekleristekler forumforum sen de anlat
webdekurs banner


Css ile Konumlandırma
CSS Videoları     Diğer CSS Dökümanları     GERİ
 

Doküman ile ilgili anahtar sözcükler :  Online Dershane,webde kurs,internet dershanesi,Nesne Yüzdürme, Nesne Boyutları, Nesne Konumlandırma, Konumlandırma Türleri, Görünürlük,
Css ile önemli bir yer katettik. Bu dersimizde Css ile html nesnelerini konumlamayı öğreneceğiz.
 

Nesne Yüzdürme

İlk özelliğimiz: float. Bu özellik ile HTML nesnelerinin sayfada veya herhangi bir HTML elemanının içinde konumlandırmaya yarar. Bu işleme yüzdürme diyoruz. Örneğin bir resim nesnesinin metin içindeki konumunu düşünün, bu resim nesnesini hizalayarak bu nesneyi metin denizi içinde yüzdürmüş oluyoruz. Eğer float özelliğine right özelliği verirsek nesne sağda, left özelliği verirsek solda, none özelliğini verirsek yazıldığı yerde konumlandırılır.

<html>

<head>

<title>Nesne Konumlandırma,</title>

</head>

<body>

 

<p style="text-align: justify">Augustus sonunda kararını verdi: Dünyayı gezip dolaşacak, insanlara şu ya da bu şekilde yardım elini uzatabileceği ve kendilerine duyduğu sevgiyi açıkça ortaya koyabileceği bir yer bulup orada kalacaktı.

<img src="volkan.gif" style="float: right">

Yüzünü kimsenin görmek istememesine alışmıştı çaresiz; avurtları çökmüş, gözleri çukura gömülmüştü; sırtındaki giysileri, ayağındaki ayakkabıları gören, onu dilenci sanırdı; sesi ve yürüyüşü de bir zaman herkesin işitip görmekten haz duyduğu, herkesi büyüleyip hayran bırakan ses ve yürüyüş olmaktan çıkmıştı. Taranmamış bakımsız ak sakalı çocukları korkutuyordu; şık giyimli beyler ve hanımlar ondan kaçıyor, yanında bulunmaktan rahatsızlık duyarak kendilerini adeta pisliğe bulanmış hissediyorlardı; dilenciler ise ellerindeki birkaç lokma yiyeceğe göz dikmiş bir yabancı sanarak ona kuşkuyla bakıyorlardı. Bütün bunlar da Augustos'un insanlara istediği gibi hizmet edebilmesini güçleştirmekteydi.

<img src="volkan.gif" style="float: left">

Ne var ki, her gün yeni bir şey öğreniyor, asla yılgınlığa kapılmıyordu. Bütün bunlar da Auustus'un insanlara istediği gibi hizmet edebilmesini güçleştirmekteydi. Ne var ki, her gün yeni bir şey öğreniyor, asla yılgınlığa kapılmıyordu. Diyelim bir fırının önünde bir çocuk gördü de çocuğun boyu minik eliyle uzanıp kapının tokmağını çevirmeye yetmiyor, koşup yardım ediyordu hemen. Karşısına kendisinden de çaresiz durumda biri çıktıkça, örenğin bir dilenci ya da sakat biriyle karşılaştıkça, yolda bir süre ona eşlik edip yardımcı oluyordu; bunu yapamadı diyelim, cebindeki birkaç kuruşu seve seve eline tutuşturuyor, iyilik taşan pırıl pırıl bir bakışı, kardeşçe bir selamı, kendisini anlayıp derdine ortak olduğunu gösteren bir jesti böyle bir kimseden esirgemiyordu. Gezip dolaştıkça, insanların yüzüne bakar bakmaz onların kendisinden neler beklediğini, yüksek sesle vereceği giler yüzlü bir selamın mı yoksa sessiz bir bakışının mı ya da hiç yanlarına sokulmayıp uzaktan geçmesinin mi onları memnun bırakacağını anlamaya başlamıştı.

<img src="volkan.gif" style="float: right">

Dünyadaki onca sefalete karşın yine de sızlanıp şikayet etmeksizin yaşayıp giden insanlara rastladıkça şaşmadan duramıyordu. Her acıyı neşeli bir kahkahanın, her ölüm yasını neşeli bir çocuk şarkısının izlediğini, her sıkıntının, her bayalığın yanında bir güzelliğin, bir esprinin, bir tesellinin, bir gülümsemenin yer aldığını hayranlıkla görüyor, bunu da harikûlade buluyordu.</p>

 

</body>

</html>

Nesne Boyutları

Konumlandırılan HTML nesnesinin büyüklüğünün belirtilmesi de çok önemlidir. Nesnelerin boyutlarını belirlemek için width (en) ve height (boy) özellikleri kullanılır. Bu özelliklere şu şekillerde değerler verilir:

auto

Nesnenin boyutlarını gözatıcı otomatik olarak belirler.

 

width: auto; height: auto

birimsel değer

Nesnenin boyutlarının CSS birimleriyle ifade edilmesidir.

 

width: 20px; height: 1cm

yüzde oran

Nesnenin boyutlarını, sayfaya olan yüzde oranıyla belirler.

 

width: 50%; height: 25%

<html>

<head>

<title>Nesne Boyutları,</title>

</head>

<body>

 

<img src="volkan.gif" style="width: 8cm; height: 10cm">

 

</body>

</html>

Not: width ve height özelliklerini Netscape desteklemiyor.

| 1 | | 2 | | 3 |
CSS Videoları     Diğer CSS Dökümanları     GERİ
 
 
© Copyright 2007 Webdekurs
Egegen İnternet Hizmetleri