Autor Zpráva
Jakie
Profil *
Dobrý večer, už nějakou hodinu si lámu hlavu jak udělat následující řešení. Mám obrázek do kterého potřebuju na určité pozice umístit text ( celkem 3x) a zároveň aby obrázek byl vycentrován na stránce ( jak horizonálně tak vertikálně ). Pro detail poslíám obrázek.

Zkoušel jsem obrázek vycentrovat ( positon: relative) poté dostadit napozicované h1 ( relative ) a také další dvě textové vrtvy. Bohužel když oba texty nastavím do spanu tak se mi to celé rozsype, tak samo je to s ivy ( momentálně mám řešení h2 a span ) a bohužel ani tohle řešení není fuknční v ie 8+.
Prosím o rady jak udělat čístý a kompatibilní kód.
Díky Jakie

obrázek: http://imageshack.us/f/41/ukazka.png/
margin
Profil *
http://teststranek.kvalitne.cz/text-na-obrazku-1/
Stačí DIVu přidat rozměry (stačí šířka) podle velikosti obrázku.
Vycentrovat DIV horizontálně není problém.
Pokud znáš výšku (obrázku), je vertikální centrování taky jednoduše zvládnutelné.
Jakie
Profil *
mnohokrát děkuji za radu. Je toto řešení čisté a moderní nebo to lze udělat jiným způsobem?
Jakie
Profil *
Moderátor Davex: Přesunuto z duplicitního tématu.

Dobrý večer,

zkouším si udělat obrázek ve kterém bude napozicovaný text. Celý obrázek by měl být vycentrovaný na středu stránky a vněm na vyznačených pozicích text. Bohužel už si stím lámu delší dobu hlavu.
Podařilo se mi optimalizovat pro chrome,operu,ff ale bohužel v IE 8 a výš mám text úplně rozhozený a nehledně na to že si nejsem jistá zda mé řešení vyhovuje modernímu a čistému webu.
Sedím nad tím již dvě hodiny a pořád si lámu hlavu proč a jak. Na ukázku zasílám obrázek a také kód který jsem použila ( nesedí k přiloženému obrázku pouze ukazuji náhled svého řešení. ) Mohl by mi prosím někdo poradit jak tento problém vyřešit? :( Css pozicování jsem studovala ale to ie mi prostě nejde a nevím proč :(

obr.: imageshack.us/f/41/ukazka.png
kód.:

  <head>
 <meta http-equiv='Content-Type' content='text/html; charset=utf-8' />
    <title>projekt3</title>
</head>

<style>
body {    background: url("img/background.png"); text-align: center; width: 100%; margin: 0px auto;}
img { position: relative;  }
h1   {position: relative;  top: 170px; left: -220;font-family: Verdana, Arial; text-transform: uppercase; FONT-SIZE: 70;}
p.text1 {position: relative; z-index: auto; top: -180; left: 70; font-family: Verdana; font-size: 26; text-transform: uppercase;  font-weight: bold;}
p.text2 {font-size: 20px; font-weight: bold; left: 80; top: -215; position: relative; font-family: Verdana; font-size: 26; text-transform: uppercase;}
</style>
<body>

<h1>hlavní text</h1>
<img src="img/obrazek.png">
<p class="text1">text1</p>
<p class="text2">text2</p>
</body>
margin
Profil *
Moderátor Davex: Přesunuto z duplicitního tématu.

Proč nepokračuješ ve vláknu Obrázek překrytý napozicovaným textem
Dodnes jsem nepochopil, proč se postupu, vterým se dosáhne toho, že stránka v některých prohlížečích vpadá dobře, optimalizace. Já jsem místo "optimalizace" udělal kód tak, že výsledek vypadá všude (skoro) stejně, napříč prohlížeči i vykreslovacími režimy.

Necentruješ, jen pozicuješ, i kdyby se ti povedlo navozicovat vše tak, jak požaduješ, tak při jiném rozložení nebude obrázek uprostřed.
Tvá konstrukce není robustní, při sebemenší změně se začne rozpadat, všude máš relativní pozici, v mé ukázce se využívá pozice vnořená.
Sice jsem nenapsal přesný postup, ale tři základní kroky, které je možné řešit i jednotlivě. Jak koukám na tvůj kód, tak ses rozhodla pro slepou cestu.

Udělej živou ukázku, nebo aspoň někam nahrej obrazek.png nebo se aspoň poděl o jeho rozměry.
iii
Profil *
Ano, ano.
margin
Profil *
iii:
Neřekl bych, že jde o moderní řešení, moderní řešení by bylo využívalo display: inline-block; coby obalu obrázku, který se přizpůsobí rozměrům obrázku, a display: table-cell, ve kterém bych obalený obrázek jednoduše vycentroval, opět bez závislosti na rozměrech obrázku. Po obalu toužím prot, abych do něj mohl strkat elementy, které se zobrazí na obrázku, více CSS pozicování » Vnořené pozice.
Ale takové řešení nepovažuji za čisté, protože nefunguje ne starších explorerech.
Jakie
Profil *
Moderátor Davex: Přesunuto z duplicitního tématu.

obrázek má rozměry 445 x 200 px. Zkoušela jsem to ješte upravit. obrázek jsem nastavila na absolutní pozici s pozicováním - left: 50%; top: 50%; margin-left: -222px; margin-top: -100px. čímž obrázek vycentruji. ale dál si nejsem jistá. Následující textové vrstvy mají mít relativní pozici? Nedaří se mi to srovnat v ie :(
margin
Profil *
Bereš si najednou velké sousto, není to těžké, pokud víš jak na to a postupuješ po krocích.

1. dej obrázek do DIVu, tomu dej stejné rozměry, jako má obrázek.
- DIV musí mít Position, cokoliv, kromě static (což bude, protože centruješ pozicováním)
- DIV (ne obrázek) vycentruješ (zatím to nebude vidět, nic se neděje)

2. Protože vkládáš více elementů, záleží na tom, zda chceš rozmísti texty rychle nebo čistě, předpokládám rychle, později půjde bez velkých zásahů změnit
- do DIVu dáš obrázek a za něj texty, doporučuji dodržet pokud nemáš extra důvod mít to jinak, využije se přirozený z-index a texty budou nad obrázkem
- textům vynuluješ marginy (pak bude pozice ve všech prohlížečích stejná) a dáš jim absolutní pozici, pozor, pozice se počítá od levého horního ( Left, Top), nebo pravého dolního ( Right, Bottom) rohu DIVu, protože je pozicován, tomu se říká vnořené pozice.

Takže texty budou na obrázku, ať je obrázek kdekoliv, třebas vlivem různých rozlišení, nebo se rozhodneš obrázek umístit jinak.
V dalším kole až budeš mít hotovo, je možné texty rozmístit lépe, třebas pro případ, že si někdo v prohlížeči zvětší písmo.

Připomínka, v CSS (né v HTML!) piš nenulové rozměry v pixelech vždy i s jednotkou px, tedy třeba left: -220px;.
Jakie
Profil *
Dobrý den, mnohokrát vám děkuji za vaši radu. Obrázek jsem umístila do divu ( obrázek jako pozadí a div s přesně zadanými rozměry ). Poté jsem pomocí margin: auto; div vycentrovala na střed stránky a top: 30%; jsem odsunula element od horní pozice a nastavila position na relative.
Vnitřní <div> jsem nastavila na absolute a poté vypozicovala uvnitř hlavního divu na určitou pozici.

Vypadá to že ve všech prohlížečích i Os to sedí :-). Mnohokrát díky, a ráda bych se ještě zeptala, lze toho brát jako moderní řešení pozicování? :) Díky.
margin
Profil *
Jakie:
Obrázek jsem umístila do divu ( obrázek jako pozadí
Může být. Rozdíl je v tom, ilustrační má se použít IMG. Pokud je obrázek dekorační, má se použít obrázek na pozadí elementu. Pokud jde o obrázek na pozadí, tak základní kód mám na stránce Text na obrázku pomocí background-image a je to v podstatě totéž, k čemu jsi došla ty.

Poté jsem pomocí margin: auto; div vycentrovala na střed stránky a top: 30%;
top: 30%; není centrování, pozná se to třebas na různě vysokých monitorech. Pokud ti to nevadí, můžeš to tak ponechat. Klasické vertikální centrování máš v [#8]: top: 50%; margin-top: -100px;


Vnitřní <div> jsem nastavila na absolute a poté vypozicovala uvnitř hlavního divu na určitou pozici.
Stačilo nastavit horní a levý margin, pozicování má i své nevýhody, nepoužívám ho, pokud to není nutné. Pozicování by bylo nutné třebas v případě, že by šlo skutečně o text na obrázku a ne na obrázkovém pozadí. Na stránce Text na obrázku pomocí background-image jsem se bez pozicování obešel a přitom vypadá naprosto stejně, jako Text na obrázku pomocí pozicování.

Vypadá to že ve všech prohlížečích i Os to sedí
30% odshora už jsem zmínil, pokud to tak chceš, je to v pořádku.

lze toho brát jako moderní řešení pozicování?
Nechápu pojem moderní řešení pozicování. Moje soukromé rozdělení je na čistá řešení, kompromisní řešení (a pak záleží na tom na jak velký kompromis se přistoupí) a pak jsou fekální řešení.
Přiznávám, že mnou odkazované Text na obrázku pomocí... jsou kompromisní řešení, protože předpokládají krátký text, světlý obrázek v místě textu a určitě by se toho našlo více :-)
Jakie
Profil *
Top: 30% jsem nastavila chválně tak aby nebyl obrázek přímo střed střed ale byl spíše k horní hraně zarovnán. No moderním řešením myslím čísté řešení které odpovídá posledním "módním" typům v css :) Každopádně mnohokrát Vám děkuji za pomoc

Vaše odpověď


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: