Fotky vedle sebe

Začátečník
co třeba vložit k jedné fotce align=left a ke druhé align=right...

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ší.

Žá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

šířku nadefinuješ marginama, tzn dáš třeba oběma
margin-left:5px

Nox
align je jen svisle? já ho mám i na horizont a funguje to...to jsem z toho lama...

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

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.

img jsou řádkové prvky
ježiš...ach jo...sorry, radši už to vypnu

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>

oprava - kdyby NEměly být bez mezery mezi nimi

fuj, BEZ MEZER (už to taky vypnu :-)

.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

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.

Hm, fuguje to jen s DTD na http://www.w3.org/TR/html4/loose.dtd v doctype a v HTML 4.01.

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

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>

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".

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

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>

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>

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í.

Plaváček - dík. Dobrej čistič :-)