Autor Zpráva
jojok
Profil *
Ahoj...
je to podle knizky css hotova reseni...

A ja se ptam, jak autor prisel na hodnotu 24.7% u .article??

kod je nasledujici:



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1250">
<title>Skupina shodných sloupců</title>
<style type="text/css" media="all">
body {
background-color: #CCCCCC;
text-align: center;
}

#page {
margin: 0 15%;
padding: 0.5em 1.5em;
background-color: white;
text-align: left;
}

#master {
width: 100%;
background-color: #E0E0E0;
}
.article {
width: 24.7%;
float: left;
}
.articlein {
padding: 0.5em;
}
.article h3 {
margin: 0.25em 0;
font-size: 100%;
}
.article p {
margin: 0;
}

.cleaner {
clear: both;
height: 0;
overflow: hidden;
content: ' ';
}
.cleaner hr {
display: none;
}
</style>
</head>
<body>
<h1>Skupina shodných sloupců</h1>
<div id="page">
<p>Toto je příklad většího množství (v našem případě čtyř) sloupců stejné šířky. Vhodný je například pro několik upoutávek na různé články. Každý box je plovoucí a má deklarovanou šířku. Součet šířek všech boxů nesmí být větší, než šířka rodičovského boxu. I pouhé přetečení o jeden pixel způsobí "odskočení" posledního sloupce pod své předchůdce.</p>
<div id="master">
<div class="article">
<div class="articlein">
<h3><a href="#">Lorem ipsum</a></h3>
<p>Lorem ipsum dolor sit amet consectetuer diam justo metus id congue.</p>
</div>
</div>
<div class="article">
<div class="articlein">
<h3><a href="#">Faucibus pellentesque</a></h3>
<p>Faucibus pellentesque eros hac Phasellus elit Vestibulum lacinia urna justo ut. </p>
</div>
</div>
<div class="article">
<div class="articlein">
<h3><a href="#">Sed sem netus</a></h3>
<p>Sed sem netus congue et at a pede consectetuer tincidunt Morbi. </p>
</div>
</div>
<div class="article">
<div class="articlein">
<h3><a href="#">Tellus pede</a></h3>
<p>Tellus pede nascetur ligula In convallis Maecenas lorem ut sed metus. </p>
</div>
</div>
<div class="cleaner">
<hr />
</div>
</div>
</div>
</body>
</html>
Plaváček
Profil
jojok

Autor tím elegantně vyeliminoval chybičku IE. Zkus si nastavit pro .article width:25%. Poslední blok ti uteče dolů. Existuje i jiné řešení, třeba takovéto:

.article {
width: 25%;
float: left;
margin-left: -1px;
}
jojok
Profil *
diky... ja jen nechapal proc zrovna 24.7%, to s 25% sem zkousel a neslo...
k cislu 24.7 sem dosel az zkousenim... Pri 24.9 a 24.8 mi to pri urcitem roztazeni v ie take odskocilo... Ale myslel sem ze k tomu cislu dosel nejakym vypoctem

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: