Web sayfalarında birden fazla etiketi tarayıcı ekranında özgürce konumlandırmak için position özelliği kullanılır. Bu özellik yardımıyla etiketlerin hareket etmesi sağlanır. Özellikle animasyonlar ve oyunlar geliştirmek istediğinizde bunlar çok işinize yarayacaktır. Bu uygulamada core mvc projesi oluşturarak web sayfasında bir okul bahçesi tanımlayacağız. Tanımladığımız okul bahçesinde öğrencilerin hareket etmesi için konumlandırma işlemlerini gerçekleştireceğiz.
CssPozisyonBilgileri isminde boş bir proje oluşturalım.
Proje ismi üzerinde farenin sağ tuşuna basalım ve ekrana gelen içerik menüsünde yer alan Add komut grubunu seçelim. Ekrena gelen komutlardan New project komutunu seçerek yeni bir proje oluşturalım.
Add a new project diyalog pencersinde Dil olarak c#, platform olarak All platforms, ortam olarak Web seçelim. Ekrana gelen şablonlardan Asp.Net Core Empty seçelim. Next diyerek devam edelim.
Proje ismi olarak CssCoreMvc yazalım. Next diyerek devam edelim. Ekrana gelen pencerede Framework olarak .Net 8,0 kalabilir. Configure for Https onay kutusunu iptal edelim. Create diyerek projeyi oluşturalım.
Böylece boş bir Core projesi oluşturmuş olduk. Şimdi projeyi çalıştıralım. Web sayfasında "Hello World" mesajını görürsünüz. Projede herhangi bir web sayfası olmamasına rağmen bu mesaj nereden geldi. Bu mesaj program.cs isimli ayar dosyasının içinde yazan kodlardan dolayı gelir. Burada yer alan kodlar aşağıda yer almaktadır.
var builder = WebApplication.CreateBuilder(args);
var app = builder.Build();
app.MapGet("/", () => "Hello World!");
app.Run();
Burada "Hello World" yazısını "Merhaba Dünya" diyerek değiştirelim ve projeyı çalıştıralım. Tarayıcıda "Merhaba Dünya" yazısını görürsünüz. Projede web sayfası olmamasına rağmen bu mesaj tarayıcıda nasıl görüntülendi. Proje aslında tipik bir Console uygulaması. Sonuç Dos ekranında değil tarayıcıda görüntülenmektedir. Eğer bu mesajı tarayıcıda görebiliyorsanız projenin hatasız bir şekilde oluştuğunu söyleyebiliriz.
Sıra geldi projede MVC platformlarını kurma işlemini yapmaya. Öncelikle program.cs isimli dosyada projenin Mvc projesi olduğunu belirtelim.
var builder = WebApplication.CreateBuilder(args);
builder.Services.AddMvc();
var app = builder.Build();
app.Run();
Daha sonra projeye M harfini temsil eden Models, V harfini temsil eden Views, C harfini temsil eden Controllers klasörlerini ekleyelim. Controllers klasörü içine HomeComtroller isminde bir controller dosyası ekleyelim. Dosyamızın içeriği aşağıdaki gibi olacaktır.
using Microsoft.AspNetCore.Mvc;
namespace ShowMassage.Controllers
{
public class HomeController : Controller
{
public IActionResult Index()
{
return View();
}
}
}
Burada dosya ismi verilirken şunlara dikkat etmeliyiz. Proje ilk çalıştırıldığında hangi bölüme gidecekse o bölüm Controller kısmında belirtilir. Bu dosyada proje ilk Home kısmına gidecektir. Controller yazısı ise o dosyanın hangi amaç için kullanıldığını belirtir. Controller dosyası bir view çalıştırır. Burada view dosyamız Index dosyasıdır. Şimdi bu dosyayı Views klasörü altında oluşturalım. Bu klasör içinde bir Razor View dosyası oluşturulur. Dosyayı şöyle düzenleyelim.
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pozisyon İşlemleri</title>
<style>
/*css tanımlamaları burada yapılır*/
</style>
</head>
<body>
</body>
</html>
Projemizi çalıştıralım. Web sayfası çalışmayacak ya da wwwroot klasörü içinde yer alan dosyayı gösterecektir. Çünkü projenin başlangıç dosyasını belirtmedik. Bunu program.cs tarafında şöyle yapmalıyız.
var builder = WebApplication.CreateBuilder(args);
builder.Services.AddMvc();
var app = builder.Build();
app.MapControllerRoute(
name: "default",
pattern: "{controller=Home}/{action=Index}"
);
app.Run();
Tekrar çalıştıralım projeyi. Projede controller ile belirtilen Index dosyası views klasöründe home klasörü altında aranacaktır. Ancak bu klasör olmadığı için hata verecektir. Klasörümüzü oluşturalım ve Index dosyasını bunun altına kopyalayalım. Projeyi çalıştıralım. Hatasız bir şekilde sonucu görürsünüz.
Okulun bahçesine ait genişliği ve yüksekliği belli bir kutu çizelim. Web sayfalarında kutu oluşturma işlemi için div etiketinden yararlanılır. Div etiketini id değeri okul olacak şekilde oluşturalım.
<div id="okul">
</div>
Bahçenin genişliğini ve yüksekliğini belirleyelim. Etiketlere ait bu tip özellikleri belirlemek için css tanımlamalarından yararlanılır. Genişliği belirlemek için width, yükekliği belirlemek için height özelliklerinden yararlanılmaktadır. Genişliği 800, yüksekliği 500 olan bahçenin alanını tanımlayalım. Etikete ait id değeri verilen bir elemana ait css özelliği tanımlanırken id değerinin başına #(diyez) işareti konulur. Tanımlama işlemini gerçekleştirelim.
<style>
/*css tanımlamaları burada yapılır*/
#okul {
width: 800px;
height: 500px;
}
</style>
Projeyi kaydedip çalıştıralım. Ekranda bahçeyi göremezsiniz. Çünkü bahçeye ait plan çizimi yapıldı. Ancak henüz belirleyici özellik kullanılmadı. Bahçenin arkaplan rengini belirleyelim. Bu işlemi gerçekleştirmek için backgroud-color özelliğinden yararlanılır. Bu özellik kullanılarak renk belirlemek için 3 farklı yöntem kullanılır. Rengin ingilizce adı, hexadecimal değeri ya da rgb() komutu kullanılır. Biz burada ingilizce tanımı olan lightgray ismini kullanacağız. İşlemi yapalım.
#okul {
width: 800px;
height: 500px;
background-color: lightgray;
}
Projeyi kaydedip çalıştıralım. Bahçenin sol üst tarafta konumlandığını görürsünüz. Dikkat ettiyseniz kutunun solunda ve üstünde bir miktar boşluk yer almaktadır. Biz bu boşlukların olmasını istemiyoruz. Tarayıcı ekranına ait özelliklerin belirlendiği işlemler için body etiketi kullanılır. Bir web sayfasında etiket sadece bir defa kullanılıyorsa o etikete ait css tanımlanırken etikenin ismi kullanılabilir. Ekranda yer alan bir etikete ait boşlukları belirlemek için margin özeiiliğinden yararlanılır. Şimdi bu tanımlamayı yapalım.
body {
margin: 0;
}
Projeyi kaydedip çalıştıralım. Kutunun boşluksuz bir şekilde ekranın sol üst köşesinde yer aldığını görürsünüz. Bahçenin ekranın ortasında yer almasını istiyoruz. Bu işlemi gerçekleştirmek için yine margin özelliğinden yararlanılır. Şimdi kutuya ait bu özelliği tanımlayalım.
#okul {
width: 800px;
height: 500px;
background-color: lightgray;
margin: auto;
}
Projeyi kaydedip çalıştıralım. Bahçenin ekranın ortasında, boşluklar olmadan, konunlandığını görürsünüz. Öğrenciler kaçmasın diye bahçenin etrafını çitlerle örelim. Web sayfalarında etikete ait kenarlıkları belirlemek için border özelliğinden yararlanılır. Şimdi bu tanımlamayı yapalım.
#okul {
width: 800px;
height: 500px;
background-color: lightgray;
margin: auto;
border-width: 6px;
border-style: dashed;
border-color: #333;
}
Yukarıda yer alan border tanımlamasını tek satırda aşağıdaki gibi tanımlayabilirsiniz.
border: 6px dashed #333;
Böylece 3 satır yerine tek satır kullanabilirsiniz. Projeyi kaydedip çalıştıralım. Bahçemiz hazır. Öğrencileri okula alabiliriz. Öğrencilerin kılık kıyafetleri aynı olduğu için herbir öğrenciyi ayrı ayrı tanımlamak yerine aynı olan özelliklerini bir arada bulundurmak amacıyla class kullanılır. Böylece yapılan bir tanımlama tüm öğrenciler için geçerli olacaktır. Ancak her öğrencinin kendine has özellikleri olacağı için id değerininde olması gerekir. İlk öğrencimizi tanımlayalım.
<div id="okul">
<div class="ogr" id="ogr1">Öğr1</div>
</div>
Projeyi kaydedip çalıştıralım. İlk öğrencinin bahçenin içinde olduğunu görürsünüz. Şimdi diğer öğrencileri tanımlayalım. Biz burada 4 tane öğrenci tanımlayacağız.
<div id="okul">
<div class="ogr" id="ogr1">Öğr1</div>
<div class="ogr" id="ogr2">Öğr2</div>
<div class="ogr" id="ogr3">Öğr3</div>
<div class="ogr" id="ogr4">Öğr4</div>
</div>
Projeyi kaydedip çalıştıralım. Öğrencilerin bahçede arka arkaya sıralandığını görürsünüz. Şimdi öğrencilere ait temel özellikleri tanımlayalım. Öğrencilerin her birini bir daire içinde göstereceğiz. Bahçede değişik yerlerde olmasını sağlayacağız. Öncelikle öğrencileri genişliği ve yüksekliği 50 olan kutular içine alalım. Tüm öğrenciler için özellikler aynı olduğu için class değerinden yararlanacağız. Class ismi verilen bir etikete css tanımlarken ismin başına .(nokta) konulur. Tüm öğrencilere ait kutu tanımlamasını yapalım.
.ogr {
width: 50px;
height: 50px;
}
Projeyi kaydedip çalıştıralım. Öğrenciler arasında belirli bir mesafenin yer aldığını görürsünüz. Biz burada tek tanımlama yapmamıza rağmen tüm öğrenciler bu tanımlamadan etkilendi. Bunun sebebi etiketlere ait tanımlı olan class ismidir. Kutuların arka plan rengini açık mavi yapalım.
.ogr {
width: 50px;
height: 50px;
background-color: lightblue;
}
Projeyi kaydedip çalıştıralım. Tanımladığımız kutular içinde öğrenci isimlerini görürsünüz. Ancak kutuların rengi aynı olduğu için hala öğrenciler belirli değil. Kutular için genişliği 1, stili tek çizgi, rengi mavi olan bir kenarlık oluşturalım.
.ogr {
width: 50px;
height: 50px;
background-color: lightblue;
border: 1px solid blue;
}
Projeyi kaydedip çalıştıralım. Öğrencilerin kutular içinde yer aldığını görürsünüz. Ancak öğrenci isimleri kutunun sol üst köşesinde yer almakta. İsimlerin yatayda ve dikeyde kutunun ortasında yer almasını sağlayalım.
.ogr {
width: 50px;
height: 50px;
background-color: lightblue;
border: 1px solid blue;
text-align: center;
line-height: 50px;
}
Projeyi kaydedip çalıştıralım. Öğrenci isimlerinin kutuların ortasında yer aldığını görürsünüz.Öğrenciler için kullanılan kutuların şeklini daire haline dönüştürelim. Bunun için css özelliklerinden border-radius kullanılır. Bu özelliği kullanalım.
.ogr {
width: 50px;
height: 50px;
background-color: lightblue;
border: 1px solid blue;
text-align: center;
line-height: 50px;
border-radius: 50%;
}
Projeyi kaydedip çalıştıralım. Kutuların daire şeklini aldığını görürsünüz. Teneffüslerde öğrenciler böyle arka arkaya dolaşacak değiller ya. Öğrencilerin bahçenin değişik noktalarında yer almasını sağlayalım. Öğrencilerin bulunacağı konumlar için noktalar belirleyelim.
A noktası olarak bahçenin sol alt köşesini belirleyelim.
B noktası olarak bahçenin sağ alt noktasını belirleyelim.
C noktası olarak bahçenin sağ üst köşesini belirleyelim.
D noktası olarak bahçenin sağ orta noktasını belirleyelim.
Birinci öğrenci A noktasında yer alsın. Bu arada her öğrenci için farklı noktalar belirleneceği için öğrencilere ait id değerleri üzerinden işlem yapılacaktır. Konum tanımlamasını yapalım.
#ogr1 {
left: 0;
bottom: 0;
}
Projeyi katdedip çalıştıralım. Birinci öğrencinin A noktasına konumlanmadığı görülür. Çünkü web sayfasında tüm etiketlerin pozisyonu varsayılan olarak statiktir. Herhangi bir yere hareket edemez. Etiketleri istenilen yere konumlandırmak için position özelliğinin absulute değeri kullanılır. Tüm öğrencilerin hareket etmesini sağlayacağımız için öğrencilerin class değerine bu özellik eklenmelidir.
.ogr {
width: 50px;
height: 50px;
background-color: lightblue;
border: 1px solid blue;
text-align: center;
line-height: 50px;
border-radius: 50%;
position: absolute;
}
Projeyi kaydedip çalıştıralım. Birinci öğrencinin okuldan kaçtığını görürsünüz. Ayrıca ikinci ve üçüncü öğrencinin ise yok olduğunu görürsünüz. Sadece dördüncü öğrencinin okulda olduğu görülmektedir. Öncelikle şunu belirtelim. İkinci ve üçüncü öğrenci yok olmadılar. Dördüncü öğrencinin arkasına saklandılar. Peki, birinci öğrenciyi okulun bahçesine nasıl alacağız. Öncelikle öğrencilerin okuldan kaçmaması için okulda bir görevli tanımlamamız gerekir. Hemen tanımlama işlemini gerçekleştirelim.
<div id="okul">
<div class="ogr" id="ogr1">Öğr1</div>
<div class="ogr" id="ogr2">Öğr2</div>
<div class="ogr" id="ogr3">Öğr3</div>
<div class="ogr" id="ogr4">Öğr4</div>
<div class="ogr" id="gorevli">Gör</div>
</div>
Projeyi kaydedip çalıştıralım. Bu sefer dördüncü öğrenci de kayboldu. Ne oldu peki? Tabi ki görevlinin arkasında yer almaktadır. Bu arada görevlinin özelliklerini öğrenciden farklı olmasını sağlayalım ve görevliye ait özellikleri belirleyelim.
Arkaplan rengini kırmızı yapalım.
Metin rengini beyaz yapalım.
Font özelliğini bold yapalım.
Font stilini italik yapalım.
Font büyüklüğünü 20 yapalım.
Şimdi bunları tanımlayalım.
#gorevli {
background-color: red;
color: #fff;
font-weight: bold;
font-style: italic;
font-size: 20px;
}
Hala birinci öğrenci okulda değil. Web sayfalarında etiketlerin position özelliğini absolute yaparsanız etiketler tarayıcı ekranına göre konumlanırlar. Tanımlanan kutunun içinde yer almasını istiyorsanız kutunun position özelliğini relative yapmanız gerekir. Okul bahçesine ait kutunun özelliklerine bunu ekleyelim.
#okul {
width: 800px;
height: 500px;
background-color: lightgray;
margin: auto;
border: 6px dashed #333;
position: relative;
}
Projeyi kaydedip çalıştıralım. Birinci öğrencinin A noktasında yer aldığını görürsünüz. İkinci öğrenciyi B noktasına gönderelim.
#ogr2 {
right: 0;
bottom: 0;
}
Projeyi kaydedip çalıştıralım. İkinci öğrencinin B noktasında yer aldığını görürsünüz. Üçüncü öğrenciyi C noktasına gönderelim.
#ogr3 {
right: 0;
top: 0;
}
Projeyi kaydedip çalıştıralım. Üçüncü öğrencinin C noktasında yer aldığını görürsünüz. Dördüncü öğrenciyi D noktasına gönderelim.
#ogr4 {
right: 0;
top: 225px;
}
Projeyi kaydedip çalıştıralım. Dördüncü öğrencinin D noktasında yer aldığını görürsünüz. Bu arada top değerinin 225 olduğuna dikkat ediniz. Bu değerin nasıl bulunduğunu size bırakıyorum. Okullarda görevli personel okul kapısının dışında bekler. Öğrencilerin dışarı çıkmasının engellenmesinin yanında dışarıdan yabancı kimselerin okula girmesini engeller. Peki bunu nasıl yapacağız. Bu işlemi gerçekleştirmek için yine css özelliğinden yararlanacağız. Position özelliğinde yer alan fixed değerini kullanacağız. Şimdi bu tanımlamaları yapalım.
#gorevli {
background-color: red;
color: #fff;
font-weight: bold;
font-style: italic;
font-size: 20px;
position: fixed;
}
Projeyi kaydedip çalıştıralım. Görevli personelin hala bahçede olduğunu görürsünüz. Ancak personele ait konum bilgilerini değiştirerek hareket etmesini sağlayabilirsiniz. Personeli kapını önüne alalım.
#gorevli {
background-color: red;
color: #fff;
font-weight: bold;
font-style: italic;
font-size: 20px;
position: fixed;
top: 10px;
left: 200px;
}
Projeyi kaydedip çalıştıralım. Görevli personelin bahçenin dışına konumlandığını görürsünüz. Şimdi okula 2 öğrenci daha ekleyelim.
<div id="okul">
<div class="ogr" id="ogr1">Öğr1</div>
<div class="ogr" id="ogr2">Öğr2</div>
<div class="ogr" id="ogr3">Öğr3</div>
<div class="ogr" id="ogr4">Öğr4</div>
<div class="ogr" id="gorevli">Gör</div>
<div class="ogr" id="ogr5">Öğr5</div>
<div class="ogr" id="ogr6">Öğr6</div>
</div>
Projeyi kaydedip çalıştırdığımızda kapının önünde hangi öğrenci görüntülenir. Hangisi onun arkasında kalır. En son hangi öğrenci girdiyse o öğrenci görüntülenir. Diğer öğrenci onun arkasında kalır, gizlenir. Bu uygulamada Öğr6 görüntülenir. Peki Öğr5 nasıl görüntülenir. Yine css özelliğinden yararlanacağız. Web sayfasında tüm etiketler üst üste görüntülenir. En son tanımlanan etiket en üstte yer alır. Etiketlerin görüntülenme sırası z-index özelliğiyle belirlenir. Tüm etiketlerin varsayılan etiket sırası sıfırdır. Eğer Öğr5 en önde olmasını istiyorsak z-index değerini sıfırdan büyük tanımlamamız gerekir. Şimdi bunu yapalım.
#ogr5 {
z-index: 1;
}
Bu arada div etiketinin daire şeklinde görüntülenmesi için kullanılan css özelliği border-radius idi. Ancak bu özellik tüm tarayıcılarda çalışmamaktadır. Aşağıda farklı tarayıcılar için border-radius özelliği tanımlanmıştır.
.ogr {
width: 50px;
height: 50px;
background-color: lightblue;
border: 1px solid blue;
text-align: center;
line-height: 50px;
/*Mozilla*/
-moz-border-radius: 50%;
/*Safari-Opera*/
-webkit-border-radius: 50%;
/*Edge-Chrome*/
border-radius: 50%;
position: absolute;
}
Artık projeyi kaydedip çalıştırabilirsiniz. Konu ile ilgili soru ve görüşlerinizi bizimle paylaşabilirsiniz.