Niedziałające podstrony po wgraniu na serwer.

[Masu91]

Witam.

 

 

Muszę zrobić stronę internetową na zaliczenie o systemach operacyjnych.

Postanowiłem, że zanim wypełnię ją treścią to sprawdzę czy jakoś to działa.

Skorzystałem z gotowego szablonu gdyż nigdy nie robiłem stron a i czasu za dużo nie mam.

Zapoznałem się z podstawami html'a ale najwyraźniej czegoś nie rozumiem.

 

Zająłem adres na cba.pl i połączyłem się przez Total Commandera.

Wrzuciłem wszystkie pliki na serwer. Myślę, że nie popełniłem tu żadnego błędu ale dla pewności wysyłam zdjęcie jak to wygląda w moim folderze.

Wszystko dobrze działało póki nie poszło właśnie na serwer. Każda podstrona z menu się ładowała aż do teraz.

Moja strona to systemyoperacyjne7.cba.pl.

 

A tak wygląda kod, który wykorzystałem do zrobienia tego menu.

 

<dl>

<dt>Menu</dt>

<dd><img src="images/menu.jpg" alt="menu" /> <a href="unix.html">UNIX</a></dd>

<dd><img src="images/menu.jpg" alt="menu" /> <a href="dos.html">DOS</a></dd>

<dd><img src="images/menu.jpg" alt="menu" /> <a href="macos.html">MacOS</a></dd>

<dd><img src="images/menu.jpg" alt="menu" /> <a href="windows.html">Windows</a></dd>

<dd><img src="images/menu.jpg" alt="menu" /> <a href="linux.html">Linux</a></dd>

<dd><img src="images/menu.jpg" alt="menu" /> <a href="schemat.html">Schemat budowy i zadania systemu operacyjnego.</a></dd>

<dd><img src="images/menu.jpg" alt="menu" /> <a href="index.html">Powrót</a></dd>

</dl>

 

Czy ktoś mógłby mi wytłumaczyć co robię źle? Jestem laikiem jeśli chodzi o pisanie stron internetowych a bardzo potrzebują pomocy. Każda rada się przyda. Pozdrawiam.

[ULLISSES]

Kod menu jest dobrze. Problemem jest ten kod (generowany przez reklamę cba.pl):

<div class="cbalink" style="text-align: center; font-size: 11px;"><a title="darmowy hosting" href="http://www.cba.pl/">Darmowy Hosting</a> CBA.PL<br><br></div>

Przejmuje on ze styli własność:

position:relative

przez co rozciąga się na całą wysokość menu oraz całą szerokość elementu "kontener".

 

Aby rozwiązać problem, trzeba dodać to pliku styli wpis:

div.cbalink { position: static !important}

Gdzie:

div -> wskazuje na typ elementu

.cbalink -> wskazuje na konkretną klase elementu

postion:static -> wymusza konkretne ustawienie/styl

!important -> powoduje, że dany zapis jest ważniejszy, niż dowolne inne ustawienia w dowolnym miejscu kodu (najważniejszy)

Poza tym proponuję zmienić kodowanie na UTF-8, a do edycji kodu używać np. PSPad lub nawet WordPad (wybierając przy zapisie pliku typ UTF-8).

[Masu91]

A mógłbyś powiedzieć, w którym miejscu dokładnie wstawić tę linijkę, która miałaby to naprawić.

Naprawdę mało rozumiem z tego całego html'a a strony nie robię z własnej woli. Zaliczenie semestralne na dziennikarstwo:/

Do pisania używam Zajączka. Czy tam też mogę zmienić gdzieś to kodowanie? I czy może mieć to wpływ na to, że strona działa poprawnie tylko na Operze? Bo działa jak przed chwilą sprawdziłem z kilkoma osobami.

[ULLISSES]

Kod poprawki najlepiej wklepać na koniec pliku style.css - chociaż możliwe, że działa w dowolnym miejscu (nie sprawdzałem).

 

Kodowanie nie ma wpływu na działanie menu - ma na poprawność wyświetlania polskich znaków. Zajączek to już zabytek i nie potrafię powiedzieć, czy posiada opcję przełączenia kodowania na UTF-8 (oraz zapisu w tym kodowaniu). Wiem natomiast, że taką opcję posiada PSPad, bo sam z niego korzystam. Wystarczy otworzyć w nim każdy plik HTML, wybrać w menu Format->UTF-8 i zapisać plik. Należy przy tym pamiętać, aby zmienić kodowanie w nagłówku HTML z:

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />

na:

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

Zapis w UTF-8 oferuje także Windowsowy Wordpad. Gdy mamy otwarty plik, wybieramy "Zapisz jako" i w okienku zapisu na samym dole mamy "Zapisz jako typ", gdzie wybieramy "Dokument tekstowy Unicode". Oczywiście powyższa zmiana w kodzie także jest wymagana.

 

Natomiast każda przeglądarka ma swoje zasady (silnik) wyświetlania stron, dlatego ta sama strona otwarta w 2 różnych przeglądarkach może wyglądać trochę inaczej.

[Masu91]

No dobrze, wklepałem poprawkę zaraz po

<link rel="stylesheet" href="style.css" type="text/css" />

ale chyba nic nie zmieniło.

Zmieniłem program na PSPad i zapisałem w UTF-8.

Dalej nie wiem czemu tylko na Operze to wszystko działa jak należy.

[m4r]

w pliku

http://www.systemyoperacyjne7.cba.pl/style.css

wklepujesz na samym końcu to o czym pisał ULLISSES, czyli:

div.cbalink { position: static !important}

Jeżeli z jakichś przyczyn nie zadziała (co możliwe), to na końcu strony (a na pewno pod divem "cbalink", tudzież javascriptem z cba) możesz wklepać coś takiego:

<script type="text/javascript">document.getElementsByClassName['cbalink'].style.position = 'static'; //uwaga, nie sprawdzałem, piszę z głowy</script>

Brak polskich krzaków w tej chwili jest spowodowany najprawdopodobniej tym, że masz pomieszane charsety. W meta jest teraz iso-8859-2, znaki wyglądają mi też na 8859-2, ale zapisane są w utf-8. Musisz zmienić sobie wszystkie "¶" na "ś", itp., jeżeli chcesz widzieć tekst poprawnie w utf-8.

[Masu91]

w pliku

http://www.systemyoperacyjne7.cba.pl/style.css

Już tutaj mam problem. Nie wiem gdzie znaleźć ten plik, o którym mówisz. W kodzie takiego czegoś nie ma a i fizycznie taki plik nie istnieje w moim folderze ze stroną.

Możesz mi wytłumaczyć w najprostszy sposób jak dostanę się do tego style.css żeby dopisać podane przez was polecenia?

[m4r]

Na Twoim obrazku:

to jest trzeci plik od dołu ("style" z ikonką notatnika). Czasem warto włączyć sobie widoczność rozszerzeń w windowsie - jest dużo łatwiej.

A jak go wyedytować: otwierasz nawet w notatniku, potem dopisujesz na samym końcu po ostatnim nawiasie klamrowym w nowej linii "div.cbalink...", czyli to co podał Ci ULLISSES wyżej. Zapisujesz -> wysyłasz na serwer -> nadpisujesz plik. Powinno po potraktowaniu [ctrl]+[f5] działać poprawnie.

 

Btw, żeby przypadkiem nei wprowadzić w błąd.

Alternatywny kod javascript, który podałem powinien wyglądać tak:

document.getElementsByClassName('cbalink')[0].style.position = 'static'

Nie dawało mi to spokoju i przed momentem sprawdziłem. Edytowane 19 Stycznia 2011 przez m4r

[Masu91]

Jeeeezu, jak ja tego mogłem nie widzieć...

Wstawiłem tylko ten div od ULLISSES i już działa.

Dziękuję Wam obojgu, chłopaki. Nawet nie wiecie jakie miałem przez to nerwy:)

 

Jeszcze raz dzięki i miłego wieczoru. Mój już na pewno taki będzie^^.