Jak zrobić takie okienko w CCS?


(Terlalolek) #1

Jak zrobić takie okienko w CCS ?

Okienka znajdują się na stronie : siemaszko.info


(stasinek) #2

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 :expressionless:

zakładam że jesteś zielony - bo również jestem zielony a moze nie rozumiem podchwytliwego pytania :wink:

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ś

kolejne


(Terlalolek) #3

http://oi41.tinypic.com/zk1lw2.jpg

Jak zrobić że pod tym tekstem jest raz szare raz białe ?


(Teofilp) #4

Więc tak, musisz zrozumieć pierw podstawy styli css by bawić się w takie projekty. Tak więc tłumacze już tlumacze ;):

  1. 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.

  2. 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.

  3. 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ą :wink:


(manieKMP) #5

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.


(Terlalolek) #6

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


(manieKMP) #7

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.


(Terlalolek) #8

Zapisz mi co mam dodać do .lastProductDesc bo niedziała ;/


(manieKMP) #9

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”


(Terlalolek) #10

Dzięki ! :slight_smile: