Pozice obrázku Vyřešeno

Místo pro dotazy a rady ohledně programovacích jazyků (C++, C#, PHP, ASP, Javascript, VBS..) a tvorby webových stránek

Moderátor: Mods_senior

Uživatelský avatar
Bajro
Level 1
Level 1
Příspěvky: 74
Registrován: červen 11
Pohlaví: Muž
Stav:
Offline

Pozice obrázku

Příspěvekod Bajro » 07 led 2012 23:10

Zdravim , potřeboval bych poradit s pozící obrázku : Když mám 2 obrázky na jednom řádku a chci aby jeden byl na středu a druhý vlevo :wink: Můžete mi někdo ukázat script , díky :)
procesor - AMD Phenom II X2 560 Black edition 3,3 GHz
RAM - 4 GB DDR2
grafika - ATI Radeon HD 4730 512 MB
HDD - WD Blue WD6400AAKS 640GB
mechanika - Hitachi LG GH15F
zdroj - 400 W ATX FORTRON

Reklama
Uživatelský avatar
CZechBoY
Master Level 9.5
Master Level 9.5
Příspěvky: 8813
Registrován: srpen 08
Bydliště: Brno
Pohlaví: Muž
Stav:
Offline
Kontakt:

Re: Pozice obrázku

Příspěvekod CZechBoY » 07 led 2012 23:17

<img align="left" src="1.jpg"><img align="center" src="2.jpg">
nejde?
PHP, Nette, MySQL, C#, TypeScript, Python
IntelliJ Idea, Docker, Opera browser, Linux Mint
iPhone XS
Raspberry PI 3 (KODI, Raspbian)
XBox One S, PS 4, nVidia GeForce NOW

Uživatelský avatar
Bajro
Level 1
Level 1
Příspěvky: 74
Registrován: červen 11
Pohlaví: Muž
Stav:
Offline

Re: Pozice obrázku

Příspěvekod Bajro » 07 led 2012 23:27

Právě že ne .
procesor - AMD Phenom II X2 560 Black edition 3,3 GHz
RAM - 4 GB DDR2
grafika - ATI Radeon HD 4730 512 MB
HDD - WD Blue WD6400AAKS 640GB
mechanika - Hitachi LG GH15F
zdroj - 400 W ATX FORTRON

Uživatelský avatar
CZechBoY
Master Level 9.5
Master Level 9.5
Příspěvky: 8813
Registrován: srpen 08
Bydliště: Brno
Pohlaví: Muž
Stav:
Offline
Kontakt:

Re: Pozice obrázku

Příspěvekod CZechBoY » 07 led 2012 23:43

co přesně znamená střed? střed zbývajícího bloku vpravo od obrázku nebo středu obrazovky?
www.pas.jabko.net/testy/img_pozice.html
PHP, Nette, MySQL, C#, TypeScript, Python
IntelliJ Idea, Docker, Opera browser, Linux Mint
iPhone XS
Raspberry PI 3 (KODI, Raspbian)
XBox One S, PS 4, nVidia GeForce NOW

Uživatelský avatar
Myloš
Master Level 8.5
Master Level 8.5
Příspěvky: 6990
Registrován: duben 06
Bydliště: Praha
Pohlaví: Muž
Stav:
Offline

Re: Pozice obrázku

Příspěvekod Myloš » 08 led 2012 02:44

Píšu z hlavy, tak tam snad nebude nějaká chyba:

<div style="position: relative; text-align: center;">
  <img src="obrazek_vlevo.jpg" style="position: absolute; left: 0px; top: 0px; ">
  <img src="obrazek_vpravo.jpg">
</div>

Normálně bych nepoužíval inline styly (atribut style), ale pro názorné pochopení to snad stačí.
Obalovací div má nastavenou relativní pozici proto, aby vytvořil souřadnicový kontext pro prvky uvnitř. Proto se absolutní pozice prvního obrázku nevztahuje k prohlížeči, ale k tomu divu. Druhý obrázek je vycentrovaný, protože div má nastaveno centrování.
Pokud jsou obrázky stejně vysoké, je to OK. Pokud je první obrázek vyšší, bude uříznutý, nebo vyteče z divu; v takovém případě je potřeba tomu divu ještě nastavit příslušnou výšku.
  • Než položíte dotaz, nejprve se ptejte strejdy Gůůgla.
  • Výňatek z pravidel fóra PC-HELP:
    • Název tématu zvolte takový, aby co nejvýstižněji charakterizoval obsah tématu.
    • Nesnažte se řešit jiný problém (i když podobný) v jednom tématu. Raději založte nové téma.
  • Mýliti se je Myloš. ;-)

Uživatelský avatar
CZechBoY
Master Level 9.5
Master Level 9.5
Příspěvky: 8813
Registrován: srpen 08
Bydliště: Brno
Pohlaví: Muž
Stav:
Offline
Kontakt:

Re: Pozice obrázku

Příspěvekod CZechBoY » 08 led 2012 02:48

moje řešení v kodu, když ne na webu :)
pro více obrázků na středu píše:<div style="text-align:center">
<img src="" align="left" width="200">
<img src="" width="100">
</div>

jeden div, jeden obrázek na středu píše:<img src="" align="left" width="200">
<div style="text-align:center"><img src="" width="100"></div>
PHP, Nette, MySQL, C#, TypeScript, Python
IntelliJ Idea, Docker, Opera browser, Linux Mint
iPhone XS
Raspberry PI 3 (KODI, Raspbian)
XBox One S, PS 4, nVidia GeForce NOW

Uživatelský avatar
Myloš
Master Level 8.5
Master Level 8.5
Příspěvky: 6990
Registrován: duben 06
Bydliště: Praha
Pohlaví: Muž
Stav:
Offline

Re: Pozice obrázku

Příspěvekod Myloš » 08 led 2012 03:05

CZechBoY:
Pravdu diš. Úplně jsem zapomněl, že obrázku lze nastavit align, přestože je to inline prvek jako třeba <b>, u kterého to nejde. V takovém případě je moje řešení drbáním se levou nohou za pravým uchem. ;-)
  • Než položíte dotaz, nejprve se ptejte strejdy Gůůgla.
  • Výňatek z pravidel fóra PC-HELP:
    • Název tématu zvolte takový, aby co nejvýstižněji charakterizoval obsah tématu.
    • Nesnažte se řešit jiný problém (i když podobný) v jednom tématu. Raději založte nové téma.
  • Mýliti se je Myloš. ;-)

Uživatelský avatar
Bajro
Level 1
Level 1
Příspěvky: 74
Registrován: červen 11
Pohlaví: Muž
Stav:
Offline

Re: Pozice obrázku

Příspěvekod Bajro » 08 led 2012 11:44

Díky :) a ještě kdybych chtěl umístit obrázek na obrazovku podle přesných hodnot ???
procesor - AMD Phenom II X2 560 Black edition 3,3 GHz
RAM - 4 GB DDR2
grafika - ATI Radeon HD 4730 512 MB
HDD - WD Blue WD6400AAKS 640GB
mechanika - Hitachi LG GH15F
zdroj - 400 W ATX FORTRON

Uživatelský avatar
TheSkeleton
Level 3
Level 3
Příspěvky: 493
Registrován: prosinec 08
Pohlaví: Muž
Stav:
Offline

Re: Pozice obrázku

Příspěvekod TheSkeleton » 08 led 2012 11:56

<img src="obrazek.jpg" style="position: absolute; left: 200px; top: 300px; ">
Life's too short to remove USB safely.

Uživatelský avatar
Ellrohir
nováček
Příspěvky: 49
Registrován: prosinec 11
Bydliště: Praha
Pohlaví: Muž
Stav:
Offline
Kontakt:

Re: Pozice obrázku

Příspěvekod Ellrohir » 08 led 2012 12:01

na přesný hodnoty umístění je to style="position: absolute; left: 0px; top: 0px; ", kde za 0 a 0 dosadíš svoje hodnoty...a kdybys to náhodou potřeboval, tak jde pozicovat i od spodu (bottom místo top) a zprava (right místo left)
"Zprávy mají velikost, třeba i nulovou, a mají nějaký význam, třeba i žádný."

Uživatelský avatar
Bajro
Level 1
Level 1
Příspěvky: 74
Registrován: červen 11
Pohlaví: Muž
Stav:
Offline

Re: Pozice obrázku  Vyřešeno

Příspěvekod Bajro » 08 led 2012 12:23

Už to mám ;) Děkuju
procesor - AMD Phenom II X2 560 Black edition 3,3 GHz
RAM - 4 GB DDR2
grafika - ATI Radeon HD 4730 512 MB
HDD - WD Blue WD6400AAKS 640GB
mechanika - Hitachi LG GH15F
zdroj - 400 W ATX FORTRON

Uživatelský avatar
Myloš
Master Level 8.5
Master Level 8.5
Příspěvky: 6990
Registrován: duben 06
Bydliště: Praha
Pohlaví: Muž
Stav:
Offline

Re: Pozice obrázku

Příspěvekod Myloš » 08 led 2012 12:41

K té absolutní pozici, aby to nezapadlo – vysvětloval jsem ve svém příkladu, že ji můžeš počítat nejen od kraje okna prohlížeče, ale i v rámci bloku (např. divu nebo odstavce), který je nějak (jakkoli) pozicovaný. Proto jsem mu nastavil zdánlivě bezúčelné position:relative.
Takhle se dají třeba napozicovat akordové značky k textu písničky – viz http://wellstyled.com/css-chords-formatting.html
  • Než položíte dotaz, nejprve se ptejte strejdy Gůůgla.
  • Výňatek z pravidel fóra PC-HELP:
    • Název tématu zvolte takový, aby co nejvýstižněji charakterizoval obsah tématu.
    • Nesnažte se řešit jiný problém (i když podobný) v jednom tématu. Raději založte nové téma.
  • Mýliti se je Myloš. ;-)


  • Mohlo by vás zajímat
    Odpovědi
    Zobrazení
    Poslední příspěvek

Zpět na “Programování a tvorba webu”

Kdo je online

Uživatelé prohlížející si toto fórum: Žádní registrovaní uživatelé a 3 hosti