Web Geliştirme Eğitimi Dersleri, 009

Standart <ul>

Modifiyeli <ul>

1. ul
2. {
3.  list-style: none;
4.  margin: 0px;
5.  padding: 0px;
6.  overflow: hidden;
7.  width: 30em;
8. }
9. li
10. {
11.  display: inline;
12.  float: left;
13.  width: 10em;
14.  border-bottom: 1px dotted #555;
15.  background: #fafafa;
16. }
17. li.h
18. {
19.  font-weight: bold;
20.  background: #eee;
21.  border-bottom: 1px dotted #000;
22. }

1. <ul>
2.  <li class="h">Kullanıcı Adı</li>
3.  <li class="h">Şifre</li>
4.  <li class="h">E-Mail</li>
5.  <li>vigo</li>
6.  <li>1234</li>
7.  <li>vigo@bilgi.edu.tr</li>
8.  <li>comozor</li>
9.  <li>axxeed11</li>
10.  <li>comoz@zor.edu.tr</li>
11. </ul>

• display: ile oynayarak li’leri modifiye ettik.
• 3 kolon istediğimiz için ul’nin width:’i ni 3’ün katı verdik ( 10*3em = 30em )
• Her li için width: 10em verdik!
• Header yapmak için ayrı bir class tanımladık. ( h )
• ** ul için geçerli herşey ol için de geçerlidir!

Standart <dl>

Modifiyeli <dl>

1. <dl>
2.  <dt>Kullanıcı Adı</dt>
3.  <dd>vigo</dd>
4. </dl>
5. <dl>
6.  <dt>E-Posta</dt>
7.  <dd>vigo@bilgi.edu.tr</dd>
8.  <dd>vigo2@bilgi.edu.tr</dd>
9. </dl>
10. <dl>
11.  <dt>Telefon</dt>
12.  <dd>+90 212 123 44 55</dd>
13.  <dd>+90 212 222 44 55</dd>
14. </dl>

1. dl
2. {
3.  overflow: hidden;
4.  margin: 0px;
5.  padding: 0px;
6.  background: #eee;
7.  border-bottom: 1px solid #ccc;
8. }
9. dt
10. {
11.  margin: 0px;
12.  padding: 0px;
13.  display: inline;
14.  float: left;
15.  width: 200px;
16.  font-weight: bold;
17.  border-right: 1px dotted #000;
18.  margin-right: 10px;
19.  background: #ddd;
20. }
21. dd
22. {
23.  margin: 0px;
24.  padding: 0px;
25.  display: inline;
26.  float: left;
27.  width: 250px;
28.  margin-right: 10px;
29. }

• <dt> HTML taşıyamaz!
• <dd> yada <li> HTML taşır ( p , h1 , span gibi )
• <dl> içinde N tane <dt> yada <dd> olabilir.