| Autor | Zpráva | ||
|---|---|---|---|
| mafos Profil |
#1 · Zasláno: 29. 10. 2009, 18:15:09 · Upravil/a: mafos
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 |
#2 · Zasláno: 29. 10. 2009, 18:31:16
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 |
#3 · Zasláno: 29. 10. 2009, 18:38:11
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 * |
#4 · Zasláno: 29. 10. 2009, 18:42:27
V Explleru me me kody taky delaji neplechy :( a v Mozille je u me taky vse OK
Jsem z toho vyvaleny |
||
| mafos Profil |
#5 · Zasláno: 29. 10. 2009, 18:44:24
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 |
#7 · Zasláno: 29. 10. 2009, 18:58:53
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 |
#8 · Zasláno: 29. 10. 2009, 19:05:52
mafos: bude ti fungovať, keď k nemu pridáš šírku a position: relative;
|
||
| mafos Profil |
#9 · Zasláno: 29. 10. 2009, 19:10:03
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 |
#10 · Zasláno: 29. 10. 2009, 19:21:40
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 |
#11 · Zasláno: 29. 10. 2009, 19:40:39
pEeLL:
Už to funguje :-) Super. Díky za pomoc. |
||
| mafos Profil |
#12 · Zasláno: 29. 10. 2009, 22:19:37
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 |
#13 · Zasláno: 29. 10. 2009, 22:45:12
vertical-align: middle pro obrázek (obrázky).
|
||
| mafos Profil |
#14 · Zasláno: 30. 10. 2009, 10:56:34
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 |
#15 · Zasláno: 30. 10. 2009, 11:00:23
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 |
#16 · Zasláno: 30. 10. 2009, 11:13:57
Nadan:
Je to tak! Díky za pomoc. Špatně jsem to pochopil. |
||
| mafos Profil |
#17 · Zasláno: 30. 10. 2009, 11:28:48
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 |
#18 · Zasláno: 30. 10. 2009, 11:31:10
mafos:
Možná je to blbost, ale zkus <p></p> |
||
| mafos Profil |
#19 · Zasláno: 30. 10. 2009, 11:44:10
Nadan:
Zkusil jsem to celý dát do <p></p>, jenom text do <p></p>, ale nic. Nefunguje :-( |
||
| Nadan Profil |
#20 · Zasláno: 30. 10. 2009, 11:54:05 · Upravil/a: Nadan
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 |
#21 · Zasláno: 30. 10. 2009, 11:56:16
Nadan:
floatovat se nechají i texty v odstavci, případně obrázky.. Tvé divy s divy jsou tedy zbytečné. |
||
| Nadan Profil |
#22 · Zasláno: 30. 10. 2009, 12:53:35
panther:
:) Pěkně řečeno... |
||
| mafos Profil |
#23 · Zasláno: 30. 10. 2009, 13:30:29
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 |
#24 · Zasláno: 30. 10. 2009, 19:03:56
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 |
#25 · Zasláno: 30. 10. 2009, 20:30:14
Už jsem to vyřešil :-) clear: both to všechno vyřešil. Díky
|
||
|
Časová prodleva: 14 let
|
|||
0