[HTML] Table Layout + Iframe

Startpost-Retter

So.
Versuche mich auch mal an einem Tutorial.
Hoffe ich erklär es einigermaßen okay.
Ich hab es jetzt bei myblog gemacht, aber ihr könnt es soweit ich weiß auch bei allen anderen Anbietern machen.

So wird das Lay am Ende aussehen -klick-

Zuerst braucht ihr einen Header. Ich hab einen mit der Größe 400 x 600 genommen.
Wenn ihr den habt, könnt ihr anfangen mit dem coden.
Wir machen das jetzt Schritt für Schritt.

1. Schritt
Wenn ihr den Header habt, fügt ihn in folgenden Code ein.

code:
1:	html><body topmargin=15><center><img src="hier.die.addy.eures.bildes." width="600" height="400" style="border: 1px solid #b3b3b3"></center></body></html>

Die Größe müsst ihr ändern je nach Headergröße. Rand müsst ihr nicht machen, könnt ihr also auf 0px stellen. Hintergrund könnt ihr ja selbst ändern. 'TopMargin' heißt, dass der Header erst bei 15px anfängt, könnt ihn aber auch nach ganz oben oder so setzen, ist ja egal.

2. Schritt
Wenn ihr das habt, könnt ihr das Menü und den Content machen.

code:

1:
2:

<table width="602" border="1" cellpadding=3 cellspacing=3 style="border-collapse: collapse;" bordercolor="#b3b3b3"><tr><td width="100" align="left" valign="top">*Menü*
</td><td valign="top" width="500">*Content*</td></tr></table>

Rand könnt ihr wieder ändern, die Größe des Contents und des Menüs auch. Schaut nur, dass es die Gesamtweite nicht mehr aus 600px beträgt, da es sonst übersteht. Das *Menü* ändern wir beim nächsten Schritt, genauso wie das *Content*.

3. Schritt
Nun kommt der Content dran. Für das *Content* setzt ihr den folgenden Code ein.

code:
1:	<iframe src="eure.seite." name="content" frameborder="1" width="500" height="170"></iframe>

Die Breite müsst ihr ggf. ändern, kommt halt auf euer Headerbild an. Eure Seite müsst ihr nur noch ändern und den Namen 'Content' könnt ihr auch ändern, aber dann müsst ihr es auch bei dem Menü machen. Und das beim nächsten Schritt.

4.Schritt
Anstatt dem *Content* setzen wir jetzt folgenden Code ein.

code:

1:
2:
3:
4:

<a href="eure zusatzseite" target="content">Link</a><br>
<a href="eure zusatzseite" target="content">Link</a><br>
<a href="eure zusatzseite" target="content">Link</a><br>
<a href="eure zusatzseite" target="content">Link</a><br>

Also immer eure Zusatzseiten. Vergesst auf keinen fall das Target="content". Wenn ihr den Content oben anders benannt habt, müsst ihr es hier natürlich auch so nennen. Das bezweckt nämlich, dass sich die Seiten auch im Content öffnen. Es ist egal, wieviele Zusatzseiten ihr macht, das Menü wächst ja immer mit.

5. Schritt
So. Eigentlich seid ihr nun fertig.
Jetzt könnt ihr noch CSS anpassen. Also Linkeffekte ect.
Das macht ihr genauso wie bei einem normalen Layout.

So, ich hoffe, es ist kein Fehler drin & ich hab es einigermaßen verständlich erklärt.

Lilly17

Hey...
danke für das Tutorial... musste ein bisschen rumprobieren, damit es funktioniert, aber ohne deine Hilfe hätte ich es nicht geschafft, danke Augenzwinkern

Habe allerdings einen Fehler gefunden
Bei Schritt 4 hast du geschrieben, man solle *Content* ersetzen, es müsste aber *Menü* heißen.
Also, vielen Dank, war gut erklärt und hat super geklappt.

Sallysha

Echt cool erklärt, klappt alles suer!

mrs.sun

hä??? bei mir ist das aber dann mit scrollbalken!!!!

mrs.sun

ok

http://derpferdemarkt.pyrokar.lima-city.de/test.htm

code:

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<meta name="GENERATOR" content="Microsoft FrontPage 4.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<title>Pferdemarkt</title>
</head>




<body> <left><img src="http://derpferdemarkt.pyrokar.lima-city.de/header.jpg" width="600" height="400" style="border: 1px solid #b3b3b3"><table width="602" border="1" cellpadding=3 cellspacing=3 style="border-collapse: collapse;" bordercolor="#b3b3b3"><tr><td width="100" align="left" valign="top">
<iframe src="http://derpferdemarkt.pyrokar.lima-city.de/menu.htm" name="menu" frameborder="1" width="100" height="170"></iframe>
</td><td valign="top" width="500">
<iframe src="http://derpferdemarkt.pyrokar.lima-city.de/willkommen.htm" name="main" frameborder="1" width="500" height="170"></iframe></td></tr></table>


</body></html>

mrs.sun

will uns den keiner helfen????

mrs.sun

Also bei mir velängert der das main bei einem langen text net!!!

http://derpferdemarkt.pyrokar.lima-city.de/test.htm

siehe Was ist Pferdemarkt???

mrs.sun

????

-Katja-

Bei mir ist der auch nur 170 hoch und passt sich net an oO
Aber egal XD

Runner

ich weiß nich was falsch is, aba i-wie wird des nichts egal wie oft ich es probiere, kann mir jemand sagen wo der fehler liegt??

http://sandramurmel16.sa.funpic.de/myworld/diylay.htm

Vici

Funktioniert astrein, herzlichen dank! (;

Milka

Meinst du mit Header die Grafik die da oben bei deinem Beispiel desi is wo allein draufsteht?

MILKA

Runner

code:

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:
48:
49:
50:
51:
52:
53:
54:
55:
56:
57:
58:
59:
60:
61:
62:
63:
64:
65:
66:
67:
68:
69:
70:
71:
72:
73:
74:
75:
76:
77:
78:
79:
80:
81:
82:
83:
84:
85:
86:
87:
88:
89:
90:
91:
92:
93:
94:
95:
96:
97:
98:
99:
100:
101:
102:
103:

<html>
<head>
<style>body 
{cursor:crosshair};a:hover{cursor:crosshair;}</style>
<style type="text/css">
BODY {
SCROLLBAR-FACE-COLOR: ffffff;
<BR>SCROLLBAR-HIGHLIGHT-COLOR: black;
<BR>SCROLLBAR-SHADOW-COLOR: ffffff;
<BR>SCROLLBAR-3DLIGHT-COLOR: FFFFFF;
<BR>SCROLLBAR-ARROW-COLOR: #ffc8ff;
<BR>SCROLLBAR-TRACK-COLOR: #FFC8FF;
<BR>SCROLLBAR-DARKSHADOW-COLOR: ffffff<BR>}
<!-- 
A:link {text-decoration: underline; } 
A:visited {text-decoration: underline; } 
A:hover {text-decoration: underline; position: relative; top: 1; left: 1;} 
A:active {text-decoration: none; } 
//--> 
 </style>
<script language="JavaScript">
var message="";
function clickIE() {if (document.all) {(message);return false;}}
function clickNS(e) {if 
(document.layers||(document.getElementById&&!document.all)) {
if (e.which==2||e.which==3) {(message);return false;}}}
if (document.layers) 
{document.captureEvents(Event.MOUSEDOWN);document.onmousedown=clickNS;}
else{document.onmouseup=clickNS;document.oncontextmenu=clickIE;}
</script>
 <script language="JavaScript1.2"> 
function disableselect(e){
return false
}
function reEnable(){
return true
}
document.onselectstart=new Function ("return false")
if (window.sidebar){
document.onmousedown=disableselect
document.onclick=reEnable
}
</script>
<title>tablelay</title>
</head>
<body bgcolor="#000000" link="#FFFFFF" vlink="#FFFFFF" alink="#FFFFFF">
<center>
<table width="772" bordercolor="#FFFFFF" bordercolordark="#FFFFFF">
  <tr>
    <td width="796" align="left" valign="top" background="menue.jpg" colspan="2">
      <p align="center"><font color="#FFFFFF"><img border="0" src="header.png" width="800" height="350"></font></p>
    </td>
  </tr>
  <tr>
    <td width="164" align="left" valign="top" background="menue.jpg">
      <p align="center"><font color="#FFFFFF"><b><font face="Verdana" size="1">Home</font></b><font face="Verdana" size="1"><br>
      <a href="home.htm" target="home" style="text-decoration: none">
      Clear</a><br>
      <a href="Sonstiges/impressum.htm" target="home" style="text-decoration: none">
      Impressum</a><br>
      <a href="http://gbweb.de/gb.pl?momentfotos" target="home" style="text-decoration: none">
      Gästebuch</a><br>
      <a href="Sonstiges/link.htm" target="home" style="text-decoration: none">
      Links</a><br>
      <br>
      <b>Fotografieren</b><br>
      <a href="ueber%20mich/sandra.htm" target="home" style="text-decoration: none">
      Profil</a><br>
      <a href="ueber%20mich/meine_kamera.htm" target="home" style="text-decoration: none">
      Ausrüstung</a><br>
      <a href="termine.htm" target="home" style="text-decoration: none">
      Termine</a><br>
      <br>
      <b>Bilder<br>
      </b><a href="galerie/neuestes_bild.htm" target="home" style="text-decoration: none">Neuestes Bild</a><br>
      <a href="galerie/galerie.htm" target="home" style="text-decoration: none">
      Galerie</a><br>
      <a href="archiv/archiv.htm" target="home" style="text-decoration: none">
      Archiv</a><br>
      </font></font></td>
    <td valign="top" width="632" background="main.jpg">
      <p align="center"><font color="#FFFFFF"><br>
      </font><font color="#FFFFFF" face="Verdana" size="1"><br>
      Ich begrüße sie herzlichst auf meiner Homepage. </font></p>
      <p align="center"><font color="#FFFFFF" face="Verdana" size="1">Hier möchte
      ich ihnen mein Hobby das Fotografieren näher zeigen. Es ist eines meiner
      größten Hobbys,<br>
      allerdings habe ich noch sehr wenig Erfahrung mit meiner neuen Kamera.
      Trotzdem versuche ich jede Gelegenheit zu packen um mehr Erfahrung mit dem
      Umgang dieser Kamera<br>
      zu sammeln und bessere Fotos zu machen.<br>
      <br>
      Schauen sie sich doch etwas um.<br>
      </font></p>
      <p align="center"><font color="#FFFFFF" face="Verdana" size="1">Sandra
      Polanetzki</font>
    </td>
  </tr>
</table>
</center>    
</body>
</html>

aber es öffnet sich nicht im home frame...und ich weiß nicht wie ich das hinbekomme...
so sieht mein code jetzt aus,aber irgendwie...naja funktioniert das nicht so richtig -.-...ich kriegs einfach net hin...

SammyLG

Hat sich erledigt. großes Grinsen

Atani

also, bei mir funktioniert das nicht? ich hab immer den Scrollbalken im Iframe und verlängern tun die sich demnach auch nicht unglücklich

kann mir jemand sagen, wo der Fehler liegt?

Zitat:

<html>
<head>
<title> layouttest 1 </title>
</head>
<body bgcolor="#000000">
<body topmargin=15><center><img src="Enter01.jgp" width="480" height="180" style="border: 1px solid #b3b3b3">

<table width="480" border="1" cellpadding=3 cellspacing=3 style="border-collapse: collapse;" bordercolor="#b3b3b3">
<tr>
<td width="100" align="left" valign="top">
<iframe src="menu.htm" name="menu" frameborder="1" width="100" height="170"></iframe></td>
<td valign="top" width="380">
<iframe src="content.htm" name="content" frameborder="1" width="380" height="170"></iframe></td>
</tr>
</table>

</body>
</html>

Daran ändert sich auch nichts, wenn ich "height" ändere. Dann sind nur die Frames länger, aber noch immer mit eigenem Scrollbalken.

Hier ein Beispiel --> klick

Pöni

hab das selbe problem.

habs gelöst:

code:

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:
48:
49:
50:
51:
52:
53:
54:
55:
56:
57:
58:
59:
60:
61:
62:
63:
64:
65:
66:
67:
68:
69:
70:
71:
72:
73:
74:
75:
76:
77:
78:
79:
80:

<html>
<head>
<title>[B]Dein Titel[/B]</title>
</head>

[B]<body topmargin=10 link="#000000" vlink="#000000" alink="#000000">[/B]
<center><img src="[B]http://home.arcor.de/noralien/header.jpg[/B]" width="[B]600[/B]" height="
[B]300[/B]" style="border: 0px solid #ffffff"></center>


<center><table width="602" border="1" cellpadding=3 cellspacing=3 style="border-collapse: collapse;" bordercolor="#ffffff">
<tr>
<td width="150" align="left" valign="top">
<p align="center">

<font color="#000000"> <font size="2"> 
<a href="Menulink, Z.b. http://home.arcor.de/dein.account.name/home.html"><font face="Arial">Start</font></a><br>
<a href="Menulink, Z.b. http://home.arcor.de/dein.account.name/home.html"><font face="Arial">Start</font></a><br>
<a href="Menulink, Z.b. http://home.arcor.de/dein.account.name/home.html"><font face="Arial">Start</font></a><br>

</font>
</font>




</td>
<td valign="top" width="450">

<font color="#000000">
TEXT IM TEXTFRAME
Text Text Text Text Text Text Text Text Text Text Text Text Text 
Text Text Text Text Text Text Text Text Text Text Text Text Text 
Text Text Text Text Text Text Text Text Text Text Text Text Text 
Text Text Text Text Text Text Text Text Text Text Text Text Text 
Text Text Text Text Text Text Text Text Text Text Text Text Text 
Text Text Text Text Text Text Text Text Text Text Text Text Text 
Text Text Text Text Text Text Text Text Text Text Text Text Text 
Text Text Text Text Text Text Text Text Text Text Text Text Text 

Text Text Text Text Text Text Text Text Text Text Text Text Text 
Text Text Text Text Text Text Text Text Text Text Text Text Text 
Text Text Text Text Text Text Text Text Text Text Text Text Text 
Text Text Text Text Text Text Text Text Text Text Text Text Text 
Text Text Text Text Text Text Text Text Text Text Text Text Text 
Text Text Text Text Text Text Text Text Text Text Text Text Text 
Text Text Text Text Text Text Text Text Text Text Text Text Text 
Text Text Text Text Text Text Text Text Text Text Text Text Text 
Text Text Text Text Text Text Text Text Text Text Text Text Text 
Text Text Text Text Text Text Text Text Text Text Text Text Text 
Text Text Text Text Text Text Text Text Text Text Text Text Text 
Text Text Text Text Text Text Text Text Text Text Text Text Text 

Text Text Text Text Text Text Text Text Text Text Text Text Text 
Text Text Text Text Text Text Text Text Text Text Text Text Text 
Text Text Text Text Text Text Text Text Text Text Text Text Text 
Text Text Text Text Text Text Text Text Text Text Text Text Text 
Text Text Text Text Text Text Text Text Text Text Text Text Text 
Text Text Text Text Text Text Text Text Text Text Text Text Text 
Text Text Text Text Text Text Text Text Text Text Text Text Text 
Text Text Text Text Text Text Text Text Text Text Text Text Text 
Text Text Text Text Text Text Text Text Text Text Text Text Text 
Text Text Text Text Text Text Text Text Text Text Text Text Text 

Text Text Text Text Text Text Text Text Text Text Text Text Text 
Text Text Text Text Text Text Text Text Text Text Text Text Text 
Text Text Text Text Text Text Text Text Text Text Text Text Text 
Text Text Text Text Text Text Text Text Text Text Text Text Text 
Text Text Text Text Text Text Text Text Text Text Text Text Text 
Text Text Text Text Text Text Text Text Text Text Text Text Text 
Text Text Text Text Text Text Text Text Text Text Text Text Text 
Text Text Text Text Text Text Text Text Text Text Text Text Text 
Text Text Text Text Text Text Text Text Text Text Text Text Text 
Text Text Text Text Text Text Text Text Text Text Text Text Text 
</font>

</td>
</tr>
</table>

Pöni

Zitat:

Original von Pöni
hab das selbe problem.

habs gelöst:

code:

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:
48:
49:
50:
51:
52:
53:
54:
55:
56:
57:
58:
59:
60:
61:
62:
63:
64:
65:
66:
67:
68:
69:
70:
71:
72:
73:
74:
75:
76:
77:
78:
79:
80:

<html>
<head>
<title>Dein Titel</title>
</head>

<body topmargin=10 link="#000000" vlink="#000000" alink="#000000">
<center><img src="http://home.arcor.de/noralien/header.jpg" width="600" height="
300" style="border: 0px solid #ffffff"></center>


<center><table width="602" border="1" cellpadding=3 cellspacing=3 style="border-collapse: collapse;" bordercolor="#ffffff">
<tr>
<td width="150" align="left" valign="top">
<p align="center">

<font color="#000000"> <font size="2"> 
<a href="Menulink, Z.b. http://home.arcor.de/dein.account.name/home.html"><font face="Arial">Start</font></a><br>
<a href="Menulink, Z.b. http://home.arcor.de/dein.account.name/home.html"><font face="Arial">Start</font></a><br>
<a href="Menulink, Z.b. http://home.arcor.de/dein.account.name/home.html"><font face="Arial">Start</font></a><br>

</font>
</font>




</td>
<td valign="top" width="450">

<font color="#000000">
TEXT IM TEXTFRAME
Text Text Text Text Text Text Text Text Text Text Text Text Text 
Text Text Text Text Text Text Text Text Text Text Text Text Text 
Text Text Text Text Text Text Text Text Text Text Text Text Text 
Text Text Text Text Text Text Text Text Text Text Text Text Text 
Text Text Text Text Text Text Text Text Text Text Text Text Text 
Text Text Text Text Text Text Text Text Text Text Text Text Text 
Text Text Text Text Text Text Text Text Text Text Text Text Text 
Text Text Text Text Text Text Text Text Text Text Text Text Text 

Text Text Text Text Text Text Text Text Text Text Text Text Text 
Text Text Text Text Text Text Text Text Text Text Text Text Text 
Text Text Text Text Text Text Text Text Text Text Text Text Text 
Text Text Text Text Text Text Text Text Text Text Text Text Text 
Text Text Text Text Text Text Text Text Text Text Text Text Text 
Text Text Text Text Text Text Text Text Text Text Text Text Text 
Text Text Text Text Text Text Text Text Text Text Text Text Text 
Text Text Text Text Text Text Text Text Text Text Text Text Text 
Text Text Text Text Text Text Text Text Text Text Text Text Text 
Text Text Text Text Text Text Text Text Text Text Text Text Text 
Text Text Text Text Text Text Text Text Text Text Text Text Text 
Text Text Text Text Text Text Text Text Text Text Text Text Text 

Text Text Text Text Text Text Text Text Text Text Text Text Text 
Text Text Text Text Text Text Text Text Text Text Text Text Text 
Text Text Text Text Text Text Text Text Text Text Text Text Text 
Text Text Text Text Text Text Text Text Text Text Text Text Text 
Text Text Text Text Text Text Text Text Text Text Text Text Text 
Text Text Text Text Text Text Text Text Text Text Text Text Text 
Text Text Text Text Text Text Text Text Text Text Text Text Text 
Text Text Text Text Text Text Text Text Text Text Text Text Text 
Text Text Text Text Text Text Text Text Text Text Text Text Text 
Text Text Text Text Text Text Text Text Text Text Text Text Text 

Text Text Text Text Text Text Text Text Text Text Text Text Text 
Text Text Text Text Text Text Text Text Text Text Text Text Text 
Text Text Text Text Text Text Text Text Text Text Text Text Text 
Text Text Text Text Text Text Text Text Text Text Text Text Text 
Text Text Text Text Text Text Text Text Text Text Text Text Text 
Text Text Text Text Text Text Text Text Text Text Text Text Text 
Text Text Text Text Text Text Text Text Text Text Text Text Text 
Text Text Text Text Text Text Text Text Text Text Text Text Text 
Text Text Text Text Text Text Text Text Text Text Text Text Text 
Text Text Text Text Text Text Text Text Text Text Text Text Text 
</font>

</td>
</tr>
</table>

EDIT: nur hab ich jetzt das problem, dass sich die links in einem neuen fenster öffnen -.-
kann mir wer sagen, wo ich das ändern kann?

Fleur

Hi,
ich hab eine Frage. Bei meinem Design brauch ich jetzt keine BG Farbe bei den Frames sondern n Bild, wie muss ich das einfügen?

VRH Pferde

hab leider auch das prob. mit den scrollbars und dass es sich net anpasst

Audrey

Bei mir ist der Scrollbalken auch da... wieso?

nächste Seite

Forensoftware: Burning Board, entwickelt von WoltLab GmbH