Absolutni pozicovani při tvorbě webu

Ahoj, zrovna pracuji na webu pro kamaráda použil jsem absolutní pozicování, v mém počítači všechno vpořádku, ale pokud si stránky otevřu někde jinde tak obraz je absolutně posunutý.Jak to udělat aby se to zobrazovalo na všech počítačích správně? www.militestempli.wz.cz díky za rady

Předmět	Autor	Datum
jestli to není tím, že WZ to obaluje reklamou :-) touchwood 23.02.2009 17:36	touchwood	23.02.2009 17:36
tim to neni:) kdyz jsem prenesl stranky do jineho pc a nebyly ani na internetu tak to stejne bylo ro… drap 23.02.2009 17:40	drap	23.02.2009 17:40
zdravím, Za prvé, není mi jasné proč nedáš styly do zvláštního samostatného souboru a proč vlastně… ysiary 23.02.2009 23:22	ysiary	23.02.2009 23:22
Nevidim v tom validatore ziadne brutalne chyby, kvoli ktorym by to nemalo v normalnom prehliadaci fu… 2laak 24.02.2009 00:27	2laak	24.02.2009 00:27
No, to nebylo myšleno zle, ale jen jako taková připomínka, protože se to v "normálním" prohlížeči zo… ysiary 24.02.2009 06:49	ysiary	24.02.2009 06:49
Normalny prehliadac rozumej ne-exoticky. :-) Samozrejme priestor na zlepsovanie tam je a je zaklad v… 2laak 24.02.2009 09:25	2laak	24.02.2009 09:25
Ta stranka je fakt sila. Davat text do obrazku, no neviem. :-/ Davno som take daco nevidel. No prost… 2laak 24.02.2009 00:29	2laak	24.02.2009 00:29
A jak se to spravne ma robit?:)nevite kde by byl aspon malej navod abych se trochu chytnul a cely to… drap 24.02.2009 09:40	drap	24.02.2009 09:40
Ja by som neriesil to pozicovanie, proste by som to spravil tak, ako sa to robit ma. Uzavriet jednot… 2laak 24.02.2009 09:42	2laak	24.02.2009 09:42
Nemohli byjste sem dat jeden přiklad jak někam umistit obrazek aby se zobrazoval vzdy stejne pri jak… drap 24.02.2009 10:13	drap	24.02.2009 10:13
Takto obecne sa to neda povedat/napisat. Lisi sa to priklad od prikladu. Ak to sam nezvladnete, ponu… 2laak 24.02.2009 10:16	2laak	24.02.2009 10:16
rad bych to zvladnul sam...snad to nak vymyslim diky za nabidku drap 24.02.2009 10:19	drap	24.02.2009 10:19
Tak fajn, vas pristup chapem, tiez by som sa to chcel na vasom mieste naucit. Tak vam spravim kratky… 2laak 24.02.2009 10:24	2laak	24.02.2009 10:24
Naposledy si vykrojite jednotlive body menu s minimalnymi okrajmi, ako je to na prilozenom obrazku:… poslední 2laak 24.02.2009 10:38	2laak	24.02.2009 10:38
Druhy krok je pripravit spodne pozadie tak, aby bolo bez textu obr.2 [http://pc.poradna.net/file/vi… 2laak 24.02.2009 10:28	2laak	24.02.2009 10:28
Dalsim krokom je rozdelit hlavnu stranku na pravu a lavu cast. V lavej bude menu a v pravej text. T… 2laak 24.02.2009 10:35	2laak	24.02.2009 10:35
Když už to musí být absolutně pozicované, tak to aspoň pozicuj relativně vzhledem k tomu velkému obr… Marvin 24.02.2009 10:31	Marvin	24.02.2009 10:31

jestli to není tím, že WZ to obaluje reklamou

tim to neni:) kdyz jsem prenesl stranky do jineho pc a nebyly ani na internetu tak to stejne bylo rozhozeny.Reklamu sem si nastavil dole takze by neměla mít žádný vliv.

zdravím,

Za prvé, není mi jasné proč nedáš styly do zvláštního samostatného souboru a proč vlastně chceš pozicovat absolutně.

Za druhé, koukni se na tento odkaz:
validator.w3.cz

možná ti to trochu pomůže.

Nevidim v tom validatore ziadne brutalne chyby, kvoli ktorym by to nemalo v normalnom prehliadaci fungovat.

No, to nebylo myšleno zle, ale jen jako taková připomínka, protože se to v "normálním" prohlížeči zobrazit správně může, ale také nemusí. Otázka je, co je normální prohlížeč.

Jinak souhlasím s tebou, že to má co do činění s rozlišením. Lepší by bylo to napozizovat s použitím procent, když už je to uděláno takhle.

Normalny prehliadac rozumej ne-exoticky. Samozrejme priestor na zlepsovanie tam je a je zaklad vydat sa prave cestou optimalizacie na standardy (ked uz budeme mat bohudik snad uz dakedy vacsinu IE7 nad IE6).

Ja by som neriesil to pozicovanie, proste by som to spravil tak, ako sa to robit ma. Uzavriet jednotlive elementy do div-ov, obrazky nalezite rozsekat a optimalizovane ulozit a nakoniec nastylovat pomocou CSS.

Ta stranka je fakt sila. Davat text do obrazku, no neviem. Davno som take daco nevidel. No proste SEO nebo. Vlastne cela stranka je jeden velky obrazok.

Stranka je rozhodena samozrejme preto, lebo vy ste to robil zrejme na urcitom rozliseni (1280xdaco) a kamarati maju ine rozlisenie. Skuste si tu stranku spustit v nemaximalizovanom prehliadaci, zmensite okno a nestacite sa divit. Takto by sa to fakt robit nemalo.

A jak se to spravne ma robit?:)nevite kde by byl aspon malej navod abych se trochu chytnul a cely to predelal?diky

Ja by som neriesil to pozicovanie, proste by som to spravil tak, ako sa to robit ma. Uzavriet jednotlive elementy do div-ov, obrazky nalezite rozsekat a optimalizovane ulozit a nakoniec nastylovat pomocou CSS.

Vyborny web o tvorbe webu je www.jakpsatweb.cz. Neviem nakolko vazne sa tomu chcete venovat. Ale tu najdete absolutne zaklady vo velmi zrozumitelnej podobe.

Nemohli byjste sem dat jeden přiklad jak někam umistit obrazek aby se zobrazoval vzdy stejne pri jakemkoli rozliseni?diky

Takto obecne sa to neda povedat/napisat. Lisi sa to priklad od prikladu. Ak to sam nezvladnete, ponuknite to niekomu, kto to uz vie. Ak je to robene pre to obcianske zdruzenie zadarmo, mozeme sa dohodnut, ze vam to posekam a napozicujem. Kontakt na mna najdete v Profile.

rad bych to zvladnul sam...snad to nak vymyslim diky za nabidku

Tak fajn, vas pristup chapem, tiez by som sa to chcel na vasom mieste naucit. Tak vam spravim kratky navod:

Prve co je potrebne spravit, je stranku horizontalne rodelit na 2 casti: titulek (s nazvom stranky a pod) a na hlavnu stranku s obsahom a textom (obr1.)

[http://pc.poradna.net/file/view/479-elete-png]
obr.1

elete.png 614.09 KiB

Naposledy si vykrojite jednotlive body menu s minimalnymi okrajmi, ako je to na prilozenom obrazku:

[http://pc.poradna.net/file/view/482-untitled-1-png ]

Obrazky pozicujete v ramci elementu

<div id="left">

pomocou padding a margin. S tymto je potrebne sa trochu hrat, mierne inak sa zobrazuje vysledok v IE6 a v ostatnych prehliadacoch (FF, IE7, Opera, ...)

Tak tolko moj navod, snad pomoze. Vela zdaru.

untitled-1.png 3.13 KiB

Druhy krok je pripravit spodne pozadie tak, aby bolo bez textu obr.2

[http://pc.poradna.net/file/view/480-elete-png]
obr. 2

Nasledne tieto dva obrazky (horny a dolny) pouzit ako pozadie pre elementy DIV, z ktorych bude stranka zlozena.

V tejto chvili by sme mali mat nejaky podobny kod:

<body>
 <div id="titulek" style="horne_pozadie"></div>
 <div id="telo" style="dolne_pozadie_bez_textu"></div>
</body>

elete.png 479.20 KiB

Dalsim krokom je rozdelit hlavnu stranku na pravu a lavu cast. V lavej bude menu a v pravej text.

Teda do tagu

<div id="hlavna"></div>

uzavrieme dalsie dve div-ka

<div id="left"></div>

<div id="right"></div>

. Spravne urcime ich velkost, na lave nastavime

float: left;

a na prave opacne,

float: right;

Dostaneme daco taketo (left a right oznaceny modrou farbou):

[http://pc.poradna.net/file/view/481-elete-png]

elete.png 472.03 KiB

Když už to musí být absolutně pozicované, tak to aspoň pozicuj relativně vzhledem k tomu velkému obrázku a ne vzheldem k celé stránce, to je pak jasné, že to bude při různých šířkách okna prohlížeče jinak.

Mezi tagy <body> a </body> dej toto:

<div style="position: relative; margin: 10px auto; width: 1024px">
  <img src="pozadi.jpg" alt="">
  <a href="oskupine.html" onMouseOut="self.document['obr5'].src='stit.jpg';" onMouseOver="self.document['obr5'].src='stit1.jpg';" style="position: absolute; top: 460px; left: 122px"><img name="obr5" src="stit.jpg" border="0"></a>
  <a href="oskupine.html" onMouseOut="self.document['obr2'].src='stit2.jpg';" onMouseOver="self.document['obr2'].src='stit3.jpg';" style="position: absolute; top: 460px; left: 730px"><img name="obr2" src="stit2.jpg" border="0"></a>
</div>

Zpět do poradny Odpovědět na původní otázku Nahoru