✔ Divs verschachteln Problem

M

mcone

Mitglied
Hallo ,

ich hab da ein Problem mit dem verschteln mehrer Div´s.
Der einzige Browser der folgen Code wie gewünscht darstellt ist der IE.
Opera und Firefox scheitern leider.
Hier folgt mal der Code

CSS:
Code: 
#content { border: 1px solid #000; margin: auto; width: 985px; }
#indexlogo {  background-color: #5E81B1; }
#menuseite { float: left; width: 200px; padding: 5px; }

#contentseite { float: left; width: 400px; background: #DFE6EF; padding: 5px; }

Html Code:
HTML: 
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
	<link href="style2009.css" type="text/css" rel="stylesheet" media="all">
	<title>Test</title>
</head>
<body>
<div id="content">
<div id="indexlogo">Test überschrift</div>
<div id="menuseite">Seite für das Menü<br>
<br>
<br>
</div>
<div id="contentseite">Seite für den Inhalt
</div>
</div>
</body>
</html>

Nach meinem Sachverstand ist doch eigentlich alles richtig, oder?
Warum wird der Code dann nicht richtig dargestellt?
Ich wäre für Eure Hilfe sehr Dankbar.

MFg
Matthias
 
Ok super, das klappt jetzt schon mal, nur hat sich der Content container sich an die Linke Seite verschoben.
Er sollte aber mittig stehen.

bräuchte noch einen Tip.

Matthias
 
Der Container #content wird von Beginn an im IE nicht horizontal zentriert, da er im "Quirksmode" das Boxmodell nicht unterstützt.

Lösung: Für das HTML-Dokument eine Dokumenttyp-Deklaration wählen, die das Dokument den Browsern im standardkonformen Modus übergibt, dann klappt's auch mit margin:auto zum horizontalen Zentrieren.

Ansonsten:

CSS: 
body { text-align: center; }
#content { border: 1px solid #000; margin: auto; width: 985px; text-align: left; }


mfg Maik
 
Ah ja:suspekt: .
Nenn mich blöd aber ich verstehs nicht ganz.
Mit der declaration meinst doch sicher das: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Oder?

Wie sollte er deiner Meinung nach aussehen?
ich dachte wenn ich dem Content die Abstände für links und rechts auf Auto setze wird der Container Zentriert, aber da irre ich micht wohl.


EDIT:
Genau so klappt es.
Danke Maik

Mfg
matthias
 
Zuletzt bearbeitet:
Das mit den Doctype bekomme ich irgendwie auch grundsätzlich nicht hin.
Beim validator bekomme ich mehrere hundert fehler angezeigt, obwohl sie im eigentlichen sinne keine fehler sind.
Fehler sollen z.B.
Code: 
Line 13, Column 46: start tag was here.
…rder="0"><tr><td class="uberschrift"><a href="http://www.lange-m.de/index.php
sein. makiert ist < vor dem a. Warum?
gibt es nicht auch einen doctype der php irgendwie ausschließt oder berücksichtigt

matthias
 
Ich bekomme mit dem folgenden Quellcode vom w3c-Validator ein valides Markup bescheinigt:

This document was successfully checked as HTML 4.01 Strict!
Zum Vergrößern anklicken....
HTML: 
<!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=utf-8">
        <link href="style2009.css" type="text/css" rel="stylesheet" media="all">
        <title>Test</title>
<style type="text/css">
#content { border: 1px solid #000; margin: auto; width: 985px; }
#indexlogo {  background-color: #5E81B1; }
#menuseite { float: left; width: 200px; padding: 5px; }

#contentseite { float: left; width: 400px; background: #DFE6EF; padding: 5px; }

.clearfix:after {
content:".";
display:block;
height:0;
font-size:0;
clear:both;
visibility:hidden;
}

.clearfix {display:inline-block;}

/* Hides from IE-mac \*/
* html .clearfix {height:1%;}
.clearfix {display:block;}
/* End hide from IE-mac */
</style>
</head>
<body>
<div id="content" class="clearfix">
<div id="indexlogo">Test überschrift</div>
<div id="menuseite">Seite für das Menü<br>
<br>
<br>
</div>
<div id="contentseite"><table><tr><td class="uberschrift"><a href="#">link</a></td></tr></table>
</div>
</div>
</body>
</html>


mfg Maik
 
Sorry ich war schon einen Schritt weiter.
ich hab in die menuseite eine datei included
HTML: 
<!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=utf-8">
	<link href="style2009.css" type="text/css" rel="stylesheet" media="all">
	<title>Test</title>
</head>

<body>
<div id="content" class="clearfix"> 
<div id="indexlogo">Test überschrift</div>
<div id="menuseite">
<?php include"menuoben2.php"; ?></div>
<div id="contentseite"><?php #include"index_content.php"; ?>
</div>
</div>
</body>



</html>

und dann die Adresse gestest - bekam 277 fehler angezeigt

http://validator.w3.org/check?uri=h...Inline&group=0&user-agent=W3C_Validator/1.606

matthias
 
Dann heißt es eben "validieren, validieren, und nochmals validieren". Viele der Fehlermeldungen sind aber nur "Folgefehler", aus einem vorangegangenen Markupfehler.

Falls du der englischen Sprache nicht mächtig sein solltest, empfehle ich dir http://validator.de.selfhtml.org/.

Übrigens dient die Tabelle semantisch nicht zum Auszeichnen einer Seitennavigation. Hierfür wird üblicherweise das Listenelement verwendet, und anschliessend mit CSS formatiert.

mfg Maik
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück