solving problems since 2007
Skeleton i normalize.css przystosowane do pracy z szablonami Allegro.pl. Repozytorium z kodem znajdziesz w serwisie GitHub.
Lubię, gdy nawet te pozornie najnudzniesze i bezsensowe zadania prowadzą do czegoś kreatywnego. Tym razem zaimplementowałem w szablonach allegro system gridów Skeletona.
Dzięki temu strona aukcji będzie wyglądała dobrze zarówno na telefonach, jak i tabletach. Coś co często mi doskwiera, gdy chcę coś na allegro sprawdzić lub kupić będąc w drodze.
Pomyślałem, że podzielę się moją odpowiedzią na pytania: Co to jest HTML? Co to jest CSS? Jak to działa? dla zwykłych ludzi. Stół jako narzędzie do wyjaśnienia czym jest rola HTML i CSS w budowaniu stron internetowych wiele razy już się przydał i sprawdził:
W takim HTMLu mówimy: „to jest stół, ma cztery nogi, blat i stoi na podłodze”. Natomiast CSS to zestaw przymiotników, którymi ten stół opisujemy: „jest w jasnym kolorze, nogi ma grube i z drewna tak samo jak i blat, a podłoga jest drewniana i leży na niej czerwony dywan”.
Works every time.
W prawdzie na stronie ie6nomore znajduje się informacja o tym, że dotarło do nich jakieś polskie tłumaczenie jednak na razie nie ma go na stronie. Przygotowałem więc własne i zamieszczam je tutaj:
<!--[if lt IE 7]>
<div style='border: 1px solid #F7941D; background: #FEEFDA; text-align: center; clear: both; height: 75px; position: relative; line-height:100%;'>
<div style='position: absolute; right: 3px; top: 3px; font-family: courier new; font-weight: bold;'><a href='#' onclick='javascript:this.parentNode.parentNode.style.display="none"; return false;'><img src='https://www.ie6nomore.com/files/theme/ie6nomore-cornerx.jpg' style='border: none;' alt='Zamknij powiadomienie'/></a></div>
<div style='width: 500px; margin: 0 auto; text-align: left; padding: 0; overflow: hidden; color: black;'>
<div style='width: 55px; float: left;'><img src='https://www.ie6nomore.com/files/theme/ie6nomore-warning.jpg' alt='Uwaga!'/></div>
<div style='width: 170px; float: left; font-family: Arial, sans-serif;'>
<div style='font-size: 14px; font-weight: bold; margin-top: 12px;'>Używasz bardzo starej przeglądarki.</div>
<div style='font-size: 12px; margin-top: 6px; line-height: 12px;'>By móc cieszyć się wszystkimi walorami strony zaktualizuj ją.</div>
</div>
<div style='width: 75px; float: left;'><a href='http://www.firefox.com' ><img src='https://www.ie6nomore.com/files/theme/ie6nomore-firefox.jpg' style='border: none;' alt='Pobież Firefox 3.5'/></a></div>
<div style='width: 75px; float: left;'><a href='http://www.browserforthebetter.com/download.html' ><img src='https://www.ie6nomore.com/files/theme/ie6nomore-ie8.jpg' style='border: none;' alt='Pobież Internet Explorer 8'/></a></div>
<div style='width: 73px; float: left;'><a href='http://www.apple.com/safari/download/' ><img src='https://www.ie6nomore.com/files/theme/ie6nomore-safari.jpg' style='border: none;' alt='Pobież Safari 4'/></a></div>
<div style='float: left;'><a href='http://www.google.com/chrome' ><img src='https://www.ie6nomore.com/files/theme/ie6nomore-chrome.jpg' style='border: none;' alt='Pobież Google Chrome'/></a></div>
</div>
</div>
<![endif]-->
Dziś dzięki Arturowi dowiedziałem się dość ważnej i bardzo ciekawej rzeczy… W tło jednego bloku można wstawić kilka obrazków i nadać im zupełnie inne parametry położenia lub powtarzania! Dokonujemy tego w następujący sposób w arkuszu css strony:
selektor {
background:url(obrazek1.png), url(obrazek2.png);
background-position: top left, bottom right;
background-repeat: no-repeat, repeat-y;
}
Jak widać jest to bardzo proste i efektywne.
