MozillaPL.org - polskie centrum Mozilli

autor: **Moby04** » 24 sierpnia 2006, 12:12

Witam. Od niedawna ucze sie tworzyc strony internetowe (css, xhtml, php i mysql). Po napisaniu prostej stronki z wykorzystaniem wszystkich z wyjatkiem tego ostatniego postanowilem ja przetestowac. Majac na uwadze zaopatrzylem sie w kolekcje przegladarek:
IE 6.0
Firefox 1.5.0.6
Opera 9.1
cos dolaczone do srodowiska kED (nie pamietam wersji)

Sam kod php dziala "jak zloto" i nie mam z nim problemow. Problem pojawil sie jednak z arkuszem css. Problem ten pojawia sie jedynie w firefoxie i operze - w pozostalych dwu strona wyswietla sie zgodnie z zamierzeniami. Kodowanie jest wszedzie takie samo (utf-8) a problem pojawia sie w przypadku wszystkich podstron (jedna generowana przez php, druga napisana w czystym xhtml w wersji transitional) co sugeruje blad w arkuszu css, z ktorego one korzystaja. Zarownbo html jak i css przepuscilem przez odpowiednie validatory i bledow nie stwierdzono. Dlatego zdecydowalem sie poprosic tu obecnych o pomoc. Problem polega na tym, ze konfiguracja dzialu div#page (probowalem zmienic wartosc id zeby upewnic sie, czy nie jest to jakies slowo zastrzezone i nie pomoglo) nie jest uwzgledniana i nie wiem dlaczego. Tak wiec oto kod:

1) html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Książki</title>
<link rel="stylesheet" type="text/css" href="styl.css" />
</head>

<body>
<div id="page">
<div id="index">
<a href="index.html">Strona główna</a>
<a href="lista.php?name=moby">Moby</a>
<a href="lista.php?name=karolina">Karolina</a>
</div>
<div id="content">
<h1>Witaj!</h1>
<p>Niniejsza strona powstała niemal wyłącznie w celach treningowych. Generuje ona
listę przeczytanych książek na podstawie plików tekstowych przechowywanych name
serwerze. </p>
<p id="credits">Moby</p>
</div>
</div>
</body>
</html>

2)szablon css: (podkresle, ze wszystko z wyjatkiem #page dziala)
#index {position: absolute;
top: 5%; left: 15px;
width: 150px;}

#page {width: 600px;}

#index a {display: block;
position: relative;
left:10px;}

#content {position: absolute;
top: 0px; left: 165px;}

Za wszelaka pomoc bede wdzieczny bo sam juz nauczylem sie zbyt wielu przeklenstw przy probie skorygowania "potkniec".

autor: **helios** » 24 sierpnia 2006, 12:55

#page ma 600px szerokości. O co Ci chodzi? Jak ta strona miała wyglądać?

autor: **woowek** » 24 sierpnia 2006, 13:42

hm skopiowalem to do pliku html i zmienilem pozycje #content na relative - wtedy dziala, a roznica w polozeniu jest nieznaczna. w sumie mysle ze stosowanie absolute jest ogolnie niebezpiecznym pomyslem

autor: **diablownik** » 24 sierpnia 2006, 14:13

woowek pisze:hm skopiowalem to do pliku html

Mi się nie chciało :wink:

Jak autor tematu poda jakiegoś linka do tej strony, to może będzie można mu pomóc. Nie wiem jak inni, ale ja nie mam czasu na kopiowanie cudzego kodu do pliku html.

woowek pisze:w sumie mysle ze stosowanie absolute jest ogolnie niebezpiecznym pomyslem

Dlaczego? Nie widzę w tym nic niebezpiecznego

autor: **woowek** » 24 sierpnia 2006, 14:33

diablownik pisze:
woowek pisze:w sumie mysle ze stosowanie absolute jest ogolnie niebezpiecznym pomyslem

Dlaczego? Nie widzę w tym nic niebezpiecznego

no niby nie, ale zalezy jak kto jest rozgarniety

ja kiedys na moment zapomnialem, ze sa inne rozdzielczosci niz ta w ktorej pracuje :lol:

no a w tym wypadku doszlo do niepotrzebnego skomplikowania, mysle ze warto unikac sytuacji w ktorych rozne przrgladarki roznie interpretuja kod, widocznie bo zdeklarowaniu absolute opera i firefox zignorowaly wielkosc #page, a ie nie - i po co takie klopoty

autor: **helios** » 24 sierpnia 2006, 15:59

Oglądałem to w Web Developerze i nie zignorowały. #page ma zadeklarowane 600 px szerokości.

Poza tym dalej nie wiem, jak to miało wyglądać.

autor: **woowek** » 24 sierpnia 2006, 16:23

ja ogladalem w firefoxie

jesli position #content byla absolute, to div rozciagal sie do prawej krawedzi strony, a jesli relative, to ograniczal sie do tych 600px w #page.

no i pewnie o to autorowi chodzilo, by calosc zamykala sie w 600px szerokosci, a nie rozlazila na cala strone

moze jak sie odezwie to powie

autor: **Moby04** » 24 sierpnia 2006, 17:23

Pierwotnie to chodzilo mi o to, zeby strona miala dokladnie 600 pikseli szerokosci - reszte wypelnilbym marginesami z obydwu stron. Niestety, Opera i Firefox ignboruja ustawienia szerokosci (koloru tla zreszta tez mi nie uwzglednily dla dzialu div#page

)

Swoja droga moglibyscie w miare przystepnie wyjasnic mi czym sie rozni ustawienie absolute od relative?

autor: **Moby04** » 24 sierpnia 2006, 18:22

Rzeczywiscie, po zamienieniu position: absolute na relative dziala prawie jak powinno. TYle tylko, ze dzial content jest na poziomie, na ktorym powinien byc przy poprawnym umieszczeniu spisu tresci. Moj problem polega teraz na tym: jak "zmusic go" do wyswietlenia sie na samej gorze strony?

autor: **woowek** » 24 sierpnia 2006, 19:46

tzn jak ma byc? ja jak zrobilem mialem je na tej samej wysokosci, ma byc wyzej? to dajesz top:-20px na przyklad, mozesz liczby ujemne stosowac. a tla nie bedzie, chyba ze sprobuj dodac tak jak mowilem overflow:hidden do #page. inaczej opera i firefox nie wyswietla tla pustego elementu, chyba ze dodasz oprocz szerokosci jakas jego wysokosc, ale to przy zmienianiu dlugosci menu czy #content moze byc uciazliwe.

autor: **diablownik** » 24 sierpnia 2006, 19:54

Moby04 pisze:Swoja droga moglibyscie w miare przystepnie wyjasnic mi czym sie rozni ustawienie absolute od relative?

Absolute: pozycjonowanie według elementu zewnętrznego, nadrzędnego.
Relative: pozycjonowanie względem poprzedniego elementu na stronie.
Więcej: tu i tu.

autor: **Stef** » 24 sierpnia 2006, 20:03

diablownik pisze:Absolute: pozycjonowanie według elementu zewnętrznego, nadrzędnego.
Relative: pozycjonowanie względem poprzedniego elementu na stronie.

Oj nie..
Absolute: względem pozycjonowanego przodka.
Relative: względem własnych krawędzi.

autor: **diablownik** » 24 sierpnia 2006, 20:17

Stef pisze:Oj nie..
Absolute: względem pozycjonowanego przodka.
Relative: względem własnych krawędzi.

Absolute: a element nadrzędny nie jest przodkiem? :wink:

Jak mamy stronę, a na niej przykładowo jakiś jeden div, to elementem nadrzędnym wobec niego będzie strona (body). Chyba tak, prawda?

Relative: to można jakiś element wobec niego samego pozycjonować?

Przepraszam za ewentualne błędy, wróciłem właśnie z ciężkiej przeprawy i zmęczenie daje się we znaki :wink:

autor: **Stef** » 24 sierpnia 2006, 20:23

diablownik pisze:Absolute: a element nadrzędny nie jest przodkiem? Jak mamy stronę, a na niej przykładowo jakiś jeden div, to elementem nadrzędnym wobec niego będzie strona (body). Chyba tak, prawda?

Chodzi o to że pierwszy pozycjonowany przodek - nie tylko nadrzędny ale także pozycjonaowany, a to nie to samo co pierwszy przodek/element nadrzędny.

diablownik pisze:Relative: to można jakiś element wobec niego samego pozycjonować?

Dokładnie - precyzjniej to według krawędzi pozycjonaowanego elemntu.

autor: **diablownik** » 24 sierpnia 2006, 20:33

Mój problem polega na tym, że robię to wszystko intuicyjnie, brakuje mi jakiejś fachowej teorii (nie takiej w stylu internetowego kursu)

Ale linki dobre chociaż podałem. Przydadzą się na pewno :wink:

autor: **Stef** » 24 sierpnia 2006, 20:44

To przyda się jeszcze: bezględnie względny oraz MDC PL: CSS ze świetnym kursem, no i oczywiście specyfikacja..

autor: **Moby04** » 25 sierpnia 2006, 07:23

Wiem wprawdzie, ze to juz nudne ale jeszcze jedno pytanko. Otoz swoje zamierzenia osiagnalem za pomoca:

#page {postion: relative;
width: 600px;
margin: 0 auto;}

#index {position: absolute;
top: 5%; left: 15px;
width: 150px;}

#index a {display: block;
position: relative;
left:10px;}

#content {position: absolute;
top: 0px; left: 165px;}

Nie wiem tylko jak dodac jeszcze tlo dla samego elementu #page. Znaczy sie chodzi mi o to, zeby marginesy pozostaly bez zmian (narazie) a zmienic jedynie tlo tej czesci strony, ktora zawiera cala tresc. Probowalem wpisac background: #2233ff; (czy cos takiego) ale nie dziala. Kolor sie zmienia jesli wpisuje to w elemencie body ale nie jesli wpisuje w elemencie #page. CO z tym zrobic?

autor: **Gedi** » 25 sierpnia 2006, 09:34

Nie chcesz zastosować FLOAT zamiast POSITION? W każdym razie:

Kod: Zaznacz cały: #page { position: relative; width: 600px; background-color: #fcf; color: inherit; } #index { position: absolute; top: 5%; left: 15px; width: 150px; } #index a { display: block; margin-left: 10px; } #content { margin-left: 165px; }

autor: **moby04** » 25 sierpnia 2006, 14:44

Gedi --> kiedy robie tak, jak napisales to nie daje to zadnego efektu.

A co do samej strony to nie ma jej w Internecie - bo i po co upubliczniac takie smieci?

autor: **Gedi** » 25 sierpnia 2006, 17:22

Znaczy jak nie daje efektu? Nie ma koloru tła? A dlaczego mnie się ono wyświetla? http://gedi.e-clipse.org/temp/test.html

MozillaPL.org - polskie centrum Mozilli

Główne menu:

[CSS] - problem z wyświetlaniem

[CSS] - problem z wyświetlaniem

Kto jest online

Nawigacja:

Stopka: