[Latest News][6]

Web Dersleri
Web Scriptleri
Web Temaları

CSS Ders - 3 -

read ( words)
Print

CSS Ders - 3 -



Position özelliği CSS içerisinde sıkça kullanacağınız bir özellik. CSS ile sayfa tasarlamaya başlayanlar genelde absolute özelliği ile div in sayfadaki konumunu belirliyorlar. Sonraki derslerde float özelliğinden bahsedicem ve ağırlıklı olarak relative özelliğini kullanarak örnek sayfalar tasarlayacağız.
Ders - 3 - ' ün kodları aşağıda , tarayıcada görüntülemek için Kodlar sekmesindeki bağlantıları kullanabilirsiniz.

Absolute Position Örneği ;
    

  1. <!doctype html>
    2. 

  2. <html>
    3. 

  3. <head>
    4. 

  4.  <meta charset="UTF-8" />
    5. 

  5.  <title>Absolute Pozisyon</title>
    6. 

  6.  <style type="text/css">
    7. 

  7.   #static_olmayan_kutu {
    8. 

  8.    position: relative;
    9. 

  9.    width:50px;
    10. 

  10.    height:50px;
    11. 

  11.    background-color:red;
    12. 

  12.    top:500px;
    13. 

  13.   }
    14. 

  14.   #absolute_kutu {
    15. 

  15.    position: absolute;
    16. 

  16.    width:100px;
    17. 

  17.    height:100px;
    18. 

  18.    background-color:green;
    19. 

  19.    top:-150px;
    20. 

  20.   }
    21. 

  21.   </style>
    22. 

  22. </head>
    23. 

  23. <body>
    24. 

  24. <div id="static_olmayan_kutu">
    25. 

  25.  <div id="absolute_kutu">
    26. 

  26.  </div>
    27. 

  27. </div>
    28. 

  28. </body>
    29. 

  29. </html>
    30.
Fixed Position Örneği ;
    

  1. <!doctype html>
    2. 

  2. <html>
    3. 

  3. <head>
    4. 

  4.  <meta charset="UTF-8" />
    5. 

  5.  <title>Fixed Pozisyon</title>
    6. 

  6.  <style type="text/css">
    7. 

  7.   #fixed_kutu {
    8. 

  8.    position:fixed;
    9. 

  9.    bottom:0px;
    10. 

  10.    right:0px;
    11. 

  11.    width:200px;
    12. 

  12.    height:100px;
    13. 

  13.    background-color:red;
    14. 

  14.   }
    15. 

  15.   p {
    16. 

  16.    width:10px;
    17. 

  17.   }
    18. 

  18.  </style>
    19. 

  19. </head>
    20. 

  20. <body>
    21. 

  21.  <p>
    22. 

  22. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    23. 

  23. tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    24. 

  24. quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    25. 

  25. consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    26. 

  26. cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    27. 

  27. proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    28. 

  28.  </p>
    29. 

  29. <div id="fixed_kutu">
    30. 

  30. </div>
    31. 

  31. </body>
    32. 

  32. </html>
    33.
Relative Position Örneği ;
    

  1. <!doctype html>
    2. 

  2. <html>
    3. 

  3. <head>
    4. 

  4.  <meta charset="UTF-8" />
    5. 

  5.  <title>Relative Pozisyon</title>
    6. 

  6.  <style type="text/css">
    7. 

  7.   #relative_kutu {
    8. 

  8.    position: relative;
    9. 

  9.    border:1px solid red;
    10. 

  10.    width:300px;
    11. 

  11.    height:300px;
    12. 

  12.    left:200px;
    13. 

  13.   }
    14. 

  14.  </style>
    15. 

  15. </head>
    16. 

  16. <body>
    17. 

  17. <div id="relative_kutu">
    18. 

  18. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    19. 

  19. tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    20. 

  20. quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    21. 

  21. consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    22. 

  22. cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    23. 

  23. proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    24. 

  24. </div>
    25. 

  25. </body>
    26. 

  26. </html>
    27.


Video Anlatım İzlemek İçin Tıklayın

TAGS

About Author Mohamed Abu 'l-Gharaniq

when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries.

Hiç yorum yok:

Yorum Gönder

Kaydol: Kayıt Yorumları (Atom)

Toplam Sayfa Görüntüleme Sayısı

Start typing and press Enter to search