ďťż

[css]Problem z wyświetlaniem w różnych przeg.

Podstrony

telcocafe

Mam problem z wyświetlaniem treści w różnych przeglądarkach tej strony
W ie jest wszystko w pożądku w firefox u mnie na dysku nie wyświetla się ta grafika z napisem kalendarz i treść strony (lorem impsus) a na serwerze sami zobaczcie w firefox
Ahhhhhh jaka trudna ta migracja na div

Coś słabo Ci ta nauka idzie... masz szczęscie, że chciało mi się posiedzieć nad kodem. Najczęsciej po spojrzeniu na kod mówię co jest źle i co trzeba poprawić a nie sam poprawiam.. Wtedy ktoś sam musi poćwiczyć sobie zawawę z kodem. Tutaj gdybym miał wymieniać błedy, mowić jak je rozwiązać i dlaczego właśnie tak, to musiałbym 2-stronnicowe opowiadanie napisać;/
index.html
<head> <link rel="stylesheet" type="text/css" href="main.css" /> <style type="text/css"> @import "layout.css"; </style> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" /> <title>Kitas homepage</title> </head> <body xml:lang="pl"> <div id="wrapper"> <div class="brzegl"><img src="1.png"></div> <div class="tresc"> <div class="top"><img src="3.png"></div> <div class="menu"><img src="2.png"></div> <div class="tekst">Lorem ipsum dolor sit amet consectetuer Suspendisse auctor at Aenean Phasellus. Sem pretium risus tincidunt at et lobortis et parturient leo adipiscing. Tincidunt Curabitur ac suscipit dui wisi quis pede sem tincidunt nibh. Magna eget tincidunt laoreet ut Aenean Sed metus elit Quisque lacinia. Donec dui dis eu metus congue congue velit id et a. Eget auctor Lorem neque id neque Pellentesque. Tellus Nullam et sagittis ut arcu pretium pharetra ipsum elit lacinia. Ipsum arcu et lacus mus tincidunt accumsan Vestibulum id et Vivamus. Consectetuer nisl Nulla pellentesque nulla dolor nec ligula wisi porttitor justo. Urna netus suscipit pede Vestibulum Vivamus vitae tellus.</div> </div> <div class="brzegr"><img src="1.png"></div> </div> </body> </html>
main.css
body, td, input, option, textarea { color: black; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; background: white; } body { vertical-align: top; text-align:center; }
layout.css
#wrapper { width: 602px; margin: 0 auto; } .brzegl { height: 600px; width: 20px; float: left; } .tresc { width: 551px; float:left; } .brzegr { height: 600px; width: 20px; float: left; } .top { height: 179px; width: 551px; float: left; } .menu { width: 137px; float:left; } .tekst { width:390px; float:left; }
zastanawiam się dlaczego wszystkiego nie ująłeś w jednym pliku CSS...
Użytkownik kutar edytował ten post 24 lipiec 2007, 21:02

Najczęsciej po spojrzeniu na kod mówię co jest źle i co trzeba poprawić a nie sam poprawiam.. Wtedy ktoś sam musi poćwiczyć sobie zawawę z kodem.
Tylko ty mi niawet nie powiedziałeś co jest źle wyświetliłeś cały kod strony

Właśnie o to chodzi - musisz pomyśleć co jest źle,a nie czekać aż ktoś Ci poda na tacy.
Przeczytaj jeszcze raz post kutara i pomyśl,kilka razy,co tam jest napisane.

Już troche poprawiłem i w firefox się już jakoś trzyma ale nie tak jak w ie (nie wyświetla się treść strony lorem i .....)

Przeanalizowałem kod który podałeś (jest prostszy i nie ma tak dużo bawienia z pozycjonowaniem) ale nie czaje czemu w tedy tak źle wyświetlało w firefox (chociaż teraz menu kalendarz w firefox nachodzi na brzeg)
Użytkownik aras16 edytował ten post 25 lipiec 2007, 09:30
Jak się może nie wyświetlać? Zainstaluj dodatek do Firefoxa - FireBug i sprawdzaj na zakładce html znaczniki aż dojdziesz do tego,który powoduje błąd.
//edit
Chyba wiem. Wrzuć do brzegr clear: both. Może pomoże :)
Użytkownik andrzej_aa edytował ten post 25 lipiec 2007, 09:25

Chyba wiem. Wrzuć do brzegr clear: both. Może pomoże smile.gif
Nie pomogło tylko brzegr "przylepił się" do bloku brzegl

Pierwszy raz firefox mnie tak zwiódł (a ciekawe co jeszce powiedzą użytkownicy opery??)
Użytkownik aras16 edytował ten post 25 lipiec 2007, 09:40
Cóż? Opera Mini wszystko wyświetla :) Dwie grafiki i tekst . . .

Tylko ty mi niawet nie powiedziałeś co jest źle wyświetliłeś cały kod strony
Wyświetliłem kod poprawiony i przepisany pod IE i Fx. Wszystko działa teraz chyba dobrze i jest wyświetlane. Jeśli coś dalej nie gra według Ciebie to po prostu napisz a postaramy się pomóc.

Czemu kalendarz i logo z linkami nachodzi na blok brzegl i czemu tamten kod nie działał w firefox(na tej stronie mi tak nie zależy ale chcę opanować te bloki ;) ?

1.#wrapper { width: 607px; margin: 0 auto; } .tresc { padding-left:5px; width: 551px; float:left; }
2. bo było bardzo dużo błędów w konstrukcji tych divów. W Twoim przypadku powinieneś zrobić trzy głowne divy: lewy, środkowy i prawy. I dopiero w tym środkowym zdefiniować "poddivy": logo, menu i treść.
Użytkownik kutar edytował ten post 25 lipiec 2007, 16:39
Hmmmm teraz wygląda dobrze w firefox ale w ie jest za mocno oddalone

Wykorzystaj min-width: Fx i Opera zinterpretują, a IE opuści.. i wszędzie będzie dobrze wyglądało ;]
index.html<html><head> <link rel="stylesheet" type="text/css" href="main.css" /> <style type="text/css"> @import "layout.css"; </style> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" /> <title>Kitas homepage</title> </head> <body> <div id="wrapper"> <div class="brzegl"><img src="1.png"></div> <div class="tresc"> <div class="top"><img src="3.png"></div> <div class="menu"><img src="2.png"></div> <div class="tekst">Lorem ipsum dolor sit amet consectetuer Suspendisse auctor at Aenean Phasellus. Sem pretium risus tincidunt at et lobortis et parturient leo adipiscing. Tincidunt Curabitur ac suscipit dui wisi quis pede sem tincidunt nibh. Magna eget tincidunt laoreet ut Aenean Sed metus elit Quisque lacinia. Donec dui dis eu metus congue congue velit id et a. Eget auctor Lorem neque id neque Pellentesque. Tellus Nullam et sagittis ut arcu pretium pharetra ipsum elit lacinia. Ipsum arcu et lacus mus tincidunt accumsan Vestibulum id et Vivamus. Consectetuer nisl Nulla pellentesque nulla dolor nec ligula wisi porttitor justo. Urna netus suscipit pede Vestibulum Vivamus vitae tellus.</div> </div> <div class="brzegr"><img src="1.png"></div> </div> </body> </html>
layout.css
#wrapper { width: 602px; margin: auto; } .brzegl { height: 600px; width: 20px; min-width:25px; float: left; } .tresc { width: 551px; float:left; } .brzegr { height: 600px; width: 20px; float: left; } .top { height: 179px; width: 551px; float: left; } .menu { width: 137px; float:left; } .tekst { width:390px; float:left; }
main.css
body, td, input, option, textarea { color: black; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; background: white; } body { text-align:center; }
Użytkownik kutar edytował ten post 25 lipiec 2007, 16:59
Dobra jest już ok tylko znowu mam mniejszy problem (tym razem w firefox jest dobrze heh ;) )
Chcę aby moja strona blok wrapper (czyli wszystko co widać) był wyżej o parę px (żeby nie było białego paska a więc zrobiłem pozycjonowanie relatywne cofnąłem o 10 px w firefox było dobrze a ie jakby tego wogóle nie widziała

Jak nie musisz koniecznie używać posiotion, to się wystrzegaj jak ognia. Wiele osób rozpoczynających "przygodę" z Divami stosuje to do wszystkiego. Moja rada... dopóki nie nauczysz się divóv porządnie to nie stosuj tego nigdy :) A odstęp niwelujemy za pomocą margin w body:
body {margin:0px; text-align:center; }

Ech tak myślałem że marginesy coś tam z nimi próbowałem (chyba margin-top) dobra wielkie dzięki za pomoc (ten temat to moja wielka lekcja pozycjonowania) ;)

Sitedesign by AltusUmbrae.

Darmowy hosting zapewnia PRV.PL