Jak zrobić takie okienko w CCS ?
http://oi44.tinypic.com/zjt9ww.jpg
Okienka znajdują się na stronie : siemaszko.info
CSS
jak to jak? nie rozumiem?
kurs jest tu> http://pl.html.net/tutorials/css/ i tu
http://www.kurshtml.edu.pl/html/zielony.html
css to tylko sposób na zapisanie styli raz żeby ich nie powtarzać w każdej linijce ot filozofia
a w tym co pokazałeś nie ma jakiejś magii 
zakładam że jesteś zielony - bo również jestem zielony a moze nie rozumiem podchwytliwego pytania 
definiujesz sobie diva w css - np. ramka { właściwości }
#ramka {
margin: 0 30px 0 30px;
width: 100px;
height: 300px;
background: #E7341E url(…/images/bar100.gif) no-repeat top;
float: center;
/*etc…*/
}
bez CSS musialbyś pisać
za każdym razem podobnie
nadajesz jeden rozmiar taki jak każda z tabelek ma mieć i tworzysz ich strukture - 3 sztuki bez wpisywania w każdej styli od nowa, zmiana w css zmieni styl wszystkich naraz, np. możesz na sztywno utworzyć tło z obrazka, rozmiar albo wspólne fonty i kolory tekstów.
w html treści w divach
treść
definiujesz sobie format h1,h2 etc. format dla p dla a dla buttona co chcesz…
jeśli dodasz doń - ramke, kolor, obrazek tła to każda linijka oddzielona
(może to być link, obraz cokolwiek utworzy coś w podobie tabelki, można to zrobić w ramie
jakieś
Więc tak, musisz zrozumieć pierw podstawy styli css by bawić się w takie projekty. Tak więc tłumacze już tlumacze ;):
-
Style możemy wykorzystywać do każdej tabelki, okna, tekstu, praktycznie do wszystkiego co ci się jawi oczom na stronie a nie ma porządanego wyglądu, stylu.
-
Style osobno możemy przypisywać do każdej rzeczy osobną którą napisaliśmy. Np nie musimy dla całej tabeli lub całego tekst mież taki sam kolor.
-
W jednej klasie możemy wiele rzeczy odróznić i nadac nowe klasy. Tak bez końca.
To może tyle teorii.
Praktycznie rzecz biorąc: Stwórz sobie tabele poprzez http://www.csstablegenerator.com/ dodaj kod do jakiegos programu typo Bluefish (dostępny w pobieralni) I przeanalizuj kod. Służę pomocą
Pseudo-klasy strukturalne do tego mogą posłużyć, Tobie potrzebne są:
obiekt:nth-child(even) {deklaracja własności dla parzystych elementów}
obiekt:nth-child(odd) {deklaracja własności dla nieparzystych elementów}
Gdzie “obiekt” to elementy, dla których chcesz deklarować kolor/tło (w przykładzie stasinka będą to li ), a “deklaracja własności dla…” to w Twoim przypadku background lub background-color.
Wejdźcie na stronę http://www.komputer.frame.pl i tam będzie takie okienko, jak zrobić żeby te “Jakaś oferta” była dosunięta do lewej strony ?
CCS :
.lastProductDesc ul li {
font: bold 10px/26px Verdana, Geneva, sans-serif;
font-family: ‘Open Sans’, sans-serif;
font-weight: 300;
color: #545353;
padding-left: 17px;
border-bottom: 1px solid #cdcdcd;
text-transform: uppercase;
display: block;
}
Jakaś oferta
Jakaś oferta
Jakaś oferta
Jakaś oferta
Jakaś oferta
Jakaś oferta
Jakaś oferta
Dla ul zadeklaruj w css’ie padding i margin równe zero (.lastProductDesc > ul {padding:0; margin:0;}), dodaj też .lastProductDesc li:nth-child(even) {background-color: #DADADA;} dla koloru, o którym wspomniałeś wcześniej.
Zapisz mi co mam dodać do .lastProductDesc bo niedziała ;/
Toć napisałem ;), obie rzeczy dopisujesz do css’a (nie dodajesz do istniejących deklaracji, kopiujesz gdzieś do pliku stylu nowe…):
.lastProductDesc > ul {
padding:0;
margin:0;
}
.lastProductDesc li:nth-child(even) {
background-color: #DADADA;
}
Zamiennikiem słowa:
-
“even” jest “2n”
-
“odd” jest “2n+1”
Dzięki ! 