Autor Zpráva
mafos
Profil
Dobrý den,
mám začátečnický problém. Určitě je to jen nějaká hloupost. Jsem zvyklý dělat pouze tabulkový design, ale začínám s CSS pozicováním.
Chci udělat obrys obsahu, ale když nastavím výšku tak jak potřebuji, tak stejně je to celý vyšší, takže se mi tam začne zobrazovat obrázek na pozadí znovu. Je mi jasný, že se to asi takhle jak to mám nedělá, ale nevím jak jinak. Nikde se mi nepodařilo nic najít.
Toto je můj kod. Jen začátek. Zbytek bych pokračoval, ale už teď to nefunguje, tak jsem nepokračoval.
<div style="position: absolute; width: 15px; top: 0px; height: 15px; left: 0px; background-image: url('obrazy/index_01.gif')"></div>
<div style="position: absolute; width: 860px; top: 0px; height: 15px; left: 15px; background-image: url('obrazy/index_02.gif')"></div>
<div style="position: absolute; width: 15px; top: 0px; height: 15px; left: 875px; background-image: url('obrazy/index_03.gif')"></div>

Tady jsem to dal na net, aby bylo vidět co je chyba: http://halva.org/jakpsatweb/
Ještě by mě zajímalo, jak to celý mám zarovna na střed? Děkuji za pomoc.
pEeLL
Profil
me se zobrazuji obrazky spravne muzes dat screenshot co se ti kde zobrazuje spatne?

zarovnani na stred udelas tak ze vse vlozis do divu a tomu das style="margin: 0 auto"
mafos
Profil
Píši to v exploreru, a tam to není OK. Ve firefoxu teď koukám, že to je správně. Jinak to dělám dobře? Píše se to takhle jak to dělám?
Tady je to co mi to dělá www.halva.org/jakpsatweb/css.jpg .
Hojda
Profil *
V Explleru me me kody taky delaji neplechy :( a v Mozille je u me taky vse OK
Jsem z toho vyvaleny
mafos
Profil
Dá se to tedy nějak vyřešit?

To zarovnání na střed, mi taky nějak nefunguje :-(
<div style="margin: 0 auto">
<div style="position: absolute; width: 15px; top: 0px; height: 15px; left: 0px; background-image: url('obrazy/index_01.gif')"></div>
<div style="position: absolute; width: 860px; top: 0px; height: 15px; left: 15px; background-image: url('obrazy/index_02.gif')"></div>
<div style="position: absolute; width: 15px; top: 0px; height: 15px; left: 875px; background-image: url('obrazy/index_03.gif')"></div>
</div>
pEeLL
Profil
mafos:
pridej uplne na zacatek souboru tohle a uz by to melo byt ok i v ie a melo by to byt vporadku.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">


o quirk rezimu ie ti tu urcite povypravi nekdo jiny

a stim pozicovanim na stred zadej krome margin 0 auto tomu divu dej jeste width: sirka; position:relative;

a jinak tohle ohraniceni nedelej obrazkama ale pomoci ramecku - border: 5px solid blue
a taky si jeste precti neco float - ircite se bude hodit.
mafos
Profil
pEeLL:
Ono to funguje! :-)

Ještě bych se chtěl zeptat, jak to tedy celý zarovnat na střed? style="margin: 0 auto" mi nefunguje :-(
tiso
Profil
mafos: bude ti fungovať, keď k nemu pridáš šírku a position: relative;
mafos
Profil
pEeLL:
Klidně ten rámeček udělám jinak, jenže si představuju, aby vypadal takto www.halva.org/jakpsatweb/obrys.jpg . To by taky šlo nějak pomocí rámečku?
Zarovnání na střed už funguje.
pEeLL
Profil
proste vyuzijes dva divy - prvnimu (treba tomu co ma ted margin 0 auto) das border:5px solid blue a padding: 5 px a dovnitr nej vlozis druhy a tomu das border:1px solid blue

barvy a sirky si uprav
mafos
Profil
pEeLL:
Už to funguje :-) Super. Díky za pomoc.
mafos
Profil
Zdravím,
tak jsem narazil na další problém :-( Mám dva obrázky a potřeboval bych mezi ně umístit text. To není problém, to se mi podařilo. Ale nevím, jak mám ten text zarovnat vertikálně na střed těch dvou obrázků? V tabulkách jsem to dělal pomocí valign, ale pomocí CSS nevím :-(
Děkuji za radu.
Bubák
Profil
vertical-align: middle pro obrázek (obrázky).
mafos
Profil
Tak to bohužel nefunguje :-(
<div style="position: relative; top: 10px; vertical-align: middle">
<a href=foto/hlavni_strana/f01.jpg><img src=foto/hlavni_strana/f01.jpg border=0 width=100></a>
nějaký text
<a href=foto/hlavni_strana/f02.jpg><img src=foto/hlavni_strana/f02.jpg border=0 width=100></a></div>
Nadan
Profil
mafos:
Myslím, že Bubák myslel spíše:
<div style="position: relative; top: 10px;">
<a href=foto/hlavni_strana/f01.jpg><img style="vertical-align: middle;" src=foto/hlavni_strana/f01.jpg border=0 width=100></a>
nějaký text
<a href=foto/hlavni_strana/f02.jpg><img style="vertical-align: middle;" src=foto/hlavni_strana/f02.jpg border=0 width=100></a></div>


nebo se mýlím?
mafos
Profil
Nadan:
Je to tak!

Díky za pomoc. Špatně jsem to pochopil.
mafos
Profil
Poté co vertikální zarovnání začlo fungovat, vyvstal další problém :-( Potřeboval bych mezi obrázky vložit text s více řádky. Jenže když použiji <br> tak mi to rozhodní i obrázky. Dá se to nějak vyřešit?
<div style="position: relative; top: 10px;">
<a href=foto/hlavni_strana/f01.jpg><img style="vertical-align: middle;" src=foto/hlavni_strana/f01.jpg border=0 width=100></a>
nějaký text
<br>další řádek
<a href=foto/hlavni_strana/f02.jpg><img style="vertical-align: middle;" src=foto/hlavni_strana/f02.jpg border=0 width=100></a></div>

Děkuji
Nadan
Profil
mafos:
Možná je to blbost, ale zkus <p></p>
mafos
Profil
Nadan:
Zkusil jsem to celý dát do <p></p>, jenom text do <p></p>, ale nic. Nefunguje :-(
Nadan
Profil
mafos:
Já jsem takový úchyl na divy. Teď už mě napadá jenom možnost tří divů vedle sebe, ve dvou obrázky, v jednom text...
<div style="float: left; width: 25%;">obrázek1</div>
<div style="margin: 0 25% 0 25%; width: 50%;">text</div>
<div style="float:right; width: 25%; margin-left: 75%;">obrázek2</div>


Možná je to blbě, spěchal jsem...
panther
Profil
Nadan:
floatovat se nechají i texty v odstavci, případně obrázky.. Tvé divy s divy jsou tedy zbytečné.
Nadan
Profil
panther:
:) Pěkně řečeno...
mafos
Profil
Takže jsem to vyřešil pomocí floatování, jenže teď se mi zase ten text mezi obrázky nerovná na střed těch obrázků :-(

<div style="position: relative; top: 10px; width: 780px">
<a href=foto/hlavni_strana/f01.jpg><img style="vertical-align: middle; float: left" src=foto/hlavni_strana/f01.jpg border=0 width=100></a><a href=foto/hlavni_strana/f01.jpg><img  style="vertical-align: middle; float: right" src=foto/hlavni_strana/f02.jpg border=0 width=100></a>
text
<br>text
</div>
mafos
Profil
Dobrý den,
narazil jsem na další problém. Text se mi překrývá s obrázky. Používám position: relative, takže nevím, proč to jde přes sebe. Hlavně to nefunguje ve Firefoxu, explorer to bere celkem dobře. Jak to vypadá se můžete podívat www.halva.org/jakpsatweb . Pro názornost jsem udělal rám kolem divu, který zlobí. Aby bylo vidět, že výšku mám nastavenou, ale text to stejně nějak nebere :-(
Děkuji za pomoc.
mafos
Profil
Už jsem to vyřešil :-) clear: both to všechno vyřešil. Díky

Vaše odpověď

Mohlo by se hodit


Prosím používejte diakritiku a interpunkci.

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