Biraz olur gibi oldu

Aşağı Git Tüm Forumlar Web Tasarım - Programlama Yazılım Geliştirme PHP / CGI Biraz olur gibi oldu

Bu konudaki kullanıcılar: 1 misafir

9
Cevap 343
Tıklama 0
Öne Çıkarma

1. sayfa

Biraz olur gibi oldu

Cevap Yaz

Guest-E90F2B1F7

11 yıl

Yüzbaşı

Konu Sahibi

merhabalar abilerim 1 hafta once css konusu acmıstım bugun netten parcalanmış tema buldum ve dedim ki kendim biraz ugrasıyım yapıyım dedim

1 ) sizce nasıl olmuş

Temanın Orjinal Halihttp://hizliresim.com/aB27Rz

benim yaptıgım :http://hizliresim.com/nGL46M

Kodlar HTML:http://hizliresim.com/EE5j1g

Dream Görüntüsü :http://hizliresim.com/q2Pzrq

2) Dream görüntüsünde ki bozukluk tasarımın px lerini göz kararı verdim ondan olabilr mi ?

3) logonun yanına menü divini nasıl geitiricem ona yardım ederseniz

4) ben yine bu orjinal deki gibi neden metinleri biçimlendiremiyorum

Guest-E90F2B1F7

11 yıl

Yüzbaşı

Konu Sahibi

/* CSS Document */ 
  body 
  { 
  background-image:url(../img/bg.jpg); 
  } 
  #geneldiv 
  { 
  border: 3px solid #CCCCCC;  
  -moz-border-radius: 10px;   
  -webkit-border-radius: 10px; 
  	 
  background-color:#FFFFFF; 
  margin-bottom:3px; 
  margin-top:10px; 
  margin-right:auto; 
  margin-left:auto; 
  width:1000px; 
  height:800px; 
  } 
  #logo 
  { 
  margin-left:10px; 
  margin-right:10px; 
  margin-top:20px; 
  margin-bottom:10px; 
  background-repeat:no-repeat; 
  width:195px; 
  height:150px; 
  background-image:url(../img/logo.png); 
  } 
  .menu 
  { 
  background:url(../img/bgMenu.png); 
  float:right; 
  } 
  #header 
  { 
  background-image:url(../img/banner.jpg); 
  width:980px; 
  height:300px; 
  background-repeat:no-repeat; 
  margin-right:auto; 
  margin-left:auto; 
  } 
  .ayrac 
  { 
  margin-top:20px; 
  background-image:url(../img/divider.png); 
  margin-left:auto; 
  margin-right:auto; 
  width:980px; 
  height:30px; 
  background-repeat:no-repeat; 
  } 
  .kutular 
  { 
  background-color:#FFFFFF; 
  margin-left:30px; 
  margin-right:70px; 
  margin-top:20px; 
  margin-bottom:20px; 
  width:222px; 
  height:150px; 
  float:left; 
  } 
  .kutular b,p 
  { 
  text-align:center; 
  color:#000000; 
  font-size:medium; 
  font-family:"Times New Roman", Times, serif; 
  } 
  .kutular img 
  { 
  width:300px; 
  height:200px; 
  } 
  .altkisim 
  { 
  font-family:Geneva, Arial, Helvetica, sans-serif; 
  font-size:small; 
  text-align:left; 
  margin-left:10px; 
  margin-right:10px; 
  margin-bottom:30px; 
  }

buda css kodlarım ustalar.

< Bu mesaj bu kişi tarafından değiştirildi Guest-E90F2B1F7 -- 27 Eylül 2014; 22:53:20 >
Bu mesaja 1 cevap geldi.

umutozturk

11 yıl

Yüzbaşı

kutular divinde yanyana yerleşim yapmak için float kullanmışsın lakin, kutuların ardından floatı temizlemen gerekir. Yoksa ardında gelen her öğe kendisine floatı takip eden pozisyon alır. Bunu clear, temizle vb bir class yazarak veya inline şekilde <div style="clear:both"></div> şeklinde temizleyebilirsin. Floatı temizlemediğin için bir diğer diviini doğru yerleşime getirmek için alt alta p tagı açmışsın böyle bir kullanım sistemi yok ve hatalıdır.

Bu mesaja 2 cevap geldi.

Guest-E90F2B1F7

11 yıl

Yüzbaşı

Konu Sahibi

hocam ben css de yeniyim daha yeni başladım

bana bunu daha ayrıntılı anlatabilrmisiniz pek anlayamadım da

Bu mesajda bahsedilenler: @umutozturk

umutozturk

11 yıl

Yüzbaşı

Menü ve logo için ikili horizontal bir yeleşim planlıyorsan yapman gereken bir kaç işlem var. Aslında farklı tekniklerle yapabilirsin ama temelde yapman gereken şu,

Ben her zaman header bölümünü kapsayan ayrı bir div açıp, içeriği sol ve sağ şeklinde yerleştirme yöntemini kullanıyorum (responsive çalışmıyorsam)

html kodunu şu şekilde oluşturmalısın.

<div class="header">
<div class="logo"><img src="images/logo.png"></div>
<div class="menu">Menü buraya Gelecek</div>
<div style="clear:both"></div>
</div>

css kodun şu şekilde olmalı (belirttiğim gibi responsive bir tasarım yapmadığını farzediyorum responsivde mantık farklı). piksel değerlerini atmasyon veriyorum sen kendine göre uyarla

.header {
width:900px ;
}
.logo {
float:left;
width:300px;
text-align:center;
}
.logo img {
width: 250px;
height: 200px;
}
.menu {
width:580px;
padding:10px;
float:right;
}

Bu mesaja 1 cevap geldi.

umutozturk

11 yıl

Yüzbaşı

Dikkat etmen gereken nokta menu ve logo classlarını yazarken, piksel değerlinin toplamı, header genişliğini geçmesin. Yoksa ikinci div aşağıya kayacaktır. Bu hesaplamada padding değerlini de gözardı etme. 300piksek genişlik verdiğin bir classa ayrıca 10piksel de padding yazarsan aslında 320 piksellik alan kaplar genişlikte.

Bu mesaja 1 cevap geldi.

Guest-E90F2B1F7

11 yıl

Yüzbaşı

Konu Sahibi

hocam çok sagalun bunu yaptıma bile şaşırıyorum çünkü hiç bişey yapamıyrdum

<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>

bunları hala sildim zaman 2014 Telif hakkı kayıyor :) benım kafa biraz kocamamndır almaz hemen

ben o dediğiniz clear: araştırıcam hocam

Bu mesaja 1 cevap geldi.

Bu mesajda bahsedilenler: @umutozturk

umutozturk