> Dlaczego Tobie nie chciało się zerknąć pod linka, który Ci podał Peter?

a kto mówi, że nie przeczytałem, nie ma tam jasnej odpowiedzi, którą ja jako
laik mógłbym wykorzystać...

do góry

Dnia 01-08-2011 22:13 identifikator: 20110701 napisał:
>> Dlaczego Tobie nie chciało się zerknąć pod linka, który Ci podał Peter?
>
> a kto mówi, że nie przeczytałem, nie ma tam jasnej odpowiedzi, którą ja
> jako laik mógłbym wykorzystać...
>

Jest:

"Pozycjonowanie relatywne: position:relative
Przesuwa obiekt o ofset ustalony we właściwościach top i left. Obiekt
pozostaje w tym samym miejscu w biegu dokumentu. Zmienia się tylko
miejsce, w którym jest rysowany.

Przesunięcie rzadko kiedy jest przydatne i pozostawia się domyślne,
zerowe, właściwości.

Nie próbuj robić układu strony za pomocą position:relative z niezerowym
top/left. Przez to, że obiekt będzie widoczny gdzie indziej, niż zajmuje
miejsce, będziesz robić dwa różne układy strony, z czego jeden będzie
niewidoczny."

Czyli: div.dwa jest umieszczony w dwóch miejscach: "normalnym", które
zająłby gdybyś nie nadał mu żadnego pozycjonowania, oraz obok div.jeden.
Czyli ostatni akapit ląduje dopiero za tym niewidocznym div.dwa

A tak w ogóle to odpuść sobie position i zrób to float'em.

--
Wojtek Gapiński
http://jwmprojekt.pl

do góry

> A tak w ogóle to odpuść sobie position i zrób to float'em.

oj tego nie miałem w książce... a po co taki idiotyczny tryb relative... jak
uzyskać efekt korzystając jednak z position? no i pozostaje kwestia dlaczego
te dwa divy nie są na równi... na różnch przeglądarkach jest tak samo, czyli
gdzieś popełniam błąd...

do góry

Dnia 02-08-2011 19:07 identifikator: 20110701 napisał:
>> A tak w ogóle to odpuść sobie position i zrób to float'em.
>
> oj tego nie miałem w książce... a po co taki idiotyczny tryb relative...

To też jest napisane na stronie, do której link był wcześniej.

> jak uzyskać efekt korzystając jednak z position? no i pozostaje kwestia
> dlaczego te dwa divy nie są na równi... na różnch przeglądarkach jest
> tak samo, czyli gdzieś popełniam błąd...

Nie odpowiedziałeś, skąd wiesz, że nie są na jednakowej wysokości? Jak
to sprawdzasz?

--
Wojtek Gapiński
http://jwmprojekt.pl

do góry

>> oj tego nie miałem w książce... a po co taki idiotyczny tryb relative...
>
> To też jest napisane na stronie, do której link był wcześniej.

no to ja chyba czytać nie umiem, bo nie widzę tam żadnego wyjaśnienia.

> Nie odpowiedziałeś, skąd wiesz, że nie są na jednakowej wysokości? Jak to
> sprawdzasz?

toć post wyżej wkleiłem obrazek z screnem projektowaniej w ten sposób
strony, na oko widać, że oba divy są nie na tej samej wysokości mimo iż
punkty powinny się pokrywać...

do góry

Dnia 02-08-2011 19:43 identifikator: 20110701 napisał:
>>> oj tego nie miałem w książce... a po co taki idiotyczny tryb relative...
>>
>> To też jest napisane na stronie, do której link był wcześniej.
>
> no to ja chyba czytać nie umiem, bo nie widzę tam żadnego wyjaśnienia.

No to tu się zgadzamy. Że nie umiesz czytać. Przeczytaj następny akapit
po pozycjonowaniu względnym (relatywnym).

>
>> Nie odpowiedziałeś, skąd wiesz, że nie są na jednakowej wysokości? Jak
>> to sprawdzasz?
>
> toć post wyżej wkleiłem obrazek z screnem projektowaniej w ten sposób
> strony, na oko widać, że oba divy są nie na tej samej wysokości mimo iż
> punkty powinny się pokrywać...


Domyślnie element <p> ma ustawiony margines. Dodaj na początku regułę
* { margin: 0; padding: 0; }
i będzie OK.

--
Wojtek Gapiński
http://jwmprojekt.pl

do góry

> Domyślnie element <p> ma ustawiony margines. Dodaj na początku regułę
> * { margin: 0; padding: 0; }
> i będzie OK.

dzięki to działa, ale nie rozumiem zupełnie jak, przecież div pierwszy ma
swoją wysokość i szerokość, a div drugi jest chyba pozycjonowany od
pierwszego, no to skąd ten margines i padding z <P>? zupełnie nie czaję...

no to jak się powinno poprawnie pozycjonować? tego float nie mam w dwóch
książkach...

do góry

Dnia 03-08-2011 19:34 identifikator: 20110701 napisał:
>> Domyślnie element <p> ma ustawiony margines. Dodaj na początku regułę
>> * { margin: 0; padding: 0; }
>> i będzie OK.
>
> dzięki to działa, ale nie rozumiem zupełnie jak, przecież div pierwszy
> ma swoją wysokość i szerokość, a div drugi jest chyba pozycjonowany od
> pierwszego, no to skąd ten margines i padding z <P>? zupełnie nie czaję...

<div> tak, ale ja pisałem o akapitach, czyli <p>, to one mają margines(y).
Zrób test: zamiast powyższej reguły wpisz
* { border: 1px solid black; }
zobaczysz o co chodzi.

>
> no to jak się powinno poprawnie pozycjonować? tego float nie mam w dwóch
> książkach...

Słyszałeś o Google?
A skoro wcześniej Peter podawał linka do kursu BrowseHappy, to może
warto byłoby tam zajrzeć?
http://kurs.browsehappy.pl/CSS/Float

Ewentualnie kup inne książki, tylko sprawdź najpierw czy jest w nich o
float.

--
Wojtek Gapiński
http://jwmprojekt.pl

do góry

> <div> tak, ale ja pisałem o akapitach, czyli <p>, to one mają margines(y).
> Zrób test: zamiast powyższej reguły wpisz
> * { border: 1px solid black; }
> zobaczysz o co chodzi.

no ja Cię rozumiem, ale mi chodziło o to, że <P> nie powinny mieć wpływu na
DIVy, a mają... coś dziwnego.

dodałem tą linijkę i kompletnie się zamieszało...
bez ramek i bez wyzerowania marginesów mam tak:
http://henku.ayz.pl/Smietnik/pozycjonownaie.PNG
z ramkami i bez wyzerowania marginesów mam tak:
http://henku.ayz.pl/Smietnik/pozycjonowanie2.png

no i DLACZEGO? w pierwszym wypadku jest nierówno, a w drugim już jest
równo... tego to raczej w kursach nie znajdę... ;o)

kodzik:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional
.dtd">
<html>
<head>
<style type="text/css">
* { border: 1px solid black; }
div.ogolne {width: 800px; margin: 0 auto 0 auto;}
div.jeden {width: 400px; height: 200px}
div.dwa {position: relative; left: 600px; top: -200px; width: 200px; height:
200px}
</style>
</head>
<body>
<div class="ogolne">
<div><P><img src="1.jpg"></P></div>
<div><P>TEST</P></div>
<div>div {width: 800px; margin: 0 auto 0 auto;}
div {width: 800px; margin-left: auto; margin-right: auto;}
html {text-align:center; }
div {width: 800px; margin-left: auto; margin-right: auto;}
body
{
text-align: center;
}
<div class="jeden"><P>abc abc abc abc abc abc abc abc abc abc abc abc abc
abc abc abc abc
abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc
abc abc abc abc abc abc abc abc abc </P></div>
<div class="dwa"><P>abc abc abc abc abc abc abc abc abc abc abc abc abc abc
abc abc abc
abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc
abc abc abc abc abc abc abc abc abc </p>
<a href="strona">strona www1</a> <a href="strona">strona www2</a> <a
href="strona">strona www3</a></div>
<P>test</P>
</div>
</body>
</html>

do góry

to znaczy mi wydaje się, że pozycjonuje się względem poprzednika, ale na tym
samym poziomie drzewa i P powinien pozycjonowac się względem diva jeden, a
div dwa względem diva jeden... tak gdybam.

do góry