MozillaPL.org - polskie centrum Mozilli

autor: **poczatkujacy webmaster** » 29 czerwca 2006, 18:21

Witam

wlasnie ucze sie css i prawdopodobnie znalazlem blad w FF. Mam na stronie kilka spozycjonowanych elementow i prz pierwszym wczytaniu tekst wchodzi n a obrazki, a gdy sie przycisnie odswierz text juz wyswietlny jest poprawnie.

Przyklad jest zaczerpniety z ksiazki pt:"Css wg Erica Mayera"

kod strony:
<html>
<head>
<STYLE TYPE="text/css">
body img {display: block;}
body {background: rgb(75%,66%,66%) url(page-bg.jpg) top left no-repeat;
margin: 0; padding: 0;
font: 12px/1.5 Verdana, Arial, sans-serif;}
div#wrap {border: 2px solid black; border-left-width: 0;
background: white url(wrap-bg.gif) top left repeat-y;
position: absolute; z-index: 100;
margin: 0 110px 0 0 ; padding: 0 0 2em 2px;
left: 80px; right: 0px; top: 40px;
}

div#wrap img.curve {float: left; clear: left;
margin: 0 15px 0 0; padding: 0;
height: 20px;}
h1 {border-bottom: 2px solid rgb(45%,35%,35%);
background: rgb(90%,75%,75%);
margin: 0; padding: 0.125em 0.25em;
text-align: right; text-transform: lowercase;
font-style: italic; letter-spacing: 0.25em;
font-size: 200%; line-height: 1.25em;}
h2 {font-size: 150%; margin: 0;}
h3, p {margin: 1em 30px 1em 56px; padding-left: 15px;}
h3 {border: 1px solid black; border-width: 1px 0;
background: rgb(93%,85%,85%); font-size: 125%;
margin-right: 0;}
img#rs {position: absolute; z-index: 10;
top: 11em; right: 33px;
border: 1px solid black;}
a#rp {position: absolute; z-index: 5;
top: 11em; right: 23px;
border-width: 0; margin-top: 5px;}
a#rp img {border-width: 0;}
div#menu {position: absolute; z-index: 7;
width: 7em; top: 220px; left: 0;
margin-left: -4.5em; padding: 0.25em 0 0.5em;
border: 3px double black; background: rgb(80%,77%,66%);}
div#menu b {display: none;}
div#menu a {display: block;
color: black; background: transparent;
margin: 0; padding: 0 8px;
text-align: right; font-style: italic;
text-decoration: none;}
div#menu a:hover {color: #943;
padding-right: 4px; border-right: 4px solid #732;}
img#ls {position: absolute; z-index: 1;
top: 210px; left: 8px;}
</STYLE>


</head>

<body>
<div id="wrap">
<img src="curve/slice1.gif" class="curve" alt=""> <img src=
"curve/slice2.gif" class="curve" alt=""> <img src=
"curve/slice3.gif" class="curve" alt=""> <img src=
"curve/slice4.gif" class="curve" alt=""> <img src=
"curve/slice5.gif" class="curve" alt=""> <img src=
"curve/slice6.gif" class="curve" alt=""> <img src=
"curve/slice7.gif" class="curve" alt=""> <img src=
"curve/slice8.gif" class="curve" alt=""> <img src=
"curve/slice9.gif" class="curve" alt=""> <img src=
"curve/slice10.gif" class="curve" alt="">

<h1>Driven</h1>

<h2>Art. Passion. The Web.</h2>

<p>How often do you think of these words as going together? If
you're like most people, the answer is "never." But here at
Pretentious Web Studios, we aren't like most people. We think
that your Web site should not only be a compelling work of art,
but it should reflect your passion, whatever that may be. We'll
do whatever it takes to make that happen. That's why every site
we create is custom designed with all the features that you
need to make your site a success. The way we see it, cookie
cutters belong in the kitchen.</p>

<h3>Pushing the Envelope</h3>

<p>Lorem ipsum, dolor sit amet, consectetuer adipiscing elit,
sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna
aliquam erat volutpat. Ut wisi enim ad minim veniam, quis
lerxst nostrud exerci tation ullamcorper suscipit itsa alla
greeka te mea lobortis nisl ut aliquip ex ea commodo consequat.
Duis autem vel eum iriure dolor in hendrerit in vulputate dirk
velit esse molestie consequat, vel illum dolore eu feugiat
nulla facilisis at vero eros et accumsan et iusto odio
dignissim qui blandit pratt praesent luptatum zzril delenit
augue duis dolore te feugait nulla facilisi.</p>

<p>Ut wisi enim ad minim veniam, quis nostrud exerci tation
ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo
consequat. Duis autem vel eum iriure dolor in hendrerit in
vulputate velit esse molestie consequat, vel illum dolore eu
feugiat nulla facilisis at vero eros et accumsan et iusto odio
dignissim qui blandit praesent luptatum zzril delenit augue
duis dolore te feugait nulla facilisi.</p>

<div id="menu">
<a href="link1.html">art</a> <b>|</b> <a href=
"link2.html">passion</a> <b>|</b> <a href=
"link3.html">solutions</a> <b>|</b> <a href=
"link4.html">pledge</a> <b>|</b> <a href=
"link5.html">contact</a> <b>|</b>
</div><img src="left-side.gif" id="ls" alt="" name="ls">
</div><img src="right-side.gif" id="rs" alt="" name="rs">
<a href="run.html" id="rp" title="run, don't walk" name=
"rp"><img src="rightpanel.gif" alt=""></a>
</body>
</html>

autor: **Tomek** » 30 czerwca 2006, 06:47

oczywiście doctype masz na początku czy zaczynasz sobie od html ???

autor: **gosc** » 10 lipca 2006, 17:07

na poczatku dokumentu bylo <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" nie skopiowalem tego. A poza tym czy to ma az takie znaczenie?

autor: **gosc** » 10 lipca 2006, 17:18

dodam jeszcze ze strona ta poprawnie sie wyswietla w IE6.0 i najnowszej operze, w Netscape 8.1 jest podobny blad.
Pytanie czy to jest jakis blad przegladarek opartych na gecko? jak mozna tego uniknac? i czy w ogole praktykowane jest pozycjonowanie elementow za pomaca css?

Ucze sie tworzenia stron www z kasiazek i chcialbym wiedziec czy takie techniki w ogole stosuje sie, czy raczej je omijac?

Podobno Eric Mayer to specjalista od css wiec chyba glupot nie pisze...

autor: **Tomek** » 12 lipca 2006, 06:49

Zaczynając od początku:
1. Brak Doctype - przeglądarki oparte o gecko korzystają z tego w dużej mierze przy decyzji o sposobie renderowania strony. Bez Doctype przeglądarka wchodzi w tryb quirks w którym jest zgadywane co chciałeś uzyskać. Także stosowanie DOCTYPE jest obowiązkowe!!! (i na 100% masz o tym w Meyerze). A IE i Opera po prostu zgadują ciut lepiej... ale to też jest względne
2. Oczywiście że pozycjonowanie za pomocą css!!! I tylko za pomocą CSS. Zobacz:
http://nf.hyperreal.info/patrz/pozycjonowanie-css/
http://nf.hyperreal.info/patrz/pubudka-tablarza/
http://www.fox.com.pl/articles/web/layout.php

A poza tym - w końcu koś kto uczy się tworzenia www!!!! I to od najlepszych. Gratuluję i czekam na efekty!!!

Poszukaj w googlach o quirks - poznasz wtedy wiele rzeczy które są różnie renderowane przez przeglądarki w zależności od typu doctype.

autor: **gosc** » 12 lipca 2006, 19:59

Hej!
po pierwsze dzieki za linki

Ale jak pisalem w postach wyzej doctype bylo umieszczone w tym pliku. Dopiero po kliknieciu odswierz strona wyswietlala sie poprawnie. Chyba ze to doctype bylo zle okreslone, albo blad Firefoxa...

Poki co nie bardzo wiem o co chodzi z tym. Zapewne o standarty html, no ale przeciez nie bede czytal iles tam stron o kazdym standarcie!

Tak przy okazji to w tej ksiazce "Css wg Erica Meyera" nie wszytko dziala... chyba przegladarki poszly juz do przodu od czasu napisania tej ksiazki. Chodzi mi o trik typu "voice-family" przyklad ponizej. Pytanie czy jest jakis inny sposob na zrobienie czegos podobnego? Z tego co wyczytalem w sieci to najlepiej za pomoca JavaScriptu rozpoznac przegladarke, i dla kazdej z nich wykonac osobny plik css.

div.note {float: right; clear: right; border-width: 0;
width: 18%; margin: 0 1% 0 0; padding: 0;
text-align: right; font: 80% Arial, Verdana, Helvetica, sans-serif;
background: transparent url(blue.gif) 50% 15px repeat-x;
voice-family: "\"}\""; voice-family:inherit;
width: 19%;}

A ogolnie ucze sie z ksiazek: "Css wg...", "JavaScript-projekty", "php5- MySQL - biblia", "PHP, MySQL iu Apache" - wszytko wydawnictwa helionu. Wszystko po to by napisac prace dyplomowa:] a pozniej moze zaczac prace w tym zawodzie. Moze polecisz mi czego moglbym sie jeszcze nauczyc i z jakich ksiazek korzystac? przerobilem jakas ksiazke o Flashu... ale nie podobaja mi sie takie strony i ja takowych nie mam zamiaru tworzyc.

autor: **Tomek** » 14 lipca 2006, 07:10

Z tego co wyczytalem w sieci to najlepiej za pomoca JavaScriptu rozpoznac przegladarke, i dla kazdej z nich wykonac osobny plik css.

To najgłupsze rozwiązanie jakie jest!!!!!!
Skrypty tego typu nie działają przy wyłączonym JS!!!! I zaczynają się problemy. Wystarczy też drobna zmiana na rynku przeglądarek i już masz kłopot.

Uwierz mi - da się pisać bez skryptów js dla różnych przeglądarek. Zobacz np. www.lewinklodzki.pl - nie ma tabelek, nie ma skryptów dla przeglądarek a wszędzie się wyświetla prawidłowo. Techniki pozycjonowania różne, dałem w komentarzach warunkowych dla IE inne style (ale to pojedyncze linijki).
voice-family jest ci potrzebne jedynie dla czytników dla osób niewidomych.
Co ci polecić? Specyfikacje

Na www.w3.org masz sopecyfikacje html,xhtml i css. Po angielsku. Poczytaj, zapoznaj się itp itd. Fakt faktem że specyfikacja html kilkaset stron, do tego dodać kilkaset stron css... eh - szkoda słów. Dlatego dobrze jest pisać w programach mających możliwość współpracy z Tidy - mój ulubiony to kED

Ten przykład który podałeś jest b. prosty. Na stronie meyera powinieneś znaleźć troszkę bardziej udziwnione pomysły

Wierz mi - gdzie jak gdzie ale w Fx działają na 100%

autor: **crazyhenry** » 05 października 2006, 16:54

Wiem, to forum nie na ten temat, ale poradźcie mi , na którym mogę popytać o sprawy zmiany adresu strony, która po zmianie plików z xhtml na html /żeby mozilla ją wyświetlała/ uciekła ze skróconego na stary, długi adres. Na forum republiki nikt o tym nie dyskutuje. Pomóżta chłopaki staremu dziadu.

autor: **crazyhenry** » 05 października 2006, 16:58

Acha jeszcze jedno, w "fe.pl.system darmowych aliasów" żadne kombinacje nie przynoszą skutku, czy administrator mógł ustawić tylko jedną zmianę? Za pomoc dziękuję.Crazy Henry

autor: **dexter** » 05 października 2006, 17:31

crazyhenry pisze:Wiem, to forum nie na ten temat, ale poradźcie mi , na którym mogę popytać o sprawy zmiany adresu strony, która po zmianie plików z xhtml na html /żeby mozilla ją wyświetlała/ uciekła ze skróconego na stary, długi adres. Na forum republiki nikt o tym nie dyskutuje. Pomóżta chłopaki staremu dziadu.

Henry, nic z tego nie rozumiem. Może napisz w punktach, jaki efekt chcesz uzyskać. Chodzi ci o przekierowanie?

autor: **Gość** » 05 października 2006, 19:28

Dzięki Dexterku! w pkt;
1)zrobiłem w Nvu stronkę synowi i postawiłem za frico w republice pod adresem: http://republika.pl/olomed. Było xhtml.
2) Na stronie fe.pl.system darmowych aliasów w republice zmieniłem adres na krótki www.olomed.fe.pl Wszystko działało, wszyscy się cieszyli, ja jak dzieciak.
3) Ponieważ stronka nie hulała w mozilli, poradziliście mi na forum zamianę plików na html, co uczyniłem publikując z programu Nvu. Teraz się kapnąłem, że nazwa miejsca podczas ustawień w nvu była stara czyli http://republika.pl/olomed.
4)Na stronie fe.pl.system darmowych aliasów mam info, że alias olomed.fe.pl jest zajęty.
5) kombinuję różne warianty 3 dzień i noc i nic.
6) Jeżeli w/w jest mętnie przedstawione to podaj mi jakieś forum n/t serwerów bo na republice o tym nic nie nawijają a listów proszalnych do administratora to ja nie mogę wysłać. Dzięki z góry.Crazy Henry

autor: **crazyhenry** » 05 października 2006, 19:33

Ten gość to ja -Crazy Henry. Wybaczcie.

autor: **dexter** » 06 października 2006, 09:03

Teraz rozumiem. Nie wiem, czy coś na to poradzimy, rzeczywiście trzeba by udać się do adminów fe.pl.

Tymczasem spróbuj stworzyć plik index.xhtml zawierający

Kod: Zaznacz cały: <meta http-equiv="refresh" content="0; url=index.html">

Tak to chyba się robi.

autor: **crazyhenry** » 06 października 2006, 14:24

Dzięki Ci DEXTERku, daj sobie z tym moim problemem spokój bo ja jestem kiepski w języku html i nawet nie wiem gdzie toto wstawić, czy na serwer jako publik nadpisujący działający plik index.html czy co. Będę żyły pruł, nie spał, dla ukojenia "nerw" skoczę na Lewin Kł. a Tobie dzięki za szczere chęci. Crazy Henry.[/i]
dopisano 10.10.06
Już po problemie. Dzięki łańcuchowi ludzi dobrej woli wszystko działa bdb.
wina leżała po stronie administratora serwera.

MozillaPL.org - polskie centrum Mozilli

Główne menu:

blad w wyswitlaniu strony

blad w wyswitlaniu strony

cd...

cd...

dalej...

błąd w wyświetlaniu strony

Kto jest online

Nawigacja:

Stopka: