myNotlar Logo

maxWidth


Internet Explorer 7 Firefox Opera 3.5

maxWidth özelliği, elementin ulaşacağı en fazla genişlik değerini belirler. Bu özelliğin IE 7+ sürümlerinde kullanılabilmesi için !DOCTYPE ile doküman tipinin belirtilmesi gereklidir.

DOM Sözdizimi

element.style.maxWidth = "genislik"

CSS Sözdizimi

max-width: genislik
genislik

Aşağıdaki değerleri alabilir.

  • none : Genişlik limiti olmadığını belirtir. Genişlik otomatik belirlenir.
  • Yüzde değer : Elementin içinde bulunduğu ana bloğun yükseklik değerine oranlanmasıyla belirlenir.
  • CSS Ölçü Değerleri : En fazla genişliğin, net olarak belirlenmesini sağlar.

Aşağıdaki örnek, sabit yüksekliğe sahip bir div elementinin görünen içerik genişliğinin maxWidth ile sınırlandırılarak overflow özelliği ile taşma kontrolünün uygulanmasını göstermektedir.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<style type="text/css">
div#ornekDiv {
    height:150px;
    overflow:auto;
}
</style>

<script type="text/javascript">
function azGoster() {
    document.getElementById("ornekDiv").style.maxWidth = "100px";
}
function ortaGoster() {
    document.getElementById("ornekDiv").style.maxWidth = "200px";
}
function limitYok() {
    document.getElementById("ornekDiv").style.maxWidth = "none";
}
</script>

<input type="button" value="Az Göster ( 100px )" onClick="azGoster()" />
<input type="button" value="Normal Göster ( 200px )" onClick="ortaGoster()" />
<input type="button" value="Limit Yok" onClick="limitYok()" />

<div id="ornekDiv">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing 
    elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi 
    ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit 
    in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur 
    sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt 
    mollit anim id est laborum.
</p>
</div>
Test Edin

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

İlgili Başlıklar
 
myNotlar Hakkında
Telif Hakkı © 2007-2009 mynotlar.com Tüm Hakları Saklıdır. Kopyalanamaz. Yayınlanamaz.
E-Posta : support@myNotlar.com

| Tek Kişilik Oyunlar | Sudoku | Oyunlar |