ROZWIĄZANE Niespójny Login Bar - zmiany @media min-width oraz max-width w CSS

Witam serdecznie, po żmudnych próbach samodzielnej zabawy doprowadziłem swój login bar do wyglądu mniej więcej jaki bym oczekiwał, Niestety po wejściu na innym komputerze (inna rozdzielczosc) Pasek całkowicie się zniekształa (wyszukiwarka koszyk nachodzą na siebie)

W załączniku wrzucam screen od siebie jak wygląda strona, tę samą chciałbym osiagnąć na każdej rozdzielczości

A o to mój sklep: http://FitnesStore.pl/

Strzelam, że wina leży w tym że operowałem przesuwaniem w PX a nie %, niestety nie znam sie na tym aż tak i chciałbym was prosic o pomoc, Dziekuje ! ;-)

 

dałeś dla szukaj fixed zamiast jego pozycję zmienić w tplu, takie cyrki Ci się mogą dziać. Umieść w jednym z <li> tak jak w moim wąskim nagłówku i problem się skończy.

 

Plus taki, że cieszę się, że Ty mi odpisałeś, bo czytałem trochę wątków i musze Ci pogratulowac umiejętności

Minus taki, że nie do konca sie oientuje w tych tematach i zrozumiałem z tego tyle, że...
Rozumiem, że wyszukiwarke mam wkleić w loginbar, aby była spójna a nie tak sobie przesuwać aby tylko się nakładały
Wszystko ładnie pieknie, ale nie wiem jak to zrobić

Dzieki za odpowiedź

 

Poszukaj mojego tematu o wąskim nagłówku myślę, że tam otrzymasz odpowiedź na swoje pytanie

 

Juz prawie temat rozwiązany, wrzuciłem Twój Login bar wrzuciłem wyszukiwarkę, wygląda ładnie, ale na mniejszych rozdzielczosciach (czy na telefonach) wyszukiwarka glupieje troszke (button "szukaj") jest pod polem do wpisywania, a chciałbym, aby był obok

zmiana w pixelach nie zbyt pomaga

 

teraz nie mam jak Ci podać rozwiązania, ale poszukaj rozwiązania w css z media i ustaw wielkość dla zakresów rozdzielczości.

 

Generalnie to spędziłem nad tym "kochanym" loginbarem 3 dni (nie jestem programistą niestety) i i tak nie chodzi, teraz czytam o Media i az mi sie coś dzieje

Zaczekam TheL aż będziesz miał czas, wolę się zając czymś dalej bo zamiast dopracowywać sklep, ja siedzę 3 dzien nad głupim paskiem

Dzieki za wyrozumiałość !

Edit:
Czytam i czytam o tym Media, rozumiem juz o co chodzi, ale coś jest chyba nie tak bo wklejajac kod

Code:

@media (max-width:962px){
  .login-bar1 {
    position:static;
    margin-bottom:0px;}
  .login-bar a {line-height: 70%}
}

Login bar na urzadzeniach mobilnych wcale nie "ustaje" tylko cały czas zachowuje sie jak w pozycji fixed"

 

Kod CSS wygląda prawidłowo, składnia została zachowana, ale spróbowałbym dodać jedną wartość !important przy position:

Code:

@media (max-width:962px){
  .login-bar1 {
    position:static!important;
    margin-bottom:0px;}
  .login-bar a {line-height: 70%}
}

 

Super! Pomogło Jeszcze kwestia węższej wyszukiwarki na wersji mobilnej i można przemykać temacik

 

Mniejsza szerokość wyszukiwarki:

Code:

@media (max-width:767px) {
.rwd .s-grid-3:not(td) {
width: 65%;
} }

 

Stary... siedziałem nad tym siedziałem 3 dni i nie zrobiłem, a Ty w 15 minut, dzieki wielkie! jeszcze malutki detal, dało by rade aby ta wyszukiwarka schowała się wyżej obok
jak na screenie
+
Aby przycisk "szukaj" niebieski lekko sie zmnieszył (aby był na szerokość taki jak pole wyszukwiania

Dodam że korzystam z Login Baru autorstwa TheL'a

 

Ten kod powinien spowodować przeniesienie wyszukiwarki 25px wyżej, gdy szerokość ekranu nie będzie większa niż 400px. Musisz się tylko pobawić wartościami max-width lub min-width, aby dopasować kiedy wyszukiwarka ma zostać przeniesiona wyżej.

Code:

@media (max-width:400px) {
form.search-form.right {
margin-top:-25px;
} }

Podczas zabawy z parametrami max-width oraz min-width możesz korzystać z polecenia zbudowanego w takim poniższym stylu. Pozwala ono określić minimalną oraz maksymalną szerokość ekranu przy której wyszukiwarka zostanie przeniesiona wyżej.

Code:

@media (min-width:480px) and (max-width: 640px)

 

Dziekuje za informacje, będe pamiętał w przyszłosci

Wygląda to ładnie, ale na moim netbooku starszym) o rozdzielczości 800 Przycisk szukaj jest pod polem wyszukiwarki a nie obok

nie pomaga zmniejszenie "width" bo nawet przy 10% jest uparcie pod wyszukiwarka, mimo że mógłby się zmieścic obok...
Ręce opadają.

 

Jest trochę zabawy, musisz dostosować elementy do odpowiednich szerokości ekranu. Gdy dostosujesz dla jednej szerokości, może się okazać, że dla większej szerokości ekranu teraz też będzie wymagana modyfikacja.

 

OKej pobawię się:
przyklad dla konkretnych ekranów:

Code:

@media (min-width:480px) and (max-width: 640px)
{
form.search-form.right {
margin-top:-25px;
}}

(To podniesie wyszukwiarke o 25 px ma ekranach od 480 do 640 px)
pozniej przejść na wersje tabletowe, netbookowe
np;

Code:

@media (min-width:680px) and (max-width: 900px)
{
form.search-form.right {
margin-top:-10px;
}}

Zgadza się, dobrze rozumiem ?

 

Tak, zgadza się.

Ten kod spowoduje zmiany dla ekranów, których szerokość ma wartość przynajmniej 480px, ale nie jest większa niż 640px:

Code:

@media (min-width:480px) and (max-width: 640px)
{
form.search-form.right {
margin-top:-25px;
}}

Ten kod spowoduje zmiany dla ekranów, których szerokość ma wartość przynajmniej 680px, ale nie jest większa niż 900px:

Code:

@media (min-width:680px) and (max-width: 900px)
{
form.search-form.right {
margin-top:-10px;
}}

Tym sposobem możesz zmienić CSS dla określonych rozdzielczości ekranów.

 

@Mariusz dobrze napisał, warto stosować oba parametry dotyczące minimalnej i maksymalnej rozdzielczości. Widzę, że poradziliście sobie z problemem

 

Troszkę zabawy ale ustawiłem, mam nadzieje, że nie bedzie juz z tym problemów, dziękuję wam !

 

nie będzie jeśli dla odpowiednich rozdzielczości ustawiłeś wszystko. Warto przy okazji popatrzeć co innego przydałoby się zmienić w innych rozdzielczościach.
ps. na pw wysłałem Ci jeszcze informację