nicht angemeldet
DIV ausrichten unterschiedliche Anzeige IE Firefox
Hallo,
bin HTML/CSS-Neuling und habe promt ein Problem mit der Ausrichtung der DIVs. Anzeige im IE so wie es sein soll, in Firefox rutscht die Kopfzeile, die eigentlich rechts oben direkt neben der linken Menüleiste sein soll in die Menüleiste.
Ich könnte natürlich eine Tabelle machen, DIVs wäre mir allerdings wesentlich lieber.
Vorab schon mal herzlichen Dank!
Gruß Jana
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>kommt noch</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<link href="css/struktur.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="mother">
<div id="menulinks">
menulinks
</div>
<div id="kopf">
kopf
</div>
<div id="menuoben">
menuoben
</div>
<div id="inhalt">
inhalt
</div>
<div id="fuss">
fuss
</div>
</div>
* {
padding: 0;
margin: 0;
}
body {
font: 100% Verdana, Arial, Helvetica, sans-serif;
text-align: center;
background-color: gray;
margin-top: 10px;
}
#mother {
width: 1004px;
text-align: left;
background-color: white;
margin: 0 auto;
}
#kopf {
height: 100px;
width: 804px;
background-color: #ff9900;
}
#menulinks {
float: left;
width: 190px;
margin-right: 7px;
background-color: #ffff99;
padding: 20px 5px;
}
#menuoben {
float: right;
height: 15px;
width: 804px;
background-color: #8080FF;
}
#inhalt {
float: right;
width: 804px;
background-color: red;;
padding: 20px 10px;
}
#fuss {
float: right;
width: 804px;
height: 30px;
padding: 5px;
background-color: silver;
}
-
bin HTML/CSS-Neuling und habe promt ein Problem mit der Ausrichtung der DIVs. Anzeige im IE so wie es sein soll, in Firefox rutscht die Kopfzeile, die eigentlich rechts oben direkt neben der linken Menüleiste sein soll in die Menüleiste.
Wenn ich das richtig sehe gibst du überhaupt nirgends an, wo die DIVs positioniert sein sollen..
http://de.selfhtml.org/css/eigenschaften/positionierung.htm#position
Das hilft dir bestimmt weiter.
Ich könnte natürlich eine Tabelle machen, DIVs wäre mir allerdings wesentlich lieber.
Gut so. Lass das lieber ;-)
-
Moin!
Wenn ich das richtig sehe gibst du überhaupt nirgends an, wo die DIVs positioniert sein sollen..
Muss man das? Die Elemente werden im Fluss dargestellt. Ein sehr guter Ansatz.
http://de.selfhtml.org/css/eigenschaften/positionierung.htm#position
Das hilft dir bestimmt weiter.
In diesem Fall eher nicht.
Ich könnte natürlich eine Tabelle machen, DIVs wäre mir allerdings wesentlich lieber.
Gut so. Lass das lieber ;-)
Hey! Einer von drei! Immerhin! Ich hab schon schlechtere Uebereinstimmungen gehabt. ;)
--
"Die Diebesgilde beklagte sich darueber, dass Mumm in aller Oeffentlichkeit behauptet hatte, hinter den meisten Diebstaehlen steckten Diebe."
- T. Pratchett
-
-
Hi!
bin HTML/CSS-Neuling und habe promt ein Problem mit der Ausrichtung der DIVs. Anzeige im IE so wie es sein soll, in Firefox rutscht die Kopfzeile, die eigentlich rechts oben direkt neben der linken Menüleiste sein soll in die Menüleiste.
Was ist denn der Unterschied zwischen der Kopfzeile und den anderen Elementen, die ja scheinbar tun was sie sollen?
Wenn Du mal etwas ueber CSS lernen moechtest, schau Dir doch mal diese Templates an: http://intensivstation.ch/templates/
Ich empfehle fuer Deine Situation 'Menu fix und Inhalt dynamisch' bei den 'grauen Templates'. Das aehnelt deiner Kopfleiste neben Menu Problematik und ist durch seine Einfachheit sehr uebersichtlich.
Ich hoffe, Du lernst etwas. Wenn Du was erkennst, aber nicht verstehst, frag einfach nochmal nach.
--
"Die Diebesgilde beklagte sich darueber, dass Mumm in aller Oeffentlichkeit behauptet hatte, hinter den meisten Diebstaehlen steckten Diebe."
- T. Pratchett-
Hallo,
danke für die Tipps. Zu einem Ergebnis bin ich leider noch nicht gekommen, eher dem Wahnsinn ein wenig näher... Mein Problem ist, ganz egal wie ich es mache, zwei Browser - zwei verschiedene Anzeigen.
Am ehesten gefällt mir die Lösung CSS 1. Aber wie bekommt man "menulinks" im IE nach oben? Mit "menulinks" dem "mother"-Div überordnen gehts im IE, in Firefox dafür nicht!
Ich bin mir nicht sicher, ob ich mit CSS 2 völlig auf dem falschen Weg bin, aber wie könnte ich dort die Fußzeile unter den Inhalt setzen und nicht mittenrein?
Vorab schon mal wieder vielen Dank! Die bisherigen Anregungen haben mich schon ein ganzes Stück weiter gebracht.
Gruß Jana
CSS 1:
* {
padding: 0;
margin: 0;
}body {
font: 100% Verdana, Arial, Helvetica, sans-serif;
text-align: center;
background-color: gray;
margin-top: 10px;
}#mother {
width: 1004px;
text-align: left;
background-color: white;
margin: 0 auto;
}#kopf {
float: right;
height: 100px;
width: 815px;
background-color: #ff9900;
}#menulinks {
position: absolute;
margin: 0;
width: 190px;
background-color: #ffff99;
padding: 0;
}#menuoben {
float: right;
height: 15px;
width: 815px;
background-color: #8080FF;
}#inhalt {
float: right;
width: 815px;
background-color: red;;
padding: 0;
}#fuss {
float: right;
width: 815px;
height: 30px;
padding: 0;
background-color: silver;
}CSS 2:
* {
padding: 0;
margin: 0;
}body {
font: 100% Verdana, Arial, Helvetica, sans-serif;
text-align: center;
background-color: gray;
margin-top: 10px;
}#mother {
width: 1004px;
text-align: left;
background-color: white;
margin: 0 auto;
}#kopf {
float: right;
height: 100px;
width: 815px;
background-color: #ff9900;
}#menulinks {
position: absolute;
width: 190px;
margin-right: 7px;
background-color: #ffff99;
padding: 0;
}#menuoben {
position: absolute;
top: 110px;
margin-left: 210;
height: 15px;
width: 795px;
background-color: #8080FF;
}#inhalt {
position: absolute;
margin-top: 115;
margin-left: 210;
width: 800px;
background-color: red;;
padding: 0;
}#fuss {
width: 820px;
height: 30px;
padding: 0;
background-color: silver;
}<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>kommt noch</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<link href="css/struktur.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="mother"><div id="menulinks">
menulinks
</div><div id="kopf">
kopf
</div><div id="menuoben">
menuoben
</div><div id="inhalt">
inhalt
</div><div id="fuss">
fuss
</div></div>
</body>
</html>-
Hi!
Ich habe gerade andere Dinge zu tun, sorry.
Aber der Witz an dem von mir erwaehnten Layout (an den meisten dieser Leyouts) ist der Part des Contents:
#inhalt {
margin-left: 200px;
background-color:#fff;
overflow: auto;
}Menu hat 200px Breite. Und der Contet ist warum nicht in Menu sondern daneben?
Das sollte bei deiner Kopfleiste genauso funktionieren. Ansonsten kannst Du natuelrich den Kopf auch floaten lassen.
--
"Die Diebesgilde beklagte sich darueber, dass Mumm in aller Oeffentlichkeit behauptet hatte, hinter den meisten Diebstaehlen steckten Diebe."
- T. Pratchett-
Hallo,
habe mein Problem nach ein paar Tagen Abstand nun folgendermaßen gelöst. Nochmals Dankeschön für die Hilfe.
Gruß Jana
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>kommt noch</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<link href="css/struktur.css" rel="stylesheet" type="text/css">
</head>
<body><div id="menu">
<div id="menulinks">
menu
</div>
</div><div id="mother">
<div id="kopf">
kopf
</div><div id="menuoben">
menuoben
</div><div id="inhalt">
inhalt
</div>
</div><div id="unten">
<div id="fuss">
fuss
</div>
</div></body>
</html>* {
padding:0px;
margin:0px;
}body {
background-color: #e1ddd9;
font-size: 12px;
font-family: Verdana, Arial, SunSans-Regular, Sans-Serif;
color:#564b47;
margin: 0 auto;
text-align: center;
}#menu {
width: 1004px;
margin: 0 auto;
text-align: left;}
#mother {
width: 1004px;
background-color: ffff00;
margin: 0 auto;
text-align: center;
}#menulinks {
position: absolute;
width: 200px;
padding:0px;
background-color: green;
text-align: left;
}#kopf {
float: right;
height: 100px;
width: 800px;
background-color: orange;
text-align: left;
}#menuoben {
float: right;
width: 800px;
background-color: blue;
text-align: left;
}#inhalt {
float: right;
width: 800px;
background-color:#fff;
text-align: left;
overflow: auto;
}#unten {
width: 1004px;
margin: 0 auto;
text-align: center;
}#fuss {
float: right;
width: 800px;
background-color: red;
text-align: left;
}
-
-
-