Mevzu başlıktaki gibi kolay ve tek satırda hallolmuyor malesef. Amacım resimde gördüğünüz gibi yanyana iki div koymak ve bunlardan birisi sabit genişlikte iken diğer div’in kalan alanın tamamını kullanmasını sağlamak.
Fatih Hayrioğlu’nun sitesinde bulamayınca Google’da aradım ama Türkçe örnekler malesef netice vermedi. Stackoverflow.com’da şu sayfadaki Andres kullanıcısının örneği işe yaradı.
Bu işlem için evvela bu iki div’i taşıyacak bir div daha gerekiyor. Dışardaki div’e dar ve sabit genişlikli olan div kadar padding-left vermek gerekiyor ki geniş alan bu mesafeden başlasın ve %100 genişliğine sahip olmasına rağmen padding’den dolayı sadece kalan alanı kullanabilsin. Bu kısım çalıştığında aslında işin zor kısmı bitmiş oluyor. Geniş olan div’in sabit bir alan hariç tüm ekrana yayılmasını sağladık.
İkinci olarak da dar ve sabit genişliğe sahip div’i kapsayıcı alandaki padding’den oluşan boşluğa konumlandırmak gerekiyor. Normalde bu div de ana div’in içerisinde yer aldığından padding-left’ten etkilenecektir. Bu etkiyi sıfırlamak için kendi genişliği kadar negatif değerli margin-left kullanıp kendini taşıyan div’in dışına çıkmasını sağlamalıyız. Bu kadar.
Örnek:
CSS
.kutu {
height: 200px;
padding-left: 260px;
}
.kutu .dar {
height: 200px;
width: 260px;
margin-left: -260px;
background-color:blue;
float:left;
}
.kutu .genis {
float: left;
height: 200px;
width: 100%;
background-color:green;
}
HTML
<div class=kutu>
<div class=dar>Dar</div>
<div class=genis>Genis</div>
</div>
Örnek dosyayı indirmek için tıklayın.
PHP geliştiricilerin hayatını kolaylaştıran araçlardan biri olan WAMP’ı Windows 7′ye kurduğunuzda hiç bir sorun yaşamıyorsunuz fakat tarayıcınızı çalıştırıp http://localhost dediğinizde sayfa görüntülenemiyor hatası alıyorsunuz. Bunun nedeni localhost tanımlamasının Windows’un yerel dns kayıtlarında öntanımlı olarak pasif halde tutuluyor olmasıdır. http://localhost yerine http://127.0.0.1 yazarsanız Wamp’in düzgün kurulduğunu ve sorunsuz çalıştığını görebilirsiniz.
Windows 7′de dns kayıtlarını düzenlemek için Notepad’inizi “Yönetici Modunda” çalıştırmalısınız. Bunun için “Başlat/Donatılar/Not Defteri” bağlantısına sağ tıklayıp “Yönetici Olarak Çalıştır” seçeneğini tıklayın. Daha sonra “C:\Windows\System32\drivers\etc” klasörü altındaki “hosts” dosyasını açın, not defteri ön tanımlı olarak “.txt” uzantılı dosyaları bulmaya meyilli olduğundan klasör boş gibi görünürse “*.*” seçeneğini kullanarak tüm dosyaları görüntülemesini sağlayın..
Dosyayı açtığınızda
#127.0.0.1 localhost
satırının başındaki # işaretini kaldırın. Bu dosyaya kendi isteğinize göre farklı dns kayıtları da oluşturabilirsiniz. Örneğin “okul” adlı bir web projeniz varsa ve bu projeye “http://localhost/projem” diye erişmek yerine kendine ait bir domainmiş gibi “http://projem.localhost” diye erişmek isterseniz bu dosyaya
127.0.0.1 projem.localhost
gibi bir çok satır ekleyebilirsiniz. Bunun dışında gerçek bir adresi de istediğiniz bir ip’ye yönlendirebilirsiniz. Tabi bu yönlendirme sadece sizin bilgisayarınız için geçerli olacaktır.
DNS kayıtlarında yaptığınız değişikliğin geçerli olabilmesi için komut satırından (Başlat’a bastıktan sonra gelen arama kutusuna CMD yazın) şu komutu girmelisiniz:
ipconfig /flushdns
Böylece “Dns çözücü ön belleği başarıyla temizlendi” mesajını alırsınız ve artık eklediğiniz kayıt o ip’ye yönlendiriliyor demektir. Kontrol etmek için yine komut satırından “ping projem.locahost” u yazıp deneyebilirsiniz.
Apache Virtual Host Ayarları
“projem.localhost” şeklinde oluşturduğunuz dns kaydınız için apache’de de bir ayar yapmalısınız ki bu şekilde gelen istekleri hangi klasöre yönlendireceğini bilebilsin.
Bunun için normalde sadece wamp klasörünün içindeki “…\bin\apache\apache2.2.11\conf\extra” klasöründeki httpd-vhosts.conf dosyasına bir kaç satır eklemek yeterli ama, apache’nin bu dosyayı kale alması için önce conf klasörünün içindeki httpd.conf dosyasında iki pasif ayarı aktifleştirmek gerekiyor.
httpd.conf dosyasını notepad ile açın (yönetici modu gerekmiyor) ve “vhost” kelimesini aratın.
#LoadModule vhost_alias_module modules/mod_vhost_alias.so
ve
#Include conf/extra/httpd-vhosts.conf
satırlarını bulup başlarındaki # işaretini silin. Dosyayı kaydettikten sonra extra klasöründeki httpd-vhost.conf dosyasını açarak en sonuna şu satırları ekleyin:
<VirtualHost *:80>
DocumentRoot “C:/wamp/www/projem/”
ServerName projem.localhost
</VirtualHost>
Sonra wamp menüsünden tüm sunucuları yeniden başlatın. İşte hepsi bu kadar..
Mevzu başlıktaki gibi kolay ve tek satırda hallolmuyor malesef. Amacım resimde gördüğünüz gibi yanyana iki div koymak ve bunlardan birisi sabit genişlikte iken diğer div’in kalan alanın tamamını kullanmasını sağlamak.