﻿<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Uğur Ethem Aydın Kişisel Blogu &#187; sayfa ortalama</title>
	<atom:link href="http://www.ugurethemaydin.com/tag/sayfa-ortalama/feed" rel="self" type="application/rss+xml" />
	<link>http://www.ugurethemaydin.com</link>
	<description>Girişimci,yazılımcı,reklamcı,pazarlamacı dan tecrübe paylaşımı...</description>
	<lastBuildDate>Thu, 18 Aug 2011 20:00:53 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.8.4</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>Css ile sayfayı ortalama</title>
		<link>http://www.ugurethemaydin.com/css/152-css-ile-sayfayi-ortalama.html</link>
		<comments>http://www.ugurethemaydin.com/css/152-css-ile-sayfayi-ortalama.html#comments</comments>
		<pubDate>Sun, 04 Oct 2009 01:20:08 +0000</pubDate>
		<dc:creator>Uğur Ethem AYDIN</dc:creator>
				<category><![CDATA[CSS]]></category>
		<category><![CDATA[sayfa ortalama]]></category>

		<guid isPermaLink="false">http://www.ugurethemaydin.com/?p=152</guid>
		<description><![CDATA[Merhabalar;
Css ile web sayfası hazırlarken sorun yaşanan konulardan biride css ile sayfayı ortalamaktır.
Css ile sayfayı ortalarken yapılması gerekenleri maddeler halinde sıralayabiliriz.

css ile xhtml sayfalar kodlarken tüm browser(tarayıcı) larda çalışabilmesi için geniş bir şekilde konu ele alınmalıdır.
div kurgusu ve kullanılan kodlar tüm browser larda çalışıcak şekilde yazılmalı, gerekiyorsa internet explorer 6 gibi standart dışı eski browser [...]]]></description>
			<content:encoded><![CDATA[<p>Merhabalar;</p>
<p>Css ile web sayfası hazırlarken sorun yaşanan konulardan biride css ile sayfayı ortalamaktır.<span id="more-152"></span></p>
<p>Css ile sayfayı ortalarken yapılması gerekenleri maddeler halinde sıralayabiliriz.</p>
<ol>
<li>css ile xhtml sayfalar kodlarken tüm browser(tarayıcı) larda çalışabilmesi için geniş bir şekilde konu ele alınmalıdır.</li>
<li>div kurgusu ve kullanılan kodlar tüm browser larda çalışıcak şekilde yazılmalı, gerekiyorsa internet explorer 6 gibi standart dışı eski browser lar için başka css yazılmalı.</li>
</ol>
<p>Öncelikle Ana bir div açalım&#8230;Bu bizim web sitemizin ana hattı olacaktır.Düşünelim web sitemizin ana hatlarının genişliği ne kadar olacaktır. Bunu belirledikten sonra Ana div &#8216;e genişliğini belirtebiliriz.Bu Ana div&#8217; i ortaladığımız zaman Ana div&#8217;in içerisindeki <a href="http://www.metromedya.com">Web Tasarım</a> &#8216;da ortalanacak, yani sitemiz ortalancaktır.İlk css kodlarımızı yazalım&#8230;<br />
Ben örnek olarak 900px genişlik vermeyi düşündüm siteme.</p>
<pre class="brush: css;">#anadivim {width: 900px;}</pre>
<p>yukarıda yaptığımız şey oluşturduğumuz css dosyasında anadivim adında bir seçici yerleştirmek ve bunun değerlerinden &#8220;genişlik&#8221;(width) adındaki değerini 900px yapmaktı.</p>
<p>şimdi bunu xhtml dosyamızda nereye yazacağız gibi bir soru soruyorsanız siz daha yolun başındasınız.Bu makale Web tasarım a biraz daha haşırneşir olan kişiler için siz lütfen benin Css ve Xhtml isimli yazılımı okuyarak konuyu anlayın <img src='http://www.ugurethemaydin.com/wp-includes/images/smilies/icon_smile.gif' alt=':)' class='wp-smiley' /> </p>
<p>şimdi ise anadivim seçicisine yeni kodlar ekleyerek devam edelim.Mevcut anadivim css seçicisi için yeni değer giriyoruz.Margin özelliği elementin etrafındaki boşluğa denir.<br />
Tek tek özellikleri tanımlanabilir.(margin-top,margin-left vd.) yada hepsi bir tanımlanır.(margin) .<br />
Örnek vermek gerekirse isterseniz şu şekilde;</p>
<pre class="brush: css;">
#ornekdivismi{
margin-left:30px;
margin-right:30px;
margin-top:30px;
margin-bottom:30px;
}
</pre>
<p>isterseniz şu şekilde;</p>
<pre class="brush: css;">
#ornekdivismi{
margin:30px;
}
</pre>
<p>isterseniz son olarak mini halde yazıp tüm top-left-right-bottom özelliklerini farklı tanımlamak isterseniz, şu şekilde;</p>
<pre class="brush: css;">
#ornekdivismi{
margin:30px 10px 20px 60px;
}
</pre>
<p>Css deki tüm Margin seçici tipleri şu şekildedir.</p>
<ul>
<li>margin-top</li>
<li>margin-right</li>
<li>margin-bottom</li>
<li>margin-left</li>
<li>margin</li>
</ul>
<p>peki margin tam olarak ne yapar.<a href="http://www.ugurethemaydin.com/wp-content/uploads/2009/10/basit_boxmodel.gif"><img class="alignright size-full wp-image-170" title="margin nedir?" src="http://www.ugurethemaydin.com/wp-content/uploads/2009/10/basit_boxmodel.gif" alt="margin nedir?" width="271" height="110" /></a>Doğrusunu sölemek gerekirse mevcut çalıştığınız divinizin dış hat değerleridir.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.ugurethemaydin.com/css/152-css-ile-sayfayi-ortalama.html/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

