Kaymayan Üst Çubuk Nasıl Yapılır ?

Arkadaşlar, şimdi şöyle ki bir tasarım üzerinde çalışıyorum, fakat üstte aynı bu wmacındaki gibi bir menü çubuğu yapmaya çalışıyorum, Anasayfa Site Analiz falan yazan değil, hani şu en üstte duyurular mesajlar falan olan, hoşgeldin, sunsky hesabını yükselt yazan yer var ya, işte ondan, ancak şöyle bir durum var, çubuğu yaparken genişliği %100 yapıyorum, yani bir boyut veremediğim için(kimin hangi boyutta cihazdan gireceğini bilemediğim için) %100 olmak zorunda kalıyor, hadi yaptım diyelim, ondan sonra ben mecburen kendi bilgisayarıma göre döşüyorum üzerine gelecek şeyleri, mesela benim ekran genişliğim 900 px olsun, değil ama olsun, ben 900 px'de kodladığım çubuğun en sağına hoşgeldin yazdım diyelim, adamın ekranı 800 px olsun, çubuk otomatik %100 ile küçüleceğinden Hoşgel yazıyor, devamı görünmüyor, nerden biliyorum, tarayıcıyı küçültünce her şey bozuluyor ordan, işte bunu nasıl çözerim, yani çubuk hangi tarayıcıda hangi boyutta açılırsa açılsın düzgün görüksün istiyorum, mobil hariç, çünkü mobile sığmaz onu başka zaman kodlarım ama herhangi bir bilgisayar veyahut tablette düzgün görünmesini istiyorum herkese, bu wmaraci gibi olmalı, şimdiden teşekkür ederim.

min-width min- height max-width max- height kullanmayı dene

@media screen and (max-width: 800px) {
.topbar {
font-size:8px;
}
}

Bunu kendine göre düzenleyebilirsin. Responsive Dizayn yapmaya çalışıyorsun, bu aramayı yaparak bir sürü şey bulabilirsin.

http://jsfiddle.net/pilsiz/NgB2n/

buradaki koda menüyü %100 olarak eklersen istediğin olacaktır sanırım

Aşağıdaki linkteki yazıları okumanı tavsiye ederim dostum. İşin teorisini anlaman açısından faydalı olabilir. Tüm cihazları desteklemek istiyorsan responsive konusuna çokça zaman ayırmalısın. O kadar çok uğraşmak istemiyorum diyorsan 768px ve aşağısı için bir görünüm ve 768px üzeri için bir görünüm elde edecek şekilde bir yaklaşım sergileyebilirsin. Bunu da min-width değerleriyle ve @media etiketiyle birlikte elde edebilirsin. Mozilla nın "responsive design tool" unu da geliştirirken test amaçlı kullanabilirsin faydalı bir tool..

http://informationstock.com/tag/responsive

css ile farklı boyutlara göre ayarlama yapman lazım. min-height max-height bir araştır .

Sen de çubugun en sağına hoşgeldin yazmak yerine hoşgeldin kelimesini <

div class="hg">Hoşgeldin