Logo umieszczone jako tło to raczej kiepski pomysł, a szczególnie gdy chcesz dodać jakieś elementy obok niego. Najprościej byłoby to zrobić tak:
W szablonie
header, usuń div o klasie
wrapper (ten znajdujący się wewnątrz #logo) a w CSS usuń regułę
#logo .wrapper , następnie w
#logo zamień background z obrazka na kolor (w tym przypadku czarny). Następnie usuń wszystkie marginesy które nadałeś obrazkom no i dodaj w odpowiednim miejscu obrazek z logo w taki sam sposób jak reszta obrazków wewnątrz #logo, ponadto pamiętaj aby zmniejszyć szerokość obrazka zawierającego logo do minumum, i przy okazji możesz usunąć z niego czarne tło, skoro jest już w CSS.
Po tych zmianach nie będzie to wyglądać tak idealnie jakbyś sobie tego zażyczył, lecz kod będzie bardziej poprawny oraz lepszy do dalszych modyfikacji.
Kolejne kroki to już samo pozycjonowanie poszczególnych elementów, ale to można w prosty sposób załatwić chociażby flexboxem, lecz najpierw wykonaj to co już napisałem, a później się zobaczy co tam jeszcze trzeba dopisać
(13.07.2018, 11:12)ThreeG napisał(a): [ -> ]Logo umieszczone jako tło to raczej kiepski pomysł, a szczególnie gdy chcesz dodać jakieś elementy obok niego. Najprościej byłoby to zrobić tak:
W szablonie header, usuń div o klasie wrapper (ten znajdujący się wewnątrz #logo) a w CSS usuń regułę #logo .wrapper , następnie w #logo zamień background z obrazka na kolor (w tym przypadku czarny). Następnie usuń wszystkie marginesy które nadałeś obrazkom no i dodaj w odpowiednim miejscu obrazek z logo w taki sam sposób jak reszta obrazków wewnątrz #logo, ponadto pamiętaj aby zmniejszyć szerokość obrazka zawierającego logo do minumum, i przy okazji możesz usunąć z niego czarne tło, skoro jest już w CSS.
Po tych zmianach nie będzie to wyglądać tak idealnie jakbyś sobie tego zażyczył, lecz kod będzie bardziej poprawny oraz lepszy do dalszych modyfikacji.
Kolejne kroki to już samo pozycjonowanie poszczególnych elementów, ale to można w prosty sposób załatwić chociażby flexboxem, lecz najpierw wykonaj to co już napisałem, a później się zobaczy co tam jeszcze trzeba dopisać
EEEE nie do końca rozumiem heh nie no tak może być mi się wydaje a loga rozwiązałem w taki sposób że poprostu dalem zdjęca z odnośnikami
[
attachment=13908]O TAK
Co prawda problem rozwiązany... ale jeśli dbasz o responsywność forum, to polecam Ci jednak skorzystać z rozwiązania które podałem. Na mniejszych rozdzielczościach nie wygląda to już tak świetnie, chociażby u mnie, przy 1440x900
[
attachment=13909]
To poczekaj po kolei najpierw kopia zapasowa
(13.07.2018, 11:25)ThreeG napisał(a): [ -> ]Co prawda problem rozwiązany... ale jeśli dbasz o responsywność forum, to polecam Ci jednak skorzystać z rozwiązania które podałem. Na mniejszych rozdzielczościach nie wygląda to już tak świetnie, chociażby u mnie, przy 1440x900
Usunąć całego diva wrapper czy tylko tą linijkę?
Usunąć diva wrapper bez zawartości
Czyli z tego:
Kod:
<div id="logo">
<div class="wrapper">
...
</div>
</div>
zrobić to:
Kod:
<div id="logo">
...
</div>