İşletmeler ve diğer kuruluşlar için web sitesi tasarımları genellikle iyi tanımlanmış marka ve pazarlama öğelerini içerir. Web sitenizin ortalamak istediğiniz bir Web sayfası varsa, HTML ve CSS (Basamaklı Stil Sayfası) kodunun bir kombinasyonunu kullanarak kendiniz yapabilirsiniz. Birçok geliştirici, merkezleme özelliklerini dikte etmek için Web sayfası öğelerinde kaydırma özelliklerini kullanır, ancak bu her zaman güvenilir değildir. Ortalanmış bir web sitesi düzeni ve kaydırma çubukları olmadan görüntülenecek bir sayfa tanımlamak için, birkaç CSS bildirimi gerekir.

1.

HTML sayfanızı oluşturun. Çalışmakta olduğunuz bir sayfanız varsa, açın. Aksi takdirde, bir metin düzenleyicide yeni bir dosya oluşturun ve ".html" uzantısıyla kaydedin. Aşağıdaki anahattı kullanın:

Sayfanın başında CSS kodu için bir bölüm ve gövdede bir öğe olduğuna dikkat edin. Sayfanın içeriği bu öğenin içine yerleştirilmelidir. Varolan bir sayfa ile çalışıyorsanız, sayfa başlığınıza bağlı ayrı bir CSS dosyasında saklanabilecek CSS kodunu bulun.

2.

Sayfa kabını CSS’de tanımlayın. İçeren öğeye stil vermek için önce CSS kodunda tanımlamanız gerekir. Sayfa başlığınızdaki stil bölümünde veya üzerinde çalışıyorsanız, ayrı bir dosyada, aşağıdaki seçiciyi ve anahattı ekleyin:

konteyner {

}

Bu, öğeyi "container" ile ID niteliği olarak tanımlar. Elemanın stil açıklamaları açılış ve kapanış parantezleri arasında görünecektir. Alternatif olarak, aşağıdaki gibi bir sınıf nitelik değerini kullanarak öğeyi tanımlayabilirsiniz:

.container {

}

Bu, aşağıdaki öğeyi tanımlar:

3.

İçeriğini ortalamak için öğeye sabit bir genişlik uygulayın. Sayfanızdaki öğeleri ortalamak için, içeren öğenin sabit bir genişliği olmalıdır. Aşağıdaki "container" elemanı için CSS braketlerinin arasına bir tane ekleyin:

en: 800 piksel;

Tasarımınıza uyacak şekilde yükseklik değerini değiştirin. Artık, öğeyi sayfa içinde ortalanmaya zorlayacak bir kenar boşluğu özelliği uygulayabilirsiniz:

marjı: otomatik;

4.

Elemanın kaymasını önleyin. Sayfanın kaydırılmasını istemiyorsanız, konteyner öğesine aşağıdaki gibi bir yükseklik özelliği uygulamanız gerekir:

yüksekliği: 90%;

Tasarımınıza uygun değeri değiştirin. Kabın içindeki elemanlar bundan daha fazla yer kaplarsa ve kaydırmayı önlemek istiyorsanız, eleman taşmasını aşağıdaki gibi gizlemeniz gerekir:

taşma: hidden;

Bu, sayfa içeriğiniz kullanıcının tarayıcısında tahsis edilen yükseklikten daha yüksek olsa bile kaydırma çubuğunun görünmesini durduracaktır.

5.

Sayfanızı kaydedin ve görüntüleyin. Bir tarayıcıda açın veya sonucu görüntülemek için sitenize yükleyin. İstediğiniz tasarıma ulaşmak için ayarlamalar yapmanız gerekebilir. İçeriği tamamlandıktan sonra, sayfasını test ettiğinizden emin olun, çünkü görünümü önemli ölçüde değişebilir.

Bahşiş

• Farklı Web tarayıcıları CSS kurallarını çeşitli şekillerde uygular, bu nedenle sayfalarınızı birden fazla test ettiğinizden emin olun.

Uyarı

• Bir Web sayfası öğesinin taşmasını gizlemek, bazı kullanıcılarınızın tüm sayfa içeriğinizi görmesini engelleyebilir.