Şeklinde bir açıklamalı menünüz olsun ister misiniz?
Menü yapımında kullanacağımız CSS kodlarımız;
DÜZ YAZI
CSS:
Kod:
dl {
float:left;
color:#525252;
width:300px
}
dt {
padding-left:40px;
padding-top:9px;
padding-bottom:4px;
color:#666666;
font-weight:bold;
background-image:url('30j78d2.gif');
background-repeat:no-repeat
}
dt span {
border-bottom:1px solid #cccccc
}
dt.home {
background-position:0 0
}
dt.preferences {
background-position:0 -33px
}
dt.web {
background-position:0 -66px
}
dt.users {
background-position:0 -98px
}
dt.chart {
background-position:0 -131px
}
dt.trash {
background-position:0 -164px
}
Resim dosyamız (Sağ tıklayıp kaydedin);
HTML kodlarımız ise şöyle;
DÜZ YAZI
HTML:
Kod: <dl>
<dt class="home">
<span>Lorem ipsum dolor</span>
</dt>
<dd>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.<br />
<a href="http://www.cssimbenim.com" title="Detail about Lorem ipsum dolor">more »</a>
</dd>
<dt class="preferences">
<span>Donec consectetuer</span>
</dt>
<dd>
Morbi bibendum lectus vitae lectus bibendum tellus.<br />
<a href="http://www.cssimbenim.com" title="Detail about Donec consectetuer">more »</a>
</dd>
<dt class="web">
<span>Phasellus semper</span>
</dt>
<dd>
Nunc non ligula vitae ligula facilisis elementum ligula.<br />
<a href="http://www.cssimbenim.com" title="Detail about Phasellus semper">more »</a>
</dd>
</dl>
<dl>
<dt class="users">
<span>Cras sit amet</span>
</dt>
<dd>
Web lapu izstrÄde, optimizÄcija, kÄ arÄ« korporatÄ«vÄ stila izstrÄde.<br />
<a href="http://www.cssimbenim.com" title="Detail about Cras sit amet">more »</a>
</dd>
<dt class="chart">
<span>Suspendisse</span>
</dt>
<dd>
Sed euismod, sapien in imperdiet feugiat, erat purus fringilla mauris.<br />
<a href="http://www.cssimbenim.com" title="Detail about Suspendisse">more »</a>
</dd>
<dt class="trash">
<span>Nunc dictum</span>
</dt>
<dd>
Maecenas sed pede eget nunc pellentesque convallis nunc feugiat ligu.<br />
<a href="http://www.cssimbenim.com" title="Detail about Nunc dictum">more »</a>
</dd>
</dl>