Sayfayı Küçültünce Menüler Dağılıyor ?

03-11-2013, 00:42:38

Merhaba arkadaşlar,
CSS'de yeniyim. HTML bilgim var. Kendi imkanlarımla güzel bir tasarım hazırlamaya çalışıyorum. Header kısmı oluşturdum sağına reklam alanı soluna da logo'yu ekledim. Bunların altına da menü butonları ve arama kısmı ekledim. Ama nedense tarayıcının boyutunu küçültünce bu alanlar dağılıyor.

/* header */
      .ust {
         background-color: #f3f3f3;
         background-image: -moz-linear-gradient(#f9f9f9, #f3f3f3);
         background-image: -webkit-linear-gradient(#f9f9f9, #f3f3f3);
         background-image: linear-gradient(#f9f9f9, #f3f3f3);
         border-bottom: 1px solid #e5e5e5;
         text-shadow: 0 1px 0 #fff;
         height: 80px;
         line-height: 31px;
         font-size: 13px!important;
         width:%100;
      }
      
      /* logo */
      .logo{
         float:left;
         padding: 0 70px;
      }
      
      /* Reklam Alanı */
      .reklam_alani{
         float:right;
         padding: 9px 70px;
      }

<div class="ust">
<div class="logo">
 <img src="./images/logo.png" title="WebSite" />
</div>

 <div class="reklam_alani">
 <img src="./images/reklamalan.jpg" title="Hemen Reklam Ver !" />
</div>
</div>

03-11-2013, 01:12:32

#2

BestCoder

width:100% yerine, width:960px gibi sabit bir değer verirsen, ekran küçültülünce kayma oluşmaz... Tabi buradaki 960 benim rastgele kafadan yazdığım bir değer, sen kendine göre 1000, 1200px gibi değerler vererek genişliği ayarlayabilirsin.

03-11-2013, 01:13:08

#3

alikarakoc93

Tam olarak anlayamadım ama şu şekilde bir dene bakalım doğru mu anlamışım.

        .govde {
            width: 980px;
            height: auto;
            margin: auto;
        }

        .ust {
            background-color: #f3f3f3;
            background-image: -moz-linear-gradient(#f9f9f9, #f3f3f3);
            background-image: -webkit-linear-gradient(#f9f9f9, #f3f3f3);
            background-image: linear-gradient(#f9f9f9, #f3f3f3);
            border-bottom: 1px solid #e5e5e5;
            text-shadow: 0 1px 0 #fff;
            height: 80px;
            line-height: 31px;
            font-size: 13px !important;
            width: 100%;
        }

        /* logo */
        .logo {
            float: left;
            padding: 0 70px;
        }

        /* Reklam Alanı */
        .reklam_alani {
            float: right;
            padding: 9px 70px;
        }

    <div class="govde">
        <div class="ust">
            <div class="logo">
                <img src="./images/logo.png" title="WebSite" />
            </div>

            <div class="reklam_alani">
                <img src="./images/reklamalan.jpg" title="Hemen Reklam Ver !" />
            </div>
        </div>
    </div>

03-11-2013, 01:27:40

#4

RooTsGhosT

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

Merhaba arkadaşlar,
CSS'de yeniyim. HTML bilgim var. Kendi imkanlarımla güzel bir tasarım hazırlamaya çalışıyorum. Header kısmı oluşturdum sağına reklam alanı soluna da logo'yu ekledim. Bunların altına da menü butonları ve arama kısmı ekledim. Ama nedense tarayıcının boyutunu küçültünce bu alanlar dağılıyor.

/* header */
      .ust {
         background-color: #f3f3f3;
         background-image: -moz-linear-gradient(#f9f9f9, #f3f3f3);
         background-image: -webkit-linear-gradient(#f9f9f9, #f3f3f3);
         background-image: linear-gradient(#f9f9f9, #f3f3f3);
         border-bottom: 1px solid #e5e5e5;
         text-shadow: 0 1px 0 #fff;
         height: 80px;
         line-height: 31px;
         font-size: 13px!important;
         width:%100;
      }
      
      /* logo */
      .logo{
         float:left;
         padding: 0 70px;
      }
      
      /* Reklam Alanı */
      .reklam_alani{
         float:right;
         padding: 9px 70px;
      }

<div class="ust">
<div class="logo">
 <img src="./images/logo.png" title="WebSite" />
</div>

 <div class="reklam_alani">
 <img src="./images/reklamalan.jpg" title="Hemen Reklam Ver !" />
</div>
</div>

hocam width değerini yüzde ile verdiğiniz için sayfa genişliğiniz pencere genişliğiniz ile orantılı olarak değişiyor diğer bölümlerede px cinsinden değilde yine yüzde olarak verirseniz örneğin logo width:40% reklam width:60% gibi pencerenin boyutu değiştiğinde bu bölümlerinde boyutu değişicektir bu sayede tasarımınızda büyük bir dağılma olmaz...

03-11-2013, 01:28:09

#5

aTKn94

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

width:100% yerine, width:960px gibi sabit bir değer verirsen, ekran küçültülünce kayma oluşmaz... Tabi buradaki 960 benim rastgele kafadan yazdığım bir değer, sen kendine göre 1000, 1200px gibi değerler vererek genişliği ayarlayabilirsin.

Hocam mesela reklam alanı kısmı var. Css'de px kullanmadım sadece margin kullandım. Bide float verdim. mesela bu alan kayıyor. container oluşturup tüm kodlarımı ona aldım hatta ilgisi varmı bilmiyorum ama container kodum da ;

.container {
		float: left;
		height: 100%;
		width: 100%;
	}

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

Tam olarak anlayamadım ama şu şekilde bir dene bakalım doğru mu anlamışım.

        .govde {
            width: 980px;
            height: auto;
            margin: auto;
        }

        .ust {
            background-color: #f3f3f3;
            background-image: -moz-linear-gradient(#f9f9f9, #f3f3f3);
            background-image: -webkit-linear-gradient(#f9f9f9, #f3f3f3);
            background-image: linear-gradient(#f9f9f9, #f3f3f3);
            border-bottom: 1px solid #e5e5e5;
            text-shadow: 0 1px 0 #fff;
            height: 80px;
            line-height: 31px;
            font-size: 13px !important;
            width: 100%;
        }

        /* logo */
        .logo {
            float: left;
            padding: 0 70px;
        }

        /* Reklam Alanı */
        .reklam_alani {
            float: right;
            padding: 9px 70px;
        }

    <div class="govde">
        <div class="ust">
            <div class="logo">
                <img src="./images/logo.png" title="WebSite" />
            </div>

            <div class="reklam_alani">
                <img src="./images/reklamalan.jpg" title="Hemen Reklam Ver !" />
            </div>
        </div>
    </div>

Hocam dediğiniz sanırsam oldu ama tüm her yer kaydı. Buda govde kısmında verdiğiniz width değerinden kaynaklanıyor sanırsam. Oranın değerini yükseltince düzeldi ama şimdi herkes benim ekran çözünürlüğümü kullanmıyor. Kendime göre ayarlarsam o width değerini başka bilgisayarlarda kayma olmaz mı ?

03-11-2013, 16:29:13

#6

alikarakoc93

980px 960px gibi değerler standart sayılabilir ve kayma taşma yapmaz.

03-11-2013, 16:56:21

#7

misal

responsive