iframe height="100%" geht nicht!

assmaje · 22. Mai 2008 um 18:44

Wie schon gesagt, funktioniert im FF und IE beim iframe die Angabe height=„…%“ nicht. Dafür aber im Safari. Weiß jemand, woran das liegen könnte?

<iframe src="http://baseportal.de/cgi-bin/baseportal.pl?htx=/assmannjens/assmannjens&localparams=1" width="100%" height="100%" frameborder="0"></iframe>

threadi · 22. Mai 2008 um 18:51

Da ist ein Anführungszeichen zuviel:

"frameborder="0"

assmaje · 22. Mai 2008 um 19:10

Danke, hat sich aber nichts verändert…
Sonst noch jemand ne Idee?

threadi · 22. Mai 2008 um 19:19

Wie sieht denn der restliche Quellcode aus? Vermutlich gibts dort ebenso noch Quellcode-Fehler …

assmaje · 22. Mai 2008 um 20:12

Wenn du meinst, ich glaub aber nich, dass mir das weiter helfen kann.

HTML:

[code]

www.softmedia.de.nr | Home

system · 22. Mai 2008 um 20:22

also erstmal kann dein quelltext so gar nicht funktionieren, da du ALLES auskommentiert hast, denn du hast

<!-- kommentar--!>geschrieben

und es muß heißen

<!-- kommentar-->

mmmhhh hab grad gesehen, funzt wohl trotzdem irgendwie??

threadi · 22. Mai 2008 um 20:32

Abgesehen davon sind an einigen Stellen überzählige „;“ und die URL für das Iframe ist nicht korrekt kodiert. Schau dir deinen Quellcode mal im Validator an: The W3C Markup Validation Service

system · 23. Mai 2008 um 07:35

Wenn Du per CSS height:100% schreibst, bedeutet das, dass das Element genau so groß wird, wie sein Elternelement.
Wenn die Elternelemente (bis hin zu und ) dann jeweils auch 100% groß gemacht werden, kann man somit (unter Berücksichtigung von margin, padding und border (s. Boxmodel)) normalerweise jedes Element auf Seitenhöhe bringen.
Ob das für iFrames anders läuft, weiß ich nicht, kann ich mir aber nciht wirklich vorstellen.

Gruß,
-Efchen

assmaje · 23. Mai 2008 um 09:21

Meine Seite ist und war schon immer valide, auch mit den überflüssigen ; und den falschen Kommentaren. ;ugl Habs jetzt geändert, aber was soll an der URL fürs iframe falsch sein?

[Valid] Markup Validation of http://www.softmedia.de.nr/ - W3C Markup Validator
Ergebnisse des CSS-Validators http://www.softmedia.de.nr (CSS level 2.1)

@Efchen:
Werds mal probieren…

Funktioniert nicht…
Obwohl ich alles 100% hoch gemacht hab…

HTML:

[code]

www.softmedia.de.nr | Home

      <form method=post action="planetsearchplus/planetsearchplus.php">
        <table border="0" cellspacing="0" cellpadding="0" align="right">
          <tr> 
            <td> 
              <input type="text" name="search_exp" class="sform">
            </td>
            <td> 
              <input type="submit" value="Finden" name="submit" class="sbutton">
              <input type="hidden" name="exp_full" value="no" checked>
              <input type="hidden" name="exp_capital" value="no" checked>
            </td>
          </tr>
        </table>
      </form>

    <!-- Ende Suche -->

    <br><br>

  </div>
</div>

<div id="navigation"><br>

  <a class="none" href="PSP.html"><img src="psp.png" border="0" alt="PSP" title=""></a>

  <span class="space">
    <a class="none" href="PC.html"><img src="pc.png" border="0" alt="PC" title=""></a>
  </span>

</div>

<div id="main">
  <div id="main2">

    <h1>PSP Demos</h1>

    Hier findest du eine Reihe von PSP Demos, die du dir - natürlich - kostenlos herunterladen kannst.<br>

    <h1>Hinweis</h1>

    Für manche Demos benötigst du eventuell die neueste Firmware. Du kannst sie dir entweder <a href="#">HIER</a> von der offiziellen Playstation-Webseite herunterladen, oder einfach direkt mit deiner PSP. Falls du die zweite Variante bevorzugst, geh' einfach unter den Menüpunkt [Einstellungen], und bestätige [Systemaktualisierung] mit [X].<br><br><br>

  </div>

  <iframe id="datenbank" src="http://baseportal.de/cgi-bin/baseportal.pl?htx=/assmannjens/assmannjens&localparams=1" frameborder="0"></iframe>

</div>

<div id="footer"><br><br>

  Copyright &copy; Softmedia 2008 |
  Version 0.01 |
  optimiert für <a class="white" href="http://www.mozilla-europe.org/de/products/firefox/">Firefox</a> & <a class="white" href="http://www.apple.com/de/safari/">Safari</a> |
  valides (X)HTML & CSS |
  by Jens Assmann |
  <a class="white" href="impressum.html">Impressum</a>

</div>

[/code][B][U]CSS:[/U][/B]

[code]body {
background-image:url(hintergrund.png);
background-repeat:repeat;
background-attachment:fixed;
height:100%;
margin-top:0px;
margin-bottom:0px;
padding:0px;
font-family:Arial;
font-size:12px;
text-align:center;
}

a:link { color:#000000; text-decoration:underline; }
a:visited { color:#000000; text-decoration:underline; }
a:hover { color:#FF8C00; text-decoration:underline; }
a:active { color:#FF8C00; text-decoration:underline; }
a:focus { color:#FF8C00; text-decoration:underline; }

.none:link { color:#000000; text-decoration:none; }
.none:visited { color:#000000; text-decoration:none; }
.none:hover { color:#FF8C00; text-decoration:none; }
.none:active { color:#FF8C00; text-decoration:none; }
.none:focus { color:#FF8C00;text-decoration:none; }

.white:link { color:#000000; text-decoration:underline; }
.white:visited { color:#000000; text-decoration:underline; }
.white:hover { color:#FFFFFF; text-decoration:underline; }
.white:active { color:#FFFFFF; text-decoration:underline; }
.white:focus { color:#FFFFFF; text-decoration:underline; }

h1 {
font-size:12px;
font-weight:bold;
color:#FF8C00;
}

#all {
background-color:#FFFFFF;
width:80%;
height:100%;
text-align:left;
margin:auto;
}

#header {
background-color:#FF8C00;
}

#header2 {
margin-left:20px;
margin-right:20px;
}

#navigationtop {
font-size:10px;
text-align:right;
}

#softmedia {
font-size:11px;
color:#FFFFFF;
}

#navigation {
background-image:url(farbverlauf.png);
background-repeat:repeat-x;
height:150px;
text-align:center;
}

#main {
background-color:#FFFFFF;
height:100%;
}

#datenbank {
width:100%;
height:100%;
}

#main2 {
height:100%;
font-size:12px;
margin-left:20px;
margin-right:20px;
margin-top:20px;
}

#footer {
background-image:url(farbverlauf2.png);
background-repeat:repeat-x;
height:50px;
clear:both;
margin-top:20px;
font-size:10px;
text-align:center;
}

#infoleft {
display:block;
background-color:#FFFFFF;
width:10px;
height:140px;
position:absolute;
left:0px;
top:25px;
border-style:solid;
border-width:1px;
border-color:#000000;
}

#infoleft:hover {
background-color:#FF8C00;
}

#info {
display:none;
background-color:#FFFFFF;
width:250px;
height:140px;
position:absolute;
left:0px;
top:25px;
border-style:solid;
border-width:1px;
border-color:#000000;
}

#info2 {
font-family:Arial;
font-size:12px;
text-align:left;
margin-left:20px;
margin-right:20px;
margin-top:20px;
}

.space {
margin-left:40px;
}[/code]

system · 23. Mai 2008 um 10:54

Nö, hast Du nicht.

assmaje · 23. Mai 2008 um 11:00

Was hab ich denn nicht 100% hoch gemacht?

system · 23. Mai 2008 um 11:54

Das Spielchen gefällt mir
Lies doch einfach nochmal nach, was ich geschrieben habe. Da war von zwei obersten Elementen die Rede!

assmaje · 23. Mai 2008 um 13:37

._.

Ich vermute, ich bin einfach zu blöd dafür. :roll:
Also wie kann ich jetzt das iframe 100% hoch machen (besser gesagt: das iframe von der Höhe her dem Inhalt des iframes anpassen), so dass kein Scrollbalken erscheint?

system · 23. Mai 2008 um 13:55

Na, wenn Du zu blöd dazu bist, dann hat das hier ja keinen Sinn.

Schönes Wochenende,
-Efchen

assmaje · 23. Mai 2008 um 15:19

Danke gleichfalls, aber könntest du mir dennoch gnädigerweise die Lösung sagen?
Falls nicht, hat noch jemand anders ne Idee?

system · 26. Mai 2008 um 06:15

Du musst mich nicht beleidigen, nur weil ich das auffasse, was Du über Dich selbst sagst. Ich habe nie behauptet, dass Du blöd wärest, das warst Du selber. Ich habe nur gesagt, dass das keinen Sinn hat, wenn Du wirklich blöd bist.

Und die Lösung steht doch da!
Ich weiß halt nur nicht, warum ich das jetzt wieder raussuchen muss:

Du hast bei aufgehört, aber hat auch noch ein Elternelement. Das ist doch das erste, was man bei HTML lernt!

Gruß,
-Efchen

assmaje · 26. Mai 2008 um 14:57

Da liegt wohl ein kleines Missverständnis vor. Du sagtest „Schönes Wochenende“, und ich erwiderte „Danke gleichfalls“. Sollte keine Beleidigung sein.
Ich wusste gar nicht, dass man stylen kann… ._. Deshalb bin ich nicht gleich draufgekommen. Es funktioniert jetzt, dafür gibt es jetzt aber eine Menge Fehler, die auch noch je nach Browser variieren.

Live: softmedia.de.nr | Home

HTML:

[CODE]

www.softmedia.de.nr | Home

<div id="header">
  <div id="header2">

    <div id="navigationtop">
      <a class="white" href="home.html">Home</a> | <a class="white" href="impressum.html">Impressum</a>
    </div>

    <br>
    <a class="none" href="home.html"><img src="logo.png" border="0" alt="Softmedia" title="Zurück zur Startseite"></a>

    <br>
    <div id="softmedia">
      Das große Downloadportal für deinen PC und deine PSP.
    </div>

    <br>

  </div>
</div>

<div id="navigation">
  <div id="psppc">

    <div id="left">
      <a class="psp" href="psp.html"></a>
    </div>

    <div id="right">
      <a class="pc" href="pc.html"></a>
    </div>

    <br class="clear">

  </div>
</div>

<div id="main">
  <div id="main2">

    <h1>Willkommen!</h1>
    <p>
      auf softmedia.de.nr, dem Downloadportal für Deinen PC und Deine PSP. Wir bieten Dir Downloads aller Art an, die Du Dir - natürlich - völlig kostenlos, und damit meinen wir auch <strong>kostenlos</strong>, herunterladen kannst. Wir wünschen Dir noch viel Spaß beim Surfen auf unserer Seite, und hoffen, dass Du bald wieder kommst. ;-)<br><br>
      - Softmedia
    </p>

    <h1>Hinweis</h1>
    <p>
      Diese Seite befindet sich momentan noch im Aufbau. Wir entschuldigen uns für eventuell auftretende Fehler.
    </p><br><br>

  </div>

    <iframe id="datenbank" src="http://baseportal.de/cgi-bin/baseportal.pl?htx=/assmannjens/assmannjens" frameborder="0"></iframe>
    <div id="space"></div>

</div>

<div id="footer"><br><br>

  Copyright &copy; Softmedia 2008 |
  Version 0.02 |
  optimiert für <a class="white" href="http://www.mozilla-europe.org/de/products/firefox/">Firefox</a> & <a class="white" href="http://www.apple.com/de/safari/">Safari</a> |
  by Jens Assmann |
  <a class="white" href="impressum.html">Impressum</a>

</div>

[/CODE]

CSS:

[CODE]html {
height:100%;
}

body {
background-image:url(hintergrund.png);
background-repeat:repeat;
background-attachment:fixed;
height:100%;
margin-top:0px;
margin-bottom:0px;
font-family:Arial;
font-size:12px;
text-align:center;
}

a:link { color:#000000; text-decoration:underline; }
a:visited { color:#000000; text-decoration:underline; }
a:hover { color:#FF8C00; text-decoration:underline; }
a:active { color:#FF8C00; text-decoration:underline; }
a:focus { color:#FF8C00; text-decoration:underline; }

.none:link { color:#000000; text-decoration:none; }
.none:visited { color:#000000; text-decoration:none; }
.none:hover { color:#FF8C00; text-decoration:none; }
.none:active { color:#FF8C00; text-decoration:none; }
.none:focus { color:#FF8C00;text-decoration:none; }

.white:link { color:#000000; text-decoration:underline; }
.white:visited { color:#000000; text-decoration:underline; }
.white:hover { color:#FFFFFF; text-decoration:underline; }
.white:active { color:#FFFFFF; text-decoration:underline; }
.white:focus { color:#FFFFFF; text-decoration:underline; }

h1 {
font-size:12px;
font-weight:bold;
color:#FF8C00;
}

#all {
background-color:#FFFFFF;
width:80%;
height:100%;
margin:auto;
text-align:left;
}

#header {
background-color:#FF8C00;
}

#header2 {
margin-left:20px;
margin-right:20px;
}

#navigationtop {
margin:0px;
padding-top:5px;
font-size:10px;
text-align:right;
}

#softmedia {
font-size:11px;
color:#FFFFFF;
}

#navigation {
background-image:url(farbverlauf.png);
background-repeat:repeat-x;
padding-top:31px;
padding-bottom:31px;
text-align:center;
}

#psppc {
width:214px;
margin:auto;
}

.psp {
background:url(„psp.png“) 0 0 no-repeat;
width:87px;
height:88px;
display:block;
padding:0px;
border-width:0px;
font-size:0px;
text-decoration:none;
text-indent:-100px;
}

.psp:hover {
background-position:-87px 0;
}

.pc {
background:url(„pc.png“) 0 0 no-repeat;
width:87px;
height:88px;
display:block;
padding:0px;
border-width:0px;
font-size:0px;
text-decoration:none;
text-indent:-100px;
}

.pc:hover {
background-position:-87px 0;
}

#left {
width:87px;
float:left;
}

#right {
width:87px;
float:left;
margin-left:40px;
}

.clear {
clear:both;
}

#main {
background-color:#FFFFFF;
height:100%;
margin:0px;
}

#datenbank {
width:100%;
height:100%;
border-width:0px;
}

#main2 {
height:100%;
margin:20px;
}

#space {
margin-bottom:800px;
}

#footer {
background-image:url(farbverlauf2.png);
background-repeat:repeat-x;
height:50px;
clear:both;
margin:0px;
font-size:10px;
text-align:center;
}[/CODE]

Kornerbrotchen · 26. Mai 2008 um 16:05

Schau doch mal was man mit so alles anstellen kann…

12 • Unsere Webpräsenz
http://penner.kilu.de/12/style.css

assmaje · 26. Mai 2008 um 16:16

O_O

Kurze Nebenfrage:
Auf was beziehen sich die Attribute innerhalb der geschwungenen Klammern von *?

Kornerbrotchen · 26. Mai 2008 um 18:46

hab ich nicht verwendet. Meinst du innerhalb von html? Das Sternchen bezeichnet in einem CSS-Sytelsheet alle Elemente.

* { margin:0; }

weist allen Objekten 0 Außenabstand zu.

Das HTML bezieht sich zum einen auf den Schatten, zum anderen auf die Hintergrundfarbe. margin-bottom:1px erzwingt eine vertikale Scrolleiste.