3 hasábos oldal. Hogyan?
fajl1.html = fejléc
fajl2. html = tartalom - ezt kéne 3 részre osztani.
baszik egymás mellé tenni a hasábokat... érdekes gépen műxik, de ha felrakom szerverre ott nem
<center>
<div class='full_oldal'>
<div class='full_content'>
<div class='bal_oszlop'>
<div class='tavtarto'></div>
Ide jön a menü
</div>
<div class='kozepso_oszlop'>
<div class='tavtarto'></div>
Ide a tartalom
</div>
<div class='jobb_oszlop'>
<div class='tavtarto'></div>
ide meg a vb állás
</div>
</div>
</div>
<LINK REL="StyleSheet" HREF="css.css" TYPE="text/css">
</center>
div {
position: relative;
top: 0px;
left: 0px;
overflow: hidden;
padding: 0px;
margin: 0px;
}
div.tavtarto {
width: 0px;
height: 550px;
float: left;
}
div.full_oldal {
width: 1000px;
margin: 0px auto 0px auto;
}
div.full_content {
width: 1000px;
}
div.bal_oszlop {
width: 150px;
float: left;
}
div.kozepso_oszlop {
width: 700px;
float: left;
}
div.jobb_oszlop {
width: 150px;
float: left;
}
Nézd át az oldala forráskódját.. egy kissé helytelen. Nem lehet több body,html és head tag. Egy oldalon mindegyikből egy záró és nyitó tag lehet valahogy így:
<html>
<head>
ide jön a title, css, scriptek
</head>
<body>
ide jön az oldalad teljes tartalma amit meg akarsz jeleníteni
</body>
</html>
Hasábokra használja táblát valahogy így:
<table border="0" width="100%">
<tr><td colspan="3">egy egész sor, gondolom a menünek</td></tr>
<tr><td>első hasáb</td><td>második hasáb</td><td>harmadik hasáb</td></tr>
</table>
<link rel>, <meta>, <script>, <style>, <title> mehet CSAK a <head> részbe.
Minden egyéb a <body>-ba.
fajl 1 html: fejléc:
<html>
<TITLE>Minden ami F1, GP2 illetve 4 keréken gurul</TITLE>
<head>
<CENTER><img src="cuccok/fejlec.jpg" alt="Angry face" /></CENTER>
</head>
<body>
<body bgcolor=green text=yellow vlink=green alink=cyan link=magenta>
</body>
</html>
fajl 2 html: tartalom:
<div style="position:relative; width: 400px;">
<div style="float: right; text-align: left; width:200px;"></div>
<CENTER>Világbajnokság állása</CENTER>
<br>
<CENTER><table>
<tr>
<td>Hely</td>
<td>Pilóta</td>
<td>Pont</td>
</tr>
<tr>
<td>1</td>
<td>Sebastian Vettel</td>
<td>374</td>
</tr>
<tr>
<td>2</td>
<td>Jenson Button</td>
<td>255</td>
</tr>
<tr>
<td>3</td>
<td>Fernando Alonso</td>
<td>245</td>
</tr>
<tr>
<td>4</td>
<td>Mark Webber</td>
<td>233</td>
</tr>
<tr>
<td>5</td>
<td>Lewis Hamilton</td>
<td>227</td>
</tr>
</table>
<div style="float: middle; text-align: center; width:200px;"></div>
<CENTER>köszöntelek!</CENTER>
<p><CENTER>Ezt az oldalt azért hoztam létre hogy legyen mit nézni az F1 rajongóknak.</CENTER></p>
<p><CENTER>Lesz majd mindenféle info meg minden amit akarsz</CENTER></p>
<div style="float: left; text-align: left; width:200px;"></div>
</div>
</CENTER>
fajl 3 html lábléc:
<html>
<head>
</head>
<body>
<body bgcolor=yellow text=black vlink=green alink=cyan link=magenta>
<br>
<br>
<CENTER>@kopirájt izé satöbbi 2011</CENTER>
</body>
</html>
float: middle? Ilyen nincs!
Elég, ha float: left-et adsz mindhárom hasábnak, és szépen egymás mellé pakolja őket, ha van elég hely.
css.css fájlt töltsd fel a szerverre a megfelelő tartalommal!
<html>
<title>Minden ami F1, GP2 illetve 4 keréken gurul</title>
<head>
<LINK REL="StyleSheet" HREF="css.css" TYPE="text/css">
</head>
<body bgcolor=green text=yellow vlink=green alink=cyan link=magenta>
<CENTER><img src="cuccok/fejlec.jpg" alt="Angry face" /></CENTER>
<div style="position:relative; width: 400px;">
<div style="float: right; text-align: left; width:200px;"></div>
<CENTER>Világbajnokság állása</CENTER>
<br>
<CENTER><table>
<tr>
<td>Hely</td>
<td>Pilóta</td>
<td>Pont</td>
</tr>
<tr>
<td>1</td>
<td>Sebastian Vettel</td>
<td>374</td>
</tr>
<tr>
<td>2</td>
<td>Jenson Button</td>
<td>255</td>
</tr>
<tr>
<td>3</td>
<td>Fernando Alonso</td>
<td>245</td>
</tr>
<tr>
<td>4</td>
<td>Mark Webber</td>
<td>233</td>
</tr>
<tr>
<td>5</td>
<td>Lewis Hamilton</td>
<td>227</td>
</tr>
</table>
<div style="float: middle; text-align: center; width:200px;"></div>
<CENTER>köszöntelek!</CENTER>
<p><CENTER>Ezt az oldalt azért hoztam létre hogy legyen mit nézni az F1 rajongóknak.</CENTER></p>
<p><CENTER>Lesz majd mindenféle info meg minden amit akarsz</CENTER></p>
<div style="float: left; text-align: left; width:200px;"></div>
</div>
</CENTER>
<br><br>
<CENTER>@kopirájt izé satöbbi 2011</CENTER>
</body>
</html>
Kapcsolódó kérdések:
Minden jog fenntartva © 2024, www.gyakorikerdesek.hu
GYIK | Szabályzat | Jogi nyilatkozat | Adatvédelem | Cookie beállítások | WebMinute Kft. | Facebook | Kapcsolat: info(kukac)gyakorikerdesek.hu
Ha kifogással szeretne élni valamely tartalommal kapcsolatban, kérjük jelezze e-mailes elérhetőségünkön!