ROZWIĄZANE Szerokość nagłówka strony i jego elementów

Witam, męczę się trochę przeszukując rozwiązania dotyczące umiejscowienia stałych elementów nagłówka (koszyk, wyszukiwarka, logowanie i wersje językowe). Może dałoby się to jakoś lepiej napisać, aby można to było bardziej swobodnie edytować w panelu administracyjnym. Nie znalazłem jednak kwestii samej szerokości nagłówka z logo i belki nad nim. Zwiększenie szerokości logo automatycznie powiększa nagłówek, ale gdzie można ustawić szerokość tego nagłówka i także belki nad nim, aby ładnie ściągnąć całość do góry? Przesunąłem koszyk i wyszukiwarkę niżej, ale i tak między belką górną a nagłówkiem logo jest brzydki duży margines. Jak go zmniejszyć?

 

Możesz, np. tak:

Kod:

.login-bar {
    background-color: #fff;
    max-height: 44px;
}

header .logo-bar {
    padding-top: 0px;
}

header .logo-bar .link-logo img {
    padding-top: 0px;
}

Mnie się tak podoba przynajmniej.

 

Stau, jesteś nieoceniony. Podoba mi się także i dzięki.

 

Żaden kłopot. Widzę w Twoim sklepie jeszcze dwa problemy:
http://www.glowatka.com/pl/c/Spinningowe/169

Przysłonięte info "zobacz więcej", na samym dole "nachodzi" wręcz na poziomy pasek. Przy produktach, których nazwa zajmuje trzy wiersze - ów trzeci wiersz jest "zasłonięty".

Spróbuj tak:

Kod:

.products.viewphot .product {
    border: none;
    background-color: #fff;
    height: 450px;
}
.products.viewphot .product .productname {
    font-size: 1.6em;
    margin-bottom: 0.5em;
    height: 2.95em;
}

 

Właśnie, widziałem jakieś kropki na stronie, ale machnąłem na to ręką. Dzięki wielkie za spostrzegawczość. Napisałeś o dwóch problemach? Jaki jest drugi? Wygląda to bardzo dobrze. Jedynie odległość "do koszyka" od ceny mogłaby być mniejsza.

 

Oba już rozwiązane:
1) Linki "zobacz więcej" pod przyciskami do koszyka wcześniej były niewidoczne (zakryte następnymi produktami); jedynie w ostatnim rzędzie można je było kliknąć, ale nachodziły na pionowy pasek (początek stopki);
2) Nazwy produktów - przy trzech wierszach ucinało ten ostatni (to dość spory minus, klienci nie widzieli "gabarytów");

---

Co do "odległości" od koszyka. Przetestuj czy to zadziała i nie "rozsypie" innych elementów:

Kod:

.basket > fieldset {
margin-top: 0px !important;

}

Jak uda się sprawnie to zmienić - możesz zmniejszyć poprzednią wartość "height: 450px" - żeby z kolei zbyt duża "luka" nie zrobiła się pomiędzy poszczególnymi wierszami produktów.

---

Problem kolejny to koszyk - gdy "uzupełnimy" go produktami - "odjeżdża" w górę, co wygląda bardzo kiepsko. Spróbuj tak:

Kod:

header .logo-bar .basket {

border-color: #c25125;
background: url('../../styles/../images/arrow-white-down.png') no-repeat 96% 50% #c25125;
color: #fff;
width: 250px;
margin-top: 30px;

}

Powinno pomóc, ale to i tak dopiero połowa "naprawy" całości. Jak odsuniesz w ten sposób element - zacznie się "dyskoteka" przy rozwijaniu i zwijaniu listy z produktami. Na razie spróbuj "wyleczyć" powyższe "rany".

 

Wygląda to teraz nieźle. Dyskoteka rzeczywiście jest w koszyku. Nie wiem, czy nie lepiej byłoby to w ogóle wyłączyć, zostawiając tylko informację o kwocie i ilości przedmiotów. Gdzieś widziałem na forum takie rozwiązanie, Co do odległości od koszyka, to zmniejszyłem to jeszcze o 10 punktów (-10), a wartość height - 420px. Jeszcze raz Stau, wielkie dzięki. Znasz dużo lepiej graficzne zagwostki, na które ja czasami nie zwracam uwagi, więc jeśli znajdziesz coś jeszcze, albo miał super pomysły - będę wdzięczny.

 

Trzeba przesunąć "w dół" tę rozwijaną listę, aby nie nachodziła na przycisk. Spróbuj - może zadziała:

Kod:

.basket-contain {

top: 119px !important;

}

 

Piknie

 

Ostatnia rzecz, która mnie irytuje to po lewej stronie zakładka "Producenci":
http://www.glowatka.com/pl/c/Kolowrotki/47
Brakuje obramowania, które świadomie usunąłeś tym wpisem:

Kod:

#box_producers .producers_wrap {
    border: none !important;
}

Przykryłeś wówczas wpis:

Kod:

border: 1px solid #d0d0d0;

Możesz to "naprawić", jeśli uznasz za zasadne. To tyle ode mnie. Pzdr.

 

Hmm, musiałem trochę poszukać o co chodzi z tym obramowaniem. Ze świadomością to bym nie przesadzał ;-) Poniżej wklepałem całą listę własnego CSS, którą mam - taki zlepek z różnych fragmentów z forum. Czy możliwe, że w oryginalnym RWD nie ma tej ramki w producentach?


.basket-contain {

top: 119px !important;

}

.basket > fieldset {
margin-top: -10px !important;
}

header .logo-bar .basket {

border-color: #c25125;
background: url('../../styles/../images/arrow-white-down.png') no-repeat 96% 50% #c25125;
color: #fff;
width: 250px;
margin-top: 30px;

}
.products.viewphot .product {
border: none;
background-color: #fff;
height: 420px;
}
.products.viewphot .product .productname {
font-size: 1.6em;
margin-bottom: 0.5em;
height: 2.95em;
}
.login-bar {
background-color: #fff;
max-height: 44px;
}

header .logo-bar {
padding-top: 0px;
}

header .logo-bar .link-logo img {
padding-top: 0px;
}

form fieldset {
border: 1 none;
margin-top: 30px;
padding: 0;
}
header .logo-bar .basket > a.count > span.countlabel {
font-size: 1.2em;
}
header .logo-bar .basket.empty-basket {
margin-top: 30px;
}
.menu .innermenu .menu-list li h3 a:hover {
background-color: #e66221;
}
#box_menu ul li.current > a {
background-color: #e66221;
}
.sort-and-view .sortlinks .products-sort-container .products-sort-options a.active-sort:hover {
background-color: #e66221;
}
.sort-and-view .sortlinks .products-sort-container .products-sort-options a.active-sort {
background-color: #e66221;
}
.sort-and-view .sortlinks .products-sort-container .products-sort-options {
border-color: #e66221;
}
#box_menu ul li a {
font-size: 18px;
}
#box_productfull .otherprice { display:none; }
.login-bar a {

color:#9C4A24;
}

.login-bar {

background-color:#fff;
}

.login-bar a.login img, .login-bar a.logout img {

background:#fff;
}

.login-bar a.register img {

display:none;

}

.menu .innermenu .menu-list li.home-link-menu-li a img {

display:none;

}
#box_productfull .productimg .mainimg {
border: 1px solid #d8d8d8;
cursor: pointer;
display: block;
height: 440px;
line-height: 380px;
margin-bottom: 1em;
overflow: hidden;
text-align: center;
}

 

Nie wiem. W każdym razie z poziomu kodu wygląda to dziwnie. Spróbuj:

Kod:

#box_producers .producers_wrap {
    border: 1px solid #d0d0d0 !important;
}

 

@Stau To jest zdaje się błąd w Click Shopie
@Grzegorz Czy możesz to sprawdzić (u mnie też w CSS w tym miejscu występuje kod:
width: 100%;
opacity: 1;
border: none;

 

Coś chyba rzeczywiście jest na rzeczy, bo widziałem ten "defekt" w kilku już sklepach i wątpię, aby za każdym razem przyczyną była ingerencja użytkownika/"sklepowego admina" (jak pierwotnie myślałem). Za dużo tych przypadków.