Php ile tasarım senkronu (Resimli)

Başlık biraz garip olmuş olabilir, kusura bakmayın. Sanıyorum ki soru da öyle olacak bu yüzden sorunumu olabildiğince görsel olarak anlatmaya çalışacağım

Daha önce html/css olarak hazırlanmış bir firma tasarımı var. Ben bu tasarıma yönetim sistemi yazıyorum fakat bir bölümde takıldım.

Standart olarak eklenen sayfalarla sitenin üst bölümü şöyle;



Fakat bir link eksildiğinde durum şöyle oluyor;



Bu benim ilk işim değil fakat tasarımı hazırlayan kişinin ilk işi olabilir bilmiyorum.


Diller bölümünün html kodları şöyle;

    	<div class="logo-genel">
        	<div class="logo"><a href="index.php"><img src="logo.png" width="383" height="97" border="0"/></a></div>
            <div class="diller-arkaplan">
            	<div class="diller-genel">
                	
<div class="genel01">
<div class="tr"><img src="resimler/diller/tr.jpg" width="24" height="18" border="0"/></div>
<div class="en"><a href="en/index.php"><img src="resimler/diller/en.jpg" width="24" height="18" border="0"/></a></div>
<div class="ru"><a href="ru/index.php"><img src="resimler/diller/ru.jpg" width="24" height="18" border="0"/></a></div>
<div class="de"><a href="de/index.php"><img src="resimler/diller/de.jpg" width="24" height="18" border="0"/></a></div>
<div class="fr"><a href="fr/index.php"><img src="resimler/diller/fr.jpg" width="24" height="18" border="0"/></a></div>
<div class="ar"><a href="ar/index.php"><img src="resimler/diller/ar.jpg" width="24" height="18" border="0"/></a></div>
</div>	
                </div>
            </div>
        </div>

Css kodları;

.genel01 {
	float: left;
	height: 18px;
	width: 253px;
}
.diller-arkaplan {
	float: right;
	height: 97px;
	width: 253px;
	background-image: url(../resimler/diller-arkaplan.png);
	margin-right: 15px;
}
.diller-genel {
	float: left;
	height: 18px;
	width: 253px;
	margin-top: 72px;
}

Menü html koldarı şöyle;

        <div class="menu-genel">
        	<div class="buton"><img src="resimler/buton/anasayfa-buton-a.png" width="124" height="50" /></div>
            <div class="ayrac"></div>
			
            <div class="buton"><a href="kurumsal.php" class="kurumsalbuton"></a></div>
            <div class="ayrac"></div>
			
            <div class="buton"><a href="urunler.php" class="urunlerbuton"></a></div>
            <div class="ayrac"></div>
			
            <div class="buton"><a href="videolar.php" class="videolarbuton"></a></div>
            <div class="ayrac"></div>
			
            <div class="buton"><a href="katalog.php" class="katalogbuton"></a></div>
            <div class="ayrac"></div>
			
            <div class="buton"><a href="fuarlar.php" class="fuarlarbuton"></a></div>
            <div class="ayrac"></div>
			
            <div class="buton"><a href="haberler.php" class="haberlerbuton"></a></div>
            <div class="ayrac"></div>
			
            <div class="buton01"><a href="iletisim.php" class="iletisimbuton"></a></div>
        </div>

Css kodları ise;

.menu-genel {
	height: 50px;
	width: 1000px;
}

.buton {
	float: left;
	height: 50px;
	width: 124px;
}
.buton01 {
	float: left;
	height: 50px;
	width: 125px;
}

.ayrac {
	float: left;
	height: 50px;
	width: 1px;
	background-image: url(../resimler/buton/ayrac.jpg);
}

Çok karışık olmuş olabilir. Hani bir umut bu konuyu açıyorum. Artık en olmadı menü linklerini değişken değilde sabit olarak tutmaya çalışacağım.

Not: Referans amaçlı yapıyorum bu işi css bilgim ne yazık ki bu sorunu çözecek seviyede değil.

Şimdiden teşekkür ederim.

üstünkörü baktım, gördüğüm kadarıyla float'lar var. Float işleri bittikten sonra clear çağırırsan belki düzelebilir.

CSS'de şöyle bir class tanımla
.clear { clear:both; }
sağlı sollu yerleşimler bittikten sonra bir alt bölmeye geçmeden önce bu clear'ı şu şekilde çağır
<div class="clear"></div>

güzel bir yöntemdir, sıkça kullanırım..

Şunun gibi;

Sağ obje Sol obje
CLEAR

Alt obje

Ha eğer diyorsan ki tasarımda düzgün, ben koda geçirdikten sonra böyle oldu, o zaman HTML'yi çok iyi incele ve döngülerini kontrol et, muhakkak bir hata vardır

bu durum karşısında 2 senaryo var;

1- eksik/az menü olduğunda menünün site genişliği kadar uzun kalması
2- eksik/az menü olduğunda dil seçme alanının menünün bittiği yerde bitmesi

ilk olarak bunlardan hangisini yapmak istiyorsun ona karar vermen lazım. genelde 1. seçenekteki yapılır. açıkcası html/css yazmaya üşendim sen bu tasarımı çıkartan kişiye, menünün her şartta sabit bir uzunluğu olması gerektiğini söyle. 980px ise, menü arka planı da uzasın 980px kadar uzun olsun, tıklanacak menünün olup olmaması önemli değil. nasıl yaparız diye merak edersen, sondaki oval parçayı kesin bir div, span v.s. bir şeye arka plan olarak atayın. float:left verin. sonrasında ise menu'nin dış divinin arka planına 1 px lik bir tekrar koyun.