Thema: Problem mit float in NN7 und form-Tag in Opera 8
Hi Leute,
habe zwei Probleme:
1. Habe in einem absolut positionierten DIV mehrere DIVs untereinander und einen rechtsbündig gesetzt. Die untereinander liegenden sollen dabei um den rechts ausgerichteten DIV fliessen, was ich mir "float:right" erreichen wollte.
Das Problem:
Nur im Netscape (7) fliessen die untereinanderliegenden DIVs nicht um den rechten DIV, sondern legen sich drüber. Alle anderen Browser machen das aber richtig!?!
2. Wieder ein rechts ausgerichteter DIV in einem umschlieÃ?enden DIV. In dem rechts ausgerichteten DIV ist ein form-Tag, mit einem Bild, einm Wort (Suche), einem Textfeld und einem Input-Button (als Bild mit Hover-Effekt).
Das Problem:
Im Opera 8 werden erstens die Inhalte nicht in einer horizontalen Ausrichtung angezeigt, sondern sie haben alle verschiedene Höhen, trotz align, absmiddle, usw.! Zweitens rücken die elemente alle ien wenig nach unten, über den Rahmen des umschlie�enden DIVs hinaus! Wie gesagt nur im Opera, alle anderes stellen es richtig dar.
Hier der Quellcode:
<div id="container">
<div id="Beschreibung">
<h1>Kampfkunst und Selbstverteidigung anstatt nur Kampfsport wird in der WingTsun-Schule in Kleve unterrichtet. Wo ist der Unterschied? Lesen Sie selbst ...</h1>
</div>
<div id ="inhalt">
<div id="eckeunten">
<div id="bildtop">
<img src="images/bd_chris1.jpg" width="200" height="200" border="0"><br>
<span class="bildunterschrift">Das ist eine Bildunterschrift</span>
</div>
<div id="ueberschrift">
<img src="images/wingtsun_schrift_kl.gif" alt="WingTsun" width="110" height="30" border="0">
<h2>Ã?berschrift</h2>
</div>
<div id="unterschrift">
<h3>Unterschrift</h3>
</div>
<div id="einleitung">
<h4>Einleitung</h4>
</div>
<div id="text">
<p>Weit hinten, hinter den Wortbergen, fern der Länder Vokalien und Konsonantien leben die Blindtexte. Abgeschieden wohnen Sie in Buchstabhausen an der Küste des Semantik, eines groÃ?en Sprachozeans. Ein kleines Bächlein namens Duden flieÃ?t durch ihren Ort und versorgt sie mit den nötigen Regelialien. Es ist ein paradiesmatisches Land, in dem einem gebratene Satzteile in den Mund fliegen. Nicht einmal von der allmächtigen Interpunktion werden die Blindtexte beherrscht â?? ein geradezu unorthographisches Leben.</p>
<p>Eines Tages aber beschlo� eine kleine Zeile Blindtext, ihr Name war Lorem Ipsum, hinaus zu gehen in die weite Grammatik. Der gro�e Oxmox riet ihr davon ab, da es dort wimmele von bösen Kommata, wilden Fragezeichen und hinterhältigen Semikoli, doch das Blindtextchen lie� sich nicht beirren. Es packte seine sieben Versalien, schob sich sein Initial in den Gürtel und machte sich auf den Weg.</p>
<p>Als es die ersten Hügel des Kursivgebirges erklommen hatte, warf es einen letzten Blick zurück auf die Skyline seiner Heimatstadt Buchstabhausen, die Headline von Alphabetdorf und die Subline seiner eigenen Stra�e, der Zeilengasse. Wehmütig lief ihm eine rethorische Frage über die Wange, dann setzte es seinen Weg fort.</p>
<p>Unterwegs traf es eine Copy. Die Copy warnte das Blindtextchen, da, wo sie herkäme wäre sie zigmal umgeschrieben worden und alles, was von ihrem Ursprung noch übrig wäre, sei das Wort "und" und das Blindtextchen solle umkehren und wieder in sein eigenes, sicheres Land zurückkehren.</p>
<p>Doch alles Gutzureden konnte es nicht überzeugen und so dauerte es nicht lange, bis ihm ein paar heimtückische Werbetexter auflauerten, es mit Longe und Parole betrunken machten und es dann in ihre Agentur schleppten, wo sie es für ihre Projekte wieder und wieder mi�brauchten. Und wenn es nicht umgeschrieben wurde, dann benutzen Sie es immernoch.</p>
</div>
</div>
<div id="copyright">
<span class="klein"> © 2005 maitopia.de, Alle Rechte vorbehalten.</span>
</div>
</div>
<div id="kopfzeile">
<a href="#"><img src="images/cogito.gif" alt="Logo der EWTO" width="230" height="50" border="0" align="right"></a>
</div>
<div id="kopfgelb">
<img src="images/spacer.gif" alt="spacer" width="116" height="1" border="0" align="absmiddle"><span class="schule">Kampfkunstgruppe Kleve</span><img src="images/spacer.gif" alt="spacer" width="305" height="1" border="0" align="absmiddle"><img src="images/verlauf.gif" alt="Verlauf" name="verlauf" width="300" height="20" border="0" align="absmiddle">
</div>
<div id="aufmacher">
<img src="images/aufmacher.jpg" border="0" width="180" height="140">
</div>
<div id="topnavi">
<span class="topnavi"><a href="#"><img src="images/home.gif" alt="Startseite" width="20" height="20" border="0" align="absmiddle">Home</a></span>
<span class="topnavi"><a href="#"><img src="images/impressum.gif" alt="Impressum" width="20" height="20" border="0" align="absmiddle">Impressum</a></span>
<span class="topnavi"><a href="#"><img src="images/kontakt.gif" alt="Kontakt" width="29" height="20" border="0" align="absmiddle">Kontakt</a></span>
<span class="suche">
<form name="form1" method="post" action="">
<img src="images/suche.gif" width="20" height="20" align="absmiddle">Suche
<input name="textfield" type="text" class="suchetext" size="20">
<input type="image" name="Submit" id="senden" align="absmiddle" src="images/go.gif" border="0" alt="suchen" onmouseover="this.src='images/go_over.gif'" onmouseout="this.src='images/go.gif'">
</form>
</span>
</div>
<div id="logo">
<img src="images/wingtsun_schrift.gif" alt="Logo WingTsun" width="180" height="60">
</div>
<div id="siegel">
<img src="images/siegel.gif" alt="Qualitätssiegel: Seit über 5 Jahren in Kleve" width="80" height="80">
</div>
<div id="navi">
<ul>
<li><span class="navikat"><a href="#">WingTsun</a></span></li>
<li><span class="navikat"><a href="#">BlitzDefence</a></span></li>
<li><span class="navikat"> </span></li>
<li id="schule"><span class="navischule"><a href="#">Die Schule</a></span></li>
</ul>
</div>
<div id="navi2">
<a href="#" onMouseOver="MM_swapImage('fotos','','images/fotos_over.gif',1)" onMouseOut="MM_swapImgRestore()"><img src="images/fotos.gif" alt="Fotogalerie" name="fotos" width="50" height="50" border="0" id="fotos"></a>
<a href="#" onMouseOver="MM_swapImage('videos','','images/videos_over.gif',1)" onMouseOut="MM_swapImgRestore()"><img src="images/videos.gif" alt="Videos" name="videos" width="50" height="50" border="0" id="videos"></a>
<a href="#" onMouseOver="MM_swapImage('zeiten','','images/training_over.gif',1)" onMouseOut="MM_swapImgRestore()"><img src="images/training.gif" alt="Trainingszeiten" name="zeiten" width="50" height="50" border="0" id="zeiten"></a>
<a href="#" onMouseOver="MM_swapImage('termine','','images/termine_over.gif',1)" onMouseOut="MM_swapImgRestore()"><img src="images/termine.gif" alt="Termine" name="termine" width="50" height="50" border="0" id="termine"></a>
<a href="#" onMouseOver="MM_swapImage('team','','images/team_over.gif',1)" onMouseOut="MM_swapImgRestore()"><img src="images/team.gif" alt="Ausbilderteam" name="team" width="50" height="50" border="0" id="team"></a>
</div>
</div>
Und hier die CSS-Datei:
body {
left: 0px;
top: 0px;
right: 0px;
bottom: 0px;
scrollbar-base-color:#FFFFFF;
scrollbar-3dlight-color:#FFFFFF;
scrollbar-arrow-color:#000000;
scrollbar-darkshadow-color:#FFFFFF;
scrollbar-face-color:#FFF3AE;
scrollbar-highlight-color:#FFFFFF;
scrollbar-shadow-color:#FFDB00;
scrollbar-track-color:#FFFFFF;
padding: 0px;
padding-right: 0px;
padding-top: 0px;
padding-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-left: 0px;
}
h1 {
font-family: Arial, Helvetica, sans-serif;
font-size: 9px;
color: #EFF0F0;
}
#kopfzeile {
background-color: #EFF0F0;
position: absolute;
z-index: 1;
top: 0px;
left: 0px;
right: 0px;
margin: 0px;
padding: 0px;
}
#kopfgelb {
background-color: #FFDB00;
position: absolute;
z-index: 2;
top: 51px;
left: 0px;
margin: 0;
width: 900px;
}
#aufmacher {
position: absolute;
z-index: 3;
left: 0px;
top: 72px;
}
.topnavi {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
border-right-width: 1px;
border-right-style: solid;
border-right-color: #FFFFFF;
padding-right: 10px;
line-height: 22px;
height: auto;
width: auto;
position: relative;
left: 0px;
}
.topnavi a:link {
color: #000000;
text-decoration: none;
}
.topnavi a:visited {
color: #000000;
text-decoration: none;
}
.topnavi a:hover {
color: #FFFFFF;
text-decoration: none;
}
.topnavi a:active {
color: #FFFFFF;
text-decoration: none;
}
#topnavi {
left: 181px;
top: 72px;
position: absolute;
width: 719px;
background-color: #E5E5E5;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #000000;
z-index: 4;
height: 22px;
margin: 0px;
padding: 0px;
}
#logo {
position: absolute;
left: 0px;
top: 0px;
z-index: 5;
}
.schule {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: bold;
color: #000000;
}
h2 {
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
font-weight: bold;
color: #000000;
}
h3 {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: bold;
color: #CCCCCC;
}
h4 {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: bold;
color: #000000;
}
p {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000000;
}
#inhalt {
background-image: url(../images/hintergr_inhalt_oben.gif);
background-repeat: no-repeat;
background-position: 0px 0px;
width: 720px;
left: 188px;
top: 100px;
position: absolute;
}
#ueberschrift {
position: relative;
width: auto;
height: auto;
}
#unterschrift {
position: relative;
width: auto;
height: auto;
}
#einleitung {
position: relative;
width: auto;
height: auto;
}
#text {
position: relative;
width: auto;
height: auto;
}
#eckeunten {
background-image: url(../images/hintergr_inhalt_unten.jpg);
background-repeat: no-repeat;
background-position: right bottom;
padding: 20px;
}
#siegel {
position: absolute;
left: 500px;
top: 0px;
z-index: 6;
}
.klein {
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
color: #CCCCCC;
}
.navikat {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
}
.navischule {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
margin-bottom: 1px;
}
#navi {
position: absolute;
left: 0px;
top: 213px;
width: 129px;
border-top-width: 1px;
border-top-style: solid;
border-top-color: #000000;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #000000;
z-index: 7;
}
#navi ul {
margin: 0;
padding: 0;
}
#navi li {
list-style-type: none;
padding-top: 1px;
padding-right: 5px;
padding-bottom: 3px;
padding-left: 5px;
background-color: #CCCCCC;
margin-top: 1px;
}
.navikat a:link {
color: #000000;
text-decoration: none;
}
.navikat a:visited {
color: #000000;
text-decoration: none;
}
.navikat a:hover {
color: #FFFFFF;
text-decoration: none;
}
.navikat a:active {
color: #FFFFFF;
text-decoration: none;
}
.navischule a:link {
color: #FFFFFF;
text-decoration: none;
}
.navischule a:visited {
color: #FFFFFF;
text-decoration: none;
}
.navischule a:hover {
color: #FFDB00;
text-decoration: none;
}
.navischule a:active {
color: #FFDB00;
text-decoration: none;
}
#schule {
border-top-width: 1px;
border-top-style: solid;
border-top-color: #000000;
}
#navi2 {
position: absolute;
width: 50px;
left: 130px;
top: 213px;
background-color: #EFF0F0;
z-index: 8;
}
#bildtop {
float: right;
position: relative;
top: 10px;
right: 10px;
height: auto;
width: auto;
border: 1px solid #CCCCCC;
padding: 10px;
margin: 10px 0px 20px 20px;
}
.bildunterschrift {
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
color: #000000;
}
.suche {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
color: #000000;
width: 220px;
height: auto;
right: 0px;
position: absolute;
top: 0px;
margin: 0px;
padding: 0px;
}
.suchetext {
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
color: #CC0000;
position: relative;
top: 0px;
}
Wei� jemand ne Lösung?
GruÃ?
Orakel7