nicht angemeldet
Inhalt im iframe zu groß / scrollbar trotz kleinem Inhalt
Hallo alle zusammen!
Ich schlage mich jetzt seit einem Tag mit diesem Problem rum und hoffe ihr könnt mir weiter helfen:
In meiner index.php wird ein iframe id-abhängig mit verschiedenen htmls gefüllt.
Auf meiner Homeseite befindet sich momentan eine Tabelle + Inhalt + Rahmen (um den tatsächlichen Inhalt zu visualisieren). in meinem Firefox 3.6 erscheint nun, trotzdem der Inhalt für mich offensichtlich kleiner ist als der iframe, ein vertikaler Scrollbalken!
Link zur Website: http://wiim.nestegg.de
Quellcode der Homeseite:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
<meta http-equiv="content-language" content="de">
<link rel="stylesheet" type="text/css"
href="../wiim.css"></head>
<body class="cont_body">
<div align="center">
<table class="full_table" border="1" cellpadding="0" cellspacing="0"><tr><td><h2>Herzlich willkommen auf der
Website zur WiiM 2011!</h2></DIV>
Hier findet ihr alle relevanten Infos zur WiiM 2011:<br>
<div align="left" style="margin-left:80px">
<UL>
<LI>Der Termin</LI>
<LI>Die Regeln</LI>
<LI>Die Disziplinen</LI>
<LI>Der Veranstaltungsort</LI>
</UL>
</DIV>
<DIV align="justify">Wenn ihr euch für die WiiM registriert (im Bereich <a href="../index.php?id=reg" target="_parent">Anmeldung</a>) und bestätigt habt dass ihr Updates zur
WiiM 2011 haben wollt, dann kriegt ihr immer alle neuesten Information bezüglich Ort und Termin direkt per Mail zugesandt!</DIV><BR>
<div align="center">
<hr>
<h2>DER TERMIN:</H2>
<H3>Steht zur Zeit noch nicht fest!</H3><HR></DIV></td></tr></table>
</BODY>
</HTML>
Quellcode CSS:
html, body {
font-family: Calibri;
}
html, body, #boogey {
height:100%;
margin: 0 auto;
border: none;
}
#boogey {
margin: 0 auto;
width: 800px;
text-align: center;
}
#container {
width:784px;
vertical-align:top;
}
#to_left, #to_right, #bo_left, #bo_right
{
height: 9px;
width: 8px;
margin: 0 auto;
font-size: 1px;
}
#to_left { background-image:url(Bilder/border_left_top.png);
background-repeat: no-repeat;
background-position: top;}
#to_right { background-image:url(Bilder/border_right_top.png);
background-repeat: no-repeat;
background-position: top;}
#bo_left { background-image:url(Bilder/border_left_bottom.png);
background-repeat: no-repeat;
background-position:bottom;}
#bo_right { background-image:url(Bilder/border_right_bottom.png);
background-repeat: no-repeat;
background-position:bottom;}
A:link {
text-decoration: underline;
color: black;
}
A:visited {
text-decoration: underline;
color: black;
}
A:active {
text-decoration: underline;
color: black;
}
A:hover {
text-decoration: none;
color: black;
font-style: italic;
}
.border_cont {
width: 8px;
margin: 0 auto;
background-image:url(Bilder/border.png);
background-repeat: repeat-y;
}
.menu {
position:relative;
z-index:3
}
.ani {
visibility:hidden;
position:absolute;
z-index:2;
margin-left:5;
margin-top:10;
}
.full_table {
height: 100%;
}
.table60 {
height:60px;
}
.banin {
position:absolute;
z-index:2;
margin-left:0;
margin-top:0;
}
.cont_body {
margin-top:20px;
margin-left: 20px;
margin-right: 20px;
margin-bottom: 0px;
}
Quellcode index.php:
...
$gallery_view= 'cont/gallery/main.php';
$imp_view= 'cont/imp.html';
$home_view= 'cont/home.html';
$reg_view= 'cont/login';
$ort_view= 'cont/ort.html';
$rule_view= 'cont/rules.html';
...
...
<td class="border_cont"> </td>
<td rowspan="2" class="full_table" id="container">
<iframe src="<?php
if ($section == 'home')
{ echo $home_view; }
else if ($section == 'gal')
{ echo $gallery_view; }
else if ($section == 'reg')
{ echo $reg_view; }
else if ($section == 'rules')
{ echo $rule_view; }
else if ($section == 'ort')
{ echo $ort_view; }
else if ($section == 'imp')
{ echo $imp_view; }
else
{ echo $home_view;}
?>" type="text/html" width="100%" height="100%" align="left" scrolling="auto" marginheight="0" marginwidth="0" frameborder="0"></iframe></td>
<td class="border_cont"> </td>
-
kleiner Nachtrag:
Danke im vorraus für die Hilfe!
-
In meiner index.php wird ein iframe id-abhängig mit verschiedenen htmls gefüllt.
Warum? Wenn du eine serverseitige Sprache zur Verfügung hast, erzeuge damit vollständige Dokumente - die iframes sind total unnütz und verkomplizieren die Client-Seite nur.
-
ok. Hat sich auch erledigt ^^
Fehler gefunden und korrigiert!Für alle dies wissen wollen: die
body { height: 100%; }eigenschaft galt natürlich auch für das home.html dingen und hat alles verursacht. mit height:auto; überschreiben und gut ist!
-
Om nah hoo pez nyeetz, TLuc!
Deine Seite enthält zwar valides HTML, aber die Semantik lässt sehr zu wünschen übrig. Deshalb ist der W3C-Button imho zu Unrecht auf deiner Seite. Beschäftige dich mit zeitgemäßem Layout.
- Es gibt keinen Grund, Iframes zu verwenden.
- Tabellen sind nicht zum Gestalten da.
- Hover-Effekte mit JavaScript sind nicht nötig.
- width, height, border sind missbilligte Attribute
- Gestaltung gehört vollständig ins CSS
Matthias
--
Wer ein Problem beschreiben kann, hat es schon halb gelöst. (Julian Huxley)
-
Hm. Ich werde versuchen das alles zu berücksichtigen, obwol die Website wahrscheinlich ein maximales Publikum von ca 30 Mann bekommen wird.
Aber wie auch immer, man will ja lernen!* Hover-Effekte mit JavaScript sind nicht nötig.
Hierzu muss ich aber eine Frage stellen:
Ich weiß dass man hover Effekte mit CSS gestalten kann - sofern die Maus über dem zu wechselnden Bild schwebt!
Nun ist es bei mir aber der Fall das eine zusätzliche Grafik beim hovern sichtbar geschaltet wird (und das "hinter" dem Bild über dem die Maus schwebt) - ist auch das mit CSS möglich?-
Om nah hoo pez nyeetz, TLuc!
Nun ist es bei mir aber der Fall das eine zusätzliche Grafik beim hovern sichtbar geschaltet wird (und das "hinter" dem Bild über dem die Maus schwebt) - ist auch das mit CSS möglich?
Nicht mit CSS2.1
Natürlich ist das möglich. Du kannst in CSS3 mehrere Hintergrundbilder für ein Element definieren. In deinem Fall wäre das jedoch unklug.
Du hast in der Navigationsleiste keinen Text, das ist unter anderem für Suchmaschinen schlecht. Außerdem hast du keine Alt-Texte für die Grafiken angegeben, sondern nur leere Alt-Attribute. Noch mal schlecht für Leute, die mit deaktivierten Grafiken unterwegs sind und ein weiterer Grund, warum der valide-button zu unrecht da ist (s.a. ff.).
In deinem Fall würde ich den dunklen Text auch als Text schreiben und die Spiegelung in ein Hintergrundbild packen. Die zusätzliche Animation könnte in einem anderen Bereich des(selben!) Hintergrundbildes liegen. Bei Bedarf verschiebst du einfach den Hintergrund. Und das wiederum verlangt keine CSS3-Unterstützung durch den Browser.
Das schlimmste, was dir passieren kann, ist, dass der Browser nach einer bestimmten Zeit keinen Bock mehr hat, die Grafik zu animieren.
Matthias
--
Wer ein Problem beschreiben kann, hat es schon halb gelöst. (Julian Huxley)
-
-