Szöveget görgető ablak <iframe>
Weboldalon belüli keret létrehozását teszi lehetővé.
Felhasználható egy HTML oldal beágyazására egy másik HTML oldalba.
<iframe scr="..." width="..." height="..." marginwidth=".." marginheight=".." frameborder=".." longdesc="elérési_út.html" id="..." name="...." scrolling="..." > </iframe>
Első html lap görgetése! |
Szöveg görgetése
A szöveg görgetésének megjelenítéséhez, kettő html lapot készítünk.
Első html lap, melyen megjelenik a görgető ablak.
Készítünk egy táblázatot, mely egyetlen egy td cellából áll.
A td cellába írjuk be az iframe kezdő és záró címkét.
A kezdő iframe címkébe írjuk azon meghatározást, mely bekéri a második, azaz azon html lapunk tartalmát melyben megírtuk a dokumentumunkat, és meghatározzuk a gorgető ablak szélességét és magasságát.
Példa:
<div id="gorgetes>
<table>
<tr>
<td valign="top">
<p class="boxcim"> Ide írt szöveg megjelenik, de nem görgethető </p>
<iframe src="gorgetendo.html" frameborder="0" width=430 height=295> </iframe>
</td>
</tr>
</table>
</div>
Második html lap:
Készítünk egy táblázatot, mely egyetlen egy td cellából áll.
A táblázat szélessége ne legyen nagyobb, mint az első html lapon lévő iframe kezdő címkéjében megadott szélesség.
Az itt megadott szélességben, el kell férni az oldalsó görgetősávnak is.
Ha a szélességet nagyobbra vesszük, akkor a görgető ablakban nem fér el szövegünk.
Ilyenkor nem csak lefelé kell a szöveget görgetni, hanem az alsó görgető sávval jobbra és balra is kell mozgatni, hogy olvasható legyen.
A td cellába írjuk be, dokumentumunk tartalmát, és formázzuk meg.
A megírt szöveget és hátterét, formázhatjuk közvetlen a html lapon, vagy a hozzá tartozó css, azaz stíluslapon.
A dokumentumunkat tartalmazó html lapnak nem kell teljes fejlécet készíteni, elég ha a kezdő és a záró html címkék közé helyezzük el, mint a lenti példában is látható.
Példa:
<html>
<head>
<title> Ide írjuk dokumentumunk elnevezését.</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="stíluslapunk fájl neve.css" rel="stylesheet" type="text/css" />
</head>
<body>
<table width="389" border="0" cellpadding="0" cellspacing="0">
<tr class="szovegbox">
<td width="387" bgcolor="#FF0000">
<p> Írjuk be a dokumentumunk anyagát. Nem csak egy, hanem több bekezdést is készíthetünk.
</p>
</td>
</tr>
</table>
</body>
</html>
2. Görgetés, div szakszban, egy táblázatban és egyetlen td cellában!
Megírása a görgető html lapon!
<div id="gorgetes_002">
<table>
<tr>
<td valign="top">< p class="pkettogordul">2. görgetendő cellában!
<IFRAME src="gorgetendo_002_html.html" frameborder="0" width=260 height=295> </iframe>
</td>
</tr>
</table>
</div>
Megírása a görgető html lap stílusának, css fájlban!
#gorgetes_002 {width: 300px; margin-top: 40px; margin-left: 250px; margin-bottom: 50px; padding: 10px; background-color: #f63;}
#gorgetes_002 table {width: 254px; height: 360px; border: 2px solid #ffffff;}
td {padding-top: 20px; background-color: #FE0000;}
.pkettogordul {text-align: center; color: #fc0;}
Megjelenő szöveg megírása!
A megjelenő szöveget külön, azaz másik html lapon írjuk meg.
A body szakaszban elhelyezünk egy táblázatot, melyben egy td cella szerepel, és ebbe a cellába írjuk meg dokumentumunkat.
Szöveg és annak hátere formázható közvetlen a külső html lapon, vagy az ahhoz csatolt stíluslapon.
002_html görgetése cellában! |
Görgetés, két külön div szakszban, egymás mellett!
Megírása a görgető html lapon!
<div id="gorget_2div">
<div id="gorgetes_003">
<p class="p3gordul">3. görgetés, div szakaszban!
<IFRAME src="gorgetendo_001_html.html" frameborder="0" width=260 height=295></iframe>
</div>
<div id="gorgetes_004">
<p class="p3gordul">4. görgetés, div szakaszban!
<IFRAME src="gorgetendo_002_html.html" frameborder="0" width=260 height=295></iframe>
</div>
</div>
Megírása a görgető html lap stílusának, css fájlban!
#gorget_2div {width: 700px; margin-left: 20px; padding: 25px 0px 25px 0px; background-color: #f96;}
#gorgetes_003 {float: left; width: 300px; margin: 0px 25px 0px 25px; border: 1px solid #ffffff; background-color: #f63;}
#gorgetes_004 { width: 300px; border: 1px solid #ffffff; background-color: #f63;}
#gorget_2div table {width: 254px; height: 360px; border: 2px solid #ffffff;}
.p3gordul {text-align: center; color: blue;}
td {padding-top: 20px; background-color: #FE0000;}
Megjelenő szöveg megírása!
A megjelenő szöveget külön html lapon írjuk meg.
Szöveg és annak hátere formázható közvetlen a külső html lapon, vagy az ahhoz csatolt stíluslapon.
Görgetés, két külön div szakszban, egymás mellett!
3. görgetés, div szakaszban!
4. görgetés, div szakaszban!
Görgetés táblázatban, egymás melletti td cellában!
Megírása a görgető html lapon!
<table cellspacing="25">
<tr><td>
<p class="p2cella">3. görgetendő, td cellában!
<IFRAME src="gorgetendo_001_html.html" frameborder="0" width=260 height=295></iframe>
</td><td>
<p class="p2cella">4. görgetendő, td cellában!
<IFRAME src="gorgetendo_002_html.html" frameborder="0" width=260 height=295></iframe>
</td></tr>
</table>
</div>
Megírása a görgető html lap stílusának, css fájlban!
#gorget_2cella {width: 700px; margin-top: 40px; margin-left: 20px; margin-bottom: 50px; padding: 10px; background-color: #f63;}
#gorget_2cella table { width: 95%; border: 1px solid #fc0;}
.p2cella {text-align: center; color: #ffffff;}
#gorget_2cella td { border: 1px solid #ffffff;}
Megjelenő szöveg megírása!
A megjelenő szöveget külön html lapon írjuk meg.
Szöveg és annak hátere formázható közvetlen a külső html lapon, vagy az ahhoz csatolt stíluslapon.
Görgetés táblázatban, egymás melletti td cellában!
|
3. görgetendő, td cellában! |
4. görgetendő, td cellában! |