Table Kullanmadan, DIV ve CSS ile Site Hazırlamak.

26/4/2007
Merhaba bu makalemde Microsoft Expression Web ile DIV ve CSS kullanarak site yapımını anlatacağım. Aynı zamanda ilk kez ASP.NET kontrollerini kullanmayı, database’den veri çekmeyi bu makalede inceleyeceğiz.

Neden tablosuz tasarım?

Her şeyden önce tablosuz site, yüzde 25 ile 50 arasında daha az boyutlu oluşmaktadır. Bu da daha az yükleme süresi demektir. Kullanıcıların 20 sn’de bir site hakkında kararlarını verdiklerini düşünürsek, bu çok iyi bir sebep.

Arama motorlarında tablosuz tasarımlar daha üst sıralarda yer almaktadır.

Tamamen CSS ile bağlanmış bir sitenin bakımı daha kolaydır.

Site daha esnek bir yapıdadır.

Bu sebeplerden dolayı CSS ile tablosuz bir tasarımın yararlı olduğunu düşünüyorum.

Başlayalım.

Siteyi şu şekilde tasarladım.

Site için lokalimde açtığım klasörün içinde üç klasör daha açtım. Biri “Logovs” diğeri “images” ve “db”. Logovs alışkanlığım olarak her zaman açtığım bir klasördür. Bu klasörde sitenin yapımında kullandığım kaynak dosyalarını tutuyorum. “images” de ise sitenin kullandığı imajlar bulunacak. “db”’de ise database bulunacak.

Site için gerekli imajları önceden hazırlayıp images klasörüne koydum.

İlk önce yeni bir site açarak işe başlıyoruz.

General’dan “Empty Web Page”i seçiyoruz. Browse ile sitemizin lokaldeki yerini gösterip, OK ile işlemi tamamlıyoruz.

Sitemizi EW’ye tanıttığımıza göre ilk işimiz yeni bir sayfa açıp tasarımı uygulamaya başlamak.

Bu site içinde Master Page kullanacağız. Header, navigasyon, navigasyon altındaki imaj alanı, sol kısım ve footer, Master Page’de bulanacaklar. Sağ içerik alanı ise her sayfada değişiklik gösterecek. Bu benim öngördüğüm bir yerleşim. İstenir ise sol alanda, navigasyon altındaki alanda değişebilir düşünülebilir.

Hızlıca, yeni bir Master Page ve CSS sayfası açıyoruz.

Sayfaları dummy.master ve dummy.css olarak kaydediyorum.

dummy.css’i dummy.master’a bağlıyorum.

EW şu şekilde kod üretiyor

Bunun dışında birde yaptıklarımızı kontrol edebilmek için Master Page’den türetilmiş bir aspx sayfası yaratalım. Ben sayfayı draft.aspx olarak kaydettim. F12’ye basarak tasarımızı browser’ınızda kontrol edebilirsiniz.

Bu bağlantıyı doğru kurduysak sitemize başlayabiliriz. İlk adım CSS’de BODY kuralını hazırlamak. dummy.css içinde body’yi yazıyoruz. EW, CSS yazarken size çok büyük kolaylıklar sağlayacaktır.

Tasarımın background’unu olabildiğince ince ve uzun olarak kesip çıkardığımıza göre bununla CSS’imizi yazabiliriz. Bu uzun imajın boyundan daha uzun görünümler için imajın en altındaki renk kodu da BODY’mizde background-color olacak.

body{
background-image:url(‘images/back.jpg’);
background-repeat:repeat-x;
background-color:#f8f8f8;
}

Sitemizde kullanacağımız font tipi Arial olacak ve en çok da 12px boy ve gri rengi kullanacağız. Bu sebeple bunları BODY’de yazabiliriz. Farklılık gösterecek fontlar için başka CSS kuralları yaratabiliriz.

body{
background-image:url(‘images/back.jpg’);
background-repeat:repeat-x;
background-color:#f8f8f8;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
color:#535353;
margin-top:0px;
}

Şimdi sitemizi oturtmaya yukarıdan aşağıya devam edebiliriz. Headerın navigasyona kadar olan bölümünü tek parça halinde çıkarıyoruz. Ve CSS’ni yazıyoruz.

#header{
width:968px;
position:relative;
background-image:url(‘images/header.jpg’);
background-repeat:no-repeat;
height:109px;
margin-left:auto;
margin-right:auto;
}

CSS’in hazır kuralları dışında, kural isimlerini biz kendimiz belirliyoruz ama mantıklı isimler vermekte yarar var.

CSS’i inceleyelim biraz. Eğer CSS’i id ile ilişkilendireceksek ismin başında “#” kullanıyoruz. Böylece bir kez kullanılacak bir CSS yazmış oluyoruz. Eğer yazacağımız CSS farklı yerlerde kullanılacaksa class ile bağlamamız gerekiyor. Bu tip durumlarda ismin başında “.” kullanıyoruz. Örnekte olduğu gibi header’ı bir kez kullanacağız ve DIV’e bunu id ile vereceğiz bu sebeple “#” kullanıyoruz. Ama sıkça kullanılacak bir font için CSS yazacak olsaydık bunu “.” İle başlatmalıydık.

Sitillerinizi belirlerken elle yazmak zorunda değilsiniz. CSS kutusunu kullanarak da CSS’inizi kontrol edebilirsiniz.

Header için CSS kuralı hazır olduğuna göre bunu kullanacağımız DIV’i oluşturalım. ASP.NET için çalışıyorsak tasarımımızın kodları form tag’ının içinde yer almalı.

Bunu yapmanın en kolay yolu Split görünümündeyken, form tag’ının altına girmek;

ve Toolbox>HTML>Tags altındaki “div”i buraya sürükleyip bırakmak.

Şimdi CSS kuralını div’e bağlamalıyız. Div seçiliyken Apply Styles kutusunda header kuralına tıklayarak div’i CSS’e bağlıyoruz.

Sonuç.

Şimdi navigasyonu oluşturmaya başlayalım. Navigasyonun bulunacağı background’u ile bir bir div hazırlayalım. Master Page’de header’in hemen altına yeni DIV tag’ımızı ekliyoruz.

Şimdi bu yeni DIV için CSS kuralı yazıyoruz.

#navBack{
width:968px;
height:36px;
background-image:url(‘images/navBack.jpg’);
background-repeat:no-repeat;
position:relative;
margin-left:auto;
margin-right:auto;
padding-right:4px;
}

DIV’imizi CSS ile bağlıyoruz.

Şimdi Menümüzü oluşturalım. Bu aşamada artık biraz ASP.NET kontrollerini kullanmaya başlayabiliriz. navBack DIV’nin içine Toolbox>ASP.NET Controls>Navigation’daki Menu kontrolünü sürükleyip bırakıyoruz.

Desin görünümündeyken Menü’ye sağ klik yapıp Show Common Control Tasks’ı seçiyoruz.

Menümüzü statik veya dinamik olarak oluşturabiliriz. Biz bu örnekte statik çalışacağız.

Menu seçiliyken tab properties kutusundaki Layout seçeneğinde Orientation’ı Vertical’dan Horizontal’a çeviriyoruz.

Şimdi Common Menu Tasks’da Edit Menu Items’a tıklıyoruz.

Açılan Menu Item Editor’deki ikonuna tıklayarak menünün elemanlarını ekliyoruz.

Menu tasarımında imaj kullandığımız için, her menü item’ının “Text” ve “Value” değerlerini silip “ImageUrl”’ye buton imajlarımızı giriyoruz. Bu işlemleri alt alta her item için yapıyoruz.

Menü item’ları yan yana yerlerini aldıklarında aralarındaki boşluklar bizim tasarladığımızdan farklı görünüyor. Bunu çözmek için menümüzün tümüne gerçek boyunu veriyoruz. Bunu menu seçiliyken Tag Properties kutusundan yapıyoruz. Böylece menü bizim istediğimiz gibi sıkışmış oluyor.

Diğer bir sorun ise menünün browserlardaki görünüşü. Firefox’da sorunsuz çalışan menü Internet Explorer 6.0’da üstten 1 pixellik boşluk yaratıyor.

Şimdi bu sorunu çözmek için CSS yazalım ve bu CSS’i menu item’a bağlayalım.

.menuItem{
margin-top:0px;
_margin-top:-1px;
}

Bu CSS kuralında şöyle bir hile kullandık. IE için menüyü 1 pixel yukarı çekmemiz gerekiyordu. Zaten sıfırda olduğu için “-1 px” vermeliydik. Ama bu seferde Firefox bozulacaktı. Margin’in başına “_” koyarak bunu Firefox’un anlamasını engelledik. Böylece Firefox magrini sıfır görürken IE “-1” görüyor.

Şimdi menümüzün alt basamaklarını hazırlayabiliriz. İlk önce Menu Item Editor’ü açıyoruz. Menüye sağ klik Edit Menu Items’lada açabilirsiniz. Sırasıyla alt menusu olanları ekliyoruz.

EW alt menü görünce varsayılan olarak bir ok koyuyor. Bunun çıkmasını istemiyorsanız Tag Properties kutusunda “StaticEnableDefaultPopOutImage”’i False’a çevireceksiniz.

Şimdi bu alt menülerin görünüşlerini ayarlamamız gerekiyor. Bence bunun en kolay yolu CSS. Normal görünüşleri ve mouse üzerine geldiğindeki görünüşleri için iki CSS kuralı yazıyoruz.

.dynamicMenuItem{
background-color:#454545;
margin:1px;
height:30px;
width:100%;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
color:white;
text-align:left;
text-indent:10px;
padding-right:10px;
}

.dynamicMenuItemHover{
background-color:#00acda;
margin:1px;
height:30px;
width:100%;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
color:white;
text-align:left;
text-indent:10px;
padding-right:10px;
}

Menünün Tag Properties kutusunu kullanarak, CSS’leri bağlıyoruz. “dynamicMenuItem”’ı “DynamicMenuItemStyle” ile; “dynamicMenuItemHover”’ı “DynamicHoverStyle” ile bağlıyoruz.

Tüm bunların sonunda EW’nin bizim için çıkardığı kod alttaki gibidir.

Görünüş;

Devam edelim sırada header’in altındaki görsel alan var. Bunun için DIV yaratıyorum ve bir CSS kuralı yazıp bağlıyorum.

#altHeader{
background-image:url(‘images/altHeader.jpg’);
background-repeat:no-repeat;
width:968px;
height:215px;
margin-left:auto;
margin-right:auto;
}

Sırada içerik alanı var. Bu alan iki kolondan oluşuyor. İlk önce bu iki kolonu içinde tutacak DIV’i yaratıyorum ve bir CSS kuralı yazıp bağlıyorum.

#mainContainer{
background-image:url(‘images/containerBack.jpg’);
background-repeat:repeat-y;
width:968px;
margin-left:auto;
margin-right:auto;
padding-bottom:20px;
}

Şimdi içerik alanının sol ve sağ kolonlarını hazırlayacağız. Main Container’in içinde iki tane DIV yaratıp bunlar için CSS’lerini hazırlıyoruz ve bağlıyoruz.

#leftContainer{
position:relative;
width:306px;
margin-left:10px;
left:0px;
top:10px;
float:left;
}

#rightContainer{
position:relative;
width:609px;
left:30px;
top:10px;
}

Şimdi sol tarafın içeriğini oluşturalım. News başlığını hazırlıyoruz.

#newsHeader{
background-image:url(‘images/headerNews.jpg’);
background-repeat:no-repeat;
width:52px;
height:10px;
}

Başlığın altında haberler bölümümüz olacak bunu database’den dinamik alalım. Database olarak ben Microsoft Office Access 2003 kullanacağım. Access 2003 ‘ü açıyoruz. Yeni butonuna basıyoruz açılan New File alanında Blank Database’i seçiyoruz.

Database’i lokale kaydeditoruz. Ben projenin klasöründe “db” ismindeki klasöre “dummy.mdb” olarak kaydettim. Karşımıza seçenek penceresi gelecek. Buradaki wizardı kullanıyoruz.

Bu projede tek ihtiyacımız olan ID ve yazıların olacağı alan. Bu sebeple ben personal’da Guests’de GuesID ve Notes’u seçiyorum.

İsim verip bitiriyorum.

Başlıkları değiştirip haberlerimizi giriyoruz.

Database ile işimiz bu kadar programı kapayıp, çıkabiliriz.

EW’ye geri dönüyoruz. Database’imize örnek haberlerimizi yerleştirdiğimize göre şimdi bunları çekmemiz gerekiyor. Code görünümüne geçiyoruz. BODY’nin altındaki FORM tagının hemen altına Toolbox>ASP.NET Controls>Data altındaki “AccessDataSource” sürükleyip bırakıyoruz.

Design görünümüne dönüyoruz. Artık sayfamızın üstünde bir AccessDataSource kutucuğu var. Ya bunun üstüne sağ klik, “Show Common Control Tasks” a basarak ya da üstüne geldiğimizde beliren oka tıklayarak “Common AccessDataSource Tasks” ı açıyoruz.

Configure Data Source’a basıyoruz. Açılan pencerede Browse ile database’imizi buluyoruz.

Next ile devam edince database seçim ekranı geliyor News’ı seçip devam ediyoruz.

Seçim için test ekranı geliyor. Test Query ile seçimi kontrol ediyoruz ve finish ile işlemi tamamlıyoruz.

EW şu şekilde kod üretti.

<asp:AccessDataSource runat=”server” id=”AccessDataSource1″ DataFile=”db/dummy.mdb” SelectCommand=”SELECT [News] FROM [News]”></asp:AccessDataSource>

Şimdi bu verileri tasarıma aktaracağız. Bunun için newsHeader DIV’nin altına, Toolbox>ASP.NET Controls>Data altındaki “DataList”i sürükleyip bırakıyoruz.

Design görünümünde sağ klik yapıp “Show Common Control Tasks” a tıklayarak “Common DataList Task”ı açıyoruz. Aynı işlemi DataList’in üstüne geldiğinizde beliren oka tıklayarak da yapabileceğinizi unutmayın. Choose Data Source’dan database’imizi seçiyoruz.

Draft.aspx ile nasıl göründüğünü kontrol ediyoruz. (F12)

Haberlerin başına koyduğu News başlığı dışında her şey tamam gözüküyor. Split görünümüne geçiyoruz. DataList’e tıklayarak kodların seçilmesini sağlıyoruz ve oradaki News satırını siliyoruz.

Böylece haberler bölümünü de bitirmiş oluyoruz.

Şimdi ana sayfa galeri bölümünü oluşturacağız. Bunun için DataList’in hemen altına bir DIV yerleştiriyoruz. Bu galeri başlığını taşıyacak olan DIV. Bunun için CSS yazıp DIV’e bağlıyoruz.

#galleryHeader{
background-image:url(‘images/headerGallery.jpg’);
background-repeat:no-repeat;
width:73px;
height:10px;
margin-bottom:5px;
}

Galeri thumbnaillerini hazırlarken imajların değişebileceğini düşünerek, arka planı ayrı; imajları ayrı düşüneceğiz. Thumbnail arka planı için galleryHeader’in altına DIV yerleştiriyoruz. CSS yazıp bu DIV ile bağlıyoruz.

#thumbBack{
background-image:url(‘images/thumbBack.jpg’);
background-repeat:no-repeat;
width:142px;
height:109px;
left:2px;
float:left;
padding:6px 0 0 6px;
}

Şimdi aynı şeyi sağ imaj için yapacağız.

#thumbBackRight{
background-image:url(‘images/thumbBack.jpg’);
background-repeat:no-repeat;
position:relative;
width:142px;
height:109px;
left:15px;
padding:6px 0 0 6px;
}

Bu iki DIV bir kez daha kopyalayıp asıllarının altına yapıştıracağız.

Sonuç.

Artık imajları girebiliriz. DIV’lerin içine tek tek imajları giriyoruz.

Sonuç.

Artık footer’a başlıyabiliriz. Main Container DIV’nin altına yeni bir DIV açıyoruz. Buraya footer’ın üstündeki bandı yerleştireceğiz. CSS’i yazıp DIV’le bağlıyoruz.

#footerLine {
background-image:url(‘images/footerLine.jpg’);
background-repeat:no-repeat;
width:968px;
margin-right:auto;
margin-left:auto;
height:13px;
margin-bottom:-2px;
}

FooterLine DIV’nin altına bir DIV daha ekliyoruz. Bu footer’ımız olacak.

#footer{
background-image:url(‘images/footerBack.jpg’);
background-repeat:no-repeat;
width:968px;
height:54px;
margin-right:auto;
margin-left:auto;
color:white;
letter-spacing:1px;
padding-top:2px;
}

Footer’ımızı oluşturduğumuza göre şimdi de footer linklerini oluşturmamız gerekiyor. Bunun için ilk önce BODY’nin altına sitenin genel link kurallarını yazıyoruz.

a:link{
color:blue;
text-decoration:underline;
}

a:visited{
color:blue;
text-decoration:underline;
}

a:hover{
color:blue;
text-decoration:none;
}

Şimdi footer’in linklerini yazabiliriz.

#footer a:link{
color:white;
text-decoration:none;
}

#footer a:visited{
color:white;
text-decoration:none;
}

#footer a:hover{
color:white;
text-decoration:underline;
}

Master Page’imizi tamamlamış olduk.

Sonuç.

Şimdi Master Page’de ContentPlaceHolder ayarlarını yapmamız lazım. ContentPlaceHolder’i rightContainer DIV’nin içine yerleştiriyoruz.

Master Page bittiğine göre şimdi sayfa üretmeye başlayabiliriz. Bu örnekte de sadece ana sayfayı hazırlayıp bırakacağız.

Menüden File>New>Page. General>Create From Master Page>OK.
Browse>dummy.master.
İşlemleri sonucunda bir adet aspx sayfası yaratıyoruz. Bunu default.aspx olarak kaydedelim.

Default.aspx’de ContentPlaceHolder alanına tıklayarak sağındaki oku görünür yapalım.

Create Custom Content’e tıklayarak düzenlenir alanımızı hazırlamış oluyoruz.

Split görünümüne geçerek “<%@ Page Language=”C#”” satırına tıklıyoruz. Bu satırdaki title alanını “Dummy Firm Home Page” ile değiştiriyoruz.

<%@ Page Language=”C#” masterpagefile=”dummy.master” title=”Dummy Firm Home Page” %> <asp:Content id=”Content1″ runat=”server” contentplaceholderid=”ContentPlaceHolder1″> </asp:Content>

Şimdi default page’i oluşturmaya başlayabiliriz. Buradaki tüm çalışmalar Content içinde olacak.

Welcome başlığı için CSS yazıyoruz ve bunu DIV’e bağlıyoruz.

#welcomeHeader{
background-image:url(‘images/headerWelcome.jpg’);
background-repeat:no-repeat;
width:79px;
height:10px;
}

<asp:Content id=”Content1″ runat=”server” contentplaceholderid=”ContentPlaceHolder1″>
<div id=”welcomeHeader”></div>
</asp:Content>

Şimdi Welcome yazı alanını oluşturacağız. Aslında bu alanı galeri alanı gibi kolayca oluşturabiliriz ama o zaman sabit bir alan olacak. Oysa bu alanın yazısı zaman içinde değişebilir. Bu sebeple y yönünde uzayabilen bir çözüm düşünmeliyiz.

Welcome Header DIV’nin altına üç tane alt alta DIV açıyoruz. Her biri için CSS’leri yazıp DIV’lere bağlıyoruz.

.boxTop{
background-image:url(‘images/box/boxTop.jpg’);
background-repeat:no-repeat;
width:603px;
height:4px;
margin-bottom:-11px;
}

.boxMiddle{
background-image:url(‘images/box/boxMiddle.jpg’);
background-repeat:repeat-y;
width:603px;
padding:5px 0px 5px 10px;
}

.boxBottom{
background-image:url(‘images/box/boxBottom.jpg’);
background-repeat:no-repeat;
width:603px;
height:4px;
}

Box CSS’lerinde neden “#” değil de “.” kullandık? Çünkü bu CSS’leri DIV’lere id olarak değil class olarak vermek istiyoruz. Böylece defalarca bu CSS’leri kullanabiliriz. Örneğin The Day kutusunu da bu CSS kurallarıyla hazırlayacağız.

Burada Label’ı programcı arkadaşlarımıza kolaylık olması sebebi ile kullandık. Label’in içine yazılarımızı yazabiliriz.

Şimdi Welcome’ın altındaki imaj var sırada. Bir DIV daha açıyoruz. Bunun içinde CSS’i yazıp DIV’i bağlıyoruz.

#homeImg{
background-image:url(‘images/homeImg.jpg’);
background-repeat:no-repeat;
width:603px;
height:88px;
margin-bottom:10px;
}

Bu aşamada bir konuya değinmek istiyorum. Tasarımlarımızı table ile html’e geçirirken boşluk bırakmak istediğimizde oldukça değişik yöntemlere başvururduk. Fazladan satırlar, kolonlar bırakır; 1×1 lik transparan bir gif kullanırdık. (spacer.gif) Ama CSS 2.0 ve DIV tasarımı ile bunlara gerek yok. Magrinler, paddingler, ya da koordinat özellikleri ile istediğimiz boşluğu bırakabiliyoruz. DIV ile tasarım table’dan bu aşamada da üstün.

Son adımımız “The Day” kutusunu hazırlamak. Daha önce yaptığımız gibi, homeImg DIV’nin altına üç tane DIV ekliyoruz. Bunları sırasıyla box kurallarına bağlıyoruz.

İçerik yine boxMiddle’a bağlı DIV tag’ının içinde olacak. İlk önce başlık için DIV ve CSS yazıyoruz.

#theDayHeader{
background-image:url(‘images/headerTheDay.jpg’);
background-repeat:no-repeat;
width:60px;
height:10px;
}

Başlık DIV’nin altına ASP.NET image ve Label kontrolü sürükleyip bırakıyoruz. Image’in tag properties’ini kullanarak imajın URL’sini veriyoruz. Label’ın içine örnek yazımızı koyuyoruz.

<asp:Image runat=”server” id=”Image1″ ImageUrl=”images/theDay01.jpg”></asp:Image>
<asp:Label runat=”server” Text=”Label” id=”Label2″> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut lacus elit, fermentum vitae, aliquam sagittis, tincidunt ac, velit. Pellentesque ac augue at eros sodales iaculis. Etiam ac purus in nulla pretium aliquet. Curabitur vitae lorem. Etiam venenatis, risus accumsan ultrices condimentum, diam felis laoreet tellus, vitae blandit mauris elit tincidunt erat. Nunc pede ipsum, aliquet vitae, pharetra quis, cursus a, neque. Quisque sodales dapibus elit. Lorem ipsum dolor sit amet,
</asp:Label>

Sonuç.

Yazıyla imajın duruşunu düzeltmek için CSS yazıyoruz.

.theDayImage{
float:left;
margin:0px 6px 0px 0px;
}

Label’ın boyunu tag properties’den ayarlıyoruz.

Sonuç.

Aynı işlemleri bir kez de ikinci resim için yapıyoruz. Ama iki blok arasına boşluk bırakması için iki tane <br/> koyuyoruz.

<asp:Image runat=”server” id=”Image1″ ImageUrl=”images/theDay01.jpg” CssClass=”theDayImage”></asp:Image>
<asp:Label runat=”server” Text=”Label” id=”Label2″ Width=”470px”> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut lacus elit, fermentum vitae, aliquam sagittis, tincidunt ac, velit. Pellentesque ac augue at eros sodales iaculis. Etiam ac purus in nulla pretium aliquet. Curabitur vitae lorem. Etiam venenatis, risus accumsan ultrices condimentum, diam felis laoreet tellus, vitae blandit mauris elit tincidunt erat. Nunc pede ipsum, aliquet vitae, pharetra quis, cursus a, neque. </asp:Label>
<br/> <br/>
<asp:Image runat=”server” id=”Image2″ ImageUrl=”images/theDay02.jpg” CssClass=”theDayImage”></asp:Image>
<asp:Label runat=”server” Text=”Label” id=”Label3″ Width=”470px”> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut lacus elit, fermentum vitae, aliquam sagittis, tincidunt ac, velit. Pellentesque ac augue at eros sodales iaculis. Etiam ac purus in nulla pretium aliquet. Curabitur vitae lorem. Etiam venenatis, risus accumsan ultrices condimentum, diam felis laoreet tellus, vitae blandit mauris elit tincidunt erat. Nunc pede ipsum, aliquet vitae, pharetra quis, cursus a, neque.
</asp:Label>

Hata;

CSS’e genel linkleri yazınca menunun alt basamaklarındaki linkler de bozuldu.

Bunu çözmek için CSS’e şu kuralları ekliyoruz.

.dynamicMenuItem a:link{
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
color:white;
text-align:left;
text-indent:10px;
text-decoration:none;
}

.dynamicMenuItem a:visited{
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
color:white;
text-align:left;
text-indent:10px;
text-decoration:none;
}

Sonuç.

Sitemizi tamamlamış olduk. Artık elimizde programcılara teslim edebileceğimiz bir master page ve ana sayfa var. Örnek sayfaları daha da çoğaltabiliriz.

Bu makalemde tablo olmadan DIV ve CSS ile site tasarımın anlatırken ASP.NET kontrollerini ve database bağlantılarını da incelemeye çalıştım.

Teşekkürler.

İyi çalışmalar

ERBUĞ KAYA

Table Kullanmadan, DIV ve CSS ile Site Hazırlamak.

Yorum Yaz Cevabı iptal et

Son Yazılarım

Yegâneler _ İstanbul’da Bir Ejderha

Dark Gerilim

26 Yıl

25 Yıl

Salgın İstanbul

Yegâneler – Gizemli Sanatlar

24 Yıl

İnsanlık Deneyi için Goodreads Yorumları

Maderzad Palas

3.romanım “Maderzad Palas” Kırmızı Kedi Kitap tarafından yayınlandı. Tüm kitapçılarda.

Maderzad Palas Arka Kapak Yazısı