| Autor | Zpráva | ||
|---|---|---|---|
| gallo Profil |
#1 · Zasláno: 15. 11. 2010, 22:08:46 · Upravil/a: Moderátor (editace znemožněna) 10. 5. 2013, 20:34:02
Zdrawicko mam problem s obtekanim textu. Dostal sem za ulohu udelat proste stranku kde bude cela stranka zaplnena ciste jenom textom a ve strede toho vseho by mal byt obrazek dokladam screen : uploading.sk/obrazek/fjv3lgc/priklad.jpg dakujem za skore rady a pls nesom moc v tom odbornik :) dekuju :) vsem.
Moderátor Petr ZZZ: Titulek „obtekani text“ nevystihoval podstatu dotazu. Příště zkus prosím vymyslet lepší.
|
||
| Petr ZZZ Profil |
#2 · Zasláno: 16. 11. 2010, 16:52:37 · Upravil/a: Petr ZZZ
1. Piš prosím s diakritikou. Líp se to čte a čtenářů je víc, autor je jeden.
2. Obtékání zná pouze obtékání zleva nebo zprava, obtékat něco uprostřed lze zřejmě jen oklikou. Asi budeš muset udělat dva (obtékané) odstavce textu a do jednoho z nich umístit obtékaný obrázek. Řádky pochopitelně nebudou přes šířku stránky, ale jen přes šířku odstavce, tok textu bude tedy v rámci odstavce. Nic jiného mě nenapadá, ale třeba někdo bude vědět víc. Ukázka floatovaných spanů (Medvídkův tip z vlákna Riadkovanie <span>) |
||
| Joan Profil |
#3 · Zasláno: 17. 11. 2010, 00:14:53
Mám knížku 333 tipů a triků pro CSS od Martina Domese a tam návod na toto je, přikládám kopii kódu z knihy:
<!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=utf-8" />
<title>158. Jak obrázek s popiskem zarovnat mezi dva sloupce textu</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
body {
width: 600px;
margin: 20px auto;
font-size: small;
}
#obal {
width: 600px;
margin: 0 auto;
}
#zahlavi {
height: 100px;
background-image: url(obr/poz-zahlavi.gif);
}
#obsah {
float: left;
width: 100%;
background: #ece400;
padding-bottom: 10px;
}
#levy {
width:49%;
float: left;
}
#pravy {
width:49%;
float: right;
}
#zapati {
padding: 5px;
clear: both;
background: #ff9a2b url(obr/poz-zapati.jpg) repeat-x;
text-align: center;
}
h1 {
font-size: 150%;
margin: 0 10px;
}
p {
margin: 10px;
text-align: justify;
}
img {
margin: 5px;
}
span.proobr-vpravo {
width: 200px;
height: 160px;
float: left;
margin-left: -115px;
text-align: center;
}
span.proobr-vlevo {
float: right;
width: 85px;
height: 160px;
}
</style>
</head>
<body>
<div id="obal">
<div id="zahlavi">
</div>
<div id="obsah">
<h1>Jak obrázek s popiskem zarovnat mezi dva sloupce textu</h1>
<div id="levy">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque imperdiet tincidunt dui. Suspendisse urna ipsum, dapibus sit amet, tincidunt eu, elementum ac, leo.<span class="proobr-vlevo"></span> Ut tempus tempus augue. Nulla facilisi. Aenean convallis fringilla pede. Pellentesque pretium dapibus tortor. Cras iaculis diam at odio. Pellentesque hendrerit, ante ut lobortis facilisis, magna nisi molestie diam, ac tempus magna ipsum id turpis. Fusce lacinia, dolor quis luctus ultrices, tellus enim tincidunt mi, sit amet vestibulum pede urna non justo. Suspendisse ornare neque congue tortor. Curabitur et urna sit amet ligula vulputate molestie. In lorem justo, posuere ut, pellentesque vitae, imperdiet in, libero.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque imperdiet tincidunt dui. Suspendisse urna ipsum, dapibus sit amet, tincidunt eu, elementum ac, leo. Ut tempus tempus augue. Nulla facilisi. Aenean convallis fringilla pede. Pellentesque pretium dapibus tortor. Cras iaculis diam at odio. Pellentesque hendrerit, ante ut lobortis facilisis, magna nisi molestie diam, ac tempus magna ipsum id turpis. Fusce lacinia, dolor quis luctus ultrices, tellus enim tincidunt mi, sit amet vestibulum pede urna non justo. Suspendisse ornare neque congue tortor. Curabitur et urna sit amet ligula vulputate molestie. In lorem justo, posuere ut, pellentesque vitae, imperdiet in, libero.</p>
</div>
<div id="pravy">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque imperdiet tincidunt dui. Suspendisse urna ipsum, dapibus sit amet, tincidunt eu, elementum ac, leo.<span class="proobr-vpravo"><img src="obr/foto1.jpg" /> Popisek obrázku</span> Ut tempus tempus augue. Nulla facilisi. Aenean convallis fringilla pede. Pellentesque pretium dapibus tortor. Cras iaculis diam at odio. Pellentesque hendrerit, ante ut lobortis facilisis, magna nisi molestie diam, ac tempus magna ipsum id turpis. Fusce lacinia, dolor quis luctus ultrices, tellus enim tincidunt mi, sit amet vestibulum pede urna non justo. Suspendisse ornare neque congue tortor. Curabitur et urna sit amet ligula vulputate molestie. In lorem justo, posuere ut, pellentesque vitae, imperdiet in, libero.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque imperdiet tincidunt dui. Suspendisse urna ipsum, dapibus sit amet, tincidunt eu, elementum ac, leo. Ut tempus tempus augue. Nulla facilisi. Aenean convallis fringilla pede. Pellentesque pretium dapibus tortor. Cras iaculis diam at odio. Pellentesque hendrerit, ante ut lobortis facilisis, magna nisi molestie diam, ac tempus magna ipsum id turpis. Fusce lacinia, dolor quis luctus ultrices, tellus enim tincidunt mi, sit amet vestibulum pede urna non justo. Suspendisse ornare neque congue tortor. Curabitur et urna sit amet ligula vulputate molestie. In lorem justo, posuere ut, pellentesque vitae, imperdiet in, libero.</p>
</div>
</div>
<div id="zapati">
© Martin Domes: 333 tipů a triků pro CSS
</div>
</div>
</body>
</html>
Zvýrazněný je obrázek, který se zobrazí uprostřed. Třeba Ti toto pomůže :-) |
||
| Petr ZZZ Profil |
#4 · Zasláno: 17. 11. 2010, 01:11:17
Joan:
„…knížku 333 tipů a triků pro CSS od Martina Domese…“ Zkoušela jsi ten kód? Přinejmenším v IE6 je to divně rozhozené. Hm… |
||
| Bubák Profil |
#5 · Zasláno: 17. 11. 2010, 01:53:37
http://interval.cz/clanky/objekt-mezi-odstavci/
Nechal jsem si udělat screenshot v IE6 a vypadá dobře. Ale není to přesně to, co gallo hledá, a myslím si, že na jeho problém v HTMl/CSS neexistuje řešení. gallo: Když to umíš ve Wordu, kde takové obtékání je možné, zkus výslednou stránku uložit do HTML a výsledek si zobrazit v prohlížeči. |
||
| gallo Profil |
#6 · Zasláno: 17. 11. 2010, 12:30:39
Noo snad to bude stačiť :) dekuju všem za radu :)
|
||
|
Časová prodleva: 13 let
|
|||
0