Merhaba Css Yardım.

23-12-2012, 11:18:28

Üyeliği durduruldu

Merhaba arkadaşlar kendimce psd to css öğrenmeye başladım pratik yaparak bir psd yi css ye dökmeye çalışıyorum.Gayet zevkli bir iş fakat şurda takıldım.

Üst Menüyü hazırladım Yazılarını yazdım linkleri fakat soldan biraz boşluk var ve aralardada ayraçlar var ayraçı resim olarak alıp yazının uzunluk kısalığına göre otomatik ayarlanmasını nasıl yapabilirim.Birde Online Destek Yazısını Nasıl Ekleyebilirim.

Şuanki Hali ;

Css Dosyamdaki Kodlar ;

/*Bismillahirrahmanirrahim*/

body {background-color: white; no-repeat top center; margin: auto;}

img {border: none}
a {text-decoration: none}
ul,li,h1,h2,h3,h4,h5,h6,p,textarea,input {margin: 0; padding:0; list-style-type: none; border: none}

/*Genel*/
#genel {background: url(../images/bg.png); width: 900px; margin: 0 auto}

/*Header*/

#header {}

	/*Menü*/
	#menu {
	background: url(../images/menubg.png); 
	width: 900px; 
	height: 37px; 
	}
	#menu li {float: left; font-size: 14px; font: Regular; padding: 10px; text-transform: capitalize;}
	#menu li a {color: #31a4c2}
	
	/*Destek*/
	
	#destek {background: url(../images/destek.png); width: 178px; height: 64px;  margin: -50px 10px -15px 636px;}

HTML DOSYAM ;

</head>
<body>
<div id="genel" >
<!--Header Baslangıc--->

<div id="header >


			<!----Logo---->
			
			<a href="#"><img src="images/logo.png" alt="" /></a>
			
			<!----Logo Bitis---->
			


</div>
<!----Header Bitis---->

			<!-----Destek------>
			
			<div id="destek" >
			</div>

			<!----Menu Baslangıc--->
			
			<div id="menu" >
			<ul>
			<li><a href="#">Ana Sayfa</a></li>
			<li><a href="#">Alan Adi Tescil</a></li>
			<li><a href="#">Web Hosting</a></li>
			<li><a href="#">Reseller Hosting</a></li>
			<li><a href="#">Vps Server</a></li>
			<li><a href="#">Dedicated Kiralama</a></li>
			</ul>		
			</div>
			<!-----Menu Bitis---->



</div>
</body>
</html>

PSD OLMASI GEREKEN HALİ ;

Yardımcı olabilecek herkeze şimdiden teşekkürler.

23-12-2012, 15:50:41

#2

befy

Kimlik doğrulama veya yönetimden onay bekliyor.

border-right: 1px solid white;
ben bunu kullanıyorum ayıraç olarak.

23-12-2012, 16:35:17

#3

~~cosbilisimtr~~

Üyeliği durduruldu

AlprTbk adlı üyeden alıntı: mesajı görüntüle

border-right: 1px solid white;
ben bunu kullanıyorum ayıraç olarak.

anladım fakat ben baya ilerledim %50 bitirdim tasarımı ama linkler ilk resimdeki gibi solda şimdi menüyü psd den ayraçlı şekilde aldım linkleri anasayfa felan yazılarını nasıl oralara denk getirebilirim.

23-12-2012, 19:36:38

#4

befy

css'e yeni başladım fakat şöyle olabilir;

#menu{
background: url(../images/menubg.png);
width: 900px;
height: 37px;
position:relative;
}

#menu li {
float: left;
font-size: 14px;
font: Regular;
padding: 10px;
text-transform: capitalize;
position:absolute;
left:50px (burayı siz kendiniz canlı olarak değiştirirsiniz öylesine verdim)
}

24-12-2012, 09:00:42

#5

frdtrkc

1px genişliğindeki o bahsettiğin ayraç görseli menubg.png isimli görsel ise aşağıdaki kodlar işini görecektir. En son li elemanın da ayraca ihtiyacı olmayacağı için li.last last sınıfı atadım en son li'ye class="last" eklersen iyi olur.

#menu {
	width: 900px; 
	height: 37px;
}
#menu li {
	float: left;
	font-family: Regular;
	font-size: 14px;
	margin: 0 10px 0 0;
	padding:10px;
	text-transform: capitalize;
	background: url(../images/menubg.png) no-repeat 100% 50%; 
}
#menu li.last {
	margin-right: 0;
	background:none; 
}
#menu li a {
	color: #31a4c2
}

24-12-2012, 18:34:41

#6

sonerkiremit

Css Kodu

Alıntı

.menu_sep{
float:left;
width:auto;
height:auto;
text-decoration:none;
margin:9px 23px 0px 23px;
}

HTML Sayfana Ekleyeceğin Kod.

Alıntı

Burdanda PNG yi download edebilirsiniz.

İyi Çalışmalar.

24-12-2012, 19:03:43

#7

~~cosbilisimtr~~

Üyeliği durduruldu

frdtrkc adlı üyeden alıntı: mesajı görüntüle

1px genişliğindeki o bahsettiğin ayraç görseli menubg.png isimli görsel ise aşağıdaki kodlar işini görecektir. En son li elemanın da ayraca ihtiyacı olmayacağı için li.last last sınıfı atadım en son li'ye class="last" eklersen iyi olur.

#menu {
	width: 900px; 
	height: 37px;
}
#menu li {
	float: left;
	font-family: Regular;
	font-size: 14px;
	margin: 0 10px 0 0;
	padding:10px;
	text-transform: capitalize;
	background: url(../images/menubg.png) no-repeat 100% 50%; 
}
#menu li.last {
	margin-right: 0;
	background:none; 
}
#menu li a {
	color: #31a4c2
}

teşekkür ederim deniyorm.

24-12-2012, 20:59:17

#8

frdtrkc

sonerkiremit adlı üyeden alıntı: mesajı görüntüle

Css Kodu

.menu_sep{
float:left;
width:auto;
height:auto;
text-decoration:none;
margin:9px 23px 0px 23px;
}

HTML Sayfana Ekleyeceğin Kod.

<div class="menu_sep"><img alt="" src="menu_sep.png" /></div>

Burdanda PNG yi download edebilirsiniz.

İyi Çalışmalar.

Enteresan öneriler

25-12-2012, 09:49:26

#9

sonerkiremit

Neden enterasan ?