✔ DIVs wollen (mal wieder) nicht

Eiszwerg · 20. Januar 2008

Hallo liebe Community,

habe (mal wieder) ein DIV-Problem, welches mich wahnsinnig macht.
Entweder klappt es nur im IE oder im FF.
Ich möchte nix weiter, als die DIVs content1 und content2 direkt nebeneinander positionieren.
Leider liegen die Problem-Kinder vertikal versetzt zueinander. Mal im IE und mal im FF. Je nachdem, wie breit ich sie gestalte.
Rein rechnerisch dürfte es doch kein Problem sein, die Breite des wrappers (750px) in 150px (content1) und 600px (content2) aufzugliedern, sodass die dann nebeneinander in einer Flucht liegen, oder etwa doch?

CSS:

Code:

body
{
background-color:#3399cc;
text-align:center;
margin-top:50px;
margin:0px;
padding:0px;
font-family:arial;
font-size:smaller;
}

#wrapper
{
background-color:#99cc99;
border: 1px solid black;
margin:0 auto;
width:750px;
height:800px;
}

#header
{
background-image:url(../gfx/header.jpg);
background-position:center;
background-repeat:no-repeat;
height:150px;
width:750px;
}

#menue
{
background-image:url(../gfx/menue.gif);
width:750p;
height:21px;
border-top:1px solid black;
border-bottom:1px solid black;
}

#menue ul
{
list-style-type:none;
margin:0;
padding:0;
}

#menue li
{
display:inline;
line-height:21px;
padding:0 10px 0 10px;
border-left:1px solid black;
border-right:1px solid black;
}

#menue a
{
font-weight:bold;
text-decoration:none;
}

#menue a:hover
{
font-weight:bold;
color:red;
}

.content1
{
width:150px;
float:left;
background:darkgray;
}

.content2
{
width:600px;
margin-left:150px;
background:darkgray;
}

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>xXx</title>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
    <link rel="stylesheet" type="text/css" href="css/style.css">
  </head>
  <body>
  <div id="wrapper">
    <div id="header">
    </div>
    
    <div id="menue">
    <ul>
      <li><a href="index.php?navi=home" title="Startseite">Home</a></li>
      <li><a href="index.php?navi=home" title="Startseite">Wer sind wir</a></li>
      <li><a href="index.php?navi=home" title="Startseite">Produkte</a></li>
      <li><a href="index.php?navi=home" title="Startseite">Biogas</a></li>
      <li><a href="index.php?navi=home" title="Startseite">Wissensdatenbank</a></li>

      
      <li><a href="index.php?navi=home" title="Startseite">Impressum</a></li>
      <li><a href="index.php?navi=home" title="Startseite">Kontakt</a></li>
    </ul>
    </div>
    
    <div class="content1">
    Text 1
    </div>
    <div class="content2">
    Text 2
    </div>
  </div>
  </body>
</html>

Hoffe auf Hilfe und verständliche Erläuterung

Maik · 20. Januar 2008

Hi,

nimm mal die Breitenangabe für die Klasse .content2 heraus, mit der der IE ein Problem hat, und die sich durch die margin-left-Deklaration eh von selbst ergibt.

Eiszwerg · 21. Januar 2008

Hey Maik,
vielen Dank für die schnelle und wirksame Hilfe

Was mir nun jedoch auffällt ist, dass nun im IE ein 1px-breiter Spalt entsteht.
Ich hoffe man erkennt das auf den Anhängen.

Was kann ich dagegen unternehmen?
Danke schön

Maik · 21. Januar 2008

Guten Morgen

Tausch mal den Doctype aus, damit das Dokument im "Standardsmode" übergeben wird, also z.B. mit:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">

Eiszwerg · 21. Januar 2008

Ich bin definitv beeindruckt!

So früh schon so kompetente Hilfe... "Du bist Hamma" *sing*

Werd mich mal eben belesen, was es mit dem "strict" in Bezug auf die Browser auf sich hat... Wusste nicht, dass das so weitreichende Konsequenzen haben kann :-(

EDIT: Hab hier entsprechende Infos gefunden: http://carsten-protsch.de/zwischennetz/doctype/index.html

Eiszwerg · 24. Januar 2008

Muss das Thema nochmal aufgreifen:

Hatte ursprünglich den Wrapper, content1 und content2 mit fixen Höhen belegt.
Nun möchte ich aber, dass sich die Seite nach unten unendlich Strecken kann und habe die fixe Höhe entfernt.
Im IE klappt das ohne Probleme, im FF orientiert sich der Wrapper an der Höhe von content2.
Was kann ich dagegen machen?

Code:

body
{
background-color:#339955;
text-align:center;
margin-top:50px;
margin:0px;
padding:0px;
font-family:arial;
font-size:smaller;
}

#wrapper
{
background-color:#99cc99;
border: 1px solid black;
margin:0 auto;
width:750px;
/*height:800px;*/
}

#header
{
background-image:url(../gfx/header.jpg);
background-position:center;
background-repeat:no-repeat;
height:150px;
width:750px;
}

#menue
{
background-image:url(../gfx/menue.gif);
width:750px;
height:20px;
border-top:1px solid black;
border-bottom:1px solid black;
}

#menue ul
{
list-style-type:none;
margin:0;
padding:0;
}

#menue li
{
display:inline;
line-height:21px;
padding:0 10px 0 10px;
border-left:1px solid black;
border-right:1px solid black;
}

#menue li:hover
{
background-color:#99CC99;
display:inline;
line-height:21px;
padding:0 10px 0 10px;
border-left:1px solid black;
border-right:1px solid black;
}

#menue a
{
font-weight:bold;
text-decoration:none;
}

#menue a:hover
{
font-weight:bold;
color:red;
text-decoration:underline;
}

.content1
{
text-align:left;
padding:2px 5px 2px 5px;
margin:10px;
width:500px;
/*height:400px;*/
float:left;
background:#AADDAA;
border:2px solid lightgreen;
border-style:outset;
overflow:auto;
}

.content2
{
text-align:left;
padding:2px 5px 2px 5px;
margin:10px;
/*height:400px;*/
margin-left:550px;
background:#AADDAA;
border:2px solid lightgreen;
border-style:outset;
}

p
{
padding:0;
margin:0 0 5px 0;
}

h2
{
font-size:18px;
margin:0 0 5px 0;
}

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"  "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <title>xXx</title>
    <link rel="stylesheet" type="text/css" href="css/style.css">
  </head>
  <body>
  <div id="wrapper">
    <div id="header">
    </div>
    
    <div id="menue">
    <ul>
      <li><a href="index.php?navi=home" title="Startseite">Home</a></li>
      <li><a href="index.php?navi=home" title="Startseite">Wer sind wir</a></li>
      <li><a href="index.php?navi=home" title="Startseite">Produkte</a></li>
      <li><a href="index.php?navi=home" title="Startseite">Biogas</a></li>
      <li><a href="index.php?navi=home" title="Startseite">Wissensdatenbank</a></li>

      
      <li><a href="index.php?navi=home" title="Startseite">Impressum</a></li>
      <li><a href="index.php?navi=home" title="Startseite">Kontakt</a></li>
    </ul>
    </div>
    <img src="gfx/mais.jpg" />
    <div class="content1">
    <h2>Lorem Ipsum</h2>
    <p>
    <img src="gfx/lorem.jpg" alt="Testbild" title="Testbild" align="right" width="200px" />
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
    </div>
    <div class="content2">
    <strong>Zeit f&uuml;r ein paar News!</strong><br />
    Hier stehen vielleicht bald ein paar Nachrichten zum Thema Schmierstoffe
    <hr />
    <strong>Zeit f&uuml;r ein paar News!</strong><br />
    Oder vielleicht stehen die auch hier?! Wer wei&szlig; das schon!
    </div>
  </div>
  </body>
</html>

Ich danke

Maik · 24. Januar 2008

Hi,

die Floatumgebung muss zum Abschluss noch "gecleart" werden, damit der Inhalt das DIV #wrapper nicht am unteren Elementrand überlappt - siehe hierzu http://positioniseverything.net/easyclearing.html.

Code:

.clearfix:after {
content: ".";
display: block;
height: 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 */

Code:

<div id="wrapper" class="clearfix"> ... </div>

Eiszwerg · 24. Januar 2008

Super... ich hoffe ich kapier den Linkinhalt

Ich danke Dir (mal wieder wieder)

Weiter so!

✔ DIVs wollen (mal wieder) nicht

Eiszwerg

Erfahrenes Mitglied

Maik

Eiszwerg

Erfahrenes Mitglied

Anhänge

Maik

Eiszwerg

Erfahrenes Mitglied

Eiszwerg

Erfahrenes Mitglied

Maik

Eiszwerg

Erfahrenes Mitglied

Neue Beiträge