Witam,
dopiero się uczę tworzenia stron na bazie arkusza stylów, więc proszę o wyrozumiałość i w miarę możliwości o odpowiedź na wszystkie pytania - jeżeli nie przez jedną osobę, to może inni dopowiedzą (za co dziękuję).
Już od dłuższego czasu męczę się nad stworzeniem układu CSS strony internetowej - napiszę więc to w pierwszym punkcie (najważniejszym).
Chodzi mi o to, czy nie mógłby mi ktoś pomóc wykonać (napisać) poprawny układ CSS, tak aby strona się dobrze wyświetlała pod każdą przeglądarką ? Grafikę mam przygotowaną i pociętą - chodzi tylko o poskładanie całości (nie ma tego dużo) - mi jakoś nie chce to wyjść, a komuś kto się na tym zna zapewne to zajmie chwilkę.
Chciałbym w efekcie otrzymać (tło jest w całości - w efekcie czego jest 5 elementów):
Pliki z grafiką do pobrania : http://uslugi-stolarskie.firmowo.net/img.rar
Wymiary strony to : 900x675 (px)
Gotowy CSS/HTML, prosiłbym o umieszczenie tutaj lub wysłanie pod email: przemek89k[@]gmail.com za co z óry dziękuję.
Nie mogę jednak nic zaoferować poza dziękuję i ewentualnie skromną rekompensatą w postaci transferu 10GB do serwisu, z którego można pobierać pliki.
Na górze są 4 buttony (przyciski) - na czerwonym tle jest logo, a po prawej ta ramka - w środku chciałbym mieć możliwość pisania tekstu (dokładnie w otoczce tego rysunku ze stołem).
Dzięki temu dowiem się jak stworzyć taki układ na bazie czegoś gotowego - poznam błędy, które popełniałem i na przyszłość będę wiedział co i jak - próbowałem i mi nie wychodziło - liczę na pomoc.
PS: Temat ten nie jest ofertą (zleceniem) więc proszę go nie zamykać - mam tutaj inne pytania (pod spodem).
- Najpierw przedstawię sytuację :
Mam jakiegoś diva(blok) main, który ma ustaloną szerokość i wysokość i do niego wrzucam wszystkie bloczki - tzn. chcę aby strona miała wymiar 900x675px.
Załóżmy, że strona jest już zapełniona - zielony bloczek przylega równo do końcowej krawędzi (675px) i teraz pytanie - jak wrzucę kolejnego diva (czerwony) o szerszym rozmiarze, który nie będzie w stanie “opływać” zielonego bloczka z lewej to rozciągnie on stronę i znajdzie się pod spodem.
Chciałbym aby te dwa bloczki (zielony i czerwony) były obok siebie i jeden nachodził na drugiego (tzn. ten czerwony ze strzałką przenieść do góry).
Robiłem to przy pomocy position: relative i zwiększałem wartość bottom, ale uzyskałem coś takiego :
Co prawda czerwony bloczek był obok zielonego, ale fizycznie znajdował się on nadal na dole tzn. zajmował on tam miejsce i przez to rozciągał moją stronę (zostawił tam pustą przestrzeń - tak jakby niewidzialnie tam był).
Jak się tego pozbyć - na dole nic nie widać, a “coś” zabiera mi miejsce - wiem, że to ten czerwony bloczek z position: relative ?
Pytanie podobne do powyższego - jak nałożyć na siebie dwa divy (różnych rozmiarów - to chyba bez znaczenia), ale nie w całości tylko trochę tzn :
- czy istnieje tylko position do tego, czy może da się inaczej ?
Prosiłbym o krótki kod HTML/CSS jak takie coś rozwiązać … oczywiście bez błędu tego co opisałem powyżej (mam np. przeźroczystego gifa, którego chcę wstawić tak aby nachodził na blok - diva - obok).
- Dlaczego inaczej działa coś w IE a inaczej w Firefoxie, chodzi mi o sytuację :
Mam 3 bloczki (divy) ułożone jak na obrazku i w jednej przeglądarce jak pod nimi piszę tekst to pojawia się on w wolnej przestrzeni a w innej przeglądarce jest on pod spodem (pod ostatnim -zielonym- bloczkiem) ?
Jak takie coś usunąć, aby w obu przeglądarkach tekst był w tym samym miejscu ?
- Jest taka funkcja jak powiększanie tekstu na stronach internetowych (ctrl+ scrool myszki) i robiąc tak w Firefoxie wszystko jest ok :
Natomiast w Internet Explorer powiększając w ten sposób - rozjeżdża mi się menu oraz napisy wychodzą z poza bloku - przez co są obcięte :
Jak to naprawić - czy tak musi zostać - czy jest może coś, dzięki czemu tekst nie będzie mógł się powiększać (będzie stały) - albo powiększy się tak, że zmieści się w divie ?
PS: Oto mój fragment kodu CSS/HTML - http://uslugi-stolarskie.firmowo.net/szablon.rar
Ale proszę się nim nie sugerować - jest on zły, w większości robiony na position relative.
Dlatego prosiłbym o pomoc i o stworzenie całkiem nowego szablonu - który opisałem na samej górze.
Dziękuje, za przeczytanie tego długiego tematu i za wszystkie odpowiedzi 
Pamiętaj iż ważne jest podanie poprawnego doctype i wyzerowanie marginesów wewnętrznych i zewnętrznych -> body {margin:0;padding:0;}. Czasem nie wszystko da się dostosować do IE/innychPrzeglądarek dlatego stosuje się różne style dla IE a inne dla reszty.