Başlangıç

CSS ve Liste etiketleri ile En Basit Yatay Açılır Menü Yapımı

Yorum bırakın


En basit haliyle css ve html ile Yatay Açılır menü yapmak için bir adet html dosyası ve bir adette  css dosyası oluşturalım. Bu dosyaları herhangi bir metin editörü (notepad.exe) veya Dreamweaver Programı ile oluşturabilirsiniz.

  • yatayacilirmenuolustur.html dosyasının içeriği;

<html>
<head>
<title>Yatay Açılır Menü Oluşturma</title>
<link rel=”stylesheet” type=”text/css” href=”yatayacilirmenustilleri.css”/>
<!–css dosyasının eklenmesi–>
</head>
<body>

<div id=”yacilirmenu”> <!–dosyadaki sınıfın etikete uygulanması–>
<ul> 
<li><a href=”#” target=”_self”>ANASAYFA</a></li>
<li><a href=”#” target=”_self”>RESİMLER</a>

<ul>
<li><a href=”#” target=”_self”>Tatil Resimleri</a></li>
<li><a href=”#” target=”_self”>Kişisel Resimler</a></li>
<li><a href=”#” target=”_self”>Okul Resimleri</a></li>
</ul>

<li><a href=”#” target=”_self”>İLETİŞİM</a></li>

</ul></div></body></html>

  • yatayacilirmenustilleri.css dosyasının içeriği;

#yacilirmenu ul{/*tüm listelerin genel css ayarları*/
padding:0;
margin:0;
list-style:none;
}
#yacilirmenu li{
float:left;/*ana listenin yanyana gözükmesi için*/
position:relative;/*liste konumlandırma göreceli*/
width:150px;
border:1px solid #000;}
#yacilirmenu li ul{/*alt listelerin css durumu*/
display:none;/*alt liste gözükmesin*/
left:0;
position:absolute;
top:16px; }
#yacilirmenu li a{
display:block;
text-decoration:none;
background-color:#06C;
color:#FFF;
font:bold 13px Verdana, Geneva, sans-serif;
padding:0;
}
#yacilirmenu li a:hover{
background-color:#0fC;
color:#FF0;
}
#yacilirmenu li:hover ul {display:block;}/*liste elemanı üzerine gelindiğinde alt listeleri göster*/

/* IE. gizle \*/
* html ul li { float: left; height: 1%; }
* html ul li a { height: 1%; }
/* IE den gizleme sonu */

not:Tüm css dosyaları en az sayıda parametre kullanılarak hazırlanmış menü örnekleridir. Tasarımlara göre değişik eklentilerle çok daha görsel menüler oluşturulabilir.

En Basit Haliyle Katmanlar (div) ve CSS ile Web Sayfası Şablonu Oluşturma

5 Yorum


Html dilinde katmanlar ile bir web şablonu oluşturmak için  CSS kullanmak gerekir. Bunun için bir adet html dosyası ve bir adette  css dosyası oluşturalım. Bu dosyaları herhangi bir metin editörü (notepad.exe) veya Dreamweaver Programı ile oluşturabilirsiniz.

  • Şu şekilde en basit tasarımlardan birini yapalım;

csswebsablon2

  • indexsablon.html sayfasının içeriği;

<html>
<head>
<title>arama sayfamıza hoşgeldiniz</title>
<link href=”stil.css” rel=”stylesheet” type=”text/css” /> <!–Css dosyasını sayfaya ekleme–>
</head>
<body>
<div id=”container”><!–tüm şablona ana sağlayıcı içinde hazırlanıyor.–>

<div id=”banner”>Banner olacak</div>
<div id=”header”>ustmenü </div>
<div id=”left”>sol bölum </div>
<div id=”content”>içerik</div>
<div id=”right”>sağ</div>
<div id=”footer”>alt</div>

</div>

</body>
</html>

  • stil.css dosyasının içeriği;

body /*Sayfa genel ayarları*/
{
margin: 0px;
font-family: verdana;
font-size: 12px;
}

#container /*web şablonu ana sğlayıcı */
{
width:980px;
height:700px;
margin:0px;
padding:0px;
}
#banner
{
padding: 0px;
margin: 0px;
width: 980px;
height: 100px;
background-color: #99FFCC;
}

#header
{
padding: 0px;
margin: 0px;
width: 980px;
height: 30px;
background-color: #66FF66;
text-align: center;
vertical-align: middle;
}

#left
{
margin: 0px;
padding: 0px;
float: left;/*katman yerleşimini soldan doğru yapmaya başlıyor*/
height: 500px;
width: 200px;
background-color: #FC9;
}
#content{
margin: 0px;
padding: 0px;
float: left;/*bir önceki katmanın sol yanında yer varsa yeni katman onun yanına yerleşir.*/
height: 500px;
width: 580px;
background-color: #aCf;
}
#right{
margin: 0px;
padding: 0px;
float: left; /*bir önceki katmanın sol yanında yer varsa yeni katman onun yanına yerleşir.*/
height: 500px;
width: 200px;
background-color: #0C9;
}
#footer{
margin: 0px;
padding: 0px;
clear: both; /*soldan doğru yerleşim  iptal edilir*/
height: 70px;
width: 980px;
background-color:#996;
}

Bana Silverlight Anlat

meslek lisesi ders notları

Eren ÇOLAK

Yazılım Mühendisi Olmak Yolunda İlerliyor...