ďťż

[CSS] tworzenie stron na wiele przeglądarek

Podstrony

telcocafe

Miałem dłuuuuugą przerwę od css. Kiedyś się nim bawiłem, ale nie robiłem setek szablonów, itp. Ostatnio postanowiłem trochę sobie przypomnieć css. Efektem jest pewien szablon. Nie uważam, że jest udany- style są trochę pomieszane i nie pasują do siebie, itp. Na to akurat nie zwracajcie uwagi, ponieważ chciałem sobie bardziej przypomnieć css niż tworzyć szablon do wykorzystania na stronie www. Popełniłem też taki błąd, że zrobiłem ten szablon w oparciu o px a nie % przez co może być problem na innych rozdzielczościach i... nie wiem dlaczego jest problem z wyświetlaniem menu w IE. Sam nie korzystam z tej przeglądarki a efekt mojej pracy obserwowałem w firefoxie. Jednak dalej sporo osób korzysta z przeglądarki Microsoftu. Jest to więc spory problem. Czym może być to podyktowane? Macie może jakieś dodatkowe porady odnośnie samej konstrukcji strony?

Linki do szablonu (to jest ten sam plik)
http://www.sendspace...d3bf0f3dd1a2604
http://hostuje.net/f...6868c8017847313
http://www.wrzucaj.com/402687
http://www.plikos.pl/y4r/bebe.rar.html
Użytkownik tajpan edytował ten post 31 grudzień 2009, 15:45

wrzuc bezposrednio, na jakies ovh czy cos

http://szablon87.w.interia.pl

Celowo nie publikowałem strony, tylko wrzuciłem pliki żebyście omówili stronę techniczną strony a nie grafikę

PS. Nie ręczę za inne rozdzielczości niż moja: 1680x1050
Użytkownik tajpan edytował ten post 31 grudzień 2009, 15:05
Problemem jest pozycjonowanie absolutne. Musisz przerobić swój layout i wywalić pozycjonowanie absolutne. Czemu? Przywróć rozmiar okna przeglądarki i zmniejszaj okno, a zobaczysz, że treść się ukrywa. Zauważ na innych stronach, że treść jest wycentrowana. Gdybyś to zrobił z automatycznymi marginesami, to nie byłoby problemów. Jeśli masz możliwość, to przyjrzyj się innym szablonom, np., z freecsstemplates.org.
Jeśli jednak się uprzesz przy takim widoku, to musisz zrobić dwie rzeczy. Elementowi #menu nadaj styl position: relative; Zaś elementowi #glowna usuń text-align: center;

Czyli innymi słowy mam zastąpić pozycjonowanie absolutne relatywnym? Czy tylko kontenerom nadać pozycjonowanie relatywne? Szczerze mówiąc trochę się pogubiłem już podczas tworzenia szablonu kiedy stosuje się jakie pozycjonowanie. Dlatego użyłem absolute.

Elementy pozycjonuje się bardzo rzadko i to w bardziej skomplikowanych layoutach, a Twój do takich absolutnie nie należy.
Dodatkowo musisz wykorzystać opływanie. Twój kod po poprawkach wyglądałby mniej więcej tak:body { background: black url("grafika/tlo.jpg") repeat-x fixed center top; text-align: center; } #glowna { text-align: left; margin: 100px auto 0; color: black; background: red; width: 700px; border: 1px solid black; } #menu { width: 200px; background: green; float: left; text-align: center; } #menu3 { background-image: url("grafika/menu_srodek.jpg"); } #tresc { color: white; background-color: black; float: right; width: 500px; } a { color:black; text-decoration:none; } a:hover { color: red; text-decoration:none; }

Dzięki, ale w IE dalej strona nie wygląda tak jak powinna

body { background: black url("grafika/tlo.jpg") repeat-x fixed center top; text-align: center; } #logo img { vertical-align: middle; } #glowna { text-align: left; margin: 100px auto 0; color: black; width: 700px; } #menu { width: 200px; float: left; text-align: center; } #menu img { vertical-align: top; } #menu2 { overflow: hidden; height: 14px; } #menu4 { overflow: hidden; height: 14px; } #menu3 { background-image: url("grafika/menu_srodek.jpg"); } #tresc { color: white; background-color: black; float: right; width: 500px; } a { color:black; text-decoration:none; } a:hover { color: red; text-decoration:none; }Przypomnij sobie więcej CSS, to będzie Ci łatwiej ;)

Sitedesign by AltusUmbrae.

Darmowy hosting zapewnia PRV.PL