Css galéria

Zdravím,
mohli by ste mi pomôcť s css náhladovou galériou, aby som mal náhlady v jednom riadku, a nie v jednom stĺpci:

CSS
body
{ background-color:#dddddd;
margin:0; padding:0; color:white; }

div#obalovydiv {width:150px;}

div.kontejner { margin:20px; }

div.kontejner img { border:2px solid blue; margin:0;
padding:0; }

div.fotka { position:absolute; left:150px;
top:10px; visibility:hidden; }

div.kontejner:hover div.fotka, div.kontejnerHover div.fotka
{ position:absolute; left:180px;
top:200px; visibility:visible; }

div.kontejnerHover img.nahled
{ border:2px solid blue; margin:0;
padding:0; }

div.kontejner { behavior:url(hover.htc); }

- tú štruktúru som upravil, aby to zaberalo menej miesta.

HTML

<head>
<link href="galery.css" rel="stylesheet" type="text/css">
</head>
<body>
aa
<br> <br> <br> <br> <br>
aa

<div id="obalovydiv">

<div class="kontejner">
<img class="nahled" src="1.jpg" width="100" height="100"/>
<div class="fotka">
<img src="fotka1.jpg" width="400" height="300" alt="" />

</div>

</div>

<div class="kontejner">
<img class="nahled" src="2.jpg" width="100" height="100" alt="" />
<div class="fotka">
<img src="fotka2.jpg" width="400" height="300" alt="" />

</div>

</div>

<div class="kontejner">
<img class="nahled" src="3.jpg" width="100" height="100" alt="" />
<div class="fotka">
<img src="fotka3.jpg" width="400" height="300" alt="" />

</div>
</div>

</div>

</body>

Díky

A ešte som zabudol dodať dôležitú vec, a to že ide o hover galériu.

<HTML>to je sice krásný ale v IE nepojede</HTML>

samozrejme že ide, už som to aj skúšal a ide mi to, len potrebujem to menu galérie (teda náhlady) dostať do vodorovnej roviny, to znamená aby tie divy boli vedľa seba a to mi nejde.

Zkus tomu divu kontejner ještě připsat float: left; a šířku. Divy se pak budou řadit vedle sebe, dokud jim bude stačit šířka stránky.

<HTML>chceš mi říct že <small>div.kontejner:hover</small> ti v IE jede bez toho abys to převedl na JS? Myslim IE 6</HTML>

skaff: ma tam toto: div.kontejner { behavior:url(hover.htc); } , tak tim to asi jde i v ie

<HTML>jo aha to je dole ja sem koukal na horni radek a nevsim sem si toho :]</HTML>

No moc díky, teraz som len zvedavý ako tú galériu vložím do webu, keď všetko v galérií má position-absolute.

Koukni na zanořené pozice na http://www.jakpsatweb.cz/css/position.html.

← Zpět na všechna témata

Nové příspěvky

Smazani stranek index.html ) HTML Tabulky Zalamování textu pomocí CSS Přesměrování Arduino - 400 Bad Request Nastavení českých písmen POMOC! po druhé! Pozicování (obrázek na střed). Jak vycentrovat obrazek, ktery je v prikazu absolute ? Použití tvůrce webu katalog async functions' is only available in es8 (use 'esversion: 8') Uncaught (in promise) SyntaxError: Unexpected token < in JSON at position 0 Problém s načítáním Div pro reklamu překrývá prvky webové stránky Nezobrazuje se mi lišta s reklamou ako nahrám na môj web favicon? JavaScript - nečitelný soubor *.js - jak prohlížet/editovat Problém s textem videostream index.html GB///refresh///JS Total Commander - server nenalezen Mobilní verze webu

Další témata

Webzdarma zvládnete to sami

Css galéria

Nové příspěvky