Autor | Zpráva | ||
---|---|---|---|
Začátečník Profil * |
#1 · Zasláno: 28. 8. 2007, 21:31:27
Zdravím, potřebuji pomoct asi s banálním problémem. Potřebuji umístit 2 fotky vedle sebe:
zatím to mam takhle: <div id="logo"> <IMG SRC="web/logo_deti.jpg" WIDTH=279 HEIGHT=254> <IMG SRC="web/logo_www.gif" WIDTH=497 HEIGHT=254> </div> CSS: #logo { width: 776px; height: 254px; background-color: #ffffcc; } Potřeboval bych dát tyto 2 fotky vedle sebe. Dík za pomoc |
||
Shelly Profil * |
#2 · Zasláno: 28. 8. 2007, 21:39:54
Začátečník
co třeba vložit k jedné fotce align=left a ke druhé align=right... |
||
Začátečník Profil * |
#3 · Zasláno: 28. 8. 2007, 21:59:17
děkuji. Můžu se prosím zeptat, jak udělám ještě, aby mezi nimi nebyla žádná mezera? teď je mám sice vedle sebe, ale je mezi nimi mezera.
děkuji P. |
||
Shelly Profil * |
#4 · Zasláno: 28. 8. 2007, 22:02:19
Začátečník
Jejda, tak to nevím...sama začínám...ale snad by šlo pohrát si s <br>...snad mě tu profíci neukamenujou...jestli je nějaký lepší a jednodušší způsob, určitě ti poradí povolanější. |
||
Nox Profil |
#5 · Zasláno: 28. 8. 2007, 22:17:20
Žádný align, ten je jen svisle
dej jim css vlastnosti float:left a float:right a definuj jim šířku a potom do toho stejnýho divu přidej <hr> s css parametry visiblity:hidden;display:block;clear:both |
||
Nox Profil |
#6 · Zasláno: 28. 8. 2007, 22:18:08
šířku nadefinuješ marginama, tzn dáš třeba oběma
margin-left:5px |
||
Shelly Profil * |
#7 · Zasláno: 28. 8. 2007, 22:18:39
Nox
align je jen svisle? já ho mám i na horizont a funguje to...to jsem z toho lama... |
||
Nox Profil |
#8 · Zasláno: 28. 8. 2007, 22:24:28
Shelly
myslel sem že myslíš align u <img> tagu.... no, tenhle problém by to ale neřešilo Možná by bylo ještě řešení si nějak pohrát s display:inline na ty obrázky, ale nevim jestli by to fungovalo |
||
j Profil * |
#9 · Zasláno: 28. 8. 2007, 22:48:42
img jsou řádkové prvky. I když 279+497=776 (width pro #logo), nevejdou se do #logo vedle sebe, protože mají default okraje. Dej width pro #logo třeba 786.
|
||
Nox Profil |
#10 · Zasláno: 28. 8. 2007, 22:52:13
img jsou řádkové prvky
ježiš...ach jo...sorry, radši už to vypnu |
||
j Profil * |
#11 · Zasláno: 28. 8. 2007, 23:13:06
Začátečník - ještě - kdyby měly být bez mezery mezi nimi, tak třeba nějak takto(styly samože jinam):
<div style="width: 776"> <div style="float: left; margin: 0"><IMG SRC="web/logo_deti.jpg" WIDTH=279 HEIGHT=254></div> <div style="float: left; margin: 0"><IMG SRC="web/logo_www.gif" WIDTH=497 HEIGHT=254></div> <br style="clear:both; font-size: 0; line-height: 0; height: 0"> </div> |
||
j Profil * |
#12 · Zasláno: 28. 8. 2007, 23:13:41
oprava - kdyby NEměly být bez mezery mezi nimi
|
||
j Profil * |
#13 · Zasláno: 28. 8. 2007, 23:15:38
fuj, BEZ MEZER (už to taky vypnu :-)
|
||
havs Profil |
#14 · Zasláno: 28. 8. 2007, 23:25:29 · Upravil/a: havs
.loga { width: 508px; }
.loga img { float: left; } .clear { clear: both; line-height: 0; } <div class="loga"> <img src="web/logo_deti.jpg" alt="děti" width="279" height="254"> <img src="web/logo_www.gif" alt="web" width="497" height="254"> <div class="clear"></div> </div> ...a s divem loga si už dělej, co je libo |
||
Trejpa Profil |
#15 · Zasláno: 29. 8. 2007, 00:08:09 · Upravil/a: Trejpa
Začátečník
Dej obrázky těsně k sobě i v kódu, třeba takto: <IMG ... ><IMG ... > <IMG ... ><!-- --><IMG ... > <IMG ... ><IMG ... > nebo rovnou spoj oba obrázky do jednoho souboru (třeba .jpg) nebo nejjednodušeji pozadím <style> #logo { background: url(web/logo_deti.jpg); width: 776px; height: 254px; } #logo div { background: url(web/logo_www.gif); margin-left: 279px; } </style> <div id="logo"><div></div></div> Pozor na float (CSS) a align (HTML) pro IMG, raději nepoužívat. V IE se na plovoucím obrázku vytvoří margin a ten nejde zrušit (jde zmenšit). Vypadá to, že je to vykreslovací chyba (bug) prohlížeče. (IE6, quirk) Shelly šlo pohrát si s <br> Hloupost. (Kameny nikdo házet nebude.) Nox Žádný align, ten je jen svisle Align (left, right) u obrázku odpovídá CSS vlastnosti float. EDIT: Svisle k řádku se dá samozřejmě alignem obrázek zarovnávat také. šířku nadefinuješ marginama Snad boční odstup, ne? Ten je ale právě ze zadání nežádoucí. j mají default okraje Nemají. Jen v případě <a><img></a> má obrázek rámeček. Výjimka je právě v IE u IMG s vlastností float jinou než none, viz výše. img jsou řádkové prvky Nejsou řádkové, ale nahrazované. Řádkový (na rozdíl od nahrazovaného) nemůže mít rozměry. nevejdou se do #logo vedle sebe Jediným důvodem, proč se nevejdou, je mezera mezi nimi způsobená odřádkováním v kódu. havs Nefunguje to v IE. Viz výše. |
||
havs Profil |
#16 · Zasláno: 29. 8. 2007, 00:14:53 · Upravil/a: havs
Hm, fuguje to jen s DTD na http://www.w3.org/TR/html4/loose.dtd v doctype a v HTML 4.01.
|
||
J Profil * |
#17 · Zasláno: 29. 8. 2007, 00:36:39
img jsou řádkové prvky, nebo pánové Prokop a Staníček v knihách kecají :-)
Cituji: Prvky, které netvoří nové bloky obsahu, nazýváme řádkové prvky. příkladem může být zdůrazněná část textu ... nebo obrázek <img> Řádkové nenahrazené prvky - width se nepoužije Řádkové nahrazené prvky - dá přirozenou šířku prvku |
||
Trejpa Profil |
#18 · Zasláno: 29. 8. 2007, 02:09:30
havs
Prohlížeče se o DTD nestarají. Tvůj kód funguje právě naopak, jen ve standardním, ne v quirk (loose) módu (myšleno IE6). J <mimo téma> img jsou řádkové prvky Z pohledu vykreslování ano, IMG má defaultně nastavenu CSS hodnotu display na inline. Z pohledu terminologie v dokumentaci a DTD však takto IMG označen není (žádný nahrazovaný element nemá ani obecné řádkové atributy). Konec OT. </mimo téma> |
||
Bubák Profil |
#19 · Zasláno: 29. 8. 2007, 08:07:58
Nejjednodušší je tohle:
<IMG SRC="web/logo_deti.jpg" WIDTH=279 HEIGHT=254><IMG SRC="web/logo_www.gif" WIDTH=497 HEIGHT=254> "Hezčí", zejména, pokud je obrázků více, je tohle: <IMG SRC="web/logo_deti.jpg" WIDTH=279 HEIGHT=254><!-- --><IMG SRC="web/logo_www.gif" WIDTH=497 HEIGHT=254> Prohlížeč konce řádku nevidí, jsou skryty pomocí komentáře. Jsou i další řešení "problému", který je způsoben tím, že "konec řádku je chápán jako mezera". Více třeba www.jakpsatweb.cz/html/syntaxe.html - kapitola "Mezery v kódu". |
||
j Profil * |
#20 · Zasláno: 29. 8. 2007, 08:21:47
<mimo téma>
Dík za info. "konec řádku je chápán jako mezera" - stydím se až do hloubi své černé duše za neznalost uvedeného. </mimo téma> |
||
Plaváček Profil |
#21 · Zasláno: 29. 8. 2007, 09:02:43 · Upravil/a: Plaváček
Začátečník
Jedná se o známou chybu IE a jedno z možných řešení naznačil Bubák. Problém jeho řešení je ale v tom, že ne vždy máš v HTML kódu mezery pod kontrolou, takže zkus třeba podobné řešení: CSS <style type="text/css"> <!-- #logo { width: 776px; height: 254px; background-color: #000; overflow:hidden } #logo img { display: block; } #logo span { float: left; display:inline; } --> </style> HTML <div id="logo"> <span><IMG SRC="img.jpg" WIDTH=279 HEIGHT=254></span> <span><IMG SRC="img1.jpg" WIDTH=497 HEIGHT=254></span> </div> |
||
j Profil * |
#22 · Zasláno: 29. 8. 2007, 13:06:30
Plaváček
můžu se pls zeptat, z jakého důvodu jsou zde některé věci (v opisu níže zapoznámkované) - připadá mi, že v IE, FF a O je to i bez nich stejné. <style type="text/css"><!-- #logo {width: 776px;height: 254px;background-color: #000; /* overflow:hidden */ /*pri spravnem soucu nepretece*/} /* #logo img {display: block;} */ #logo span {float: left; /* display:inline; */ } --></style> <div id="logo"> <span><IMG SRC="img.jpg" WIDTH=279 HEIGHT=254></span> <span><IMG SRC="img1.jpg" WIDTH=497 HEIGHT=254></span> </div> |
||
Plaváček Profil |
#23 · Zasláno: 29. 8. 2007, 13:20:29
j
Overflow:hidden ukončí obtékání, což se hodí třeba v okamžiku, kdy za IMG zapomeneš mezeru (takhle: <span><IMG SRC="img.jpg" WIDTH=279 HEIGHT=254> </span> ). V IE bys měl potíže. Ostatní dvě definice jsou navíc, nutně tam být nemusí. |
||
j Profil * |
#24 · Zasláno: 29. 8. 2007, 13:37:55
Plaváček - dík. Dobrej čistič :-)
|
||
Časová prodleva: 17 let
|
0