Kod należy wpisać w sekcji CSS. Nie wiesz jak to zrobić ? Wejdź w poradnik i zobacz krok po kroku ! PORADNIK CSS
STRONY to będzie Ci potrzebne
left - lewa ; center - środkowa; right - prawa
Pozycja menu z kartami
#PageList1 ul { text-align:STRONA;}
#PageList1 ul li { float: none; display: inline; }
Margines w około karty.
.tabs-outer {margin:10px 20px 30px 40px;}
Karty na samej górze strony ( nad nagłówkiem ).
.tabs-outer {
overflow: hidden;
position: relative;
background-color: #ffffff;
none repeat scroll 0 0;
width: 100%;
height:35px;
margin-left: auto;
margin-right: auto;
position: fixed; z-index: 1; top: 0px;
}
}
#layout .tabs-outer {
overflow: visible;
}
.tabs-cap-top, .tabs-cap-bottom {
position: absolute;
width: 100%;
}
.tabs-cap-bottom {
bottom: 0;
}
.tabs-inner .widget li a {
display: inline-block;
padding: .6em 1.5em;
font: normal 11px arial, Tahoma, Helvetica, FreeSans, sans-serif;
color: #000000;
height: 22px;
line-height: 22px;
}
.tabs-inner .widget li:last-child a {
border-right: 1px solid transparent;
}
.tabs-inner .widget li.selected a, .tabs-inner .widget li a:hover {
background: transparent none repeat-x scroll 0 -100px;
color: #000000;
}
overflow: hidden;
position: relative;
background-color: #ffffff;
none repeat scroll 0 0;
width: 100%;
height:35px;
margin-left: auto;
margin-right: auto;
position: fixed; z-index: 1; top: 0px;
}
}
#layout .tabs-outer {
overflow: visible;
}
.tabs-cap-top, .tabs-cap-bottom {
position: absolute;
width: 100%;
}
.tabs-cap-bottom {
bottom: 0;
}
.tabs-inner .widget li a {
display: inline-block;
padding: .6em 1.5em;
font: normal 11px arial, Tahoma, Helvetica, FreeSans, sans-serif;
color: #000000;
height: 22px;
line-height: 22px;
}
.tabs-inner .widget li:last-child a {
border-right: 1px solid transparent;
}
.tabs-inner .widget li.selected a, .tabs-inner .widget li a:hover {
background: transparent none repeat-x scroll 0 -100px;
color: #000000;
}
- background-color: #ffffff; -kolor tła
- height:35px; -wysokość paska
- margin-left: auto; -lewy margines (zmieniając musimy wpisać ilość pikseli)
- margin-right: auto; -prawy margines
- position: fixed; z-index: 1; top: 0px;
- padding: .6em 1.5em; -ułożenie i odstęp między nazwami stron
- font: normal 11px arial, Tahoma, Helvetica, FreeSans, sans-serif; -rozmiar i styl czcionki
- color: #000000; -kolor tekstu
- line-height: 22px; -wysokość tekstu
- color: #000000; -kolor napisu strony, na której po kliknięciu się znajdujemy
Kolor tła karty
.tabs-outer {background-color:#FFFFFF;}
Grubość ramki.
.tabs-outer {border-width: 5 px;}
Długość belki z kartami.
.tabs-outer {width:450px;}
Zaokrąglone rogi tła pod postami
.tabs-outer{border-radius: 10px 20px 30px40px;}
Dodawanie kilku postów do jednej karty.
I tu trochę się pobawimy :) Blogowanie to przyjemność więc miło jest, aby zagłębić się w te oto tajniki. Jak zrobić atrakcyjne karty, do których można dodać kilka postów ? Prościzna. Po przeczytaniu sam Drogi Czytelniku tak stwierdzisz.
