CSS wird nicht/nicht richtig interpretiert.

Beate · 18. September 2008, 10:19:50

Hallo zusammen!

Ich versuche gerade, Div-Bereiche über CSS-IDs zu definieren. Allerdings werden manche Angaben schlichtweg ignoriert. Ich kann sie bis ins unendliche verändern, an der Anzeige ändert sich nichts.
Auf dem angehängten Bild könnt ihr sehen, wie es momentan interpretiert wird. Natürlich bleiben die Farben nicht so, das ist für mich nur zum leichteren Unterscheiden der Div-Bereiche, also dazu bitte keine Kommentare/Verbesserungsvorschläge

.

HTML-Datei:

Code Auswählen

<html>
<head><title>1. Versuch</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<div id="lo">
Links oben
</div>

<div id="om">
Die Städte der Meere
</div>

<div id="ro">
Rechts oben
</div>

<div id="menue_links">
<b><a href="">Prolog</a></b><br>
<b>Erster Teil</b><br>
<a href="">Felsenfestung Atlantia</a><br>
<br>
</div>

<div id="mitte">
Mein Romanprojekt... Mit vielen Infos...
</div>

<div id="menue_rechts">
<b>Hintergrundwissen</b><br>
<a href="">Personen</a><br>
<br>
</div>

</body>
</html>

CSS-Datei:

Code Auswählen

/***************** DIV-Bereiche *****************/
#lo {
/*	background-image: ""; */
	background-color: #FF0000;
	position: relative;
	float: left;
	left: 0;
	top: 0;
	height: 150px;
	width: 150px; }

#ro {
/* 	background-image: ""; */
	background-color: #00FF00;
	position: relative;
	float: right; 
	right: 0;
	top: 0;
	height: 150px;
	width: 150px; 
	}
	
#om {
	background-color: #00AA00;
	text-align: center;
	text-transform: capitalize;
	text-decoration: underline overline;
	font-size: 30px; 
	position: relative;
	flaot: left; 
	right:150px;
	left:0;
	top:0;
	height: 150px;
	width: auto;
	}
	
#menue_links {
	background-color: #000000;
	float: left; 
	margin-top: 2px;
	left:0px
	width:150px;
	height: auto; 
	}
	
#menue_rechts {
	background-color: #FFFF00;
	position: relative;
	float: right;
	top:150px;
	right:0px;
	width:150px;
	height: auto;
	}
	
#mitte {
	background-color: #FF00FF;
	margin-top: 2 px;
	margin-right: 2 px;
	margin-left: 2px; 
	width: auto;
	}

Momentan wird (nur als kleines Beispiel) nichtmal die angabe "width: 150px;" bei der id menue_links interpretiert. Nur finde ich meinen Fehler irgendwie nicht

Danke schonmal für jede Hilfe!
Beate

[Dateianhang durch Administrator gelöscht]

Maja · 18. September 2008, 10:52:54

Mit welchem Browser ist das Problem aufgetreten?

Ich bin gerade auf der Arbeit, schau es mir mal in Ruhe an, wenn ich daheim bin.
Bis jetzt sehe ich nur ein Problem mit "Float" in Kombination mit "Position" bei ro und lo - aber das kann nicht mit der fehlenden Breite zusammenhängen. Später mehr.

Beate · 18. September 2008, 10:56:19

Ich arbeite momentan mit dem Internet Explorer 7.0 - wenn es da mal funktioniert, widme ich mich den anderen Browsern

.

Maja · 18. September 2008, 11:03:48

Der IE, auch der /er, interpretiert CSS sehr häufig falsch. Teste die Seite mal mit Firefox oder Opera, die können das besser. Der IE ist nicht standardkonform, und wer ihn nutzt, ist selbst schuld.

Also, nie für Darstellung im IE optimieren, vor allem nicht, wenn man mit CSS arbeitet...

BTW, die Angabe "Position: Relative" kannst du bei lo und ro in "Absolute" ändern.
Bei om hast du flaot statt float geschrieben.

Beate · 18. September 2008, 11:08:16

Darstellung Firefox

[Dateianhang durch Administrator gelöscht]

Beate · 18. September 2008, 11:08:47

Darstellung Netscape

Mehr Browser hab ich auf meinem PC nicht. So gesehen war der IE doch gar nicht so schlecht beim Interpretieren.

[Dateianhang durch Administrator gelöscht]

Feuertraum · 18. September 2008, 12:02:28

Hallo Beate!

Volker hat auf eine sehr gute Webseite hingewiesen. Unter

http://browsershots.org

können Sie die Webseite sehen, ohne andere Browser installieren zu müssen.
Allerdings: Je mehr Browser Sie auswählen, desto länger dauert es, bis es fertig ist...

LG (und nochmal ein dickes dankeschön an Volker für den Tipp)

Feuertraum

Maja · 18. September 2008, 15:44:39

Okay, bin zuhause, setze mich gerade dran. Später mehr.

Maja · 18. September 2008, 16:00:39

So, erster dicker Fehler:

Code Auswählen


#menue_links {
	background-color: #000000;
	float: left; 
	margin-top: 2px;
	left:0px
	width:150px;
	height: auto; 
	}

Hinter "left" fehlt das abschließende Semikolon. Der Befehl wird nicht als abgeschlossen betrachtet, bevor ein Semikolon kommt. Das nächste kommt aber erst nach der Breitenangabe - die daher nicht als eigener Befehl wahrgenommen und ignoriert wird.

Zur Positionierung;
Du gibst alles mit "relative" an. Ein relativ positioniertes Element muß sich aber immer auf ein übergeordnetes beziehen. Das ist nicht das, was du hier brauchst - es muß absolut sein: Genau dorthin gehörst du, Div, und sonst nirgendwo.
"Float" bedeutet, daß ein Element nicht positioniert wird, sondern von Text oder anderen Elementen umflossen - je nach Ansage linksrum oder rechtsrum.

Maja · 18. September 2008, 16:06:37

So, und jetzt ans Eingemachte:

- sollen die Bereiche nahtlos ineinander übergehen oder immer 2px Abstand zum Nebenelemen (links/rechts/oben/unten) haben, durch die dann der Hintergrund hindurchschimmert?

- soll der Zentrale Bereich (#mitte) zwischen #menue_links und #menue_rechts sitzen?
Dann können wir hier nicht mit pixelgenauen Angaben arbeiten, da viele verschiedene Bildschirmauflösungen gebräuchlich sind und die Breite der Anzeige (und somit auch die Gesamtpixelzahl) unterschiedlich ist. Ich würde in dem Fall etwas prozentuales ausprobieren, warte auf Rückmeldung.

Bis dahin ist hier ein bereinigstes Stylesheet, bei dem der Mittelbereich geflissentlich ignoriert wird (weil er komplett hinter om verschwindet)

Code Auswählen


/***************** DIV-Bereiche *****************/
#lo {
/*	background-image: ""; */
	background-color: #FF0000;
	position: absolute;
	left: 0;
	top: 0;
	height: 150px;
	width: 150px;
  z-index: 1000; }

#ro {
/* 	background-image: ""; */
	background-color: #00FF00;
	position: absolute;
	right: 0;
	top: 0;
	height: 150px;
	width: 150px; 
  z-index: 1001;
	}
	
#om {
	background-color: #00AA00;
  position: absolute;
	text-align: center;
	text-transform: capitalize;
	text-decoration: underline overline;
	font-size: 30px; 
	right:150px;
	left:0;
	top:0;
	height: 150px;
	width: 100%;
  z-index: 900;
	}
	
#menue_links {
	background-color: #000000;
  position: absolute;
  top: 150px; 
  left: 0;
	left: 0px;
	width: 150px;
	height: auto; 
	}
	
#menue_rechts {
	background-color: #FFFF00;
	position: absolute;
	top:150px;
	right:0px;
	width:150px;
	height: auto;
	}
	
#mitte {
	background-color: #FF00FF;
	margin-top: 2 px;
	margin-right: 2 px;
	margin-left: 2px; 
	width: auto;
	}

Beate · 18. September 2008, 16:15:11

Hallo Maja!

Ich fühle mich so... unwissend

Also der Mittelbereich soll zwischen die beiden Menüs, das hast du richtig erkannt. Wie genau ich das mit dem Hintergrund mache, hab ich mir noch nicht überlegt - also inwieweit die einzelnen Bereiche überhaupt einen Hintergrund bekommen. Wie gesagt - momentan ist das nur so bunt, um die Effekte zu sehen. Aber ich würde jetzt spontan sagen, dass es mit Abstand von Haus aus besser aussieht, da es nicht so zusammengedrängt wirkt.

Nochmal ganz großes Danke

Maja · 18. September 2008, 16:37:57

Hast du dir mal meine Elomaran.de-Seite angesehen? Da arbeite ich auch mit verschiedenen Feldern und Hintergründen.
Zum Nachspielen:

Code Auswählen


<html>
<head><title>Majas Elomaran-Seite</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<div class="engellinks"></div>
<div class="engelrechts"></div>

<div class="rahmen">
</div>

<div class="rahmen2">
<div class="banner">
</div>

<div class="inhalt">
Und hier kommt der Inhalt rein.
</div>
</div>

<div class="navilinks">
Hier die linke Navi
</div>

<div class="navirechts">
Hier die rechte Navi
</div>
</body>
</html>

Das Stylesheet dazu. Es setzt die dekorativen Bilder ein, die tatsächlich Div-Hintergründe sind, die mit den verschiedenen Stylesheets gewechselt werden können:

Code Auswählen


body {
     background-color: #c0c0c0;
     background-image: url(http://www.elomaran.de/images/wolkenhell.jpg);
     background-attachment: fixed;
     text-align: center;
     font-family: Verdana,Arial,Helvetica,Helv,sans-serif;
     font-size: 0.9em;
     color: #c0c0c0;
     }

div.banner {
     background-image: url(http://www.elomaran.de/images/logo.png);
     width: 564px;
     height: 159px;
     margin: 0 auto;
     }
   
div.engellinks {
     background-image: url(http://www.elomaran.de/images/linksrechts.jpg);
     width: 497px;
     height: 188px;
     position: absolute;
     top: 0px;
     left: 0px;
     z-index: 2;
     }

div.engelrechts {
     background-image: url(http://www.elomaran.de/images/linksrechts.jpg);
     width: 497px;
     height: 188px;
     position: absolute;
     top: 0px;
     right: 0px;
     z-index: 1;
     }

div.inhalt {
     position: absolute;
     top: 200px;
     left: 0px;
     padding-left: 40px;
     padding-right: 40px;
     padding-bottom: 30px;
     min-width: 90%;
     }

div.navilinks {
     position: absolute;
     top: 200px;
     left: 3%;
     width: 15%;
     z-index: 2000;
     }

div.navirechts {
     position: absolute;
     top: 200px;
     right: 3%;
     width: 15%;
     z-index: 2001;
     }

div.rahmen {
     background-color: #000000;
     background-image: url(images/wolkendunkel.jpg);
     background-attachment: fixed;
     text-align: center;
     position: fixed;
     top: 0px;
     left: 20%;
     width: 60%;
     height: 98.2%;
     padding-top: 14px;
     z-index: 300;
     }

div.rahmen2 {
     text-align: center;
     position: absolute;
     top: 0px;
     left: 20%;
     width: 60%;
     min-height: 98.2%;
     padding-top: 14px;
     z-index: 400;
     }

Ich poste das deshalb, weil das in deine Richtung gehen könnte.

Beate · 18. September 2008, 16:43:45

Ich hab mich tatsächlich grad was die Aufteilung angeht, an elomaran orientiert, allerdings kann ich da natürlich nicht einfach auf die Stylesheets zugreifen.

Wieso hast du denn bei dir mit Klassen und nicht mit IDs gearbeitet? Bietet das irgendeinen Vorteil? Was ich noch aus dem ganzen Gerede von meinem Ex weiß, ist, dass IDs irgendwie pro Dokument nur einmal vergeben sein dürfen, Klassen aber öfter.

Maja · 18. September 2008, 17:12:54

Ich habe mir, als ich vor sechs oder sieben Jahren mit CSS angefangen habe, anwöhnt, alles mit Klassen zu machen, weil ich dann nicht lang überlegen muß "Ist es nun Div oder Klasse?". Dein Ex hat völlig Recht mit der Unterscheidung.
Aber natürlich dürfen auch Objekte, die pro Seite nur einmal vorkommen, eine Klasse sein und kein ID.

BTW, frag mich nicht, welchen Sinn div.rahmen hat, ich kann mich nicht mehr erinnern....
Jetzt weiß ich wieder: Er fixiert mir den Hintergrund mit den hellen Wolken, auch für Browser, die mit fixierten Hintergründen Probleme haben - ich weiß die genauen umstände nicht mehr, aber ich habe viel geflucht und dann dies als rettende Lösung gefunden.

Die z-indizes sind wichtig, wenn sich verschiedene Divs überlappen, um zu sagen, wer oben liegt. Je höher der z-index, desto weiter oben liegt der Div.