Przejdź do głównej zawartości

HTML/CSS: Jak uzyskać kolorową kolumnę (pasek boczny, sidebar) na całej wysokości strony?

Częstym problem, który pojawia się przy tworzeniu strony opartych na pływających (float) elementach jest to, że pasek boczny kończy się wcześniej niż część główna strony.


Jak to rozwiązać?

Przykład: 
Układ dwukolumnowy. Strona z jednym paskiem bocznym umieszczonym po prawo.

Mamy więc dwa elementy div: lewy (#wrapper-left) z główną zawartością strony oraz prawy (#wrapper-right) pasek boczny, który ma np. czerwone tło.

<div id="wrapper">
   <div id="wrapper-left"> zawartość strony .... </div>
   <div id="wrapper-right"> zawartość paska bocznego ... </div>
</div>

#wrapper {
float:center;
background: white;width: 1000px;
}
#wrapper-left{
float: left;
width: 800px;
background: white;}
#wrapper-right{
float: left;
width: 200px;
background: red;}

Takie rozwiązanie powoduje, że czerwony pasek boczny  nagle urywa się. Tworzy się pod nim pusta przestrzeń. Nie wygląda to dobrze.

Rozwiązanie:
Należy przygotować obrazek o szerokości paska bocznego, w jego kolorze. A następnie umieścić go jako tło w głównym wrapperze dosuwając do prawej górnej krawędzi.

#wrapper {
float:center;
background: url(http://... link do obrazka z kolorem czerwonym ...) repeat-y right top;width: 1000px;
}

Komentarze

Popularne posty z tego bloga

Jak zrobić szablon na bloga blogspot?

Przedstawiam kilka sposób na to jak zrobić własny szablon na bloga blogspot. Od najprostszych do bardziej skomplikowanych. W kolejnych postach postaram się omówić i pokazać wam je dokładniej.

Jak wyśrodkować nagłówek bloga blogspot?

Nagłówek to górna część bloga. Blogspot umożliwia nam umieszczenie w nim tytułu, opisu (pojawiają się one domyślnie) a także obrazu. Zawartość nagłówka pojawia się zwykle z lewej strony bloga. Możemy jednak zmienić jego ustawienie.