Szöveg meghatározott pontjára ( betűje), kép helyezése
2022-04-18T12:25:38+02:00
2022-04-20T15:29:31+02:00
2022-08-12T08:35:31+02:00
Marisan
Előre is elnézést kérek ezért a kérdésért, de mentségemre szolgáljon, hogy kezdő vagyok.
Kérdés:
Van egy <h1>Szöveg </h1>
és a szöveg egyik betűjére kell helyezni egy képet, hogy rajta álljon a betűn.
Mutasd a teljes hozzászólást!
Hali!

Az abszolút pozicionálás a DOM-ban hozzá legközelebbi relatív elemhez fog viszonyulni.

Ez nem így van. Az abszolút pozicionálás a hozzá legközelebbi (és itt a legközelebbit – értelemszerűen – „vertikálisan” kell érteni, valamelyik szülő-eleme a DOM-hierarchiában) pozicionált elemhez képest történik. A pozicionált annyit tesz, hogy bármilyen pozíciójú lehet az elem, csak ne alapértelmezett static legyen (így abszolút is megfelelő).

Mutasd a teljes hozzászólást!

  • Tedd a kívánt betűt egy olyan elembe ami a megjelenítést amúgy nem befolyásolja (pl. SPAN). Ennek adj abszolút pozíciót. Ebbe az elembe ne csak a kívánt betű legyen, hanem a kívánt kép is, amit abszolút pozicionálással CSS-el oda igazítasz ahova akarsz (a szülő relatív elemhez képest). Ha kezdő vagy akkor kezdd az alapoknál, szörnyen unalmas ilyeneket leírni:

    CSS Layout - The position Property
    Mutasd a teljes hozzászólást!
  • Kedves DJ Tacee, köszönöm a segítséget. Sajnálom, hogy egy ilyen pitiáner, unalmas kérdésre kellett válaszolnod. Persze tisztában voltam vele, hogy Ti már messze túl vagytok ezen a szinten. Nagy tapasztalattal, gyakorlattal rendelkeztek, de reménykedtem, hogy  talán akad pár tag a csoportban, aki emlékszik még, milyen kezdőként, napokig keresni egy problémára a megoldást (pl. a w3scools-ban, stb...)
    Természetesen én is span-ba tettem az "a" betűt, de a képet nem tettem bele. Most beletettem, ahogy tanácsoltad, de valami még hiányzik (top, left, right, stb). Vagy nem így kellett volna. Persze próbáltam azt is, hogy az img-nek adtam egy class-t és a position:absolute-ot a css-be tettem.  Esetleg oda kellene még tenni valamit? Vagy a body-ba? Mert ha nincs szülő elem, a body-hoz igazodik,  ezt írják.

    <h1>A sz<span style="position:absolute;><img style="position:absolute;> a </span>rka</h1>
    Mutasd a teljes hozzászólást!
  • talán akad pár tag a csoportban, aki emlékszik még, milyen kezdőként, napokig keresni egy problémára a megoldást (pl. a w3scools-ban, stb...)

    Kevered a dolgokat. Te nem egy hibába vagy egy nehezen megoldható feladatra szaladtál rá. Te, ahogy sokan mások is, elfelejtitek azt hogy építeni csak egy stabil alapra lehet. Ott kell kezdeni hogy meg kell érteni mi hogyan működik, mi az a szerver és kliens oldal, alapjaiban a CSS-t, aminek egyik eleme a pozicionálás, amit linkeltem. De te ezt kihagytad.

     <h1>A sz<span style="position:absolute;><img style="position:absolute;> a </span>rka</h1>

    Sajnos elírtam az előző hozzászólásom elejét. A szülő elemnek (SPAN) relatív-nak kell lennie, ahogy utána a kifejtésben már jól írom: "amit abszolút pozicionálással CSS-el oda igazítasz ahova akarsz (a szülő relatív elemhez képest).".

    Az abszolút pozicionálás a DOM-ban hozzá legközelebbi relatív elemhez fog viszonyulni. Azaz ha a SPAN relatív, akkor annak a "bal felső sarka" lesz a kiindulópont. Ebbe beteszed a képet, megadod neki hogy abszolút pozícióban legyen, akkor onnan fog indulni. Innen már tudod mozgatni a left / right / top / bottom paraméterekkel, méretezni is tudod. A betűnek sem muszáj benne lennie a SPAN-ban, de ha benne van akkor annak méretéhez is tudod majd igazítani, hogy teljesen kitakarja (width, height).
    Mutasd a teljes hozzászólást!
  • Hali!

    Az abszolút pozicionálás a DOM-ban hozzá legközelebbi relatív elemhez fog viszonyulni.

    Ez nem így van. Az abszolút pozicionálás a hozzá legközelebbi (és itt a legközelebbit – értelemszerűen – „vertikálisan” kell érteni, valamelyik szülő-eleme a DOM-hierarchiában) pozicionált elemhez képest történik. A pozicionált annyit tesz, hogy bármilyen pozíciójú lehet az elem, csak ne alapértelmezett static legyen (így abszolút is megfelelő).

    Mutasd a teljes hozzászólást!
  • Köszi a javítást, meglátásod helyes. Jelen esetben ettől függetlenül neki a szülő elemnek relatív pozíciót célszerű beállítani (szerintem), mert az abszolút "kiragadná" a helyéről.
    Mutasd a teljes hozzászólást!
Címkék
abcd