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

Position:Abolute; im Internet Explorer

Status
Für weitere Antworten geschlossen.
philipp

philipp

Neues Mitglied
So, noch eine Frage von mir an euch, hoffentlich kennt jemand eine Lösung

Ich habe einen Div, der absolut ausgerichtet ist und relativ skaliert, er soll lediglich links und rechts 230px zum Rand abstand haben (Navi). Mit Margin geht das nicht, weil der IE dann den Content nicht richtig bricht, sondern das Div einfach verlängert (Wenn ich Zb eine beliebige Anzahl DIVs mit Float left darin staffeln will).

Also habe ich das jetzt mit left / right versucht. Jetzt kann der IE aber nur right ausrichten, wenn left nicht gesetzt ist... Wie kann ich left UND right benutzen im Internet Explorer?

Nochmal zum Design:

Das Design ist Relativ aber links und rechts sind Container mit fixer Breite für die Navi und andere Sachen. Nur der Mittlere Teil soll sich jetzt also anpassen...
 
Das geht normalerweise ganz automatisch. Hier ein Beispiel:
CSS-Bereich:
Code: 
.links {
  width:100px;
  float:left;
}
.rechts {
  width:100px;
  float:right;
}
.seite {
  width:100%;
}


HTML-Bereich:
Code: 
<div id="seite">
  <div id="links">
     Navigation
  </div>
  <div id="rechts">
     rechte Seite
  </div>
  Alles was in die Mitte soll
</div>
 
Dann fliesst mein Inhalt um das Menü und die rechte Spalte... Das kann ich nicht verwenden, sry. Aber ich werde in der Richtung weitersuchen... Wie mich der IE ankotzt, echt schrecklich
 
Dann setz doch ein dritten DIV mit margin-left und margin-right.
z.B. Deine linke Seite ist 100px breit und deine rechte seite 80px

CSS-Bereich:
Code: 
.links {
  width:100px;
  float:left;
}
.rechts {
  width:80px;
  float:right;
}
.mitte {
  margin-left:100px;
  margin-right:80px;
}

HTML-Bereich:
Code: 
  <div id="links">
     Navigation
  </div>
  <div id="rechts">
     rechte Seite
  </div>
  <div id="mitte">
     Alles was in die Mitte soll
  </div>
 
Genau so hatte ich es vor, aber der Internet Explorer ignoriert das margin-right hin und wieder. Wenn ich zb viele Bilder per floating nebeneinander (und gegebenenfalls untereinander) anzeigen will, dann ignoriert er das margin-right und vergrößert das Div über den Fensterrand hinaus. Er bricht also nicht um... Zum Beispiel:

Code: 
<img src="beispielbild" style="float:left;margin:0px 10px 10px 0px;"/>
<img src="beispielbild" style="float:left;margin:0px 10px 10px 0px;"/>
<img src="beispielbild" style="float:left;margin:0px 10px 10px 0px;"/>
<img src="beispielbild" style="float:left;margin:0px 10px 10px 0px;"/>
<img src="beispielbild" style="float:left;margin:0px 10px 10px 0px;"/>
<img src="beispielbild" style="float:left;margin:0px 10px 10px 0px;"/>

Wenn nur 3 Bilder nebeneinander Platz haben, dann sollte der Browser (wie zB der FF) nach dem 3. umbrechen. Das macht der Internet Explorer aber nicht...

Und bei diversen anderen Sachen (table width="100%") bekommt er auch Probleme.
 
Bei mir klappt das. Mein Probebild war dabei 200 * 160 px.
Außerdem habe ich das float:left im img-Element rausgenommen.
Mein kompletter Code lautet:

Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "[URL]http://www.w3.org/TR/html4/strict.dtd[/URL]">
<html>
<head>
  <title>Layout 1</title>
  <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
  <style type="text/css">
   <!--
    body {
      color: black; background-color: white;
      font-size: 12px; font-family: Helvetica,Arial,sans-serif;
      margin: 0; padding: 10px; min-width: 41em; 
    }
    h1 {
      padding:8px; background-color:#0000C0; border:1px solid #000000; margin:4px; height:40px;
      text-align:center; font-family:Arial,Helvetica,sans-serif; font-size:20px; color:#FFFF00;
    }
    ul#menue {
      font-size:12px; float:left; width:100px; margin:4px; padding:8px;
      border:1px solid #000000; background-color:#0000C0;
    }
    ul#menue li { list-style:none; margin:0 0 0 4px; padding:10px; }
    ul#menue a { display:block; padding:4px; font-weight:bold; }
    ul#menue a:link { color:#FFFFC0;}
    ul#menue a:visited { color:#C0C0FF; }
    ul#menue a:hover { color:#000000; background-color:#FFFFC0; }
    ul#menue a:active { color:#FFFFFF; }
    div#inhalt { margin:8px 130px 4px 130px; padding:8px; border:1px double black; background-color:#FFFFE0; }
    div#inhalt h2 { font-size: 18px; font-family: Helvetica,Arial,sans-serif; }      
    div#inhalt p {font-size:12px; margin:20px 0px;}
    div#neues {
      font-size:12px; float:right; width:100px; margin:4px; padding:8px;
      border:1px solid #000000; background-color:#0000C0; color:#FFFFFF;
    }
    div#fusszeile { 
      clear:both; margin:8px 4px 4px 4px; padding:8px; border:1px double black; 
      background-color:#0000C0; color:#FFFF00; text-align:center;
    }
   -->
  </style>
</head>
<body>
  <h1>&Uuml;berschrift</h1>
  <ul id="menue">
    <li><a href="layout06.htm#">Seite 1</a></li>
    <li><a href="layout06.htm#">Seite 2</a></li>
    <li><a href="layout06.htm#">Seite 3</a></li>
    <li><a href="layout06.htm#">Seite 4</a></li>
  </ul>
  <div id="neues">
    <p>News:<p>
    <p>Hier stehen irgendwelche News. Hier stehen irgendwelche News. Hier stehen irgendwelche News. Hier stehen irgendwelche News.</p>
  </div>
  <div id="inhalt">
    <h2>Inhalt</h2>
    <img src="bild.jpg" style="margin:0px 10px 10px 0px;"/>
    <img src="bild.jpg" style="margin:0px 10px 10px 0px;"/>
    <img src="bild.jpg" style="margin:0px 10px 10px 0px;"/>
    <img src="bild.jpg" style="margin:0px 10px 10px 0px;"/>
    <img src="bild.jpg" style="margin:0px 10px 10px 0px;"/>
    <img src="bild.jpg" style="margin:0px 10px 10px 0px;"/>  
    <p>Und noch eine Text</p>
  </div>
  <div id="fusszeile">
    Eine Fusszeile
  </div>
</body>
</html>
 
Naja ich hätte eben gerne eine Lösung, die keine Ausnahmefälle hat. Kann ja nicht wissen, wie der Kunde dann die Elemente fließen lässt. Auserdem hatte ich das Problem auch mit Div-Containern, die float:left hatten. Das könnte ich wohl mit display:inline umgehen, aber wie gesagt - eine intelligente Lösung wäre gut. Scheint aber nicht drinn zu sein, jedes Layout hat seine Grenzen.
 
Status
Für weitere Antworten geschlossen.

Neueste Beiträge

Zurück
Oben