From bd242b06aaae4583d12f2321f5ccb3a1b59842de Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fatih=20Hayrio=C4=9Flu?= <fatih.hayrioglu@gmail.com>
Date: Wed, 15 Nov 2023 10:18:02 +0300
Subject: [PATCH] Kod duzeltmeleri

---
 ...le-menu-yapmak-iii-dikey-acilir-menuler.md | 173 +++++++++---------
 _posts/2006-12-02-yuvarlak-kenarli-kutular.md |   2 +-
 ...05-icice-float-elementlerinin-kullanimi.md |  49 ++---
 ...2-10-ieun-3-piksel-metin-oteleme-hatasi.md |  62 ++++---
 4 files changed, 150 insertions(+), 136 deletions(-)

diff --git a/_posts/2006-11-08-css-ile-menu-yapmak-iii-dikey-acilir-menuler.md b/_posts/2006-11-08-css-ile-menu-yapmak-iii-dikey-acilir-menuler.md
index 29c24f388..3713a211d 100644
--- a/_posts/2006-11-08-css-ile-menu-yapmak-iii-dikey-acilir-menuler.md
+++ b/_posts/2006-11-08-css-ile-menu-yapmak-iii-dikey-acilir-menuler.md
@@ -17,38 +17,40 @@ sıralanmamış listeleri(<ul\>) kullanacağız. Buradaki fark alt
 kategorilerin yani üzerine gelince açılacak menünün bir alt sırlanmış
 liste olarak eklenmesidir.
 
-	:::html
-	<ul id="menu" >
-	    <li><a href="#">Anasayfa</a></li>
-	    <li><a href="#">Haberler</a>
-	    <ul>
-	        <li><a href="#">şžirket Haberleri </a></li>
-	        <li><a href="#">Yurt içi Haberleri </a></li>
-	        <li><a href="#">Yurt dışı Haberleri</a></li>
-	    </ul>
-	    </li>
-	    <li><a href="#">Ürünler</a>
-	    <ul>
-	        <li><a href="#">Tencere</a></li>
-	        <li><a href="#">Tava</a></li>
-	        <li><a href="#">Ütü</a></li>
-	        <li><a href="#">Tost Makinesi </a></li>
-	        <li><a href="#">El Süpürgesi </a></li>
-	    </ul>
-	    </li>
+```html
+<ul id="menu" >
+	<li><a href="#">Anasayfa</a></li>
+	<li><a href="#">Haberler</a>
+	<ul>
+		<li><a href="#">şžirket Haberleri </a></li>
+		<li><a href="#">Yurt içi Haberleri </a></li>
+		<li><a href="#">Yurt dışı Haberleri</a></li>
 	</ul>
+	</li>
+	<li><a href="#">Ürünler</a>
+	<ul>
+		<li><a href="#">Tencere</a></li>
+		<li><a href="#">Tava</a></li>
+		<li><a href="#">Ütü</a></li>
+		<li><a href="#">Tost Makinesi </a></li>
+		<li><a href="#">El Süpürgesi </a></li>
+	</ul>
+	</li>
+</ul>
+```
 
 ![][100]
 
 İlk olarak satır başı boşluklarını ve imgeleri kaldıralım.
 
-	:::css
-	ul {
-	    margin: 0;
-	    padding: 0;
-	    list-style: none;
-	    width: 150px;
-	}
+```css
+ul {
+	margin: 0;
+	padding: 0;
+	list-style: none;
+	width: 150px;
+}
+```
 
 ![][1]
 
@@ -56,10 +58,11 @@ Sonra ilk linkleri göreceli olarak konumlandırmalıyız. Bu konumlandırma
 aslında ikinci kademe açılacak menüye mutlak konumlandırma yapılması
 için kullanılır.
 
-	:::css
-	ul li {
-		position: relative;
-	}
+```css
+ul li {
+	position: relative;
+}
+```
 
 Bir sonraki adımda da ikincil açılan menüleri konumlandırmak olacaktır.
 Her birinci linke karşılık gelen ikincil açılır menüler ilkinin sağına
@@ -68,13 +71,14 @@ sola kaydırılır ki fare ilk linki üzerinde ikinci linkin üzerine
 glemeden kaybolmasın. Ayrıca ikincil linklerin ilk sayfa açıldığında
 görünmemesi için display:none özelliği atanır.
 
-	:::css
-	li ul {
-	    position: absolute;
-	    left: 149px;
-	    top: 0;
-	    display: none;
-	}
+```css
+li ul {
+	position: absolute;
+	left: 149px;
+	top: 0;
+	display: none;
+}
+```
 
 ![][2]
 
@@ -87,48 +91,52 @@ tanımı ver kenarlık tanımı yapalım. Üstteki linkin alt kenarlığı ile
 alttaki linkin üst kenarlığı üst üste bineceğinde alt kenarlık değerini
 sıfırlayalım.
 
-	:::css
-	ul li a {
-	    display: block;
-	    text-decoration: none;
-	    background-color: #E2E2E2;
-	    padding: 5px;
-	    border:1px solid #000;
-	    border-bottom:0;
-	}
+```css
+ul li a {
+	display: block;
+	text-decoration: none;
+	background-color: #E2E2E2;
+	padding: 5px;
+	border:1px solid #000;
+	border-bottom:0;
+}
+```
 
 Bu kodu yazdığımızda IE linkler arasına boşluk koyacaktır(IE7 de hala bu
 sorun devam ediyor) bu durumu düzeltmek için:
 
-	:::css
-	/* IE. gizle \*/
-	* html ul li { float: left; height: 1%; }
-	* html ul li a { height: 1%; }
-	/* IE den gizleme sonu */
+```css
+/* IE. gizle \*/
+* html ul li { float: left; height: 1%; }
+* html ul li a { height: 1%; }
+/* IE den gizleme sonu */
+```
 
 ![][3]
 
 En alttaki çizgimiz eksik kalmaması için ilk link ul'sinin alt kenarlık
 tanım yaparız.
 
-	:::css
-	ul {
-	    margin: 0;
-	    padding: 0;
-	    list-style: none;
-	    width: 150px;
-	    border-bottom: 1px solid #00;
-	}
+```css
+ul {
+	margin: 0;
+	padding: 0;
+	list-style: none;
+	width: 150px;
+	border-bottom: 1px solid #00;
+}
+```
 
 ![][4]
 
 Birincil menü görünümü tamamlandı ancak ikincil menüler görünmüyor.
 İkincil menüleri göstermek için:
 
-	:::css
-	li:hover ul {
-		display: block;
-	}
+```css
+li:hover ul {
+	display: block;
+}
+```
 
 
 Bu kadar basit bir kod menümüzü tamamlar. Ancak bir sorun var ki o da
@@ -141,33 +149,34 @@ linklerde (<a\>) uygulanmasını destekler diğer elementlerde bu
 Peki menümüz böyle mi kalacak hayır. IE6 ve altı için bir javascript
 kodu yazacağız.
 
-	:::javascript
-	startList = function() {
+```javascript
+startList = function() {
 	if (document.all&&document.getElementById) {
-	navRoot = document.getElementById("menu");
-	for (i=0; i<navRoot.childNodes.length; i++) {
-	node = navRoot.childNodes[i];
-	if (node.nodeName=="LI") {
-	node.onmouseover=function() {
-	this.className+=" over";
+		navRoot = document.getElementById("menu");
+		for (i=0; i<navRoot.childNodes.length; i++) {
+			node = navRoot.childNodes[i];
+			if (node.nodeName=="LI") {
+			node.onmouseover=function() {
+			this.className+=" over";
+			}
+				node.onmouseout=function() {
+				this.className=this.className.replace(" over", "");
+			}
+			}
+		}
 	}
-	node.onmouseout=function() {
-	this.className=this.className.replace(" over", "");
-	}
-	}
-	}
-	}
-	}
-	window.onload=startList;
+}
+window.onload=startList;
+```
 
 Bu çözümü bize kazandıran arkadaşlara teşekkürü bir borç biliriz ve
 [linkini][] de yazarız.
 
 Ayrıca aşağıdaki kodu da eklemeliyiz.
 
-	:::css
-	li:hover ul, li.over ul{ display: block; }
-
+```css
+li:hover ul, li.over ul{ display: block; }
+```
 
 Ayrıca kod daki<ul id="**menu**" \> ve javascriptteki navRoot = document.getElementById("**menu**"); aynı olmasına dikkat edelim.
 
diff --git a/_posts/2006-12-02-yuvarlak-kenarli-kutular.md b/_posts/2006-12-02-yuvarlak-kenarli-kutular.md
index 730afb56a..7bd7380ec 100644
--- a/_posts/2006-12-02-yuvarlak-kenarli-kutular.md
+++ b/_posts/2006-12-02-yuvarlak-kenarli-kutular.md
@@ -131,7 +131,7 @@ görecektir:
         </div>
     </div>
 </div>
-``
+```
 
 Dört resimin iki tanesi üst köşeleri yuvarlamak için, iki tanesi alt
 köşeleri yuvarlamak için kullanacağız.
diff --git a/_posts/2006-12-05-icice-float-elementlerinin-kullanimi.md b/_posts/2006-12-05-icice-float-elementlerinin-kullanimi.md
index 3971cf03d..643abea3d 100644
--- a/_posts/2006-12-05-icice-float-elementlerinin-kullanimi.md
+++ b/_posts/2006-12-05-icice-float-elementlerinin-kullanimi.md
@@ -11,18 +11,19 @@ güzel imkanlar sağlar. Bir genel float elementinin sağ üstüne bir float
 element yerleştirelim. Bu kodlama genelde menü ve resim ekleme gibi
 durumlar için kullanılır.
 
-	:::css
-	#icerikAlani {
-	    margin: 10px;
-	    border: 1px solid gray;
-	}
-	#icerikAlani #menu {
-	    float: right;
-	    width: 150px;
-	    border-left: 1px solid gray;
-	    border-bottom: 1px solid gray;
-	    margin-left: 5px;
-	}
+```css
+#icerikAlani {
+	margin: 10px;
+	border: 1px solid gray;
+}
+#icerikAlani #menu {
+	float: right;
+	width: 150px;
+	border-left: 1px solid gray;
+	border-bottom: 1px solid gray;
+	margin-left: 5px;
+}
+```
 
 İçerik alanına(#icerikAlani) margin ve kenarlık tanımlası yaptık. Daha
 sonra menu alanını(#menu) içerik alanının sağ üst kısmına yerleştirmek
@@ -32,19 +33,19 @@ border-bottom**(sağ ve üst ksımlarda zaten olduğu için buralara kenarlık
 ataması yapmadık) ve içerik metini ile arasında boşluk bırakmak için
 **margin-left** atamlarını yapıyoruz.
 
-	:::html
-	<div id="icerikAlani">
-	    <div id="menu">
-	    <ul>
-	        <li><a href="anasayfa.html">Ana Sayfa </a></li>
-	        <li><a href="haberler.html">Haberler</a></li>
-	        <li><a href="iletisim.html">İletişim</a></li>
-	    </ul>
-	    </div>
-	    <h1>Lorem Ipsum Dolar </h1>
-	    <p>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.</p>  . . .
+```html
+<div id="icerikAlani">
+	<div id="menu">
+	<ul>
+		<li><a href="anasayfa.html">Ana Sayfa </a></li>
+		<li><a href="haberler.html">Haberler</a></li>
+		<li><a href="iletisim.html">İletişim</a></li>
+	</ul>
 	</div>
-
+	<h1>Lorem Ipsum Dolar </h1>
+	<p>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.</p>  . . .
+</div>
+```
 
 Örnek sayfayı görmek için [tıklayınız.][]
 
diff --git a/_posts/2006-12-10-ieun-3-piksel-metin-oteleme-hatasi.md b/_posts/2006-12-10-ieun-3-piksel-metin-oteleme-hatasi.md
index dda37f80c..69c78e58f 100644
--- a/_posts/2006-12-10-ieun-3-piksel-metin-oteleme-hatasi.md
+++ b/_posts/2006-12-10-ieun-3-piksel-metin-oteleme-hatasi.md
@@ -13,17 +13,18 @@ istediğinizde, ie5-6 versiyonlarında soldaki float uygulanmış element
 içeriği boyunda sağdaki metin soldan 3 piksel kadar içeriğini
 öteleyecektir.
 
-	:::css
-	.solKolon {
-		float: left;
-		width: 200px;
-		background-color:#00CCFF;
-	}
+```css
+.solKolon {
+	float: left;
+	width: 200px;
+	background-color:#00CCFF;
+}
 
-	p {
-		margin-left: 200px;
-		background-color:#CCCCCC;
-	}
+p {
+	margin-left: 200px;
+	background-color:#CCCCCC;
+}
+```
 
 
 ![][100]
@@ -36,10 +37,11 @@ atadığımızda bu elementin boyutunu değiştirmeyecektir. Bu atama diğer
 web tarayıcılarını etkileyecektir bu nedenle diğer web tarayıcılarından
 bu kodu gizlemeliyiz.
 
-	:::css
-	/* E5-Mac gizleyelim. sadece IE-Win görsün bu kodu. */
-	* html p { height: 1%; }
-	/* IE5/Mac den gizlemeye son*/
+```css
+/* E5-Mac gizleyelim. sadece IE-Win görsün bu kodu. */
+* html p { height: 1%; }
+/* IE5/Mac den gizlemeye son*/
+```
 
 ![][1]
 
@@ -48,20 +50,21 @@ gibi bu alana float uygulandığında **margin-left:200px** tanımını IE iki
 kat görecektir bunu engellemek için **margin-left** değerini
 sıfırlamalıyız.
 
-	:::css
-	/* E5-Mac gizleyelim. sadece IE-Win görsün bu kodu. */
-	* html p { height: 1%; margin-left: 0; }
-	/* IE5/Mac den gizlemeye son */
+```css
+/* E5-Mac gizleyelim. sadece IE-Win görsün bu kodu. */
+* html p { height: 1%; margin-left: 0; }
+/* IE5/Mac den gizlemeye son */
+```
 
 İçerideki boşluğu aldık ancak elementler arasında boşluk kaldı bunu
 kaldırmak için sağ margin değerine -3 piksel atama yapmalıyız.
 
-	:::html
-	/* E5-Mac gizleyelim. sadece IE-Win görsün bu kodu. */
-	* html p { height: 1%; margin-left: 0; }
-	* html .solKolon { margin-right: -3px; }
-	/* IE5/Mac den gizlemeye son */
-
+```html
+/* E5-Mac gizleyelim. sadece IE-Win görsün bu kodu. */
+* html p { height: 1%; margin-left: 0; }
+* html .solKolon { margin-right: -3px; }
+/* IE5/Mac den gizlemeye son */
+```
 
 Bu tüm sorunlarımız çözecektir. Tabi float uygulanan elementin içinde
 resim yoksa. Resmin olduğu durumlarda sorun olacaktır. Bu sorunu çözmek
@@ -69,11 +72,12 @@ için IE5/Win için resmin sağına ve soluna -3 piksel margin ataması
 yapmalıyız. IE6 bu margin'leri görmemelidir. Bunun için kodumuz şöyle
 olacaktır:
 
-	:::html
-	/* E5-Mac gizleyelim. sadece IE-Win görsün bu kodu. */
-	* html p { height: 1%; margin-left: 0; }
-	* html img.solKolon { margin: 0 -3px; margin: 0; }
-	/* IE5/Mac den gizlemeye son */
+```html
+/* E5-Mac gizleyelim. sadece IE-Win görsün bu kodu. */
+* html p { height: 1%; margin-left: 0; }
+* html img.solKolon { margin: 0 -3px; margin: 0; }
+/* IE5/Mac den gizlemeye son */
+```
 
 Biliyorum bu kod bizim sade ve temiz kod mantığımıza çok ters ama
 yapılabilecek pek bir şey de yok. Bu CSS'in sorunu değil tamamen IE'nin