Objekt mezi odstavci

15. srpna 2006

•

Toto řešení ukazuje, jak pomocí CSS umožnit vložení obrázku nebo i jiného objektu (například textu nebo videa) do prostoru mezi vizuální sloupce ve dvou a vícesloupcovém rozvržení textu.

Zde si můžete prohlédnout výsledek.

Toto řešení publikoval Daniel M. Frommelt. Bližší popis najdete v článku Cross-Column Pull-Outs.

(Při vkládání videa doporučujeme využít postup popsaný v článku Bye Bye Embed.)

CSS

*
{
margin: 0;
padding: 0;
}
p
{
text-align: justify;
line-height: 20px;
padding: .625em 0;
}
#overall
{
width: 755px;
margin: 0 auto;
}
.col
{
width:365px;
float:left;
padding:0 5px;
}
.CCspace
{
width: 175px;
height: 290px;
float: right;
padding: 5px;
}
.CCpullout
{
width: 350px;
height: 290px;
float: left;
margin-left:-185px;
padding:5px;
}
.CCpullout span
{
width:350px;
position:absolute;
text-align:center;
font-size:.9em;
font-weight:bold;
color: #3D6EFF;
}
.CCpullout del
{
font-size: 0;
color: #fff;
position: absolute;
}
.CCspace-text
{
width: 6.5em;
height: 8em;
float: right;
padding: .25em;
}
.CCpullout-text
{
width: 13em;
height: 8em;
float: left;
margin-left: -7.5em;
padding: .25em;
}
.CCpullout-text span
{
width: 8em;
position: absolute;
text-align: center;
font-size: 1.5em;
color: #3D6EFF;
line-height: 23px;
font-weight: bold;
font-family: trebuchet ms, arial, sans-serif;
padding: .25em;
}
.CCpullout-text span i
{
padding: 0em;
text-align: center;
font-size: 0.4em;
color: #000;
padding: 0 0 .25em;
}
.CCpullout-text del
{
font-size: 0;
color: #fff;
position: absolute;
}
h1
{
text-align: center;
color: #3D6EFF;
}

XHTML

<html>
<body>
<div id=“overall“>
<h1>Objekt mezi odstavci</h1>
<div class=“col“>
<p>Lorem ipsum dolor sit amet…<span class=“CCspace“> </span> montes, nascetur ridiculus mus. Sed dolor pede, tempus non….</p>
<p>Praesent congue sagittis elit. Nullam sagittis tortor ut dui…<span class=“CCspace-text“> </span>Maecenas nibh risus, suscipit vel, elementum vitae…</p>
</div>
<div class=“col“>
<p>Cum sociis natoque penatibus et magnis dis parturient montes…<span class=“CCpullout“><del> [Pullout: </del><span><img src=“hradcany.jpg“ alt=““ /> Ostravské hradčany</span><del>] </del></span> sit amet, dolor. Proin cursus orci eu purus…</p>
<p>Integer molestie eros et urna. Aenean egestas lectus ac mi…<span class=“CCpullout-text“><del> [Pullout: </del><span>Prostor mezi odstavci lze využít i k vložení textu <br /><i>Může mít i obrázek na pozadí.</i></span><del>] </del></span> Praesent bibendum…</p>
<p>Nunc arcu. Ut faucibus purus in risus. Morbi sem…</p>
</div>
</div>
</body>
</html>