Autor Zpráva
jojok
Profil *
Ahoj...
Jak to udelat?
Ve fixnim nejni problem, spocita se to tak aby se urcity pocet karet s fotkama vesel na radek, presne vesel. Ale jak to udelat v nefixnim, aby pokud se tam akorat jedna fotka nevejde (odskoci na dalsi radek) po ni nezustalo takove prazne misto? Tj aby se Ostatni na radku roztahli natolik aby zaplnili jeji misto?

Tady je ten fixni model:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />
<title>Untitled Document</title>
<style type="text/css" media="all">
body {
background-color: #999;
text-align: center;
}
p {
margin: 0.5em 0;
}
.cleaner {
clear: both;
height: 0;
overflow: hidden;
content: ' ';
}
.cleaner hr {
display: none;
}

#page{
width:440px;
margin:0 auto;
background-color: #CCCCCC;
text-align:left;
padding:1px 0;
}
#pagein{
margin:10px;
}
#galerie{
margin: 1.5em 0;
width: 100%;
padding: 1px 0;

}

.foto{
float:left;
width:130px;
height:120px;
background:white;
text-align:center;
overflow: auto;
margin:5px;
display:inline;
}

img{
margin:10px 0 0 0;
border:1px solid silver;
}

p{
margin:0;
}

</style>
</head>

<body>
<h1>Zobecněné skupiny sloupců: plovoucí karty</h1>
<div id="page">
<div id="pagein">
<p>Toto je příklad zobecněné skupiny sloupců, tzv. plovoucích karet. Každá karta má zadanou šířku a výšku a je plovoucí k levému okraji. Na jeden řádek se umístí jen takové množství karet, které se bez problémů vejde. Další karta pak začně pod svými předchůdci novou řadu. Toto řešení se hodí například pro různé fotogalerie.</p>
<div id="galerie">
<div class="foto"> <img src="foto1.jpg" alt="Fotografie: důstojná modř" width="100" height="75">
<p>důstojná modř</p>
</div>
<div class="foto"> <img src="foto2.jpg" alt="Fotografie: přírodní zeleň" width="100" height="75">
<p>přírodní zeleň</p>
</div>
<div class="foto"> <img src="foto3.jpg" alt="Fotografie: oranžová svůdnice" width="100" height="75">
<p>oranžová svůdnice</p>
</div>
<div class="foto"> <img src="foto4.jpg" alt="Fotografie: zemitá hněď" width="100" height="75">
<p>zemitá hněď</p>
</div>
<div class="foto"> <img src="foto5.jpg" alt="Fotografie: fialová pro madam" width="100" height="75">
<p>fialová pro madam</p>
</div>
<div class="foto"> <img src="foto6.jpg" alt="Fotografie: žlutá jako sluníčko" width="100" height="75">
<p>žlutá jako sluníčko</p>
</div>
<div class="cleaner">
<hr />
</div>
</div>
</div>
</div>
</body>
</html>
jojok
Profil *
u #page jsem zmenil width na 100% a k body doplnil padding:0 15%;
ale ty karty maji 5px margin a to tam bude asi hlavni kamen urazu ale cim a jak to nahradit?
Plaváček
Profil
jojok

Zkus margin vyvrbit taky v procentech. Chce to trošku laborovat, ale většina prohlížečů schroupne margin i v desetinách procenta.

Existuje ale i jiná možnost.

Pracuj s volným místem a nechej ho plavat. Na monitoru totiž bude vždycky nějaké prázdné místo, protože nikdy nevíš, jaký monitor uživatel používá.
jojok
Profil *
No ale kdyz se nad tim zamyslim tak margin v % je blbost, protoze nikdy nevim kolik vlastne tech karet na obrazovce bude, todiz nemuzu mit margin napr 5% protoze je rozdil jestli bude mezi 2ma kartama na radku nebo 10x ... nejak mi to nejde do hlavy co s tim :(
jojok
Profil *
jak tedy na to?

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: