nicht angemeldet
Mehrere div's nebeneinander für FF und IE
0 0 Was?
Mehrere div's nebeneinander für FF und IE
MudGuardHallo,
ich teste gerade CSS Layout anstatt Tabellen Layout. Obwohl viel über float und Inkompatibilität dazu, geschrieben worden ist kann ich immer noch nicht erkennen wie zwei div's nebeneinander platzieren kann.
In Selfhtml z. B. ist nur ein Beispiel mit li und div nebeneinander oder li / div / div. Aber wie geht das mit 2 div's und zwar so dass es im FF und(!) im IE sauber dargestellt wird?
Es soll im linken div das Logo und im rechten die Navigation untergebracht werden.
Mein Code bis jetzt:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<link rel="shortcut icon" href="$basepath/favicon.ico">
<title>Vanvara.com - Individuelle, Preiswerte & Praktische Wohnaccessoires</title>
<style type="text/css">
body {
color: black;
background-color: white;
font-size: 100.01%;
font-family: verdana,helvetica,sans-serif;
margin: 0;
padding: 0;
text-align: center;
}
div#page {
text-align: left;
margin: 0 auto;
width: 750px;
padding: 0;
border: 2px solid #000000;
}
html>body div#page {
border-color: #000000;
}
div#header {
text-align: left;
margin: 0;
width: 750px;
padding: 0;
border: 2px solid #0000ff;
}
html>body div#header {
border-color: #0000ff;
}
div#logo {
text-align: left;
float: left;
margin: 0;
width: 200px;
padding: 0;
border: 1px solid #00ff00;
}
html>body div#logo {
border-color: #00ff00;
}
div#nav {
text-align: left;
margin: 0;
width: 550px;
padding: 0;
border: 1px solid #ff0000;
}
html>nav div#logo {
border-color: #ff0000;
}
</style>
</head>
<body>
<div id="page">
<div id="header">
<div id="logo">
x
</div> <!-- logo -->
<div id="nav">
x
</div> <!-- nav -->
</div> <!-- header -->
</div> <!-- page -->
</body>
</html>
Danke für die Mühe
-
Hi,
ich teste gerade CSS Layout anstatt Tabellen Layout.
weise.
In Selfhtml z. B. ist nur ein Beispiel mit li und div nebeneinander oder li / div / div. Aber wie geht das mit 2 div's
Exakt(!) so wie mit einem <li> und einem <div>[1], wie mit einem <div> und einem <p>, einem <h1> und einem <span> oder einem <foo> und einem <bar>. Für CSS existiert nicht der geringste Unterschied zwischen zwei Elementen, gleich wie sie heißen, bis auf die, die in CSS selbst festgelegt werden.
und zwar so dass es im FF und(!) im IE sauber dargestellt wird?
Beim IE ist neben diverser Bugs zu beachten, dass er <li> irgend eine Sonderbehandlung angedeihen lässt. Normalerweise reicht aber Kenntnis der üblichen Bugs, wie z.B. dem Three Pixel Text Jog oder dem Doubled Float Margin Bug.
html>body div#page {
border-color: #000000;
}
html>body div#header {
border-color: #0000ff;
}[...]
Was bezweckst Du hiermit?
Cheatah
[1] Davon abgesehen, dass das <li> immer in einem <ul> oder <ol> geschachtelt sein muss, in dem ein <div> nicht direkt existieren darf.
--
X-Self-Code: sh:( fo:} ch:~ rl:° br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
X-Will-Answer-Email: No
X-Please-Search-Archive-First: Absolutely Yes-
Hi,
html>body div#page {
border-color: #000000;
}
html>body div#header {
border-color: #0000ff;
}
[...]Was bezweckst Du hiermit?
das habe ich aus selfhtml, ist mit dem Kommentar /* Farbangleichung an den Internet Explorer */ versehen und bewirkt das die Farbe in FF und IE gleich ist.
Kannst Du mir noch den Schlüssel zur Decodierung Deiner Antwort posten? ;-) Sorry, aber damit echt nix anfangen.
Trotzdem einen schönen Sonntag
-
Hallo Tommi.
das habe ich aus selfhtml, ist mit dem Kommentar /* Farbangleichung an den Internet Explorer */ versehen und bewirkt das die Farbe in FF und IE gleich ist.
Das ist zu bezweifeln. Du hast dir den Hinweis auf der betroffenen Seite durchgelesen?
„Beachten Sie:
Der Internet Explorer 6.0 interpretiert die Nachfahren-Selektoren > und + noch nicht.“
Kannst Du mir noch den Schlüssel zur Decodierung Deiner Antwort posten? ;-) Sorry, aber damit echt nix anfangen.
Was genau hast du nicht verstanden? CSS ist es egal, welche Eigenschaft du bei welchem Element festlegst.
Die Methode, um zwei Elemente nebeneinander zu platzieren ist im Prinzip gleich.
Einen schönen Sonntag noch.
Gruß, Ashura
--
Selfcode: sh:( fo:} ch:? rl:( br: n4:~ ie:{ mo:| va:) de:> zu:) fl:( ss:) ls:[ js:|
30 Days to becoming an Opera8 Lover -- Day 21: Toolbars
Meine Browser: Opera 8.01 | Firefox 1.0.6 | Lynx 2.8.5 | Netscape 4.7 | IE 6.0
[Deshalb frei! - Argumente pro freie Software]-
"Beachten Sie: Der Internet Explorer 6.0 interpretiert die Nachfahren-Selektoren > und + noch nicht."
Was Nachfahren Selektoren ist klar, aber was um alles in der Welt soll denn > und + sein?
Was ich nicht verstehe, ist warum es mit ul/li und einem div richtig dargestellt wird (FF + IE! trotz float), siehe dazu http://de.selfhtml.org/css/layouts/anzeige/2spaltig_breite.htm, und mit 2 divs nicht.
Meine Frage immer noch: Woran liegt das und wie funktioniert es?
-
Hallo Tommi.
Was Nachfahren Selektoren ist klar, aber was um alles in der Welt soll denn > und + sein?
Du widersprichst dir.
Meine Frage immer noch: Woran liegt das und wie funktioniert es?
[ ] Du hast dir dein Dokument einmal im FF und Opera angeschaut
[x] Der IE interpretiert deine width-Angabe falsch.
Einen schönen Sonntag noch.
Gruß, Ashura
--
Selfcode: sh:( fo:} ch:? rl:( br: n4:~ ie:{ mo:| va:) de:> zu:) fl:( ss:) ls:[ js:|
30 Days to becoming an Opera8 Lover -- Day 21: Toolbars
Meine Browser: Opera 8.01 | Firefox 1.0.6 | Lynx 2.8.5 | Netscape 4.7 | IE 6.0
[Deshalb frei! - Argumente pro freie Software]-
Hi,
Was Nachfahren Selektoren ist klar, aber was um alles in der Welt soll denn > und + sein?
Du widersprichst dir.Nur teilweise, denn + hat mit Nachfahren wenig zu tun (den Bug in SelfHTML hab ich vor ein paar Wochen schon gemeldet)
Und > ist auch nicht der Nachfahren-Selektor, sondern der Kind-Selektor (Kinder sind zwar auch Nachfahren, aber der Nachfahren-Selektor ist nicht auf die Kindgeneration eingeschränkt)cu,
Andreas--
Warum nennt sich Andreas hier MudGuard?
Schreinerei Waechter
Fachfragen per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da.
-
Hallo MudGuard.
Was Nachfahren Selektoren ist klar, aber was um alles in der Welt soll denn > und + sein?
Du widersprichst dir.Nur teilweise, denn + hat mit Nachfahren wenig zu tun (den Bug in SelfHTML hab ich vor ein paar Wochen schon gemeldet)
Und > ist auch nicht der Nachfahren-Selektor, sondern der Kind-Selektor (Kinder sind zwar auch Nachfahren, aber der Nachfahren-Selektor ist nicht auf die Kindgeneration eingeschränkt)Wenn man es genau nimmt, ja. :-)
Einen schönen Sonntag noch.
Gruß, Ashura
--
Selfcode: sh:( fo:} ch:? rl:( br: n4:~ ie:{ mo:| va:) de:> zu:) fl:( ss:) ls:[ js:|
30 Days to becoming an Opera8 Lover -- Day 21: Toolbars
Meine Browser: Opera 8.01 | Firefox 1.0.6 | Lynx 2.8.5 | Netscape 4.7 | IE 6.0
[Deshalb frei! - Argumente pro freie Software]
-
-
-
Hi,
Was ich nicht verstehe, ist warum es mit ul/li und einem div richtig dargestellt wird (FF + IE! trotz float), siehe dazu http://de.selfhtml.org/css/layouts/anzeige/2spaltig_breite.htm, und mit 2 divs nicht.
Du solltest nicht nur das Beispiel ansehen, sondern auch die Erläuterungen und ganz allgemein das CSS-Kapitel einmal durchsehen. Dann würdest Du auch verstehen, was es mit der Farbangleichung auf sich hat: das Beispiel verwendet den border-style ridge, der im IE farblich anders umgesetzt wird. Um dies etwas anzugleichen, wird über einen CSS-Hack eine _andere_ Farbe definiert. Weder hat es irgend einen Sinn, hiermit dieselbe Farbe anzugeben, noch überhaupt eine Korrektur bei einem solid border vorzunehmen.
Auch glaube bitte den anderen Antwortern, daß es absolut keinen Unterschied macht, welches Block-Element Du verwendest.
Meine Frage immer noch: Woran liegt das und wie funktioniert es?
Berücksichtige das Box-Modell.
freundliche Grüße
Ingo
-
-
-
-