<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2"> <title>Weblap CSS megoldással</title> <link rel="stylesheet" href="proba.css" type="text/css"> </head> <body> <div id="egesz"> <div id="felso"> <h1>Főcím</h1> <div id="felsonavi"> <a href="css.html" target="_blank">Az oldal CSS kódja</a> <a href="htmlkod.html" target="_blank">Az oldal HTML kódja</a> <a href="#">Harmadik</a> <a href="#">Negyedik</a> </div> </div> <div id="balnavi"> <div id="linkek"> <ul> <li><a href="#">Első</a></li> <li><a href="#">Második</a></li> <li><a href="#">Harmadik</a></li> <li><a href="#">Negyedik</a></li> <li><a href="#">Ötödik</a></li> <li><a href="#">Hatodik</a></li> </ul> </div> <p> A Fireworks szerkesztőben "Alpha transparency" módban elmentett .gif kép:<br> PNG 8 formátum esetén az átmenetes áttetszőséget is támogatja.<br> Megjelenítése böngészőnként eltérhet. </p> <img src="AG00013_.GIF" width="150" height="120" alt=".gif kép" title="alpha transparency"> <p> "Index transparency" módba elmentett .gif kép:<br> a színek kiválasztásával meghatározott átlátszóságot támogatja. </p> <img src="indextransparent1.gif" width="150" height="120" alt=".gif kép" title="index transparency"> </div> <div id="jobbnavi"> <img src="indextransparent1.gif" width="150" height="120" alt=".gif kép"> <p class="kiemeles"> p img{ float:right; margin-left:10px; margin-bottom:10px; margin-right:10px;} </p> <img src="egy.gif" width="150" height="120" alt=".gif animáció"> <p class="kiemeles"> .masodik p img{ float:left; margin-right:10px; margin-bottom:5px; margin-left:5px;} </p> <p> Az öröklődés miatt a bekezdés dőlt betűs lenne. A "tartalom" bekezdésére dőlt betűt írtam elő. Ha ezen változtatni szeretnék, akkor ebben a "DIV" részben lévő bekezdésre új stílust kell megadni a CSS lapon. </p> <p> A jobb és baloldali navigációra kiadott<br> <span class="minheight">min-height</span><br> értékek az IE6 és kisebb verziószámú változatainál nem működnek. </p> </div> <div id="tartalom"> <h2>Alcím</h2> <p> <img src="kep1.jpg" width="230" height="180" alt="kályha" title="kép beillesztése"> Ide jön a szöveges tartalom, kép, stb.<br> Ha képet is beszúrunk, azt a float jellemzővel tudjuk szabályozni.<br> A CSS lapon a "p img {}"<br> utasítással tudjuk beállítani a szöveg és a kép viszonyát.<br> Ha elérjük a kép alját, a szöveg a teljes bekezdés hosszában folytatódik.<br> A margin utasítás left:érték a kép bal oldalától való távolságot adja meg, a margin-bottom:érték megadásával a szöveg kép aljától való távolságát tudjuk beállítani. </p> <h3>Kiscím</h3> <div class="masodik"> <p> <img src="kep1.jpg" width="230" height="180" alt="kályha" title="kép beillesztése"> A következő bekezdést formázhatjuk másként is. Ezt megtehetjük külső CSS lapon is, de a dokumentumunkban is. <br> A kép melletti értékeket fordítva kell megadni az előző helyzet képest.<br> "float:left".<br> A margin-bottom utasítással itt is a kép aljától való távolságot szabályozhatjuk.<br> A bekezdésnek megadott bal oldali csík a szöveggel együtt nő. A bekezdésre kiadott szövegigazítás a <span class="kiemeles">text-align:justify;</span>, azaz sorkizárt igazítás. A bekezdésre kiadott <span class="kiemeles">padding-right:10px</span> utasításra azért volt szükség, hogy a bekezdés jobb oldala az előző bekezdésben lévő kép jobb oldalával egy síkba kerüljön. </p> </div> </div><div id="webinfo">webinfo: A weblappal kapcsolatos információkat helyezhetünk el itt.</div> </div> </body> </html>