overflow: visible nedir: Kaydırma çubuğu özelliği kazandırmak istemezseniz, bulunduğunuz alanda yazılarınız taşma yapacaktır. “visible” kullanabilirsiniz. [code language=”html”] style="overflow: visible;" [/code] overflow: hidden nedir: Kaydırma çubuklarını görmek istemezseniz taşma olmayacak kaplanan alan kadar ekranda görecek ve yazınızın devamı ekranda olmayacaktır. “hidden” kullanabilirsiniz. [code language=”html”] style="overflow: hidden;" [/code] overflow: scroll ne iş yapar: Kaydırma çubuklarını görmek isterseniz ekranda taşma olmasada kalacak şekilde, “scroll” kullanabilirsiniz. [code language=”html”] style="overflow: scroll;" [/code] overflow: auto ne işe yarar: Kaydırma çubuklarını taşma olduğunda görmek isterseniz, “auto” kullanabilirsiniz. [code language=”html”] style="overflow: auto;" [/code] overflow-x: ne işe yarar: Sadece yatay kaydırma çubuğu özelliğini ifade eder. [code language=”html”] style="overflow-x: auto;" [/code] overflow-y: ne işe yarar: Sadece dikey kaydırma çubuğu özelliğini ifade eder. [code language=”html”] style="overflow-y: auto;" [/code] Bütün HTML kodunu alıp .html dosyası şeklinde tarayıcılarda çalıştırabileceğiniz kayan çubuk örneğimiz aşağıdadır. [code language=”html”] <!DOCTYPE html> <html> <head> <title> scroll bar vertical and horizontal | kaydırma çubuğu yatay ve dikey | www.yazilimcity.net </title> <meta charset="UTF-8"> </head> <body> <!–kaydırma çubuğu(scroll bar) degerinin ‘visible’ olması ile hiç kaydırma çubuğu(scroll bar) değeri vermemeniz aynı şeyi ifade eder–> <div id="scrollVisibleDefault" style="overflow: visible; width: 100px; height:100px; border-style:solid; border-width:2px;"> visible – scroll bar vertical and horizontal | kaydırma çubuğu yatay ve dikey | www.yazilimcity.net </div> <br> <br> <br> <br> <br> <!–kaydırma çubuğu(scroll bar) değerinin ‘hidden’ olması ile herhangi bir dışa taşma durumunda kaydırma çubukları(scroll bars) olmayacak ve ilgili alanın boyutu kadar görünüm olacaktır–> <div id="scrollHidden" style="overflow: hidden; width: 100px; height:100px; border-style:solid; border-width:2px;"> hidden – scroll bar vertical and horizontal | kaydırma çubuğu yatay ve dikey | www.yazilimcity.net </div> <br> <br> <!–kaydırma çubuğu(scroll) değerinin ‘scroll’ olması durumunda herhangi bir taşma olmasa dahi yatay ve dikey kaydırma çubukları(scroll bars) ekranda görünecek ve taşma olma durumunda aktif olacaklardır–> <div id="scrollScroll" style="overflow: scroll; width: 100px; height:100px; border-style:solid; border-width:2px;"> scroll – scroll bar </div> <br> <br> <!–kaydırma çubuğu(scroll) değerinin ‘auto’ olması durumunda taşma olmadığı sürece ekranda kaydırma çucukları alanları görülmeyecek taki taşma olana kadar–> <div id="scrollAuto" style="overflow: auto; width: 100px; height:100px; border-style:solid; border-width:2px;"> auto – scroll bar </div> <br> <!–kaydırma çubuğu(scroll) değerinin ‘auto’ olması durumunda taşma olmadığı sürece ekranda kaydırma çucukları alanları görülmeyecek taki taşma olana kadar–> <div id="scrollAuto" style="overflow: auto; width: 100px; height:100px; border-style:solid; border-width:2px;"> auto – scroll bar taşma olan yazı örneği yazilimcity.net kaydırma çubuğu(scroll) değerinin ‘auto’ olması durumunda taşma olmadığı sürece ekranda kaydırma çucukları alanları görülmeyecek taki taşma olana kadar </div> <br> <br> <!–satır içi çerçeve (iframe) de zaten kaydırma çubuğu(scroll) özelliği varsayılan olarak mevcuttur.–> <iframe id="yazilimCityNetIFrameId" src="http://yazilimcity.net/htmlcss-yataydikey-kaydirma-cubugu-kodu-kullanimi-ornegi-htmlcss-horizontalvertical-scroll-bar-code-usage-example/" style="width: 200px; height: 300px; border-style:solid; border-width:5px;"> iframe default – scroll bar vertical and horizontal | kaydırma çubuğu yatay ve dikey | www.yazilimcity.net </iframe> </body> </html> [/code]]]>
hocam sağa sola değilde aşağı yukarı nasıl yapılır
emeğine sağlık güzel anlatım olmuş teşekkürler.