Najczęściej zadawane pytania
"../Standard/Contacts/Body.htm"
Kilka kroków opisujących jak uzyskać taki efekt:
W tym przykładzie zostały scalone paski: menu (położony najwyżej) oraz statusu (położony najniżej). Ukaże to w możliwie najdokładniejszy sposób scalanie dwóch pasków.
Krok 1: zamiana pasków miejscami
Uwaga!
Jeżeli nie przenosisz pasków z jednej grupy do drugiej możesz od razu przejść do kroku 2.
Między tagami <body></body> znajdziemy poniższy kod:
<div id="toolbar_header">
<div id="list_content">
<div id="tools_header">
<span id="mainmenu_items" class="mainmenu_items"></span> // pasek menu
<span id="toolbar_items" class="toolbar_items"></span> // pasek narzędzi
</div><span id="toolbar_items" class="toolbar_items"></span> // pasek narzędzi
<div id="list_content">
<div id="0"></div>
</div><div id="tools_header">
<span id="tools_items"></span> // pasek ikon sieciowych
<div class="tools_status" id="tools_status"></div> // pasek statusu
</div><div class="tools_status" id="tools_status"></div> // pasek statusu
W przedstawionym kodzie znajdują się dwie interesujące nas grupy:
toolbar_header - górna grupa zawierająca pasek menu i pasek narzędziowy.
tools_header - dolna grupa zawierająca pasek ikon sieciowych oraz pasek statusu.
Chcąc przenieść dowolny z pasków należy wyciąć całą linijkę kodu, który odpowiada za interesujący nas pasek i wkleić ją w którejś z podanych grup.
Przykład:
<div id="toolbar_header">
<div id="list_content">
<div id="tools_header">
<span id="mainmenu_items" class="mainmenu_items"></span>
<div class="tools_status" id="tools_status"></div>
<span id="toolbar_items" class="toolbar_items"></span>
</div><div class="tools_status" id="tools_status"></div>
<span id="toolbar_items" class="toolbar_items"></span>
<div id="list_content">
<div id="0"></div>
</div><div id="tools_header">
<span id="tools_items"></span>
</div>Efekt:
Krok 2: Połączenie pasków
Paskiem, który będziemy "dołączać" jest pasek statusu (pasek menu pozostawiamy bez zmian). Szukamy więc kodu odpowiedzialnego za wygląd interesującego nas paska. W tym wypadku jest to selektor .tools_status.
W przykładzie zastosuję pozycjonowanie absolutne, bo jest chyba najprostsze do wykonania.
Kolor tła paska statusu zmieniłem na niebieski, żeby łatwiej było je od siebie odróżnić.
.tools_status {
cursor: default;
background-color: #0000FF;
font-family: tahoma;
font-weight: normal;
font-style: normal;
font-size: 11px;
color: gold;
vertical-align: middle;
position: absolute;
top: 2px;
right: 5px;
}
background-color: #0000FF;
font-family: tahoma;
font-weight: normal;
font-style: normal;
font-size: 11px;
color: gold;
vertical-align: middle;
position: absolute;
top: 2px;
right: 5px;
Do powyższego selektora dodajemy kod zaznaczony na zielono. Efekt powinien wyglądać tak:
Odległości od krawędzi ustalamy według potrzeb.
O pozycjonowaniu słów kilka:
W kodzie odpowiedzialnym za wygląd górnej grupy narzędzi widnieje cecha position: absolute;. Górna grupa narzędzi jest więc elementem zawierającym dla wszystkich elementów które się w niej znajdują. Oznacza to, że ustawiając position: absolute; dla paska statusu zmieniamy jego odległość względem krawędzi górnej grupy narzędzi (oznaczone na czerwono), a nie krawędzi całego okna głównego.
Krok 3: Ustawienie paddingów
Aby zapobiec sytuacji, w której zawartość dolnego paska jest zakrywana przez górny (widoczne powyżej) należy w selektorze odpowiadającym za dolny pasek (w tym wypadku .mainmenu_items) dodać prawy margines wewnętrzny:
padding-right: 180px;
W przypadku braku wolnego miejsca zawartość dolnego paska będzie przenoszona do nowej linii.
Krok 4: Poprawa wysokości grup
Ostatni krok nie jest niezbędny do scalenia pasków i ma charakter jedynie kosmetyczny.
Polega na zmniejszeniu wysokości dolnej grupy narzędzi, z której wycięliśmy pasek statusu oraz zmniejszeniu dolnego paddingu listy kontaktów (w selektorze body).