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

DIV Darstellung Firefox & IE

P

patricio_ktn

Neues Mitglied
Hallo, Kann sein, dass soetwas ähnliches schon mal besprochen wurde, nur ich komme einfach nicht dahinter. Ich habe dass Problem, dass mein Seiten-Layout im IE richtig und im Firefox fehlerhaft angezeigt wird.
Vielleicht könnt ihr mir weiterhelfen:
Siete besteht aus - Mantel: innerhalb des Mantel -> Navigation und Inhalt : innerhalb des Inhalt habe ich zwei Content Container.
Außerhalb des Mantel habe ich noch eine Fusszeile.
Im Firefox wird die Backgroundfarbe des Mantel nicht richtig angezeigt, bzw. wenn sich der Inhalt-Container auf Grund des Textes vergrößert, überlagert er andere Container.

Zu sehen: test
CSS:

/* ####################### Allgemein #################### */
html {
height : 100.00%;
margin : 0;
padding : 0;
}
* html body * { overflow:visible; }
* html iframe, * html frame { overflow:auto; }
* html frameset { overflow:hidden; }
* {
margin : 0;
padding : 0;
border : none;
}
body {
text-align : center;
height : 100.00%;
font : normal 100.01%/1.5 Tahoma, Arial, Trebuchet MS, Helvetica, sans-serif;
background : #eee;
color : #555;
}
/* ####################### Seitenaufbau #################### */
#mantel {
width : 900px;
height : 100%;
text-align : left;
margin : 20px auto;
background : #fff ;
padding: 0;
}
/* ####################### Seiten-Kopf #################### */
#seitenkopf {
width : 900px;
height : 200px;
}
#seitenkopf h1 {
padding : 60px 0 0 25px;
margin : 0;
}
#seitenkopf h1 a {
font-size : 1.2em;
color : #19e;
}
#seitenkopf h1 a:hover {
color : #d11;
background : #eee;
}
#seitenkopf p {
font-size : 1.0em;
padding : 0 0 0 25px;
margin : 0;
color : #18e;
}
/* ####################### Inhalte #################### */
#inhalte {
width : 700px;
float : right;
background : #fff;
margin: auto; padding: 1em;
padding: 10px;
}

/* ####################### Navigation #################### */
#nav {
width : 90px;
float : left;
font-size : 0.8em;
border-bottom : 1px solid #ddd;
border-top : 1px solid #ddd;
background : #fff;
}
/* ####################### Seitenfuss #################### */

div#seitenfuss {
clear: both;
font-size : 0.8em;
margin: 0; padding: 0.1em;
text-align: center;
background-color: #eee;
}
/* ####################### Inahlte2 #################### */
div#inhalte1{
float: left; width: 15em;
margin: auto; padding: 1em;
display : block;
}
div#inhalte2{
float: right; width: auto;
margin: auto; padding: 1em;
display : block;
}


HTML SEITE:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="XHTML namespace" xml:lang="en" lang="en">
<head>
<title>test</title>
<link rel="stylesheet" type="text/css" href="test.css" media="all" />
</head>
<body>
<div id="mantel">
<div id="seitenkopf">
<h1>LOGO</h1>
</div>
<div id="inhalte">
<h2>Inhalte</h2>
<p>
Text (lat. textum: Gewebe, Text) bezeichnet eine abgegrenzte, zusammenhängende <br />
Äußerung in geschriebener Sprache, im weiteren Sinne auch die nicht geschriebene, <br />
aber schreibbare Sprachinformation (beispielsweise eines Liedes, Films oder einer <br />
improvisierten Theateraufführung). Text benötigt zu seiner Darstellung eine Schrift, <br />
deren Zeichen Phoneme, Silben oder Wörter bzw. Begriffe kodieren. Verschiedene Kulturen <br />
verwenden hierzu unterschiedliche Alphabete. Eine wichtige Eigenschaft von Texten, <br />
der Autor wie Leser weitgehend folgen, ist dessen immanente Linearität.<br />
</p>
<div id="inhalte1">
<h2>Inhalte 1</h2>
<br />
<p>
Während die oben angeführte Definition eines Textes als „abgegrenzte schriftliche <br />
oder potentiell zu verschriftlichende Äußerung“ im Alltag meist ausreichend ist, <br />
führt eine genauere, wissenschaftliche Betrachtung zu komplexeren Definitions- und Beschreibungsversuchen.<br />
</p>
</div>

<div id="inhalte2">
<h2>Inhalte 2</h2>
<p>
Die Eigenschaft des „Text-Seins“ bezeichnet man als Textualität, die sprachwissenschaftliche <br />
Untersuchung von Texten ist die Textlinguistik. Diese Disziplin stellt verschiedene <br />
Textualitätskriterien zur Verfügung. Robert-Alain de Beaugrande und Wolfgang Ulrich <br />
Dressler stellten 1981 eine Reihe solcher Kriterien vor:
</p>
</div>
</div>
<div id="navi">
<ul id="nav">
<li><a href="">navi 1</a>
</li>
<li><a href="">nav</a>
<ul>
<li><a href="">nav</a></li>
<li><a href="">nav</a></li>
</ul>
</li>
<li><a href="">navi 1</a>
</li>
<li><a href="">nav</a>
<ul>
<li><a href="">nav</a></li>
<li><a href="">nav</a></li>
</ul>
</li>
<li><a href="">navi 1</a>
</li>
<li><a href="">nav</a>
<ul>
<li><a href="">nav</a></li>
<li><a href="">nav</a></li>
</ul>
</li>
<li><a href="">navi 1</a>
</li>
<li><a href="">nav</a>
<ul>
<li><a href="">nav</a></li>
<li><a href="">nav</a></li>
</ul>
</li>
</ul>
</div>
<br />
</div>
<div id="seitenfuss">
<p>Fusszeile mit Copyright Hinweis usw... </p>
</div>
</body>
</html>


Bitte um Mithilfe :-)

Danke euch
 
Morgen!

Was mir als erstes auffällt ist, dass du deine navi links floatest, d.h. du musst sie im html auch vor deinen inhaltmantel machen. ich blick da ehrlich gesagt nicht so durch...normal wäre es zu lösen mit:

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
h1 { border: 1px solid; width: 80%; height: 100px; }
#navi { float: left; border: 1px solid; width: 20%; height: 200px; }
#content { float: left; border: 1px solid; width: 60%; height: 300px; }
#inhalt2 { float: left; border: 1px solid; width: 50%; height: 100px; }
#inhalt3 { float: left; border: 1px solid; width: 40%; height: 100px; }
#footer { clear: left; width: 80%; border: 1px solid; }
</style>
</head>
<body>
<h1> Ich bin der Header </h1>
<!-- Navi -->
<div id="navi">
    <ul>
     <li> .... </li>
    </ul>
</div>

<!-- content -->
<div id="content">
    <h2> Ich bin Inhalt 1 </h2>
    <p> inhalt 1 </p>

    <!-- inhalt 2 -->
    <div id="inhalt2">
        <h2> Ich bin Inhalt 2 </h2>
        <p>inhalt 2 </p>
    </div>

    <!-- inhalt 3 -->
    <div id="inhalt3">
        <h2> Ich bin Inhalt 3 </h2>
        <p>inhalt 3 </p>
    </div>
</div>

<!-- footer -->
<p id="footer"> footer </p>
</body>
</html>
bzw, wenn du NUR die navi links hast, kannst du auch das ul links floaten und sparst dir das div.

Gruß
Loon3y
 
Zuletzt bearbeitet:
Ich sehe keine Fehler in der Darstellung im Firefox. Du floatest #inhalte. Damit ragt dieses Element natürlich über #mantel hinaus, es wird ja schließlich aus dem Fluss genommen. Das Verhalten des IE irritiert mich da mehr, aber der hats ja nicht so mit float.

Wer "float" sagt, muss auch "clear" sagen. Dann verlängert sich Dein #mantel und umschließt #inhalte.

Übrigens fehlt eine Zeichencodierung in Deinem Dokument, daher werden die Umlaute nicht richtig dargestellt.
 
Efchen schrieb:
Ich sehe keine Fehler in der Darstellung im Firefox. Du floatest #inhalte. Damit ragt dieses Element natürlich über #mantel hinaus, es wird ja schließlich aus dem Fluss genommen. Das Verhalten des IE irritiert mich da mehr, aber der hats ja nicht so mit float.

Wer "float" sagt, muss auch "clear" sagen. Dann verlängert sich Dein #mantel und umschließt #inhalte.

Übrigens fehlt eine Zeichencodierung in Deinem Dokument, daher werden die Umlaute nicht richtig dargestellt.
Zum Vergrößern anklicken....

Kannst du mir sagen, wo ich das Clear machen muss, damit der mantel den Inhalt umschließt ? Weil das ist genau das, was ich benötige !
 
Loon3y schrieb:
Morgen!

Was mir als erstes auffällt ist, dass du deine navi links floatest, d.h. du musst sie im html auch vor deinen inhaltmantel machen. ich blick da ehrlich gesagt nicht so durch...normal wäre es zu lösen mit:

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
h1 { border: 1px solid; width: 80%; height: 100px; }
#navi { float: left; border: 1px solid; width: 20%; height: 200px; }
#content { float: left; border: 1px solid; width: 60%; height: 300px; }
#inhalt2 { float: left; border: 1px solid; width: 50%; height: 100px; }
#inhalt3 { float: left; border: 1px solid; width: 40%; height: 100px; }
#footer { clear: left; width: 80%; border: 1px solid; }
</style>
</head>
<body>
<h1> Ich bin der Header </h1>
<!-- Navi -->
<div id="navi">
    <ul>
     <li> .... </li>
    </ul>
</div>
 
<!-- content -->
<div id="content">
    <h2> Ich bin Inhalt 1 </h2>
    <p> inhalt 1 </p>
 
    <!-- inhalt 2 -->
    <div id="inhalt2">
        <h2> Ich bin Inhalt 2 </h2>
        <p>inhalt 2 </p>
    </div>
 
    <!-- inhalt 3 -->
    <div id="inhalt3">
        <h2> Ich bin Inhalt 3 </h2>
        <p>inhalt 3 </p>
    </div>
</div>
 
<!-- footer -->
<p id="footer"> footer </p>
</body>
</html>
bzw, wenn du NUR die navi links hast, kannst du auch das ul links floaten und sparst dir das div.

Gruß
Loon3y
Zum Vergrößern anklicken....


Danke für deine Antwort. Hab mir dein Framework angeschaut - mir fehlt nur ein Mantel der alles umschließt.
 
Hi,

Könnt ihr mir sagen wo und wie ich das clear machen muss, damit der Mantel alle anderen DIV´s einschließt und auch größer wird, sollte sich das Inhalt - DIV von der Größe ändern ? (es sollt nicht über den Mantel hinausgehen...)

Vielen lieben dank
Patricio
 
Woran scheitert es denn? Was hast Du bisher über "clear" recherchiert? Was an der Verwendung verstehst Du nicht?
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben