Antworten zum Thema „wie I-Frame definieren?“

reenebald · 09.03.2007

Hi!
Und zwar hab ich mit Photoshop ein Design entworfen das ich jetzt "programmieren" möchte. Ich hab das Design in ImageReady gesliced (Die einzelnen Buttons + Contentbereich). Danach hab ich mir die .html Datei sowie die bilder ausgeben lassen.

Die .html Datei hab ich dann in Dreamweaver geöffnet. Klappt auch alles gut soweit...nur möchte ich jetzt eben diesem Contentbereich einen I-Frame zuweisen. DerCode dazu sieht so aus:

Code:

<td colspan="7" rowspan="8">
			<img src="Bilder/kingscards_22.png" width="531" height="402" alt=""></td>

wie leg ich da jetz nen iframe fest? einfach <iframe> davor und am schluss </iframe> funzt nich *G*

Außerdem möchte ich noch, das in diesem iframe eine bildlaufleiste ist falls der inhalt mal größer ist. Zudem sollte sich das Design NICHT verschieben wenn der Text in der Breite zu groß wird...da solte dann einfach ein absatz kommen.

philip-h · 09.03.2007

AW: wie I-Frame definieren?

Code:

<iframe src="home.html" style="border:0px #FFFFFF none;" name="inhalt" frameborder="0" marginheight="0px" marginwidth="0px" height="390" width="900"></iframe>

reenebald · 09.03.2007

AW: wie I-Frame definieren?

Hi du!
Danke für die Antwort. Wenn ich jedoch deinen Code mit dem Austausche dann verschiebt sich wieder alles

kann mir das evtl. jemand schnell machen?

ich hab im grunde nur ein simples Design...
so siehts ungefähr aus:

Code:

|        HEADERBEREICH          |
__________________________
|Button|Button|Button|         |
__________________________
|Button|                   |Button|
|Button|  Content       |Button|
|Button|____________|Button|

Ich möchte, wenn ich jetz auf irgend nen Butotn klicke das mir der Inhalt dann im Content angezeigt wird. Der Content is zwar nen Hintergrundbild, jedoch im Prinzip nur ne Farbe....Ich will jetzt einfach auf diesen Contentbereich nen Frame legen aber peil echt nicht wie

Ich hab die Dateien mal als .rar hochgeladen. Eventuell ist ja jemand so nett und bindet mir den iframe eben ein

gruß

ps: hier die dateien

reenebald · 09.03.2007

AW: wie I-Frame definieren?

hab die seite jetzt mal hochgeladen....sieht auch so aus wie ich es haben möchte...einen link (Shop) hab ich auch schon gesetzt....vielleicht versteht ihr jetzt besser was ich meine...kann das immer nich so gut erklären

also ich möchte, wenn man auf so ne "karte" klickt bzw. oben in der Navigation, das der jeweilige Inhalt unten im Contentbereich angezeigt wird. Sollte der Inhalt länger werden soll ein Scrollbalken kommen.
das ganze müsste ja mit nem i-frame funktionieren...jedoch hab ich absolut KEINEN plan wie ich den iframe dafür definiere und wie die einstellungen sind das es mir nicht das ganze design zerstört

////// EDIT ///////
natürlich den link vergessen *lol*

ich poste jetz hier mal den code der seite :

Code:

<html>
<head>
<title>Kings-Cards.com</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
body {
	background-color: #000033;
}
-->
</style></head>
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<div align="center">
  <!-- ImageReady Slices (kingscards.psd) -->
  <table id="Tabelle_01" width="801" height="601" border="0" cellpadding="0" cellspacing="0">
    <tr>
      <td colspan="16">
        <img src="Bilder/kingscards_01.png" width="800" height="101" alt=""></td>
	    <td>
		    <img src="Bilder/spacer.gif" width="1" height="101" alt=""></td>
	  </tr>
    <tr>
      <td colspan="3" rowspan="4">
        <img src="Bilder/kingscards_02.png" width="86" height="20" alt=""></td>
	    <td rowspan="14">
		    <img src="Bilder/kingscards_03.png" width="1" height="499" alt=""></td>
	    <td colspan="2" rowspan="3">
		    <img src="Bilder/kingscards_04.png" width="89" height="19" alt=""></td>
	    <td rowspan="6">
		    <img src="Bilder/kingscards_05.png" width="1" height="63" alt=""></td>
	    <td rowspan="2">
		    <img src="Bilder/kingscards_06.png" width="96" height="17" alt=""></td>
	    <td rowspan="6">
		    <img src="Bilder/kingscards_07.png" width="1" height="63" alt=""></td>
	    <td rowspan="2">
		    <img src="Bilder/kingscards_08.png" width="84" height="17" alt=""></td>
	    <td colspan="6">
		    <img src="Bilder/kingscards_09.png" width="442" height="1" alt=""></td>
	    <td>
		    <img src="Bilder/spacer.gif" width="1" height="1" alt=""></td>
	  </tr>
    <tr>
      <td rowspan="5">
        <img src="Bilder/kingscards_10.png" width="1" height="62" alt=""></td>
	    <td rowspan="2">
		    <a href=" http://search.ebay.de/_W0QQfgtpZ1QQfrppZ25QQsassZbustareimes" target="_blank"><img src="Bilder/kingscards_11.png" alt="" width="87" height="18" border="0"></a></td>
	    <td colspan="4" rowspan="4">
		    <img src="Bilder/kingscards_12.png" width="354" height="48" alt=""></td>
	    <td>
		    <img src="Bilder/spacer.gif" width="1" height="16" alt=""></td>
	  </tr>
    <tr>
      <td rowspan="4">
        <img src="Bilder/kingscards_13.png" width="96" height="46" alt=""></td>
	    <td rowspan="4">
		    <img src="Bilder/kingscards_14.png" width="84" height="46" alt=""></td>
	    <td>
		    <img src="Bilder/spacer.gif" width="1" height="2" alt=""></td>
	  </tr>
    <tr>
      <td colspan="2" rowspan="3">
        <img src="Bilder/kingscards_15.png" width="89" height="44" alt=""></td>
	    <td rowspan="3">
		    <img src="Bilder/kingscards_16.png" width="87" height="44" alt=""></td>
	    <td>
		    <img src="Bilder/spacer.gif" width="1" height="1" alt=""></td>
	  </tr>
    <tr>
      <td colspan="3">
        <img src="Bilder/kingscards_17.png" width="86" height="29" alt=""></td>
	    <td>
		    <img src="Bilder/spacer.gif" width="1" height="29" alt=""></td>
	  </tr>
    <tr>
      <td rowspan="9">
        <img src="Bilder/kingscards_18.png" width="24" height="450" alt=""></td>
	    <td rowspan="2">
		    <img src="Bilder/kingscards_19.png" width="57" height="80" alt=""></td>
	    <td rowspan="9">
		    <img src="Bilder/kingscards_20.png" width="5" height="450" alt=""></td>
	    <td colspan="2">
		    <img src="Bilder/kingscards_21.png" width="274" height="14" alt=""></td>
	    <td rowspan="2">
		    <img src="Bilder/kingscards_22.png" width="57" height="80" alt=""></td>
	    <td rowspan="9">
		    <img src="Bilder/kingscards_23.png" width="23" height="450" alt=""></td>
	    <td>
		    <img src="Bilder/spacer.gif" width="1" height="14" alt=""></td>
	  </tr>
    <tr>
      <td rowspan="8">
        <img src="Bilder/kingscards_24.png" width="45" height="436" alt=""></td>
	    <td colspan="8" rowspan="7">
		    <img src="Bilder/kingscards_25.png" width="534" height="396" alt=""></td>
	    <td rowspan="8">
		    <img src="Bilder/kingscards_26.png" width="54" height="436" alt=""></td>
	    <td>
		    <img src="Bilder/spacer.gif" width="1" height="66" alt=""></td>
	  </tr>
    <tr>
      <td>
        <img src="Bilder/kingscards_27.png" width="57" height="20" alt=""></td>
	    <td>
		    <img src="Bilder/kingscards_28.png" width="57" height="20" alt=""></td>
	    <td>
		    <img src="Bilder/spacer.gif" width="1" height="20" alt=""></td>
	  </tr>
    <tr>
      <td>
        <img src="Bilder/kingscards_29.png" width="57" height="80" alt=""></td>
	    <td>
		    <img src="Bilder/kingscards_30.png" width="57" height="80" alt=""></td>
	    <td>
		    <img src="Bilder/spacer.gif" width="1" height="80" alt=""></td>
	  </tr>
    <tr>
      <td>
        <img src="Bilder/kingscards_31.png" width="57" height="23" alt=""></td>
	    <td>
		    <img src="Bilder/kingscards_32.png" width="57" height="23" alt=""></td>
	    <td>
		    <img src="Bilder/spacer.gif" width="1" height="23" alt=""></td>
	  </tr>
    <tr>
      <td>
        <img src="Bilder/kingscards_33.png" width="57" height="80" alt=""></td>
	    <td rowspan="2">
		    <img src="Bilder/kingscards_34.png" width="57" height="82" alt=""></td>
	    <td>
		    <img src="Bilder/spacer.gif" width="1" height="80" alt=""></td>
	  </tr>
    <tr>
      <td rowspan="3">
        <img src="Bilder/kingscards_35.png" width="57" height="167" alt=""></td>
	    <td>
		    <img src="Bilder/spacer.gif" width="1" height="2" alt=""></td>
	  </tr>
    <tr>
      <td rowspan="2">
        <img src="Bilder/kingscards_36.png" width="57" height="165" alt=""></td>
	    <td>
		    <img src="Bilder/spacer.gif" width="1" height="125" alt=""></td>
	  </tr>
    <tr>
      <td colspan="8">
        <img src="Bilder/kingscards_37.png" width="534" height="40" alt=""></td>
	    <td>
		    <img src="Bilder/spacer.gif" width="1" height="40" alt=""></td>
	  </tr>
    <tr>
      <td>
        <img src="Bilder/spacer.gif" width="24" height="1" alt=""></td>
	    <td>
		    <img src="Bilder/spacer.gif" width="57" height="1" alt=""></td>
	    <td>
		    <img src="Bilder/spacer.gif" width="5" height="1" alt=""></td>
	    <td>
		    <img src="Bilder/spacer.gif" width="1" height="1" alt=""></td>
	    <td>
		    <img src="Bilder/spacer.gif" width="45" height="1" alt=""></td>
	    <td>
		    <img src="Bilder/spacer.gif" width="44" height="1" alt=""></td>
	    <td>
		    <img src="Bilder/spacer.gif" width="1" height="1" alt=""></td>
	    <td>
		    <img src="Bilder/spacer.gif" width="96" height="1" alt=""></td>
	    <td>
		    <img src="Bilder/spacer.gif" width="1" height="1" alt=""></td>
	    <td>
		    <img src="Bilder/spacer.gif" width="84" height="1" alt=""></td>
	    <td>
		    <img src="Bilder/spacer.gif" width="1" height="1" alt=""></td>
	    <td>
		    <img src="Bilder/spacer.gif" width="87" height="1" alt=""></td>
	    <td>
		    <img src="Bilder/spacer.gif" width="220" height="1" alt=""></td>
	    <td>
		    <img src="Bilder/spacer.gif" width="54" height="1" alt=""></td>
	    <td>
		    <img src="Bilder/spacer.gif" width="57" height="1" alt=""></td>
	    <td>
		    <img src="Bilder/spacer.gif" width="23" height="1" alt=""></td>
	    <td></td>
	  </tr>
  </table>
  <!-- End ImageReady Slices -->
</div>
</body>
</html>

So, diesen Code hab ich von Photoshop erhalten...hab jetzt erstmal nur das Design zentriert und eine Hintergrundfarbe eingestellt.

Beim Content-Bild handelt es sich übrigens um das "kingcards_25.png"

gruß

alicexx · 09.03.2007

AW: wie I-Frame definieren?

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<title>Kings-Cards.com</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
body {
    background-color: #000033;
}
-->
</style></head>
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<div align="center">
  <!-- ImageReady Slices (kingscards.psd) -->
  <table id="Tabelle_01" width="801" height="601" border="0" cellpadding="0" cellspacing="0">
    <tr>
      <td colspan="16">
        <img src="Bilder/kingscards_01.png" width="800" height="101" alt=""></td>
        <td>
            <img src="Bilder/spacer.gif" width="1" height="101" alt=""></td>
      </tr>
    <tr>
      <td colspan="3" rowspan="4">
        <img src="Bilder/kingscards_02.png" width="86" height="20" alt=""></td>
        <td rowspan="14">
            <img src="Bilder/kingscards_03.png" width="1" height="499" alt=""></td>
        <td colspan="2" rowspan="3">
            <img src="Bilder/kingscards_04.png" width="89" height="19" alt=""></td>
        <td rowspan="6">
            <img src="Bilder/kingscards_05.png" width="1" height="63" alt=""></td>
        <td rowspan="2">
            <img src="Bilder/kingscards_06.png" width="96" height="17" alt=""></td>
        <td rowspan="6">
            <img src="Bilder/kingscards_07.png" width="1" height="63" alt=""></td>
        <td rowspan="2">
            <img src="Bilder/kingscards_08.png" width="84" height="17" alt=""></td>
        <td colspan="6">
            <img src="Bilder/kingscards_09.png" width="442" height="1" alt=""></td>
        <td>
            <img src="Bilder/spacer.gif" width="1" height="1" alt=""></td>
      </tr>
    <tr>
      <td rowspan="5">
        <img src="Bilder/kingscards_10.png" width="1" height="62" alt=""></td>
        <td rowspan="2">
            <a href=" http://search.ebay.de/_W0QQfgtpZ1QQfrppZ25QQsassZbustareimes" target="_blank"><img src="Bilder/kingscards_11.png" alt="" width="87" height="18" border="0"></a></td>
        <td colspan="4" rowspan="4">
            <img src="Bilder/kingscards_12.png" width="354" height="48" alt=""></td>
        <td>
            <img src="Bilder/spacer.gif" width="1" height="16" alt=""></td>
      </tr>
    <tr>
      <td rowspan="4">
        <img src="Bilder/kingscards_13.png" width="96" height="46" alt=""></td>
        <td rowspan="4">
            <img src="Bilder/kingscards_14.png" width="84" height="46" alt=""></td>
        <td>
            <img src="Bilder/spacer.gif" width="1" height="2" alt=""></td>
      </tr>
    <tr>
      <td colspan="2" rowspan="3">
        <img src="Bilder/kingscards_15.png" width="89" height="44" alt=""></td>
        <td rowspan="3">
            <img src="Bilder/kingscards_16.png" width="87" height="44" alt=""></td>
        <td>
            <img src="Bilder/spacer.gif" width="1" height="1" alt=""></td>
      </tr>
    <tr>
      <td colspan="3">
        <img src="Bilder/kingscards_17.png" width="86" height="29" alt=""></td>
        <td>
            <img src="Bilder/spacer.gif" width="1" height="29" alt=""></td>
      </tr>
    <tr>
      <td rowspan="9">
        <img src="Bilder/kingscards_18.png" width="24" height="450" alt=""></td>
        <td rowspan="2">
            <img src="Bilder/kingscards_19.png" width="57" height="80" alt=""></td>
        <td rowspan="9">
            <img src="Bilder/kingscards_20.png" width="5" height="450" alt=""></td>
        <td colspan="2">
            <img src="Bilder/kingscards_21.png" width="274" height="14" alt=""></td>
        <td rowspan="2">
            <img src="Bilder/kingscards_22.png" width="57" height="80" alt=""></td>
        <td rowspan="9">
            <img src="Bilder/kingscards_23.png" width="23" height="450" alt=""></td>
        <td>
            <img src="Bilder/spacer.gif" width="1" height="14" alt=""></td>
      </tr>
    <tr>
      <td rowspan="8">
        <img src="Bilder/kingscards_24.png" width="45" height="436" alt=""></td>
        <td colspan="8" rowspan="7">
            <iframe name="content" width="534" height="396" src="start.html" border="0" frameborder="0">
            Ihr Browser unterstützt Inlineframes nicht oder zeigt sie in der derzeitigen Konfiguration nicht an.
            </iframe>
            </td>
        <td rowspan="8">
            <img src="Bilder/kingscards_26.png" width="54" height="436" alt=""></td>
        <td>
            <img src="Bilder/spacer.gif" width="1" height="66" alt=""></td>
      </tr>
    <tr>
      <td>
        <img src="Bilder/kingscards_27.png" width="57" height="20" alt=""></td>
        <td>
            <img src="Bilder/kingscards_28.png" width="57" height="20" alt=""></td>
        <td>
            <img src="Bilder/spacer.gif" width="1" height="20" alt=""></td>
      </tr>
    <tr>
      <td>
        <img src="Bilder/kingscards_29.png" width="57" height="80" alt=""></td>
        <td>
            <img src="Bilder/kingscards_30.png" width="57" height="80" alt=""></td>
        <td>
            <img src="Bilder/spacer.gif" width="1" height="80" alt=""></td>
      </tr>
    <tr>
      <td>
        <img src="Bilder/kingscards_31.png" width="57" height="23" alt=""></td>
        <td>
            <img src="Bilder/kingscards_32.png" width="57" height="23" alt=""></td>
        <td>
            <img src="Bilder/spacer.gif" width="1" height="23" alt=""></td>
      </tr>
    <tr>
      <td>
        <img src="Bilder/kingscards_33.png" width="57" height="80" alt=""></td>
        <td rowspan="2">
            <img src="Bilder/kingscards_34.png" width="57" height="82" alt=""></td>
        <td>
            <img src="Bilder/spacer.gif" width="1" height="80" alt=""></td>
      </tr>
    <tr>
      <td rowspan="3">
        <img src="Bilder/kingscards_35.png" width="57" height="167" alt=""></td>
        <td>
            <img src="Bilder/spacer.gif" width="1" height="2" alt=""></td>
      </tr>
    <tr>
      <td rowspan="2">
        <img src="Bilder/kingscards_36.png" width="57" height="165" alt=""></td>
        <td>
            <img src="Bilder/spacer.gif" width="1" height="125" alt=""></td>
      </tr>
    <tr>
      <td colspan="8">
        <img src="Bilder/kingscards_37.png" width="534" height="40" alt=""></td>
        <td>
            <img src="Bilder/spacer.gif" width="1" height="40" alt=""></td>
      </tr>
    <tr>
      <td>
        <img src="Bilder/spacer.gif" width="24" height="1" alt=""></td>
        <td>
            <img src="Bilder/spacer.gif" width="57" height="1" alt=""></td>
        <td>
            <img src="Bilder/spacer.gif" width="5" height="1" alt=""></td>
        <td>
            <img src="Bilder/spacer.gif" width="1" height="1" alt=""></td>
        <td>
            <img src="Bilder/spacer.gif" width="45" height="1" alt=""></td>
        <td>
            <img src="Bilder/spacer.gif" width="44" height="1" alt=""></td>
        <td>
            <img src="Bilder/spacer.gif" width="1" height="1" alt=""></td>
        <td>
            <img src="Bilder/spacer.gif" width="96" height="1" alt=""></td>
        <td>
            <img src="Bilder/spacer.gif" width="1" height="1" alt=""></td>
        <td>
            <img src="Bilder/spacer.gif" width="84" height="1" alt=""></td>
        <td>
            <img src="Bilder/spacer.gif" width="1" height="1" alt=""></td>
        <td>
            <img src="Bilder/spacer.gif" width="87" height="1" alt=""></td>
        <td>
            <img src="Bilder/spacer.gif" width="220" height="1" alt=""></td>
        <td>
            <img src="Bilder/spacer.gif" width="54" height="1" alt=""></td>
        <td>
            <img src="Bilder/spacer.gif" width="57" height="1" alt=""></td>
        <td>
            <img src="Bilder/spacer.gif" width="23" height="1" alt=""></td>
        <td></td>
      </tr>
  </table>
  <!-- End ImageReady Slices -->
</div>
</body>
</html>

Herr_D · 09.03.2007

AW: wie I-Frame definieren?

suche:

Code:

<td colspan="8" rowspan="7">
                    <img src="Bilder/kingscards_25.png" width="534" height="396" alt=""></td>

ersetze durch:

Code:

<td colspan="8" rowspan="7" style="background-image:url(Bilder/kingscards_25.png);">
<iframe src="angezeigteseite.html" name="content" width="534" height="395" marginheight="0" marginwidth="0" border="0" frameborder="0" scrolling="auto">Iframe wird nicht unterstüzt.</iframe></td>

Die Links in der Navi gestaltest du etwa so:

Code:

<a href="zielseite" target="content">Link</a>

reenebald · 09.03.2007

AW: wie I-Frame definieren?

Erstmal VIELEN VIELEN Dank für die Superklasse Hilfe, es funktioniert endlich!!!!
Schön wenns noch Leute gibt die sich die Mühe machen und andern helfen

Eine Frage hätte ich noch:

Und zwar hab ichs jetzt so gemacht wie "Herr_D" es vorgeschlagen hat.
Kann man noch festlegen das nur ein senkrechter Scrollbalken kommt und kein waagerechter? Also wenn der Inhalt zu breit sein sollte das einfach ein Absatz gemacht wird? Falls nicht ists auch nicht schlimm

Und wie lege ich die "content-Startseite" fest? Also die Seite, die beim betreten im contentbereich angezeigt wird. muss ich da den inhalt direkt in der index.html einfügen oder kann ich auch ne normale seite machen?

Herr_D · 09.03.2007

AW: wie I-Frame definieren?

HTML-Tag:<iframe>

reenebald · 09.03.2007

AW: wie I-Frame definieren?

vielen dank nochmal an alle!!!!!
habs alles hinbekommen so wie ichs wollte

)))))

gruß