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

Veränderte Darstellung bei fehlendem Doctype

R

Rostgnom

Neues Mitglied
Hallo Community,

ich gestalte zur Zeit eine Homepage für eine Sängerin. Mein Problem:

Die Hintergrundfarbe und der Rahmen des Hauptcontainers wird bei vorhandenem transitional-Doctype nicht angezeigt (Habe das in Opera und IE getestet):

01.jpg

02.jpg


Der Quellcode:

Code: 
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<title>Rebecca Hart</title>
</head>
<body>
<div id="top">
</div>
<div id="container">
	<div id="content">
		<h1>Rebecca Hart</h1>
		<h2>S&auml;ngerin/Songschreiberin</h2>
                       Lorem ipsum dolor sit amet,[...]
	</div>
	<div id="sitemap">
		<center><b>Sitemap</b></center>
		<ul>
			<li>Startseite</li>
			<li>Wer ist Rebecca Hart?</li>
		</ul>
	</div>
</div>
</body>
</html>

Css:

Code: 
* {
  margin: 0;
  padding: 0;
}

body {
	color: #444444; 
  font-size: 15px;
	background-color: #cbb4a5;
	font-family: Verdana, Verdana, Geneva, sans-serif;
}

h1 { font-family: Viner Hand ITC; font-size: 2em; font-weight: normal; }
h2 { font-family: Viner Hand ITC; font-size: 1em; font-weight: normal; margin-bottom: 1em;}
#content ul { list-style-type: none; }
#content li { display: inline; }

#container {
  padding-left: 1em;
  padding-right: 1em;
  margin: 0 auto;
  width: 60%;
  height: 100%;
  border-left: 1px dotted grey;
  border-right: 1px dotted grey;
  background-color: #c3a795;
}

#top {
  width: 100%;
  height: 1em;
  background-color: #8A4444;
  text-align: center;
  display: block;
}

#content {
  float: left;
}

#portfolio_menu img {
  margin-right: 0.8em;
	margin-bottom: 0.8em;
  border: 1px dotted white;
	width: 140px;
	height: 140px;
}

#sitemap {
	width: 23%;
	float: right;
  background-color: #cbb4a5;
  border-left: 1px solid #8A4444;
	border-bottom: 1px solid #8A4444;
	border-right: 1px solid #8A4444;
	display: block;
}
#sitemap ul {
	display: none;
}
#sitemap:hover ul {
	list-style-type: square;
  background-color: #cbb4a5;
  width: 100%;
	display: block;
}
Ich hoffe, ihr könnt mir helfen.

Edit: Im IE wird die Hintergrundfarbe angezeigt, nicht jedoch der Rahmen.
 
Zuletzt bearbeitet:
Ohne DOCTYPE wird deine Seite im Quirksmode dargestellt. Dieser Darstellungsmodus bewirkt im IE mehrere Bugs und ist nicht zu empfehlen, da in diesem versucht wird, Fehler die du machst zu korrigieren. Besser als der Quirksmodus ist der Standardmodus den du mit einem gültigen DOCTYPE erreichst.

[EDIT] Noch was. Warum floatest du überhaupt den Bereich content? Ich seh da keinen Grund für, du machst es dir nur unnötig schwer damit.
 
struppi schrieb:
Ohne DOCTYPE wird deine Seite im Quirksmode dargestellt. Dieser Darstellungsmodus bewirkt im IE mehrere Bugs und ist nicht zu empfehlen, da in diesem versucht wird, Fehler die du machst zu korrigieren. Besser als der Quirksmodus ist der Standardmodus den du mit einem gültigen DOCTYPE erreichst.

[EDIT] Noch was. Warum floatest du überhaupt den Bereich content? Ich seh da keinen Grund für, du machst es dir nur unnötig schwer damit.
Zum Vergrößern anklicken....
Ich hatte auch nicht vor, keinen Doctype zu verwenden.
Damit die Navigation rechts vom eigentlichen Inhalt platziert wird (Rollover-Menü)

www.rebecca-hart.de/neu

Also die Hintergrundfarbe des Container-Bereichs, in dem sich Content und Sitemap befinden, hat komischerweise in Opera keine Hintergrundfarbe. Im IE fehlen die Seitlichen, gepunkteten Linien.
 
Zuletzt bearbeitet:
Das ist nicht komisch, da der container keine Höhe hat. Das würdest du vermeiden, wenn du den Inhalt nicht floatest.
 
struppi schrieb:
Das ist nicht komisch, da der container keine Höhe hat. Das würdest du vermeiden, wenn du den Inhalt nicht floatest.
Zum Vergrößern anklicken....
Was bedeutet das jetzt konkret? Soll ich den Content-Bereich nicht mehr floaten? Dann kann ich doch meine Navigation nicht mehr rechts vom Inhalt platzieren?!
Code: 
#container {
  height: 100%;
}
 
Du meinst die sitemap?
Natürlich kannst du die positionieren:
HTML: 
#sitemap {
    width: 23%;
    position:absolute;
    top:1em;
    right:20%;
    
  background-color: #cbb4a5;
  border-left: 1px solid #8A4444;
    border-bottom: 1px solid #8A4444;
    border-right: 1px solid #8A4444;
    display: block;
}
100% von was? von nichts, das ist nichts.
 
Zuletzt bearbeitet von einem Moderator:
Okay Danke, hat alles wunderbar funktioniert. Stichwort: absolute :D

Jetzt noch ein Problem, das ich allerdings schon einmal hatte (http://www.html.de/websitecheck/25989-design-und-code-bewerten-2.html#post199807). Der Content-Bereicht soll immer mindestens die ganze Seite ausfüllen (100%). Aber da es noch den #top Bereich (dunkelbrauner Streifen, siehe Bild) gibt, muss man immer um diesen Teil hinunterscrollen. Wie kann ich dem div also die min-height 100%-1.4em zuweisen?
 
Eine Möglichkeit

- #content um 1.2em nach oben ziehen
Code: 
#content {
margin:-1.2em auto;
...
}

- #top mit z-index nach vorne holen
Code: 
#top {
position:relative;
z-index:1;
...
}

- Positionierungen anpassen
Code: 
h1 {
padding-top:1.2em;
...
}
#sitemap {
top:1.2em;
...
}
 
neuroleptika schrieb:
Eine Möglichkeit

- #content um 1.2em nach oben ziehen
Code: 
#content {
margin:-1.2em auto;
...
}

- #top mit z-index nach vorne holen
Code: 
#top {
position:relative;
z-index:1;
...
}

- Positionierungen anpassen
Code: 
h1 {
padding-top:1.2em;
...
}
#sitemap {
top:1.2em;
...
}
Zum Vergrößern anklicken....
Okay, so hätte ich das jetzt auch gelöst. Ich dachte es gäbe noch eine elegantere Methode aber wenn das einem guten Stil entspricht, Danke =)
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben