Hakkı Duman - Web & Arayüz Tasarım » jQery, Ajax, Css http://www.hduman.com Hakkı Duman tarafından, genç webmasterlara hazırlanan küçük bir arşiv. Sat, 12 May 2012 14:10:25 +0000 en hourly 1 http://wordpress.org/?v=3.3.1 Css İle Yan Yana Div Yerleştirmek http://www.hduman.com/css-ile-yan-yana-div-yerlestirmek.html http://www.hduman.com/css-ile-yan-yana-div-yerlestirmek.html#comments Tue, 25 Oct 2011 16:23:55 +0000 hduman http://www.hduman.com/?p=3101 HTML ye css ile kullanmaya alıştığımız div kodlaması bizi çoğu zaman büyük zahmetlerden kurtarmıştır. Fakat bazı zamanlarda ise tam bir baş belası olmuştur. Örneğin iki div kodlamasını aynı sayfada yan yana çalıştırmak çoğu zaman webmasterlar için günün sorusu olmuştur. Halbuki o okadar da zor bir olay değildir. İki veya daha fazla div kodlamasını yan yana çalıştırmak için gerekli olanlar bir adet ana div kodlaması ve içine serpiştireceğimiz div parçacıkları. Aşağıdaki adımları izleyerek kolayca iki veya daha fazla div kodlamasının nasıl yan yana çalıştıracağınızı öğrenebilirsiniz.

<div id="ana_div">
<div class="div" id="div">HDuman.Com - 1.Div</div>
<div class="div" id="div2">HDuman.Com - 2.Div</div>
<div class="div" id="div3">HDuman.Com - 3.Div</div>
</div>
 
 #ana_div {
	height: 300px;
	width: 970px;
	margin-right: auto;
	margin-left: auto;
	background-color: #666666;
}

.div {
	float: left;
	height: 200px;
	width: 303px;
	margin: 10px;
	color: #FFFFFF;
}

Hepsi bu kadar 3 adet div kutucuğu oluşturduk.

]]> http://www.hduman.com/css-ile-yan-yana-div-yerlestirmek.html/feed 0 Css İle Menü Tasarlamak http://www.hduman.com/css-ile-menu-tasarlamak.html http://www.hduman.com/css-ile-menu-tasarlamak.html#comments Mon, 24 Oct 2011 10:26:07 +0000 hduman http://www.hduman.com/?p=3090 Bildiğimiz gibi çoğu sitede artık css menüler kullanılmakta. Css kullanarak çok şık menüleri çok kolay tasarlayabiliriz. bunun için tek sahip olmamız gereken çok az bir css kodlaması. Bilmeyen arkadaşlar içinde şuanki makalem gibi bir çok hazır verilen menü kodlamaları internette mevcuttur. Bu makalemde sizlere tasarımcıların iyi bildiği fakat ismini vermek istemediğim bir webmaster eğitim sitesinin yan menüsünün aynısını kodlamaya çalışacağız. Tek yapmanız gereken aşağıda verdiğim kodarı uygun yerlere yerleştirmek.

İlk olarak bir html dosyası oluşturuyoruz ve <body> kodundan hemen sonra aşağıda vermiş olduğum kodları yerleştiriyoruz.

<div id="menu">
<img src="dersler_baslik.gif"  />
<ul>
    <li><a href="#">Anasayfa</a></li>
    <li><a href="#">Hakkımda</a></li>
    <li><a href="#">Referanslar</a></li>
    <li><a href="#">Hizmetler</a></li>
    <li><a href="#">Php</a></li>
    <li><a href="#">Photoshop</a></li>
	<li><a href="#">CSS</a></li>
    <li><a href="#">Bana Ulaşın</a></li>

  </ul>
</div>

Şimdi sıra css dosyamızı oluşturmaya geldi. Style.css adında bir css dosyası oluşturup içine aşağıda vermiş olduğum kodları sırasıyla kaydedin.

 #menu {
	width:174px;
	float:left;
	font-family:Tahoma;
	font-size:11px;
	border:ridge 1px;
	padding-right:5px;
}

 #menu ul {
	list-style-type:none;
	margin:0px;
	padding-top:0;
	padding-right:0;
	padding-bottom:0;
	padding-left:7px;
	padding-top:10px;
}

#menu ul li {
	border-bottom: 1px solid #E8E7D0;
}

 #menu a {
	display:block;
	font-weight:bold;
	color:#333;
	text-decoration:none;
	padding-left:10px;margin:0px;
	padding-bottom:3px;
	padding-top:5px;
}
#menu a:hover {
	background-color: #FFF2D9;
	color: #CC0000;
	padding-top:5px;
	border-left-width: 7px;
	border-left-style: solid;
	border-left-color: #333333;
	margin-left: -5px;
}

Dosyamızı kaydedip kapatıyoruz. Sonuç aşağıdaki gibi olacaktır. Style.css ve html dosyamızın aynı klasorde olmasına dikkat edin.
Sonuç:

]]> http://www.hduman.com/css-ile-menu-tasarlamak.html/feed 0 Ajax Sponsorlar Modülü http://www.hduman.com/ajax-sponsorlar-modulu.html http://www.hduman.com/ajax-sponsorlar-modulu.html#comments Fri, 31 Dec 2010 14:03:48 +0000 hduman http://www.hduman.com/?p=2172
Bu modül ile sitenizin sponsorlarını açıklamalı bir şekilde sergileyebilir aynı zamanda ajax efektlerden oluşmuş hoş bir sayfa sahibi olabailirsiniz. Demo ve indirme linkleri için konunun devamını görüntüleyiniz.

Demo

http://demo.tutorialzine.com/2010/03/sponsor-wall-flip-jquery-css/demo.php

Download

http://demo.tutorialzine.com/2010/03/sponsor-wall-flip-jquery-css/demo.zip
]]> http://www.hduman.com/ajax-sponsorlar-modulu.html/feed 0 Ajax Resim Büyüteci http://www.hduman.com/ajax-resim-buyuteci.html http://www.hduman.com/ajax-resim-buyuteci.html#comments Fri, 31 Dec 2010 13:59:28 +0000 hduman http://www.hduman.com/?p=2164

Güzel bir ajax resim büyüteci bu modül ile sitenizde değişik efektler oluşturabilir ziyaretcilerinize ilgi çekici animasyonlar sunabilirsiniz. Demo ve indirme linkleri için konunun devamını görüntüleyiniz.

Demo

http://demo.tutorialzine.com/2010/06/apple-like-retina-effect-jquery-css/demo.html

Download

http://demo.tutorialzine.com/2010/06/apple-like-retina-effect-jquery-css/demo.zip
]]> http://www.hduman.com/ajax-resim-buyuteci.html/feed 0 Ajax Yorum Modülü http://www.hduman.com/ajax-yorum-modulu.html http://www.hduman.com/ajax-yorum-modulu.html#comments Fri, 31 Dec 2010 13:54:42 +0000 hduman http://www.hduman.com/?p=2161

Kullanışlı bir ajax yorum modülü arkadaşlar istediğiniz heryerde kolayca kullanabilirsiniz ajax efektleri sayesinde muhteşem görselliğe sahiptir demo ve indirme linkleri için konunun devamını görüntüleyebilirsiniz.

Demo

http://demo.tutorialzine.com/2010/06/simple-ajax-commenting-system/demo.php

Download

http://demo.tutorialzine.com/2010/06/simple-ajax-commenting-system/demo.zip
]]> http://www.hduman.com/ajax-yorum-modulu.html/feed 0 JQuery S.S.S Scripti http://www.hduman.com/jquery-s-s-s-scripti.html http://www.hduman.com/jquery-s-s-s-scripti.html#comments Thu, 04 Nov 2010 20:08:19 +0000 hduman http://www.hduman.com/?p=1740
Güzel bir JQuery uygulaması sıkca sorulan sorular scripti site sahibi arkadaşların işine yarar arşivlik.

Demo

http://demo.tutorialzine.com/2010/08/dynamic-faq-jquery-yql-google-docs/faq.html

Download

http://hotfile.com/dl/80437887/f700ee9/hduman-faq.rar.html
]]> http://www.hduman.com/jquery-s-s-s-scripti.html/feed 0 Css3 Renkli Navigation Menu http://www.hduman.com/css3-renkli-navigation-menu.html http://www.hduman.com/css3-renkli-navigation-menu.html#comments Thu, 04 Nov 2010 19:48:40 +0000 hduman http://www.hduman.com/?p=1734

Css3 efektlerinin müthiş uyumu ile navigation menümüz karşınızda demoyu inceleyin ve indirmek için sabırsızlanın..

Demo

http://demo.tutorialzine.com/2010/06/css3-minimalistic-navigation-menu/demo.html

Download

http://demo.tutorialzine.com/2010/06/css3-minimalistic-navigation-menu/demo.zip
]]> http://www.hduman.com/css3-renkli-navigation-menu.html/feed 4