Aby stworzyć solidny layout bazujący w 100% na stylach CSS, prócz wiedzy – warto mieć też dobry plan.
Krok po kroku, pozwoli zbudować dobry, elastyczny i poprawny design naszej nowej strony. Tym, którzy mają z tym kłopot – serdecznie polecam Subcide.
Świetny i prosty tutorial, gdzie krok po kroku budowany jest layout portalowy.
Bez eksperymentów i ględzenia.
Drogi na rozwiązania problemu są zawsze co najmniej dwie.
Jedna wiedzie przez jego środek – i prowadzi do rozwiązania.
Druga zaś – na około – i oznacza jego ominięcie.
Nie zawsze wymijanie problemu jest złe – jednak to co robi firma microsoft, jest zdumiewające.
Nie od dziś wiemy, jak pracuje się z kodem html i stylami css w produktach firmy z Redmond.
Sporo się poprawiło z biegiem lat – jednak wiele jest jeszcze do zrobienia.
Microsoft, aby wspomóc zszargane nerwy webmasterów i developrów, jak również aby zapewne odeprzeć argumenty dotyczące swej bierności w tych kwestiach , wypuściło serię porażających narzędzi do walidacji arkuszy CSS pod kątem Office 2007 (np: sharepoint-a).
I co ciekawe – wcale nie ograniczono się do dodatków dla office-a. Znany i lubiany Dreamweaver również został dostrzeżony i można go wyposażyć w jakżesz miłe opcje walidujące pod kątem programistów z m$.
Cóż. Każde rozwiązanie cieszy, o ile tylko wnosi coś nowego.
Nie jest to rzecz zupełnie nowa – acz wyszperałem ją dopiero teraz i niniejszym – dzielę się tym z Wami. 
Fantastycznie jest trafić na czyjąś złotą myśl, doskonały pomysł – przebłys, oświecenie umysłu, które wydaje się być niemal naszym własnym zdaniem. Jakby ktoś za nas wypowiedział zdanie lub stworzył cos według naszego pomysłu. Oczywiście trąci to uzurpatorstwem i przypocowywaniem się do cudzych pomysłów – ale… Jak jest sam każdy wie (chyba, że lubi oszukiwac sam siebie .
Ostatnie znalezisko związane jest z modufikacjami sklepu opartego o silnik Magento. I choć samo znalezisko nie dotyczy tego zagadnienia – świetnie uderza w problem, z jakim się borykam obecnie…
Prezentowany “baton” można nabyć w niezwykłym sklepie online`owym: popandshorty.com.
Nawet jeśli nie po zakupy – to przynajmniej po miłe dla oka “dizajny” warto tam zajrzeć. Kobiece spojrzenie na projektowanie bywa odświeżające.
Jak to w życiu bywa – najlepsze rzeczy odkrywa się przypadkiem.
I tak, szukając natchnienia na zbudowanie ciekawego layoutu, trafiłem na zabawny lab traktujący o niestandardowych, acz przyjemnych “ficzerach” zawartych w CSS3 – oraz tych, które w żaden standard nie są ubrane – ale są obsługiwane przez pewne przeglądarki – dzięki czemu możemy np: nagrodzić kogoś za to, że używa MacOS-X – dając mu na stronie piękne guziki, stylizowane w 100% przez CSS, jak ten:
Warto też poznać odpowiedź na pytanie: “do web sites need to look the same in every browser?“.
Styl dla batona poniżej:
Po długich i żmudnych migracjach treści, serwis został uruchomiony w środowisku produkcyjnym.
Nadal jednak trwają jeszcze drobne prace nad doskonaleniem detali graficznych w CSS oraz usprawnieniem zarządzania przez pracowników spółki.
Walcząc z budową layoutu, warto pamiętać o prostym acz bardzo przydatnym atrybucie “float”, który umożliwia skuteczne rozpychanie warstw – a przy jego braku – pozwala na wzajemne ich nakładanie się.
Osobną sprawą są oczywiście sposoby wyświetlania warstw: inline – dla warstw, które mają ze sobą sąsiadować w poziomie (a także umożliwiać nakładanie się) – i block , np: dla tych, które mają się bezwzględnie rozpychać i markować zadaną ilość miejsca. (tu – koniecznie musi być uwzględnione pozycjonowanie typu “relative” – w przeciwnym razie – nici ze skutecznego rozpychania…)
W zasadzie, nie sposób zbudować porządny layout oparty na css bez tych atrybutów.
Eric Meyer napisał sporo świetnych rzeczy o CSS, niestety – nadal brakuje mi źródła wiedzy praktycznej – z dokładnym wyjaśnieniem niektórych bardziej pokrętnych konstrukcji… Stąd moje zapiski – w zasadzie mające bardziej charakter osobistych notatek – niż źródła wiedzy dla innych 
Żadna nowość, że można zręcznie zastąpić javascriptowe menu czy przyciski – rozwiązaniem z użyciem styli. Poniżej prosty przykładzik, jak sobie ułatwić życie i uczynić stronę lepszą, nowocześniejszą i odporniejsza na infantylizmy przeglądarek (żeby już nie wskazywać palcem ciągle w tym samym kierunku… na Redmond
Eksperymentując z grafiką zastępującą przyciski formularzy, warto wiedzieć, że obrazek daje sobą całkiem nieźle manipulować…
Oto mały przykład atrybutów w znaczniku “input”:
<input type="image" src="image.jpg" width="100px"; height="100px" style="vertical-align: middle;" />
Nie robił bym hałasu z tego , że jedni microsoft lubią inni nie.
Ale keidy przy każdym projekcie webowym, walka z ułomnościami IE zajmuje mi ok. 35% czasu, to przestaje już być zabawne.
Środowisko “jest świadome” i dlatego powstaje mnóstwo wartościowych inicjatyw – od www.ie6.pl począwszy – na bardziej technicznych, jak www.positioniseverything.net kończąc.
Zauważyłem jednak, że zbyt często umykają mi moje własne rozwiązania dość powtarzalnych problemów – jak choćby ułomność w zakresie wyświetlania modyfikowanej listy, z parametrem bullet “inside”.
Rozwiązanie jest dość proste… Unikać parametru “inside” – i niwelować pożądany efekt marginesami, oraz podać komplet wymiarów elementów DIV, w których osadzamy treść. No nie jest to idealne rozwiązanie – ale czy cos co ma związek z IE6 może mieć znamiona ideału?
Teraz z pewnością częściej będe pisał o podobnych kwiatach… dlaczegóż inni mają się tak samo męczyć jak ja – i co gorsza – tracić czas, nerwy i prąd.
A właśnie… W zasadzie można by ich oskarżyć o bezsensowne zawyżanie emisji CO2!
W końcu gdyby przeliczyć te zmarnowane godziny na kilowaty…..
Jeszcze nie tak dawno, uważałem, że przesadne trzymanie się standardów to przejaw nerwicy natręctw i rozrzutność czasu.
Jednak lektura paru pozycji dotyczących technik SEO, w ciągu paru godzin wyleczyła mnie z tego błędnego przekonania.
Od paru dni, wyrywkowo przeglądam swoje strony – i poprawiam co popadnie co przyprawia wprawdzie o lekką rozpacz – ale wyniki są obiecujące.
Najwięcej jednak i tak skorzystają klienci. Obecny projekt – serwis Eneos – wykonany jest z pietyzmem i dbałością o konstrukcję kodu – jak nigdy dotąd.
Nagle okazuje się też, że nawet plugawy IE6 daje się ujarzmić znacznie łatwiej, kiedy każda linia kodu wolna jest od najdrobniejszych błędów i nadużyć.
Higiena, higiena, higiena…
Na nic duma, na nic upór. Czasem trzeba się ugiąć – pod presją słusznych argumentów.
Skądinąd – ciekawe jak łatwo sprostać oczekiwaniom wyszukiwarek poprawiając wyszukiwalność. Znacznie łatwiej jednak stworzyć poprawny projekt – niż poprawiać już popełnione błędy…
