• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Überlagerung der Container bei Firefox

Status
Für weitere Antworten geschlossen.

easy1987

Neues Mitglied
Hi Leute,

ich habe ein Problem mit dem Firfox. Ich habe eine Hompage programmiert und in Internet Explorer wird sie auch so angezeigt, wie sie es soll. Aber im FirFox überlagern sich die Container, die ich benutzt habe. Des Weiteren funktionieren meine Menüpukte nich, wobei ich glaube, dass liegt daran, das ein Container über dem Container der Menüpunkte liegt, weil ein anderer Butten, der nach dem gleichen Prinzip gemacht ist, der funktioniert.

Es handelt sich um folgenden Quellcode:
HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
  <head>
     <title>Willkommen auf Easy's Hompage</title>
     <script type="text/JavaScript">
<!--
function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
  <link href="style.css" rel="stylesheet" type="text/css">
  </head>
  <body onLoad="MM_preloadImages('images/home_ro.gif','images/projekt_ro.gif','images/delia_ro.gif','images/nachbarschaft_ro.gif','images/Aufgaben_ro.gif','images/Tagebuch_ro.gif','images/nach_oben_ro.gif')">
  <div style="text-align:center;"><img src="images/Willkommen1.png" alt="WillkommenLogo" /></div>
  <div class="navigation">
   <a href="projekt.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image3','','images/projekt_ro.gif',1)"><img src="images/projekt.gif" alt="Das Projekt" name="Image3" width="191" height="45" border="0"></a>
   <a href="delia.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image4','','images/delia_ro.gif',1)"><img src="images/delia.gif" alt="Delia von Meyerbach" name="Image4" width="191" height="45" border="0"></a>
   <a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image5','','images/nachbarschaft_ro.gif',1)"><img src="images/nachbarschaft.gif" alt="Nachbarschaft" name="Image5" width="191" height="45" border="0"></a>
   <a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image6','','images/Tagebuch_ro.gif',1)"><img src="images/Tagebuch.gif" alt="Delia's Tagebuch" name="Image6" width="191" height="45" border="0"></a>
   <div class="textfeld">
     <h1 id="heading1">Willkommen auf Easy's Hompage</h1>
     <p>Vielen Dank, dass Ihr heute meine Hompage besuchen kommt.<br/>
     Sie wurde in erster Linie wegen des Singleprojektes "Simlane 10" erstellt.
     Was es genau mit dem Projekt auf sich hat erfahrt ihr unter dem Men&uuml;punkt <a href="projekt.html">"Das Projekt"</a>. <br/> 
  Des Weiteren k&ouml;nnt ihr unter <a href="delia.html">"Delia"</a> mehr &uuml;ber die Person
     meines Single-Sims lesen. <br/> In "Delias's Tagebuch" erfahrt ihr dann mehr &uuml;ber ihr Leben und ihre pers&ouml;nlichen
     Gedanken. <br/> Also schaut euch einfach mal um. Ich w&uuml;nsche euch dabei viel Spa&szlig;.</p>
     <p> Eure Easy.</p>
     <hr/>
     <h1>News</h1>
  <a href="#heading1" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image7','','images/nach_oben_ro.gif',1)"><img src="images/nach_oben.gif" alt="nach oben" name="Image7" width="123" height="33" border="0" align="right"></a>
   </div>
  </div>
</body>
</html>

Wäre cool, wenn mir jemand von euch helfen könnte, denn da ich absolter Anfänger bin habe ich keine Ahnung, wie ich an die Sache rangehen muss.

Danke schon mal im Vorraus.

bye easy
 
Hi Leute,

hier ist die fehlende CSS-Datei:
Code:
a {
 color:#8ff806;
 text-decoration:none;
}
 
body {
 background-color:#004d8d; 
 color:#2de90a;
 padding:0px; 
 margin:0px;
}
hr {
 color:#2de90a;
}
h1 {
 text-align:center;
}
.navigation {
 width:195px; 
 height:500px; 
 margin-left:20px; 
 margin-top:50px; 
 position:absolute;
}
p {
 font-size:15px;
 text-align:center;
}
.pictext {
 text-align:left;
}
.textfeld {
 position:absolute; 
 margin-left:20px; 
 width:40em; 
 top:0px;
}

bye easy
 
Zuerst würde ich auf absolute Positionen verzichen, die sind hier doch garnicht nötig. Ich würde die CSS-Datei wie folgt ändern.
Code:
.navigation {
 width:195px; 
 height:500px; 
 margin-left:20px; 
 margin-top:50px; 
 position:[COLOR=Red]relative[/COLOR];
 [COLOR=Red]float: left;[/COLOR]
}
.textfeld {
 [COLOR=Red][COLOR=Black]position:[/COLOR]relative[/COLOR]; 
 margin-left:20px; 
 width:40em; 
 top:0px;
}
Die HTML-Datei am besten so ändern. Nach der Navigation ein DIV rein
entsprechente CODE-Abschnitt
Code:
<div class="navigation">
 <a href="projekt.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image3','','images/projekt_ro.gif',1)">
   <img src="http://www.html.de/images/projekt.gif" alt="Das Projekt" name="Image3" width="191" height="45" border="0">
 </a>
 <a href="delia.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image4','','images/delia_ro.gif',1)">
   <img src="http://www.html.de/images/delia.gif" alt="Delia von Meyerbach" name="Image4" width="191" height="45" border="0">
 </a> 
 <a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image5','','images/nachbarschaft_ro.gif',1)">
   <img src="http://www.html.de/images/nachbarschaft.gif" alt="Nachbarschaft" name="Image5" width="191" height="45" border="0">
 </a> 
 <a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image6','','images/Tagebuch_ro.gif',1)">
  <img src="http://www.html.de/images/Tagebuch.gif" alt="Delia's Tagebuch" name="Image6" width="191" height="45" border="0">
 </a> 
[COLOR=Red]</div>[/COLOR]
<div class="textfeld">
Und am Ende ein DIV raus nehmen, also nur ein DIV.:
Code:
...
[COLOR=Black]<img src="http://www.html.de/images/nach_oben.gif" alt="nach oben" name="Image7" width="123" height="33" border="0" align="right"></a>
[/COLOR][COLOR=Black]</div> 
</body>
</html>
[/COLOR]

EDIT: Es ist tatsächlich so, das du durch die absolute Position die Navigation überdeckt hast.
 
hi,

danke, jetzt übelagern sich die Container nicht mehr, aber die Textform hat sich leider geändert. Jetzt ist der Text zu weit oben und in Firefox gequetscht.

Kannst du mir noch erklären, was der unterschied zwischen Relative und Absolute ist??? Also mich interessiert, warum das dann funktioniert.

Und wie bist du darauf gekommen, dass man nur einen div braucht?

bye easy
 
Was ist der Unterschied ?
Lese am besten mal bei SELFHTML
SELFHTML: Stylesheets / CSS-Eigenschaften / Positionierung und Anzeige von Elementen

danke, jetzt übelagern sich die Container nicht mehr, aber die Textform hat sich leider geändert. Jetzt ist der Text zu weit oben und in Firefox gequetscht.
Bau im Textfeld einfach noch ein z.B. margin-top:50px; dazu. Dadurch verschiebst du das Feld nach unten.
Das width: 40em; stört mich ein wenig. Evtl. ist es deshalb gequescht.
Setz lieber stattdessen ein margin-right: 20px; dazu. Ist meine Meinung.;-)

Und wie bist du darauf gekommen, dass man nur einen div braucht?
Erfahrung;-)

EDIT: Oder meinst du, dass unten ein </div> reicht. Wenn ich nach der Navigation ein /DIV hinzufüge, muß ich doch an einer anderen Stelle ein wegnehmen.
 
hi,

also sorry, aber das mit dem margin-top, da hätte ich auch selbst drauf kommen können *g*:-).

Ich wollte eigentlich wissen, wie du darauf gekommen bist, dass man die container nicht verschachtel. Weil als ich das geschriben habe, hatte ich es mal on verschachtelung ausprobiert und dann hatten sie sich im internet explorer überlagert, aber so wie es jetzt ist funktioniert es. Warum geht das jetzt?

bye easy
 
Ersteinmal wurden die position:absolute im Textfeld überlagert. gibt man den DIVS ein position:relative ist dieses nicht mehr gegeben. Allerdings wird das Textfeld dann unter die navigation gesetzt. Durch float: left in der navigation wird nun die Navigation links neben das Textfeld gesetzt.

Wie bin ich darauf gekommen, die DIV´s nicht zu verschachteln ?
Die Navigation hat doch nichts mit dem Textfeld zu tun, wieso sollten diese dann verschachtelt werden ?
 
hi,

ich hatte sie verschachtelt, weil als ich sie nicht verschachtelt hatte, haben sich die container überlagert auch im Internet explorer. und mit der verschachtelung war das nicht mehr so, aber da hatte ich auch noch die positionen:absolute.

Ach und danke für die erklärung, jetzt verstehe ich das auch einiger maßen, nur was ist genau der unterschied zwischen absolute und relative??

bye easy
 
Ich weiss, bin kein guter Lehrer. Deshalb hatte ich dir ja den Link von SELFHTML gegeben. Ich wersuche es mal mit deinem Code zu erklären.
Du hattest margin-left: 20px; und position: absolute; angegeben. In deinem Fall heißt das (bei nicht verschachtelung). 20px vom linken Bildschrirmrand.
Bei Position:repative; heisst das 20px vom rechten Rand der Navigation.

Und jetzt mit Verschachtelung:
Position: absolute; Dann 20px vom linken Rand des Navi-Div. Da dieser breiter ist, werden die Links verdeckt.
relative: ebenfalls 20px vom linken Rand des Navi-Divs, nur das er es jetzt nach unten verschiebt, damit nichts verdeckt wird.

Hoffe, das dies einigermassen Verständlich war. ;-)

EDIT: Ps.: So sollte es jedenfalls sein, wenn der InternetExplorer das anders macht, so ist das ein Fehler im IE, und nicht im FireFox.


 
Status
Für weitere Antworten geschlossen.

Neueste Beiträge

Zurück
Oben