Zaloguj się

Yakim · 30-11-2010, 20:07

Witam, zaczynam projektowanie strony w CSS i napotkałem na trudności, proszę rzucić okiem na mój kod:

HTML

Kod:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>name</title>

<link rel="stylesheet" type="text/css" href="styl.css" />

</head>

<body>

    <div id="page">

        <div id="head">

            <div id="1/3"><img src="img/top.png" /></div>

            <div id="2/3"></div>

            <div id="3/3"></div>

        </div>

    </div>

</body>

</html>

CSS

Kod:
body {

    background-image:url(img/tlo.png);

    background-repeat:repeat-x;

    }

#page {

    margin:25px auto 25px auto;

    width:974px;

    height:100%;

    }    

#head {

    overflow: hidden;

    }

#1/3 {

    width:100%;

    height:100px;

    background-color:lime;

    }

#2/3 {

    width:30%;

    height:100px;

    float:left;

    background-color:aqua;

    }

#3/3 {

    width:70%;

    height:100px;

    float:right;

    background-color:black;

    }

Nie widzę kolorowych prostokątów, wyświetla się wyłącznie tło i dodany rysunek. Co jest źle ?

Yakim · (Ten post był ostatnio modyfikowany: 01-12-2010, 02:26 przez Yakim.)

Rozwiązałem problem samemu, teraz wszystko śmiga. Mam kolejne pytanie. Wstawiając obrazek do diva w proporcjach idealnych, ustawiając padding 20px; muszę ustawić width diva a potrzebuję tak żeby nie trzeba było szukać rozmiaru obrazka i dostosowywać diva do niego tylko żeby div wiedział jaki wymiar ma obrazek. Da się ?

**Kartofelek** · 01-12-2010, 15:44

sie da.
div - display:inline; overflow:hidden; i cala reszta.
Ah to CSS. Taki niedopracowany potwór. Mocno niedopracowany.

rel · 06-12-2010, 10:27

(01-12-2010, 15:44)Kartofelek napisał(a): sie da.
div - display:inline; overflow:hidden; i cala reszta.
Ah to CSS. Taki niedopracowany potwór. Mocno niedopracowany.

Nie niedopracowany, tylko nie jest tak naprawdę prosty jak piszą wszyscy. Podstawowe sprawy opanowuje każdy, bardziej rozbudowany CSS nie jest taki prosty i dosłowny :-)

**Kartofelek** · 06-12-2010, 15:32

Jest niedopracowany.
Przykład pierwszy z brzegu:

Chcę zrobić menu na liście, których poszczególne pozycje są zbudowane z grafiki pociętej za pomocą CSS na części (sprite). Po najechaniu na konkretne LI grafika przesuwa się w górę o np 20px. Czyli :hover {background-position:0 -20px;}
I bylo by pięknie gdyby istniała właściwość background-y-position:-20px ale że CSS jest nie dopracowany, więć każde LI trzeba ostylować oddzielnie zarówno dla pozycji spoczynkowej jak i hover. Czyli produkujemy 2x kodu.

Inny przykład - height:100%. Ktoś wymyślił, że 100% height to zło, i tak zostało. Powodzenia przy vertical-align:middle itp pozycjonowaniem. Kolejna porcja kombinowania - często gęsto bez JS się nie obejdzie.

Kolejny przykład - padding. Tak się nauczyliśmy że width = width - padding. Ale czy to jest prawidłowe? Kiedy IE wiódł prym, wtedy nie było problemu z wyliczaniem szerokości, teraz jest. Pewnie dlatego w CSS3 dają możliwość wyboru między box-modelami.

Ostatni przykład. Formularze =) Kto stylował formularze, wie jaka to męczarnia. I nie mówię wcale o polach typu FILE (których ostylować się NIE DA), ale np takich checkboxach. Teoretycznie wszystko działa jak należy, inna sprawa, że nagle okazuje się, że tekst obok jest dziwnie przesunięty, tu i tam coś nie pasuje. Możemy się oczywiście bawić stylami typu margin-top, position:relative, bo taki vertical-align znowu zawodzi =)

I ostatnia sprawa o której ostatnio często się mówi. Sposób stylowania. Coraz częśćiej poleca się używanie samych klas, bez id. Osobiście strasznie brakuje mi obiektowości CSS. Gdy piszesz kod w jakimś języku programowania wszystko ladnie możesz sobie tutaj pogrupować. A w css albo uzyskasz "plaska zupe" albo powtarzane polecenia typu #main #cos .xxx
Gdyby tak można było to zamykać w jakieś klamry jak np funkcje w JS - było by "pinkniutko" Smile

Ale - przecież się da - dla różnych urządzeń. Ale to wciąż mało Smile

rel · 06-12-2010, 20:26

(06-12-2010, 15:32)Kartofelek napisał(a): Jest niedopracowany.
Przykład pierwszy z brzegu:

Chcę zrobić menu na liście, których poszczególne pozycje są zbudowane z grafiki pociętej za pomocą CSS na części (sprite). Po najechaniu na konkretne LI grafika przesuwa się w górę o np 20px. Czyli :hover {background-position:0 -20px;}
I bylo by pięknie gdyby istniała właściwość background-y-position:-20px ale że CSS jest nie dopracowany, więć każde LI trzeba ostylować oddzielnie zarówno dla pozycji spoczynkowej jak i hover. Czyli produkujemy 2x kodu.

Inny przykład - height:100%. Ktoś wymyślił, że 100% height to zło, i tak zostało. Powodzenia przy vertical-align:middle itp pozycjonowaniem. Kolejna porcja kombinowania - często gęsto bez JS się nie obejdzie.

Kolejny przykład - padding. Tak się nauczyliśmy że width = width - padding. Ale czy to jest prawidłowe? Kiedy IE wiódł prym, wtedy nie było problemu z wyliczaniem szerokości, teraz jest. Pewnie dlatego w CSS3 dają możliwość wyboru między box-modelami.

Ostatni przykład. Formularze =) Kto stylował formularze, wie jaka to męczarnia. I nie mówię wcale o polach typu FILE (których ostylować się NIE DA), ale np takich checkboxach. Teoretycznie wszystko działa jak należy, inna sprawa, że nagle okazuje się, że tekst obok jest dziwnie przesunięty, tu i tam coś nie pasuje. Możemy się oczywiście bawić stylami typu margin-top, position:relative, bo taki vertical-align znowu zawodzi =)

I ostatnia sprawa o której ostatnio często się mówi. Sposób stylowania. Coraz częśćiej poleca się używanie samych klas, bez id. Osobiście strasznie brakuje mi obiektowości CSS. Gdy piszesz kod w jakimś języku programowania wszystko ladnie możesz sobie tutaj pogrupować. A w css albo uzyskasz "plaska zupe" albo powtarzane polecenia typu #main #cos .xxx
Gdyby tak można było to zamykać w jakieś klamry jak np funkcje w JS - było by "pinkniutko" Ale - przecież się da - dla różnych urządzeń. Ale to wciąż mało

A programowałeś już coś obiektowo? A zajmowałeś się może php?
Nic nie jest idealne i na 100% użyteczne.

Pedro84 · 06-12-2010, 21:16

(06-12-2010, 15:32)Kartofelek napisał(a): Jest niedopracowany.

Dość ciekawy pogląd Wink

(06-12-2010, 15:32)Kartofelek napisał(a): Chcę zrobić menu na liście, których poszczególne pozycje są zbudowane z grafiki pociętej za pomocą CSS na części (sprite). Po najechaniu na konkretne LI grafika przesuwa się w górę o np 20px. Czyli :hover {background-position:0 -20px;}
I bylo by pięknie gdyby istniała właściwość background-y-position:-20px ale że CSS jest nie dopracowany, więć każde LI trzeba ostylować oddzielnie zarówno dla pozycji spoczynkowej jak i hover. Czyli produkujemy 2x kodu.

Jak stylować każdy element listy? Możesz przykładem rzucić?

(06-12-2010, 15:32)Kartofelek napisał(a): Inny przykład - height:100%. Ktoś wymyślił, że 100% height to zło, i tak zostało. Powodzenia przy vertical-align:middle itp pozycjonowaniem. Kolejna porcja kombinowania - często gęsto bez JS się nie obejdzie.

Kwestia interpretacji przeglądarek, a nie CSSa. Tak samo ze środkowaniem pionowym.

(06-12-2010, 15:32)Kartofelek napisał(a): Kolejny przykład - padding. Tak się nauczyliśmy że width = width - padding. Ale czy to jest prawidłowe? Kiedy IE wiódł prym, wtedy nie było problemu z wyliczaniem szerokości, teraz jest. Pewnie dlatego w CSS3 dają możliwość wyboru między box-modelami.

Tak, jest to prawidłowe. Poczytaj na stronie W3C, a zobaczysz.

(06-12-2010, 15:32)Kartofelek napisał(a): Ostatni przykład. Formularze =) Kto stylował formularze, wie jaka to męczarnia. I nie mówię wcale o polach typu FILE (których ostylować się NIE DA), ale np takich checkboxach. Teoretycznie wszystko działa jak należy, inna sprawa, że nagle okazuje się, że tekst obok jest dziwnie przesunięty, tu i tam coś nie pasuje. Możemy się oczywiście bawić stylami typu margin-top, position:relative, bo taki vertical-align znowu zawodzi =)

Formularze problemowe? No proszę Cię. Z czym tam można mieć problem? Wszystko zależy od struktury formularza. Ze stylowaniem przycisków to faktycznie problem jest.

(06-12-2010, 15:32)Kartofelek napisał(a): I ostatnia sprawa o której ostatnio często się mówi. Sposób stylowania. Coraz częśćiej poleca się używanie samych klas, bez id. Osobiście strasznie brakuje mi obiektowości CSS. Gdy piszesz kod w jakimś języku programowania wszystko ladnie możesz sobie tutaj pogrupować. A w css albo uzyskasz "plaska zupe" albo powtarzane polecenia typu #main #cos .xxx

CSS to nie język programowania. Obiektowość w CSS? Na czym miałaby polegać?

**Kartofelek** · (Ten post był ostatnio modyfikowany: 07-12-2010, 00:09 przez Kartofelek.)

Przykład listy:

<ul>
<li class="jeden">111111</li>
<li class="dwa">222222</li>
</ul>

li.jeden {background:url(xxxxx) 0 0 no-repeat; bla bla }
li.dwa {background:url(xxxxxxx) -100px 0 no-repeat; bla bla }
li:hover {background-position: ??????????? } /* każdemu li przesuwam jego background -20px w gore */
li.jeden:hover {background-position: 0 -20px; bla bla }
li.dwa:hover {background-position:-100px -20px; bla bla }

"Tak, jest to prawidłowe. Poczytaj na stronie W3C, a zobaczysz."
Jest - bo tak stwierdziło W3C. Ale na chłopski rozum wcale to normalne nie jest. Jak się pisze strony jakiś kawałek czasu, to nie ma problemu. Ale jak się jest "świerzakiem", to wtedy dużo osób gubi się "czemu właśnie tak"? Pamiętam jak kiedyś przesiadałem się z IE. I szczerze - było tam lepiej w tej kwestii. Ale potem z czasem się przyzwyczaiłem do W3C. To jak z podwyżką podatków.

Co do ostatniego problemu - to i tak teraz łatwo rozwiązać. Zapodajesz CSS poprzez php ;] Dzięki temu masz warunkowe CSS. Bardzo rzadko stosowana metoda, ale zacna ;]

Ps. CSS3 już sporo poprawia, ale do czasu aż internauci zmądrzeją trzeba jeszcze trochę pomedytować

Pedro84 · 07-12-2010, 01:36

1. A, coś takiego. Faktycznie, w niektórych przypadkach nie jest to udogodnienie, ale nie przesadzajmy. To tylko kilka linijek kodu.
2. To można zastosować polemikę "po której stronie poprawnie się jeździ? Po lewej czy prawej?". To jest standaryzacja. Pewne kompromisy. W dalszym ciągu nie widzę to żadnego problemu.

Przejechać CSS za pomocą PHP? Świetna sprawa.

Widzisz, głównym hamulcem rozwoju CSS są... przeglądarki, w głównej mierze IE, które to miało problemy z podstawowymi rzeczami. Poczytaj też dlaczego nie można ostylować np. przycisku "file".

Ale dalej nie wyjaśniłeś na czym miałaby polegać obiektowość w CSS. Bo z jednej strony piszesz, że chciałbyś coś takiego widzieć w CSS, a z drugiej argumentem jest możliwość poukładania kodu. Ciekawe porównanie.

CSS3 to trochę inna bajka. Poprawia wiele. Bardzo wiele. Ale zanim przeglądarki będą go poprawnie intepretować trochę wody w Wiśle upłynie, niestety...

**Kartofelek** · (Ten post był ostatnio modyfikowany: 07-12-2010, 11:29 przez Kartofelek.)

Chcecie trafić w czarną dziurę Polskiego netu? Zróbcie porządny portal o webmasterce, gdzie będą takie problemy podejmowane ;]

Normalnie w CSS możesz (choć jak pisałem to nie polecane ostatnimi czasy):

#index #jakis_div .pudelek { }
i działa. Taka mini obiektowość. W nowym CSS3 są już wyrażenia "n-ty" itpm które ułatwiają sprawę i to się sprawdza, ale często mam wrażenie że jest wciąż bieda.
Przykład, by nie było to pitolenie bez sensu:
<ul>
<li>xxx</li>
<li>xxx</li>
<li>xxx</li>
</ul>
Często stosowany kod dla stopek, którego linki oddzielone są kreseczkami " | ". Wszystko fajnie, ale ostatni nie może mieć takiej kreseczki. Więc teraz musimy stosować dodatkową klasę, bo nie ma tego jak sprawdzić. W jQuery już tak i to bez problemu, ale w czystym CSS nie.

Osobiście CSS lubię sobie układać np tak:

/* jakiś element */
#jakis_element {}
#jakis_element .cos_tam {}
#jakis_element .cos_tam {}

Ale np do takiego JS, który ma funkcje, klamerki, ify itp to bida ;] Pomyslałem sobie o czymś takim np:

#index {
.klasa {}
.cos_tam {
.inne klasy rozne itp
}
.klasa {color:parent.cos_tam.color <-ha ha ha}
}
ale to może głupi pomysł.
W php spokojnie można wykorzystać zmienne np

.klasa {width:#w#px; .....}

i wtedy preg_replace i htaccessem przekierowujemy css na ten php. Znowu pomysł rzadko stosowany ;]

Zaloguj się
Login:
Hasło:	Nie pamiętam hasła
	Zapamiętaj mnie