{"id":387,"date":"2010-06-24T09:45:45","date_gmt":"2010-06-24T09:45:45","guid":{"rendered":"http:\/\/www.erbugkaya.com\/?p=387"},"modified":"2014-01-16T23:51:54","modified_gmt":"2014-01-16T23:51:54","slug":"css-ile-hazirlanan-sitede-firefox-probleminin-cozulmesi-ve-site-bakimi","status":"publish","type":"post","link":"http:\/\/erbugkaya.com\/?p=387","title":{"rendered":"CSS ile Haz\u0131rlanan Sitede Firefox Probleminin \u00c7\u00f6z\u00fclmesi ve Site Bak\u0131m\u0131."},"content":{"rendered":"

30\/4\/2007<\/em>
\nTable kullanmadan, DIV ve CSS ile site haz\u0131rlamak ba\u015fl\u0131kl\u0131 makalemde haz\u0131rlad\u0131\u011f\u0131m\u0131z siteyi hi\u00e7 firefox’da kontrol ettiniz mi? Etti\u011finizde g\u00f6receksiniz ki, site tamamen da\u011f\u0131lm\u0131\u015f durumda. Bu makalede CSS ile haz\u0131rlanm\u0131\u015f bir sitede Firefox sorunlar\u0131n\u0131 d\u00fczeltmeyi ve site bak\u0131m\u0131n\u0131 anlataca\u011f\u0131m.<\/p>\n


\n\"\"<\/a><\/p>\n

G\u00f6rd\u00fc\u011f\u00fcn\u00fcz gibi i\u00e7eri\u011fin sa\u011f taraf\u0131 sol taraf\u0131n \u00fcst\u00fcne binmi\u015f. \u015eimdi onu do\u011fru yerine \u00e7ekelim. dummy.css’i a\u00e7\u0131yoruz. Hatal\u0131 g\u00f6r\u00fcnen sa\u011f taraf\u00a0 “#rightContainer” ile ba\u011fl\u0131yd\u0131.<\/p>\n

#mainContainer{
\nbackground-image:url(‘images\/containerBack.jpg’);
\nbackground-repeat:repeat-y;
\nwidth:968px;
\nmargin-left:auto;
\nmargin-right:auto;
\npadding-bottom:20px;
\n}
\n#leftContainer{
\nposition:relative;
\nwidth:306px;
\nmargin-left:10px;
\nleft:0px;
\ntop:10px;
\nfloat:left;
\n}
\n#rightContainer{
\nposition:relative;
\nwidth:609px;
\nleft:30px;
\ntop:10px;
\n}<\/div>\n

G\u00f6rece\u011finiz gibi #rightContainer’a float belirtmeyi unutmu\u015fum. Hemen ekleyelim.<\/p>\n

#rightContainer{
\nposition:relative;
\nwidth:609px;
\nleft:30px;
\ntop:10px;
\nfloat:left;
\n}<\/div>\n

Sonu\u00e7.<\/p>\n

\"\"<\/a><\/p>\n

G\u00f6rd\u00fc\u011f\u00fcn\u00fcz gibi i\u00e7erik alan\u0131 yerini ald\u0131 ama hala sorunlar var. \u0130lk \u00f6nce gallery b\u00f6l\u00fcm\u00fcn\u00fc d\u00fczeltelim. Gallery CSS’lerinde g\u00f6receksiniz ki, #thumbBackRight’da yine float’\u0131 unutmu\u015fum hemen ekleyelim.<\/p>\n

#thumbBack{
\nbackground-image:url(‘images\/thumbBack.jpg’);
\nbackground-repeat:no-repeat;
\nwidth:142px;
\nheight:109px;
\nleft:2px;
\nfloat:left;
\npadding:6px 0 0 6px;
\n}
\n#thumbBackRight{
\nbackground-image:url(‘images\/thumbBack.jpg’);
\nbackground-repeat:no-repeat;
\nposition:relative;
\nwidth:142px;
\nheight:109px;
\nleft:15px;
\npadding:6px 0 0 6px;
\nfloat:left;
\n}<\/div>\n

Sonu\u00e7.<\/p>\n

\"\"<\/a><\/p>\n

Galley b\u00f6l\u00fcm\u00fc halloldu ama hala sorunlar var. Devam edelim. \u0130\u00e7erik alan\u0131 Welcome ba\u015fl\u0131\u011f\u0131n\u0131n \u00fczerine \u00e7\u0131k\u0131yor bunu d\u00fczeltelim.K\u0131rm\u0131z\u0131 ile yaz\u0131l\u0131 olanlar yeni ekledi\u011fimiz sitiller.<\/p>\n

\u0130PUCU: Firefox ve Internet Explorer aras\u0131nda sitil sorunlar\u0131 ya\u015f\u0131yorsan\u0131z. Bir sitili iki kere yazabilirsiniz. Bunlardan IE i\u00e7in olan\u0131n ba\u015f\u0131na “_” koyarsan\u0131z, bu sitili sadece IE okur. “_” olmayan ise Firefox i\u00e7indir.<\/span><\/p>\n

.boxTop{
\nbackground-image:url(‘images\/box\/boxTop.jpg’);
\nbackground-repeat:no-repeat;
\nwidth:603px;
\nheight:4px;
\n_margin-bottom:-11px;
\nmargin-top:5px;
\n_margin-top:0px;
\n}<\/div>\n

Sonu\u00e7.<\/p>\n

\"\"<\/a><\/p>\n

Evet iyi gidiyoruz ama hala sorunlar\u0131m\u0131z var. mainContainer DIV’i i\u00e7eri\u011fi i\u00e7inde tutacak \u015fekilde uzam\u0131\u015f g\u00f6z\u00fckm\u00fcyor.\u00a0 Bu firefox’un CSS ile verilmi\u015f backgorundlarda genel bir sorunu. Elbette bununda \u00e7\u00f6z\u00fcm\u00fc var. \u015eu \u015fekilde \u00e7\u00f6z\u00fcyoruz. \u0130lk \u00f6nce attaki CSS kural\u0131n\u0131 CSS dosyam\u0131za ekliyoruz.<\/p>\n

.clear {
\nclear: both;
\nheight: 1px;
\nfont-size: 1px;
\nline-height: 1px;
\nmargin-bottom: -1px;
\n}<\/div>\n

Ard\u0131ndan master page’imizde (dummy.master) mainContainer DIV’inin i\u00e7ine ve sonuna alttaki gibi bir DIV ekliyoruz.<\/p>\n

<div id=”rightContainer”>
\n<asp:ContentPlaceHolder id=”ContentPlaceHolder1″ runat=”server”><\/asp:ContentPlaceHolder>
\n<\/div>
\n<div><!– –><\/div>
\n<\/div><\/p>\n

<div id=”footerLine”><\/div><\/p>\n<\/div>\n

Sonu\u00e7.<\/p>\n

\"\"<\/a><\/p>\n

Evet bu sorunu da halletti\u011fimize g\u00f6re \u015fimdi i\u00e7erik alanlar\u0131ndaki sorunlara bakabiliriz. \u00d6nce yaz\u0131lar\u0131n soldan ta\u015fmas\u0131 sorunu.Firefox LABEL tag\u0131nda sorun \u00e7\u0131kar\u0131yor ama \u00e7\u00f6z\u00fcm\u00fcm\u00fcz yine CSS’de. Alttaki gibi bir CSS ekliyoruz.<\/p>\n

.label{
\ndisplay:table;
\n}<\/div>\n

Ve yaz\u0131lar\u0131 tuttan labellar\u0131 bu css ile ba\u011fliyoruz.<\/p>\n

<asp:Label runat=”server” Text=”Label” id=”Label3″ Width=”470px” CssClass=”label”>
\nLorem ipsum …
\n<\/asp:Label><\/div>\n

Sonu\u00e7.<\/p>\n

\"\"<\/a><\/p>\n

Bu sorunu da halletti\u011fimize g\u00f6re \u015fimdi The Day kutusundaki g\u00f6r\u00fcn\u00fcmle ilgilenebiliriz. The Day kutusunda birinci imaj ile ba\u015fl\u0131k, ikinci imaj ile kutu alt\u0131 i\u00e7 i\u00e7e girmi\u015f durumda. \u0130lk \u00f6nce theDayHeader kural\u0131na ekleme yap\u0131yoruz.<\/p>\n

#theDayHeader{
\nbackground-image:url(‘images\/headerTheDay.jpg’);
\nbackground-repeat:no-repeat;
\nwidth:60px;
\nheight:10px;
\nmargin-bottom:6px;
\n}<\/div>\n

Ard\u0131ndan The Day’i i\u00e7inde tutan boxMiddle DIV’ine yine clear DIV’i ekliyoruz.<\/p>\n

<div>
\n<div id=”theDayHeader”><\/div><asp:Image runat=”server” id=”Image1″ ImageUrl=”images\/theDayResimler\/1000001296_01.jpg” CssClass=”theDayImage”><\/asp:Image>
\n<asp:Label runat=”server” Text=”Label” id=”Label2″ Width=”470px” CssClass=”label”>
\nLorem ipsum…
\n<\/asp:Label>
\n<br\/>
\n<br\/>
\n<asp:Image runat=”server” id=”Image2″ ImageUrl=”images\/theDayResimler\/1000001296_02.jpg” CssClass=”theDayImage”><\/asp:Image>
\n<asp:Label runat=”server” Text=”Label” id=”Label3″ Width=”470px” CssClass=”label”>
\nLorem ipsum…
\n<\/asp:Label>
\n<div><!– –><\/div>
\n<\/div><\/p>\n<\/div>\n

Sonu\u00e7.<\/p>\n

\"\"<\/a><\/p>\n

B\u00f6ylece sitemiz art\u0131k Firefox’da da sorunsuz \u00e7al\u0131\u015f\u0131yor. G\u00f6rd\u00fc\u011f\u00fcn\u00fcz gibi CSS ile haz\u0131rlanm\u0131\u015f bir siteye m\u00fcdahale etmek \u00e7ok kolay.<\/p>\n

Te\u015fekk\u00fcrler<\/p>\n

\u0130yi \u00e7al\u0131\u015fmalar<\/p>\n","protected":false},"excerpt":{"rendered":"

30\/4\/2007 Table kullanmadan, DIV ve CSS ile site haz\u0131rlamak ba\u015fl\u0131kl\u0131 makalemde haz\u0131rlad\u0131\u011f\u0131m\u0131z siteyi hi\u00e7 firefox’da kontrol ettiniz mi? Etti\u011finizde g\u00f6receksiniz ki, site tamamen da\u011f\u0131lm\u0131\u015f durumda. Bu makalede CSS ile haz\u0131rlanm\u0131\u015f bir sitede Firefox sorunlar\u0131n\u0131 d\u00fczeltmeyi ve site bak\u0131m\u0131n\u0131 anlataca\u011f\u0131m.<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[11],"tags":[29],"class_list":["post-387","post","type-post","status-publish","format-standard","hentry","category-teknik-yazi","tag-expression-web"],"_links":{"self":[{"href":"http:\/\/erbugkaya.com\/index.php?rest_route=\/wp\/v2\/posts\/387","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/erbugkaya.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/erbugkaya.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/erbugkaya.com\/index.php?rest_route=\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"http:\/\/erbugkaya.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=387"}],"version-history":[{"count":5,"href":"http:\/\/erbugkaya.com\/index.php?rest_route=\/wp\/v2\/posts\/387\/revisions"}],"predecessor-version":[{"id":390,"href":"http:\/\/erbugkaya.com\/index.php?rest_route=\/wp\/v2\/posts\/387\/revisions\/390"}],"wp:attachment":[{"href":"http:\/\/erbugkaya.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=387"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/erbugkaya.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=387"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/erbugkaya.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=387"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}