Zoque.Forum
»
Dİv & CSS ile Site Tasarımında Birkaç Soru
|
| CSS CSS ile ilgili merak ettiklerinizi, sorunlarınızı ve fikirlerinizi bu bölümde paylaşabilirsiniz. |
![]() |
|
|
LinkBack | Seçenekler |
|
|
#1 (permalink) |
|
Üyelik Tarihi: 27.01.2007
Yer: -
Mesaj: 108
|
DIV & CSS ile Site Tasarımında Birkaç Soru
Merhabalar,
div ve CSS ile site tasarımına yeni başladım, bir kaç noktada takıldım. İlk olarak aşağıdaki örnekteki gibi siyah alanın beyaz alana eklenen içeriğe göre eş zamanlı uzamasını istiyorum ancak div & CSS ile bunu bir türlü başaramadım. Bunu nasıl yapabiliriz? ![]() Diğer bir sorun ise padding ve margin değerlerinin Firefox ve IE de farklı yorumlanması. Sitedeki içerikte bariz kaymalar oluyor. Oysa ki tablolu tasarımdan kurtulmayı tüm tarayıcılara uymaı için istiyordum ancak bu oldukça sorun oluyor. Ve bir de menü alanı ve altına arama motoru alanı yapıyorum. Ancak IE ve FF daki görüntüleri aşağıda: ![]() div Kodları Kod:
<!-- Menü Alanı Başladı --> <div class="menubar"> <ul> <li>Başlık</li> <li>Başlık</li> <li>Başlık</li> <li>Başlık</li> <li>Başlık</li> <li>Başlık</li> <li>Başlık</li> <li>Başlık</li> <li>Başlık</li> <li>Başlık</li> </ul> </div> <!-- Menü Alanı Bitti --> <!-- Arama Kutusu Başladı --> <div class="aramakutusu"> <h1>ARAMA</h1> <form action="" method="post"> <input name="a" type="text" size="15"> <input type="submit" name="ara" value=">>" class="onaybutton"> </form> </div> <!-- Arama Kutusu Bitti --> CSS Kodları Kod:
/*Menü Alanı*/
.menubar {
width: 114px;
height: 175px;
border:#000000;
border-style: solid;
border-width: 0px;
}
.menubar ul {
color:#FFFFFF;
list-style-type: none;
margin:0px;
padding:0px;
}
.menubar li {
font-size: 9px;
font-weight: bold;
height:22px;
background: #97BFD4;
padding-left: 24px;
padding-top: 3px;
}
/*Arama Kutusu Alanı*/
.aramakutusu {
height:60px;
background:#ec5f03;
width: 114px;
display: block;
}
.aramakutusu h1{
font-size: 11px;
color:#ffffff;
font-weight: bold;
padding:5px 0 0 15px;
margin:0;
}
.aramakutusu form {
margin:0px 0px 0px 15px;
padding:0px;
}
.aramakutusu input {
border:0px;
font-size: 11px;
padding: 3px;
}
.onaybutton{
background: #192974;
color:#ffffff;
}
Bu konularda ne yapmam gerekir? Mesaj divemaster tarafından 21.02.2007 (19:43) yeniden düzenlendi.. |
|
|
|
|
|
#2 (permalink) |
|
Re: Dİv & CSS ile Site Tasarımında Birkaç Soru
1.sorun icin;
Bir kutucuk olusturup onun icerisine icerigini yazmak istedigin ikinci bir kutucuk olustur. Mantiken iceride bulunan kutucuk büyüdükce cercevesinide uzatacaktir. [asagidaki kodlarda bunu görebilirsin] HTML Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <HTML> <head> <style> body {background:#c0c0c0;} #siyahAlan { background: #000; width:600px; text-align:right; } #beyazAlan { background:#fff; width:500px; padding:10px; voice-family: "\"}\""; /* ie için */ voice-family:inherit; width:480px; } HTML>body #beyazAlan { width:480px; /* OPERA için */ } } </style> </head> <body> <div id="siyahAlan"> <div id="beyazAlan"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, 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, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. </div> </div> </body> </HTML> Margin degerleri tüm browserlarda esit görünür. Yanliz hem float hem margin kullandigin bir kutucuk icin CSS icerisinde ayrica display:inline kodunu kullanman gerekir, aksi takdirde ie gercek margin degerinin iki katini ekrana yansitir. |
|
|
|
|
Zoque'a hoşgeldiniz!