cuychactao
New member
Hallo! 
da ich mich gerade etwas mit divs spiele, wollt ich das natürlich gleich mal ausprobieren, also hab ich eine Seite, die ich mit Tabellen gemacht habe "umgeschrieben" in CSS.
Hier meine CSS-Datei:
Eingebunden hab ichs so:
Die Tabelle hier ist nur dazu da, damit das ganze in der Mitte ist! (Hätte aber glaub ich auch den div "big" irgendwie in die Mitte setzten können!)
Der div mit der id "big" wird um das ganze herumgespannt, damit sich das alles in ihm so positioniert wie es eben angegeben ist!
Eventuell ist auch der Doctype falsch:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
(ist eine PHP-Datei)
Alles schön und gut und mit dem Netscape 7.2 funktioniert auch alles super, aber heute hab ich in der Schule mal nachgeschaut und da ist der Defaultbrowser der IE und da hat er mir den "top" den "big" und die ganzen "bush"s nicht angezeigt nur die "box"s!
Also das Problem mit dem Anzeigen der "bush"s' und des "top"s hab ich jetzt geschafft! Da fehlte einfach der Inhalt!
Nur werden die "bush"s ganz oben angezeigt obwohl sie unten (bottom: 0px; ) sein sollten!
Der "big" geht noch immer nicht, obwohl der ja eigentlich Inhalt hat!
In Opera wird mir "top" nicht und das Datum in "bush2b" wird in falscher Schriftgröße (obwohl definiert, aber hier nicht eingetragen) angezeigt!
In Firefox funktionierts hingegen wieder tadellos!
Ich denke es muss wohl ein elementarer Fehler sein, den nur Anfänger machen, denn sonst wäre nicht so viel "kaputt"!
Also die Seite ist zum anschauen hier!
So sollte die Seite aussehen (nur ohne Schnee)
Und hier die CSS-Datei!
Ich hoffe ich hab mich verständlich genug ausgedrückt! Ansonsten einfach danach fragen!
Danke fürs Durchlesen!
Danke für Antworten im Vorhinein!
Gruß
cuychachtao
da ich mich gerade etwas mit divs spiele, wollt ich das natürlich gleich mal ausprobieren, also hab ich eine Seite, die ich mit Tabellen gemacht habe "umgeschrieben" in CSS.
Hier meine CSS-Datei:
Code:
body { margin:0px; background-color: #FFCCCC; }
#big { z-index: 1; position: absolute; width: 580px; height: 100%; background-color: #E6EEF2; }
#top { z-index: 2; position: absolute; top: 0px; left: 0px; width: 580px; height: 10px; background-image: url(images/Sonne_r1_c1.gif); background-position: top right; background-repeat: no-repeat; }
.navi { z-index: 2; position: absolute; top: 10px; width: 80px; height: 70px; text-align: center; }
#box1 { position: absolute; left: 10px; }
#box2 { position: absolute; left: 90px; }
#box3 { position: absolute; left: 170px; }
#box4 { position: absolute; left: 250px; }
#box5 { position: absolute; left: 330px; }
#box6 { position: absolute; left: 410px; }
#box7 { position: absolute; left: 490px; background-image: url(images/Sonne_r2_c1.gif); }
#box8 { z-index: 2; position: absolute; left: 570px; top: 10px; width: 10px; height: 70px; background-image: url(images/Sonne_r2_c2.gif); }
#mitte1 { z-index: 2; position: absolute; width: 100px; margin: 80 0 60 480; }
#iframe { z-index: 2; position: absolute; top: 80px; left: 100px; bottom: 60px; width: 380px; }
#busha1 { z-index: 2; position: absolute; bottom: 60px; right: 0px; width: 100px; height: 60px; background-image: url(images/busch_r_o.gif); }
#bushb1 { z-index: 2; position: absolute; left: 0px; bottom: 0px; width: 200px; height: 60px; background-image: url(images/busch_l_u.gif); }
#bushb2 { z-index: 2; position: absolute; left: 200px; bottom: 0px; width: 180px; height: 60px; background-image: url(images/busch_m_u.gif); text-align: center; }
#bushb3 { z-index: 2; position: absolute; bottom: 0px; right: 0px; width: 200px; height: 60px; background-image: url(images/busch_r_u.gif); bottom; text-align: right; }Eingebunden hab ichs so:
Code:
<table width="580" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td><div id="big">
<div id="top"> </div>
<div class="navi" id="box1"><a target="text" href="home.php" class="menu"><img src="images/haus.gif" border="0"><br>
HOME</a></div>
<div class="navi" id="box2"><a target="text" href="infos.php" class="menu"><img src="images/info.gif" border="0"><br>
INFOS</a></div>
<div class="navi" id="box3"><a target="text" href="mitglieder.php" class="menu"><img src="images/pfadihut.gif" border="0"><br>
MITGLIEDER</a></div>
<div class="navi" id="box4"><a target="text" href="freunde.php" class="menu"><img src="images/hande.gif" border="0"><br>
FREUNDE</a></div>
<div class="navi" id="box5"><a target="text" href="aktionen.php" class="menu"><img src="images/zelt.gif" border="0"><br>
AKTIONEN</a></div>
<div class="navi" id="box6"><a target="text" href="galerie" class="menu"><img src="images/bild.gif" border="0"><br>
GALERIE</a></div>
<div class="navi" id="box7"><a target="text" href="sonstiges.php" class="menu"><img src="images/stern.gif" border="0"><br>
SONSTIGES</a></div>
<div id="box8"> </div>
<div id="iframe">
<iframe name="text" src="home.php" width="380" height="100%" frameborder="0"></iframe>
</div>
<div id="busha1"> </div>
<div id="bushb1"><span style="vertical-align:bottom;"><a href="javascript:history.back()" class="bottom">Zurück</a></span></div>
<div id="bushb2"><span style="vertical-align:bottom;" class="bottom">10.12.2004 - 19:21 Uhr</span></div>
<div id="bushb3" valign="bottom" ><span style="vertical-align:bottom;"><a href="kontakt.php" target="text" class="bottom">Kontakt</a></span></div>
</div></td>
</tr>
</table>Die Tabelle hier ist nur dazu da, damit das ganze in der Mitte ist! (Hätte aber glaub ich auch den div "big" irgendwie in die Mitte setzten können!)
Der div mit der id "big" wird um das ganze herumgespannt, damit sich das alles in ihm so positioniert wie es eben angegeben ist!
Eventuell ist auch der Doctype falsch:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
(ist eine PHP-Datei)
Alles schön und gut und mit dem Netscape 7.2 funktioniert auch alles super, aber heute hab ich in der Schule mal nachgeschaut und da ist der Defaultbrowser der IE und da hat er mir den "top" den "big" und die ganzen "bush"s nicht angezeigt nur die "box"s!
Also das Problem mit dem Anzeigen der "bush"s' und des "top"s hab ich jetzt geschafft! Da fehlte einfach der Inhalt!
Nur werden die "bush"s ganz oben angezeigt obwohl sie unten (bottom: 0px; ) sein sollten!
Der "big" geht noch immer nicht, obwohl der ja eigentlich Inhalt hat!
In Opera wird mir "top" nicht und das Datum in "bush2b" wird in falscher Schriftgröße (obwohl definiert, aber hier nicht eingetragen) angezeigt!
In Firefox funktionierts hingegen wieder tadellos!
Ich denke es muss wohl ein elementarer Fehler sein, den nur Anfänger machen, denn sonst wäre nicht so viel "kaputt"!
Also die Seite ist zum anschauen hier!
So sollte die Seite aussehen (nur ohne Schnee)
Und hier die CSS-Datei!
Ich hoffe ich hab mich verständlich genug ausgedrückt! Ansonsten einfach danach fragen!
Danke fürs Durchlesen!
Danke für Antworten im Vorhinein!
Gruß
cuychachtao
Zuletzt bearbeitet:
