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]
Willkommen auf Easy's Hompage
[/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
Kannst du auch noch die CSS-Datei „style.css“ hier einstellen ?
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;
}
[/code]
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.
.navigation {
width:195px;
height:500px;
margin-left:20px;
margin-top:50px;
position:relative;
float: left;
}
.textfeld {
position:relative;
margin-left:20px;
width:40em;
top:0px;
}
Die HTML-Datei am besten so ändern. Nach der Navigation ein DIV rein
entsprechente CODE-Abschnitt
[code]
[/code]Und am Ende ein DIV raus nehmen, also nur ein DIV.:
[code]
...
[/code]
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 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.
hi,
danke. ich glaube ich habe es verstanden.
bye easy
