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

IE Anzeigefehler Div-Layout (3 Spalten)

Status
Für weitere Antworten geschlossen.
M

M4c

Neues Mitglied
Also ich habe ein 3 Spalten Laoyut erstellt, mit Firefox wird es richtig angezeigt doch mit dem Internet Explorer (hab die neuste) rutscht die mittlere Spalte nach unten.

Der Code:
HTML: 
<!DOCTYPE html PUBLIC"-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
 <title>Mone-CMS - A Free Content Management system</title>
    <link rel="stylesheet" type="text/css" href="style.css">
  </head>

<body> 
<div id="wrapper" class="clearfix" >
<table border="0" cellspacing="0" cellpadding="0" align="center">
  <tr>
    <td><img src="./images/headerleiste.jpg"></td>
  </tr>
  <tr>
    <td><img src="./images/header.jpg" alt="Mone-CMS | A Free Content Management System"></td>
  </tr>
  <tr>
    <td><img src="./images/headerleiste.jpg"></td>
  </tr>
</table> 
<table border="0" cellspacing="0" cellpadding="0" align="center"> 
  <tr>
    <td><img src="./images/navilabel.jpg"></td>  
    <td><a href=""><img src="./images/navibutnews.jpg" alt="News" border="0"></a></td>
    <td><a href=""><img src="./images/navibutteams.jpg" alt="Teams" border="0"></a></td>
    <td><a href=""><img src="./images/navibutdemo.jpg" alt="Demo" border="0"></a></td>
    <td><a href=""><img src="./images/navibutforum.jpg" alt="Forum" border="0"></a></td>
    <td><a href=""><img src="./images/navibutdl.jpg" alt="Downloads" border="0"></a></td>
    <td><a href=""><img src="./images/navibutdevblog.jpg" alt="Dev-Blog" border="0"></a></td>
    <td><a href=""><img src="./images/navibutsupport.jpg" alt="Support" border="0"></a></td>  
    <td><a href=""><img src="./images/navibutfaq.jpg" alt="FAQ" border="0"></a></td>
    <td><a href=""><img src="./images/navibutlizenz.jpg" alt="Lizenz" border="0"></a></td> 
    <td><a href=""><img src="./images/navibutimp.jpg" alt="Impressum" border="0"></a></td> 
    <td><img src="./images/navilabelpby.jpg"></td>
  </tr>
</table>
<div id="navilinks">
<table border="0" cellspacing="0" cellpadding="0" align="center">
  <tr>
    <td colspan="3"><img src="./images/labellastnews.jpg"></td>
  </tr> 
  <tr>
      <td class="bglinks"></td>
      <td height="100" width="180" bgcolor="#FFFFFF" class="text">          
          <a href="index.php?site=news&nid=1">Newstitle</a><hr color="#000000" size="1">
          <a href="index.php?site=news&nid=2">Newstitle</a><hr color="#000000" size="1">
          <a href="index.php?site=news&nid=3">Newstitle</a>
      </td>
      <td class="bgrechts"></td>
  </tr>
  <tr>
    <td colspan="3"><img src="./images/labellasttopics.jpg"></td>
  </tr> 
  <tr>
      <td class="bglinks"></td>
      <td height="200" width="180" bgcolor="#FFFFFF" class="text">
        <a href="index.php?site=news&tid=1">Threadtitle</a><hr color="#000000" size="1">
          <a href="index.php?site=news&tid=2">Threadtitle</a><hr color="#000000" size="1">
          <a href="index.php?site=news&tid=3">Threadtitle</a><hr color="#000000" size="1"> 
          <a href="index.php?site=news&tid=4">Threadtitle</a><hr color="#000000" size="1">
          <a href="index.php?site=news&tid=5">Threadtitle</a><hr color="#000000" size="1">
          <a href="index.php?site=news&tid=5">Threadtitle</a><hr color="#000000" size="1">
          <a href="index.php?site=news&tid=6">Threadtitle</a>
      </td>
      <td class="bgrechts"></td>
  </tr> 
  <tr>
    <td colspan="3"><img src="./images/labelsearch.jpg"></td>
  </tr> 
  <tr>
      <td class="bglinks"></td>
      <td height="380" width="180" bgcolor="#FFFFFF" class="text" valign="top">
        <form action="search.php" method="post">
        <input type="text" name="searchword" class="feld" size="25">
        <table border="0" cellspacing="0" cellpadding="0"> 
            <tr>
                <td width="100"><a href="index.php?site=search&mode=extend">+</td>
                <td><input type="submit" name="Search" value="Search..." class="button"></td>
            </tr>
        </table>
        </form>
      </td>
      <td class="bgrechts"></td>
  </tr>
</table>
</div> 
<div id="navirechts">
<table border="0" cellspacing="0" cellpadding="0" align="center">
  <tr>
    <td colspan="3"><img src="./images/labeluser.jpg"></td>
  </tr> 
  <tr>
      <td class="bglinks"></td>
      <td height="150" width="180" bgcolor="#FFFFFF" class="text" valign="top">
    <form action="checklogin.php" method="post">
        <table border="0" cellspacing="0" cellpadding="0"> 
            <tr> 
          <td class="text">Username:</td>
                <td><input type="text" name="username" class="feld"size="14"></td>
            </tr>
            <tr>                 
                <td class="text">Password:</td>
                <td><input type="password" name="passwort"  class="feld" size="14"></td>
            </tr>
                <td colspan="2" align="center"><input type="submit" name="Login" value="Login" class="button"></td>
            </tr>
        </table>    
        </form>
        <p>  
        <li><a href="index.php?site=register">Register</a>
        <li><a href="index.php?site=lpwd">Lost Password</a> 
        </p>
      </td>
      <td class="bgrechts"></td>
  </tr>
  <tr>
    <td colspan="3"><img src="./images/labelnewsletter.jpg"></td>
  </tr> 
  <tr>
      <td class="bglinks"></td>
      <td height="150" width="180" bgcolor="#FFFFFF" class="text" valign="top">  
      <form action="newsletter.php" method="post">
      <table border="0" cellspacing="0" cellpadding="0"> 
            <tr>
                <td colspan="2"><input type="text" name="email" class="feld" size="25" value="Email"></td>
            </tr> 
            <tr>
                <td align="center"><input type="submit" name="anmelden" value="Sign Up" class="button"></td>
                <td align="center"><input type="submit" name="abmelden" value="Sign Off" class="button"></td>
            </tr>
        </table>    
        </form>
      </td>
      <td class="bgrechts"></td>
  </tr> 
  <tr>
    <td colspan="3"><img src="./images/labelpartner.jpg"></td>
  </tr> 
  <tr>
      <td class="bglinks"></td>
      <td height="380" width="180" bgcolor="#FFFFFF" class="text" valign="top" align="center"> 
      <br>
      <a href="index.php"><img src="./images/linkbanner.jpg" alt="Mone-CMS" border="0"></a></td>
      <td class="bgrechts"></td>
  </tr>
</table>
</div> 
<div id="content" valign="top">  
Hallo
</div>
<div id="footer">                  
<table border="0" cellspacing="0" cellpadding="0" align="center">
  <tr>
    <td><a href="index.php?site=imp"><img src="./images/copyright.jpg" border="0" alt="&copy; 2007 by Mone-CMS | Design and Code by M4c"></a></td>
  </tr>
</table> 
</div>
</div>  
</body>
</html>
Die CSS-Datei:
Code: 
body { 
background-image : url(./images/scanbg.jpg);  
text-align: center; /* Für IE 5.01 & 5.5, um die Box #wrapper horizontal zu zentrieren */     
margin : 0;
}
#content {
background-color : #FFFFFF;  
width : 600px;  
height : 760px;
} 
* { /* Mit Universalselektor die Polsterungseigenschaften aller (Block-)Elemente auf null setzen */
margin: 0;
padding: 0;
}
div {
text-align: left; /* text-align:center wieder aufheben, damit DIV-Inhalte linksbündig ausgerichtet sind */
}

/* DIV-Boxen */

div#wrapper {
width: 1000px;
margin: 0px auto;
}

div#navilinks {
float: left;
width: 200px;
}

div#navirechts{
float: right;
width: 200px;
}

div#content {
margin: 0 200px 0 200px;
}

/* clearfix zum Aufheben der Floatumgebung */

.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 */

#navilinks {
float : left; 
width : 200px; 
position:relative; 
}
#navirechts {
float : right;  
width : 200px;
position:relative; 
} 
#footer {
clear : both;
}
.text {
font-family : Verdana;
font-size : 12px; 
} 
.bglinks {
background-image : url(./images/borderleft.jpg); 
background-repeat : repeat-y;   
width : 10px;
}
.bgrechts {
background-image : url(./images/borderright.jpg); 
background-repeat : repeat-y;  
width : 10px;
}  
a:link {
font-weight : normal;
color : #000000;
text-decoration : none;
}
a:visited {
font-weight : normal;
color : #000000;
text-decoration : none;
}
a:hover {
font-weight : normal;
color : #4c4c4c;
text-decoration : underline;
}
a:active {
font-weight : normal;
color : #4c4c4c;
text-decoration : underline;
}   
.feld {
background-color : #000000;
color : #FFFFFF;
}
.button {
background-color : #000000;
color : #FFFFFF;
}
Wo liegt dort der Fehler?

Hier die seite:
Mone-CMS - A Free Content Management system
 
meine scheint verschwunden also noch mal

deine erste und zweite Tabelle ist sinnlos. wenn Du sie weglaesst kannst Du deinen Inhalt einfach mit Zeilenumbruch platzieren.

die dritte scheint mir auch sinnlos wenn Du z.B. den Rand als Hintergrundgestaltung ablegst

deine linkbaeume sehen fuer mich falsch aus. um einen Ordner aufzusteigen nutzt man zwei nicht einen Punkt. (../ordner/datei.end)
oder was willst du erreichen?
 
Hi edi,
hast recht die Tabellen sind nicht wirklich sinnvoll, muss ich mal ändern. Aber das kann doch nicht die Ursache für den Fehler sein oder?

Keine Ahnung warum ich das so gemacht habe, war wohl zu müde, ändere ich auch noch.
 
Mir scheint, du hast noch nicht recht verstanden, wie man float benutzt. Wenn Du mehrere Elemente nebeneinander positionieren willst, dann mußt du allen den gleichen float geben.

In deinem Fall also div#navilinks, div#content und div#navi#rechts erhalten alle float:left;. Das wiederum setzt aber voraus, das alle diese Elemente in richtiger Abfolge im Dokument stehen.
Code: 
<div id="navilinks">...

<div id="content">...

<div id="navirechts">...
verstanden?

PS.: clearen nicht vergessen!
 
Wenn ich alle drei Spalten auf float : left stelle, rutscht diem rechte spalte unter die linke. Die mittlere Spalte ist immer noch im IE verrutscht.
 
Hast Du die Reihenfolge deiner Container angepasst?

EDIT:
Schau Dir mal folgenden Code an. Hier siehst Du, wie man 3 Container korrekt nebeneinander positioniert.
Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Deine Seite</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style>
DIV{
border:1px solid black;
width:400px;/* pseudoangabe */
height:600px;/* pseudoangabe */
float:left;
}
</style>

</head>
<body>
<div id="links"></div>
<div id="mitte"></div>
<div id="rechts"></div>
<br clear="all" />
</body>
</html>
 
Zuletzt bearbeitet:
Ja die Reihenfolge habe ich angepasst.
Habe es jetzt hinbekommen, nur kriege ich die Seite im Firefox nicht zentriert.

Code: 
body { 
background-image : url(./images/scanbg.jpg);  
text-align: center; /* Für IE 5.01 & 5.5, um die Box #wrapper horizontal zu zentrieren */     
margin : auto;
}
DIV{
width : 1000px;
}
#content {
background-color : #FFFFFF;
text-align : left;  
width : 600px;  
float:left;
height : 742px;
} 
/* clearfix zum Aufheben der Floatumgebung */

.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 */

#wrapper {
text-align : center;
}
#navilinks {
float : left; 
width : 200px; 
}
#navirechts {
float : left;  
width : 200px; 
}

Reihenfolge der Spalten
-links
-mitte
-rechts
 
kannst Du die Seite mal online stellen?
EDIT:
Code: 
#wrapper{
...
margin:0px auto;
}
hattest Du im obigen Code aber schon stehen.
 
Zuletzt bearbeitet:
nein, ist es nicht, denn das zentriert deine Seite. Du hast es in der neuen Version aber nicht drinnen. Also schnell wieder ein damit...
 
Status
Für weitere Antworten geschlossen.

Neueste Beiträge

Zurück
Oben