Autor Zpráva
MrKew
Profil
Posunul jsem text o něco nahoru, aby byl v obrázku (Velikost obrázku se mění)
#main {
  color: #ffffff;
  z-index: 1;
  position: relative;
    bottom: 55px;
}
Ale po posunutí mi na jeho původním místě zůstala mezera.

Nevíte někdo jak ji odstranit, kromě toho že posunu vše nahoru?

Nebo dá se to vyřešit nějak jinak?
Trejpa
Profil
MrKew:
Ale po posunutí mi na jeho původním místě zůstala mezera.
To je normální chování relativního pozicování. Proto dobrá rada zní, nepoužívat pozicování, zejména relativní, zvlášť když nedomýšlíš důsledky.

Rychle se to dá vyřešit odstraněním pozice a přidáním záporného horního marginu, ale stále je to vytloukání klínu klínem. Raději odstraň příčinu, kvůli které je objekt níž, než má dle tvých představ být.
Keeehi
Profil
MrKew:
Ještě html.
MrKew
Profil
Tady je odkaz na celou stránku
Trejpa
Profil
MrKew:
1) Zmenšit obrázek na velikost, která se zobrazuje. V grafickém editoru. Počítám s 934 × 388 bodů. Nahrát na web.
2) Zrušit značku <img> před nadpisem.
3) Nastavit obrázek jako pozadí nadpisu, šířka se přizpůsobí a výšku udává součet svislého paddingu a výšky řádku nadpisu:
#main {
    background: black url("title.jpg") no-repeat center bottom;
    color: #fff;
    line-height: 40px;
    padding: 348px 1ex 0;
    text-align: right;
}

4) Zapomenout na pozicování. Hlavně na relativní.
Keeehi
Profil
#main {
  color: #ffffff;
  margin-top: -2em;
  margin-bottom: 1em;
}
MrKew
Profil
Trejpa:
Bude to fungovat i když se velikost obrázku mění?
Trejpa
Profil
MrKew:
Pokud jde o jednorázovou výměnu obrázku, tak stačí přepočítat zadané rozměry, zejména padding. Jestli se má obrázek plynule zmenšovat s velikostí okna, tak by se kód musel trochu upravit.

Vaše odpověď


Prosím používejte diakritiku a interpunkci.

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

0