Mam stronę, która jest w wyśrodkowanym divie. Zarówno header jak i footer tej strony jest wypełniony wzorkiem. Teraz chcę, żeby na górze i na samym dole biegły paski na całą szerokość ekranu (niezależnie od rozdzielczości) również wypełnione tym wzorkiem. Jak to uzyskać?
Poniżej przedstawiam efekt jaki chciałbym uzyskać:
Problem może być w tym, aby wzorek z paska komponował się równo z wzorkiem w środku strony.
Zacząłbym od wyodrębnienia powtarzalnego elementu tła z którego można w nieskończoność budować pasek tła. Następnie zrobiłbym tabelkę z trzema kolumnami w której środkowa ma określony rozmiar, ale taki aby powtarzalne elementy mieściły się w całości np 4 x element powtarzalny. Następnie w lewej kolumnie dałbym background: repeat-x z wyrównaniem do prawej, a w prawej kolumnie dałbym również background:repeat-x z tym że z wyrównaniem do lewej.
Niestety, stronę chcę oprzeć na divach, tabele to przestarzała metoda. Obrazek tła oczywiście ma wyodrębniony.
poza tym w Twoim sposobie wzorkiem wypełniłbym całą lewą i prawą stronę, a ja chcę tylko paski na górze i na dole.
opakuj wszystko w diva i w tym opakowywującym ustaw background-image
Tak jak w przypadku tabelki wypełnienie diva tłem da mi wypełniony cały obszar po lewej i prawej, a ja chcę tylko paski (centralna część ma być pusta).
Tabelka jest metodą jak każda inna :) Przestarzała będzie jak Walidatory to uznają za błąd.
Zrób oddzielną tabelkę "header" i "footer" a pomiedzy nimi daj diva z treścią :)
void-tec napisał(a)
opakuj wszystko w diva i w tym opakowywującym ustaw background-image
A jakie dać szerokości divowm lewa i prawa, żeby paski były rozciągnięte na całą szerokość?
@Buka77:
Z obrazka wynika, że po bokach od treści pole ze wzorkiem ma na górze strony mniejszą, a na dole większą wysokość niż pole ze wzorkiem w treści. Tak jest w rzeczywistym layoucie, czy może tam jest to wyrównane?
Layout ździebko upierdliwy i pewnie nie obędzie się bez brzydkiego lub przynajmniej brzydkawego kodu znaczników, skażonego pewną ilością elementów służących wyłącznie prezentacji.
Ma to działać w IE6, tak w ogóle?
Jeśli nie i jeśli paski ze wzorkiem u góry i na dole mają stałą, znaną wysokość, to możesz zastosować pozycjonowanie absolutne.
@leadersmind:
Tabelka nie jest metodą jak każda inna. Gdy walidator uzna coś za błąd, to jest to... błędem, a niekoniecznie czymś przestarzałym. HTML starszy niż 4.01 jest obecnie przestarzały. W zasadzie to nawet doctype Transitional można uznać za przestarzały.
Walidator W3C jest bardzo daleki od doskonałości. Nie sprawdza nawet całej składni, a co dopiero sensu strony. Zadaniem kodu znaczników jest oznaczenie struktury dokumentu. Walidator tego nie sprawdza, mimo że W3C silnie zaleca pewne rzeczy i odradza inne, definiując poprawne użycie strukturalnych elementów HTML-a.
Tabele służą do reprezentacji danych tabelarycznych. Użycie ich do layoutu przeczy zasadzie rozdzielenia warstw.
Nie wolno ściemniać, że wszystko jest z takim czymś OK, bo się waliduje. Świadczy to o niezrozumieniu samego HTML-a i/lub działania walidatora.
Gdy trzeba, to trzeba zastosować nieeleganckie rozwiązania. Czasem inaczej się po prostu nie da, a czasem rozwiązanie eleganckie jest zbyt skomplikowane i nieopłacalne (nie zawsze tworzy się kod najwyższej możliwej jakości mimo kłamstw jakie ludzie wypisują w działach "Misja i wizja naszej firmy"; nie zawsze klient potrzebuje najwyższej jakości za wszelką cenę).
W każdym razie nie ma co ściemniać, że wszystko jest z nieeleganckimi rozwiązaniami w porządku i że są one jak każde inne. Chyba że reszta Twojego kodu też jest nieelegancka ;).
leadersmind napisał(a)
Zrób oddzielną tabelkę "header" i "footer" a pomiedzy nimi daj diva z treścią :)
Dzięki, nie pomyślałem o tym. Zrobiłem tak jak mówisz (tyle, że na divach) i działa świetnie.
A generalnie zgadzam się z tym, co napisał bswierczynski. Wiadomo, że w 100% poprawny kod czasami jest dla kodonanistów i trzeba iść na kompromisy, ale ogólnie lepiej się stosować do zaleceń W3C, a oni zalecają stosowanie divów do struktury strony.
bswierczynski napisał(a)
@Buka77:
Z obrazka wynika, że po bokach od treści pole ze wzorkiem ma na górze strony mniejszą, a na dole większą wysokość niż pole ze wzorkiem w treści. Tak jest w rzeczywistym layoucie, czy może tam jest to wyrównane?Layout ździebko upierdliwy i pewnie nie obędzie się bez brzydkiego lub przynajmniej brzydkawego kodu znaczników, skażonego pewną ilością elementów służących wyłącznie prezentacji.
Ma to działać w IE6, tak w ogóle?
Jeśli nie i jeśli paski ze wzorkiem u góry i na dole mają stałą, znaną wysokość, to możesz zastosować pozycjonowanie absolutne.
@leadersmind:
Tabelka nie jest metodą jak każda inna. Gdy walidator uzna coś za błąd, to jest to... błędem, a niekoniecznie czymś przestarzałym. HTML starszy niż 4.01 jest obecnie przestarzały. W zasadzie to nawet doctype Transitional można uznać za przestarzały.Walidator W3C jest bardzo daleki od doskonałości. Nie sprawdza nawet całej składni, a co dopiero sensu strony. Zadaniem kodu znaczników jest oznaczenie struktury dokumentu. Walidator tego nie sprawdza, mimo że W3C silnie zaleca pewne rzeczy i odradza inne, definiując poprawne użycie strukturalnych elementów HTML-a.
Tabele służą do reprezentacji danych tabelarycznych. Użycie ich do layoutu przeczy zasadzie rozdzielenia warstw.
Nie wolno ściemniać, że wszystko jest z takim czymś OK, bo się waliduje. Świadczy to o niezrozumieniu samego HTML-a i/lub działania walidatora.
Gdy trzeba, to trzeba zastosować nieeleganckie rozwiązania. Czasem inaczej się po prostu nie da, a czasem rozwiązanie eleganckie jest zbyt skomplikowane i nieopłacalne (nie zawsze tworzy się kod najwyższej możliwej jakości mimo kłamstw jakie ludzie wypisują w działach "Misja i wizja naszej firmy"; nie zawsze klient potrzebuje najwyższej jakości za wszelką cenę).
W każdym razie nie ma co ściemniać, że wszystko jest z nieeleganckimi rozwiązaniami w porządku i że są one jak każde inne. Chyba że reszta Twojego kodu też jest nieelegancka ;).
Rozumiem, że sugerujesz iż to ja ściemniam. Bardzo dobrze rozumiem do czego służą tabelki i znam IDEE ich zastosowania. Co nie znaczy, że nie można ich używać inaczej. Wiem, jest taki nurt że tabeli są beee, ale jedynym argumentem jest to co podałeś. Jedna tabelka na stronie - nie wpłynie na jakość kodu tak jak sugerujesz. Czasami po prostu trzeba i tyle.
Chętnie poznam rozwiązanie problemu o którym tutaj mowa bez tabelki - popisz się w tej materii a nie rozpisujesz sie o tym o czym wszyscy wiedzą.
Buka77 napisał(a)
leadersmind napisał(a)
Zrób oddzielną tabelkę "header" i "footer" a pomiedzy nimi daj diva z treścią :)
Dzięki, nie pomyślałem o tym. Zrobiłem tak jak mówisz (tyle, że na divach) i działa świetnie.
A generalnie zgadzam się z tym, co napisał bswierczynski. Wiadomo, że w 100% poprawny kod czasami jest dla kodonanistów i trzeba iść na kompromisy, ale ogólnie lepiej się stosować do zaleceń W3C, a oni zalecają stosowanie divów do struktury strony.
Możesz podać strukture i cssy rozwiązania na divach ? ( moim zdaniem w poprzednich przykladach na divach wzorek się nie zejdzie ) Chętnie je poznam dla tego rozwiązania. a jeżeli chodzi o W3C - walidowałeś kiedyś stronę google ? :)
Sorry za spam ale nie moge sie powstrzymać :)
AaAaaaaaaaaaaaaaaaa tabelki, chowaj się kto może :)
@leadersmind:
Google jest akurat znane z notorycznie słabiutkiego kodu. Nie zdarza im się to ZAWSZE, ale często. Niektórzy z ich programistów, mimo że potrafią odpowiedzieć na pytanie "ile piłeczek zmieści się w autobusie?", to jednak zdają się nie mieć zbyt dużej dyscypliny. Kiedyś GMail w Operze nie działał, bo komuś w Google się nie domknęło iframe'a. Usterkę usuwali bodajże tydzień, od momentu łaskawego przyjęcia jej do wiadomości i złożenia obietnicy, że "zostanie to przekazane dalej".
Co do tych divów to chciałbym rozwiać jeden mit. Div praktycznie nie jest bardziej semantyczny niż tabela. CZASEM robi nieco mniej problemów, ale w sumie to na jedno wychodzi. 10 elementów tabelarycznych to praktycznie to samo co 10 divów prezentacyjnych.
Liczbę elementów prezentacyjnych należy redukować, jeśli chcemy mieć ładny podział na warstwy.
Divów w ogóle należy unikać; one nie reprezentują prawie żadnej semantyki ("prawie", bo niektóre programy szukają np. elementu z największą liczbą tekstu na stronie -- może to być div). Tam gdzie się da, lepiej użyć list, nagłówków, blockquote'ów, czy addresssów. A teraz, jak wchodzi HTML5, można już użyć przydatnych, semantycznych elementów (header, footer, article, section, aside...). Divów używamy z musu, gdy nie ma bardziej odpowiedniego, semantycznego elementu. W HTML-u wcześniejszym niż wersja 5 taka sytuacja zdarza się niestety nader często. Trochę pomagają tu mikroformaty, ale tylko trochę.
Jeśli w tym przykładzie będziemy musieli zastosować puste divy, których jedynym zadaniem będzie zasłonięcie tła, to ten kod będzie brzydki i tyle (kod, który powinien określać strukturę, będzie całkowicie związany wyłącznie z prezentacją).
Czasem się nie da/nie opłaca inaczej, ale warto mieć świadomość, że ładne to to nie jest.
EDYCJA:
Nie zauważyłem, że @leadersmind prosił na ostatniej stronie o kod. Rozwiązanie na tych nieszczęsnych divach wydaje mi się dość oczywiste -- zwykłe pozycjonowanie absolutne. No, nie takie zwykłe, bo przy użyciu zarówno top, jak i bottom IE6 wysiada. Ale tego dinozaura olewamy, chyba że klient ładnie poprosi, jak zwykł mówić riddle.
<!DOCTYPE html>
<html>
<head lang="pl">
<meta charset="utf-8">
<title>[html][css] Poziome paski (4programmers.net)</title>
<style>
body {
background: #06F none repeat left top; /* tu można wstawić grafikę */
}
#main {
width: 800px;
margin: 0 auto;
padding: 0 1px; /* 1px na błędy zaokrągleń w IE;
* jak komuś to tu przeszkadza to niech otoczy #main
* jeszcze jednym 'ugly' elementem i umieści to tam
*/
}
#masthead {
height: 140px;
}
#content {
background: #C6C6C6;
height: 400px;
}
#footer {
height: 30px;
}
#ugly_left,
#ugly_right {
position: absolute;
top: 90px;
bottom: 90px;
background: #C6C6C6;
}
#ugly_left {
left: 0;
right: 50%;
margin-right: 400px;
}
#ugly_right {
left: 50%;
right: 0;
margin-left: 400px;
}
</style>
</head>
<body>
<div id="main">
<h1 id="masthead">
[html][css] Poziome paski
</h1><!-- /masthead -->
<div id="content">
Główna zawartość
</div><!-- /content -->
<address id="footer">
Stopka
</address><!-- /footer -->
</div><!-- /main -->
<div id="ugly_left"></div>
<div id="ugly_right"></div>
</body>
</html>
Zamiast obrazka ustawiłem tło strony na czerwone. Jest to ustawione tylko w jednym miejscu, dla jednego elementu -- body. Daje to pewność, że po dodaniu background-image będzie on ładnie wykafelkowany (bo czemu miałby nie być?). To HTML5, ale w wersji minimalistycznej i absolutnie bezpiecznej w każdej przeglądarce.
Za nagłówek i stopkę wstawiłem z przekory inne elementy niż div. Zależnie od zawartości prawdziwej strony prawdopodobnie będzie trzeba to zmienić jednak na ogólniejsze divy (i dopiero tam umieścić ew. nagłówki, czy adresy).
minusem tego rozwiązania jest to, że background jest pozycjonowany względem lewej lub prawej krawędzi a nie środka :)
Czyli będziemy mieć zawsze ucięty wzorek albo z lewej albo z prawej ale nigdy z obu stron, czyli tło elementu środkowego nie będzie "wycentrowane" a przesunięte względem lewej lub prawej krawędzi.
Przynajmniej ja to tak widzę.
@bswierczynski
dzięki za poświecony czas na wprowadzenie rozwiązania.
@leadersmind:
Jeśli chcesz mieć tło ucięte z obu krawędzi (nie wiem po co :-) ), to możesz zamiast pozycjonowania "left top" zrobić "center top". Nie gwarantuje to jednak, że kafelki na środku będą się zaczynały idealnie przy krawędziach treści (a tabelka by to gwarantowała?). W wielu sytuacjach nie jest to jednak chyba minusem. Szczególnie gdy kafelki są tak organiczne i bez wyraźnych linii.
To wyrównanie też da się zrobić, ale do problemu należałoby podejść zupełnie inaczej -- niemal odwrotnie.
Tło całej strony byłoby szare. Nagłówek i stopka miałyby ustawiony obrazek tła z kafelkami. Po bokach, zamiast po jednym brzydkim elemencie z szarym tłem z każdej strony, mielibyśmy po dwa elementy z kafelkami -- osobno dla nagłówka i stopki. Należałoby jeszcze ostro pokombinować z background-position, by zgrać wzorki.
Wtedy jednak mamy już 4 "brzydkie", prezentacyjne elementy na stronie. Niewiele to lepsze od tabelek, jeśli w ogóle (no, zależy ile tabela miałaby komórek).
Zdarzyło mi się już kiedyś walczyć z takim problemem wymuszonym przez projekt graficzny. Po prostu tło musiało rozchodzić się od elementu środkowego na lewo oraz na prawo, tak aby wzór dobrze się schodził. Rozwiązałem to wtedy tabelką i nie udało mi się tego osiągnąć w żaden inny sposób - musiało działać też pod IE6 ;)