Přidat otázku mezi oblíbenéZasílat nové odpovědi e-mailemVyřešeno Pozicovani div a span

Ahoj. mam takovy problem delal jsem stranky a texty a obrazky jsem pozicoval pomoci tagu div a span. napr obrazek takhle:

<span style="position: absolute; top: 110px; left: 850px">

Na mem monitoru to je jak ma, ale po zobrazeni na jiny monitor jsou texty a obrazky uplne jinde nez maji byt. Můžete mi poradit, jak to udelat, aby se zobrazovalo bsude stejne? Diky za odpoved.

Předmět Autor Datum
nepozicijte absolutne, pretoze ma kazdy nastavene rozne rozlisenie. alebo potom hodte cely kod a po…
2laak 02.01.2008 16:57
2laak
a nejde udelat nejak ze pro kazde rozliseni napozicuji zvlast? a ono to samo rozpozna a prepne? ale… nový
DooFy 02.01.2008 17:15
DooFy
chcelo by to konkretny priklad... edit // ale info obecne o CSS pozicovani. nový
2laak 02.01.2008 17:16
2laak
mam v externim css tenhle kod: #text {font-size: 11; position: absolute; left: 400px} na konkretni… nový
DooFy 02.01.2008 17:19
DooFy
Bylo by dobré, pokud by jsi všechny styly (css) vkládal do externího souboru. A teď k tomu pozicován… nový
fleesh 02.01.2008 17:40
fleesh
na jinem monitoru se stranka zobrazi dobre, ale jen ty texty a obrazky, jinak.. nový
DooFy 02.01.2008 17:56
DooFy
Text vlož do odstavců. Ty pak nastyluj. <p></p> nový
fleesh 02.01.2008 18:01
fleesh
#text {font-size: 11; position: absolute; left: 400px} nemáš tady 11 čeho, jestli procent, pixelů,… nový
Kráťa 02.01.2008 18:02
Kráťa
jj ten text spravim.. ja potrebuju, aby byl text a vedle neho obrazek. pude to tak? pomoci absolutni… nový
DooFy 02.01.2008 18:06
DooFy
To nejde říct. Nevím, co potřebuješ a na monitor ti nevidím. Podle mě není pozicování obrázku a text… nový
Kráťa 02.01.2008 18:18
Kráťa
Dobře, tak ještě jednou. <div class="body"> <div class="object"> <h1>Nadpis</h1> <p>Lorem ipsum dol… nový
fleesh 02.01.2008 18:20
fleesh
V dnešní době bych už asi nedělal weby s 760px, jelikož jen opravdu zřídka si uživatel nastaví rozli… nový
fleesh 02.01.2008 18:15
fleesh
Jak co. Já jsem spíše příznivec těch "gumových". Dát třeba pevnou šířku menu 150px a zbytek ať se ro… nový
Kráťa 02.01.2008 18:21
Kráťa
Tak ostatně, maximální šířka stránky se dá také nastavit. nový
fleesh 02.01.2008 18:26
fleesh
...příznivec těch "gumových"....... je zase problém, že široké řádky se velmi špatně čtou. A proto… nový
host 02.01.2008 18:32
host
Určitě si vzpomínáte na betaverzi nové homepage Seznam.cz. :-D nový
fleesh 02.01.2008 18:40
fleesh
tak zatim dik vsem.. vyzkousim a pak napisu jak to dopadlo;-) nový
DooFy 02.01.2008 18:28
DooFy
tak sem to vyřešil pomoci pozicovaní relativni polohou.. jeste mam dotaz, nevite jestli de udelat od… nový
DooFy 03.01.2008 12:28
DooFy
<a href="seznam.cz" target="_blank">seznam</a> Jak se udělá maximalizované nevím, nikdy jsem to nepo… nový
Kráťa 03.01.2008 12:46
Kráťa
no tohle znam. ale pokud tam mam obrazek, tak se otevre jen polovicni okno a ten obrazek je zmenseny… nový
DooFy 03.01.2008 14:47
DooFy
ak chcete dosiahnut, aby sa po kliknuti na obrazok zobrazil v plnej velkosti, otvarajte ho pomocou J… nový
2laak 03.01.2008 14:57
2laak
ok dik vsem.. pouzil sem ten javascript.. zas sem o neco chytrejsi:-D:-D:beer: nový
DooFy 03.01.2008 15:40
DooFy
nz poslední
2laak 03.01.2008 17:48
2laak

mam v externim css tenhle kod:

#text {font-size: 11; position: absolute; left: 400px}

na konkretni strance mam pak zapsane tohle:

<div id="text"><b><u>CNC Plazmové pálení</b></u> - Na vaši poptávku jsme schopni reagovat
<br>
v krátké době. Zhotovení programu z Vámi dodaných podkladů
<br>
- výkres, soubor (dwg, dxf), u jednoduších tvarů i podle vzorku.
<br>
Pálit lze z našeho i Vámi dodaného materiálu.</div>

pokud to zobrazim v jinem rozlišením je to cele rozhozene

Bylo by dobré, pokud by jsi všechny styly (css) vkládal do externího souboru. A teď k tomu pozicování.

<div class="body">
  <span></span>
</div>
div.body {
  width: 500px;
  height: 500px;
  margin: 0px;
  padding: 0px;
  float: left;
  position: relative;
  top: 0px;
  left: 0px;
}

div.body span {
  position: absolute;
  top: 20px;
  left: 20px;
}

Rozměry divu si nastav podle svého.

#text {font-size: 11; position: absolute; left: 400px}

nemáš tady 11 čeho, jestli procent, pixelů, typografických bodů... asi pt. Takže si tam dej #text {font-size: 11pt; position: absolute; left: 400px}

Obrázky není třeba vkládat do divů a pozicovat ty divy. Můžeš pozicovat rovnou ty obrázky. Sám si vystačím s nastavením vnějšího okraje a pozicovat potřebuji opravdu zřídka. Deklaraci můžeš zadat naráz, přímo u obrázku by to vypadalo takto:
<img src="obrazky/bledemodrepuntickovany_racek.jpg" style="margin: 2Opx 100px 3px 35px">
(horní pravý dolní levý)
aby se to nerozhodilo, dělá se to tak, že se veškerý obsah vloží do <div> (hned za body) s definovanou šířkou (používá se 780px aby se to vešlo i na monitor 800 a nebyl dole posuvník).
Nebo se naopak udělají stránky "gumové", které se roztáhnou podle velikosti monitoru.

To nejde říct. Nevím, co potřebuješ a na monitor ti nevidím. Podle mě není pozicování obrázku a textu potřeba. Naopak lépe se s tím možná dělá bez toho pozicování (samozřejmě ne vždy).
A jak se píše výše. Dej text do odstavců a nastyluješ odstavce raz-dva (třeba šířku, vnitřní a vnější okraje, aj).

Dobře, tak ještě jednou.

<div class="body">

  <div class="object">
  <h1>Nadpis</h1>
  <p>Lorem ipsum dolor isamet, pidet quidu.</p>
  <img src="" alt="" />
  </div>

</div>
div.body {
  width: 500px;
  height: 500px;
  margin: 0px;
  padding: 0px;
  float: left;
  position: relative;
  top: 0px;
  left: 0px;
}

div.body div.object {
  position: absolute;
  top: 20px;
  left: 20px;
  float: left;
}

div.body div.object h1 {
  float: left;
  margin: 0px;
  padding: 0px;
  margin-top: 10px;
  margin-left: 10px;
  font-size: pt;
}

div.body div.object p {
  float: left;
  margin: 0px;
  padding: 0px;
  margin-top: 10px;
  margin-left: 10px;
  font-size: pt;
}

div.body div.object img {
  float: left;
  margin: 0px;
  padding: 0px;
  margin-top: 10px;
  margin-left: 10px;
  width: px;
  height: px;
}

Všechny ostatní elementy vnořené v divu - object - můžeš pozicovat klasickým způsobem.

...příznivec těch "gumových"....... je zase problém, že široké řádky se velmi špatně čtou.

A proto je ideální řešení, udělat gumový design s definovanou maximální šířkou. Tzv. "vocamcaď pocamcaď". :-) Koukat na weby se šířkou 100% ve fullscreenu v rozlišení 1600x1200 je fakt utrpení.

<a href="seznam.cz" target="_blank">seznam</a>
Jak se udělá maximalizované nevím, nikdy jsem to nepoužíval. Okno se přeci otevře tak velké, jak velké jej má uživatel ne? Pokus se vyloženě nezmenší třeba javascriptem, tak přes celý prohlížeč.

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