Nadpis překrývá obrázek 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
cosmosD
Level 3
Level 3
Příspěvky: 437
Registrován: únor 11
Bydliště: Praha
Pohlaví: Muž
Stav:
Offline

Nadpis překrývá obrázek  Vyřešeno

Příspěvekod cosmosD » 07 srp 2013 19:39

Čau, narazil jsem na další problém.

Kód:

Kód: Vybrat vše

<div class="novinka">
    <h3>Contrary to popular</h3>
    <img src="/images/obr_6-134-100.png" alt="" title="" />
    <div class="text">
    <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.</p>
    </div>
</div>


CSS:

Kód: Vybrat vše

.novinka img {
    float: left;
}
.novinka h3 {
    position: relative;
    left: 12px;
}
.novinka p {
    position: relative;
    left: 12px;
    margin-top: 10px;
    margin-bottom: 20px;

}


Problém je v tom, že h3 se nezobrazí vedle obrázku zprava, ale nad ním. Když h3 přidám top: 10px, tak namísto aby odskočila vedle obrázku, tak obrázek překryje.
Potřebuji to vyřešit z toho důvodu, že novinka může, ale nemusí mít obrázek. Tudíž když ho bude mít, tak chci aby byl nadpis vedle obrázku zprava, tak jako je text odstavce. Když ho mít nebude chci aby byl zarovnán vlevo, stejně jako text odstavce. Prostě pro odstavec to funguje jak má, ale pro nadpis ne.

Prosím o radu.

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: Nadpis překrývá obrázek

Příspěvekod CZechBoY » 07 srp 2013 19:46

čau,
pokud chceš dát h3 vedle tý novinky tak musíš použít float: right
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
cosmosD
Level 3
Level 3
Příspěvky: 437
Registrován: únor 11
Bydliště: Praha
Pohlaví: Muž
Stav:
Offline

Re: Nadpis překrývá obrázek

Příspěvekod cosmosD » 07 srp 2013 19:59

Jop, zkoušel jsem to, jenže když dám h3 float: right, tak ten nadpis není hned zleva u toho obrázku, ale je vlastně uplně vpravo podle šířky toho bloku a je zarovnaný s prvním řádkem odstavce. Když mu potom zkusím dát nějaký margin, tak na to nereaguje.

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: Nadpis překrývá obrázek

Příspěvekod CZechBoY » 07 srp 2013 20:06

tak dej v html h3 až za img a dej h3 {float: left}
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
cosmosD
Level 3
Level 3
Příspěvky: 437
Registrován: únor 11
Bydliště: Praha
Pohlaví: Muž
Stav:
Offline

Re: Nadpis překrývá obrázek

Příspěvekod cosmosD » 07 srp 2013 20:08

To právě nemůžu, mně to takto generuje CMS, takže já to musím jen nastylovat :(

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: Nadpis překrývá obrázek

Příspěvekod CZechBoY » 07 srp 2013 20:11

to ten CMS nemá šablonu? jak to jako generuje že to nemůžeš změnit? :D
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
cosmosD
Level 3
Level 3
Příspěvky: 437
Registrován: únor 11
Bydliště: Praha
Pohlaví: Muž
Stav:
Offline

Re: Nadpis překrývá obrázek

Příspěvekod cosmosD » 07 srp 2013 20:35

To je uložený někde na serveru a já k tomu nemám přístup. Tak myslíš že by to jinak nešlo joo?

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: Nadpis překrývá obrázek

Příspěvekod CZechBoY » 07 srp 2013 20:41

tak dej obojímu float:right
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


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 1 host