Ergebnis 1 bis 9 von 9

Thema: Zentrierung - IE7 hat Probleme mit position:relative;

  1. #1
    Teeny
    Registriert seit
    31.07.2009
    Beiträge
    21
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard Zentrierung - IE7 hat Probleme mit position:relative;

    Ich erstelle derzeit eine Homepage. Dabei habe ich Probleme mit der Zentrierung im IE7. (IE6 vernachlässige ich)

    Mein Code sieht folgendermaßen aus: (vereinfacht)
    Code:
    <body>
    <div id='header'></div>
    <div id='wrapper'>
     <div id='nav'></div>
     <div id='content'></div>
     <ul id='footer'></ul>
    </div>
    </body>

    Dazu folgender CSS-Code:
    Code:
    html {
     padding:0;
     margin:0;
    }
    body { 
     width:900px;
     margin:auto;
    }
    #wrapper { 
     position:relative;
    }
    #nav {
     position:absolute;
     height:100%;
     width:145px;
    }
    #content {
     margin:10px 16px 0px 185px;
     min-height:720px;
    }

    Das Problem stellt sich wie folgt dar:
    Der Wrapper-Div wird im IE7 nicht zentriert sondern klebt an der linken Seite.
    Ich war darüber sehr verwundert, da ich den Code bereits bei einer anderen Seite problemlos verwende, und habe mich deswegen natürlich auf Fehlersuche begeben.

    Letztendlich habe ich gesehen, dass ich nicht GENAU den gleichen Code verwende. Das Problem liegt an position:relative; von #wrapper. Ohne position:relative; wird #wrapper zentriert. Jedoch ist ohne position:relative; der #nav-Div nichtmehr 100% hoch (bzw. zu hoch - er orientiert sich dann ja an body und nichtmehr an #wrapper)

    Wie kann ich es nun lösen, dass #nav 100% Höhe von #wrapper hat, #wrapper aber zentriert ist ?
    Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
    Diese Diskussion ist älter als 90 Tage. Die darin enthaltenen Informationen sind möglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!

  2. #2
    König(in)
    Registriert seit
    07.02.2009
    Ort
    Leipzig
    Beiträge
    1.391
    Danke
    2
    Bekam 21 mal "Danke" in 20 Postings

    Standard AW: Zentrierung - IE7 hat Probleme mit position:relative;

    Dann schreibs so:

    Code:
    html {
     padding:0;
     margin:0;
    }
    #wrapper { 
     width:900px;
     margin: 0 auto;
     position:relative;
    }
    #nav {
     position:absolute;
     height:100%;
     width:145px;
    }
    #content {
     margin:10px 16px 0px 185px;
     min-height:720px;
    }
    Denn: body derart zu verformen ist mitunter problematisch, und "position: relative;" bräuchtest Du bei dem von dir definierten #wrapper gar nicht definieren, da dieser bereits dem body entspräche (weil er ja keine weiteren Eigenschaften hat und z.B. keine andere Breite einnimmt).

  3. #3
    Kaiser(in)
    Registriert seit
    24.04.2006
    Ort
    Ludwigshafen
    Beiträge
    2.720
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Zentrierung - IE7 hat Probleme mit position:relative;

    Relative und absolute Positionierungen machen bei diesem Code keinen Sinn, da zugehörige Abstandswerte fehlen. Kannst du also löschen.

    Falls der IE 7 immer noch nicht zentriert, fehlt ein qualifizierter Doctype.

  4. #4
    Teeny
    Themenstarter

    Registriert seit
    31.07.2009
    Beiträge
    21
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Zentrierung - IE7 hat Probleme mit position:relative;

    Ich glaube der Code war zu stark vereinfacht um das Problem wirklich darstellen zu können, deshalb mal der Link: Hier

    Die Vorschläge haben leider nichts gebracht (Außer, dass die komplette Seite im IE7 links ist)

    Ich war davon überzeugt, dass ohne das position:relative; für #wrapper der #nav div sich am body orientiert. Da der body aber nicht genau #wrapper entspricht stimmt das mit height:100% nichtmehr.
    (Außerdem umschließt #wrapper ja nicht #header, wodurch nur durch die Zentrierung #header sowieso links bleibt.)

    Aber vielleicht ist das Problem einfach durch den Link zur Seite besser erkennbar.

    Edit: Übrigens wollte ich #nav nicht mittels float:left in #wrapper positionieren, da, sollte ich in #content etwas floaten und nachfolgend clear:left; verwenden, der Inhalt erst NACH #nav wieder weitergeht.
    Geändert von shikari (22.08.2010 um 02:19 Uhr)

  5. #5
    König(in)
    Registriert seit
    07.02.2009
    Ort
    Leipzig
    Beiträge
    1.391
    Danke
    2
    Bekam 21 mal "Danke" in 20 Postings

    Standard AW: Zentrierung - IE7 hat Probleme mit position:relative;

    Und es hilft nicht wie von mir vorgeschlagen statt dem body die umgebenden div-Elemente mit einer festen Breite und margin zu versehen?

  6. #6
    Großmeister(in)
    Registriert seit
    04.08.2009
    Beiträge
    567
    Danke
    0
    Bekam 66 mal "Danke" in 64 Postings

    Standard AW: Zentrierung - IE7 hat Probleme mit position:relative;

    Hallo,

    der Validator sagt, das in Zeile 163 ein div geschlossen wird, das nicht geöffnet wurde. Vielleicht reagiert der IE darauf ja allergisch.

    Gruss

    MrMurphy

  7. #7
    Teeny
    Themenstarter

    Registriert seit
    31.07.2009
    Beiträge
    21
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Zentrierung - IE7 hat Probleme mit position:relative;

    Zitat Zitat von MrMurphy
    der Validator sagt, das in Zeile 163 ein div geschlossen wird, das nicht geöffnet wurde. Vielleicht reagiert der IE darauf ja allergisch.
    Validator ist mal eine gute Idee. Ich war so überzeugt, dass ich sauber gecodet hab, dass ich garnicht nachgeschaut hab Aber leider löst es nicht das Problem.
    Zitat Zitat von threadi
    Und es hilft nicht wie von mir vorgeschlagen statt dem body die umgebenden div-Elemente mit einer festen Breite und margin zu versehen?
    Nein. Ich teste meine Seiten immer mit IE Net Renderer da ich selbst kein Windows habe. Vielleicht stellt der ja auch etwas falsch dar ?

  8. #8
    König(in)
    Registriert seit
    07.02.2009
    Ort
    Leipzig
    Beiträge
    1.391
    Danke
    2
    Bekam 21 mal "Danke" in 20 Postings

    Standard AW: Zentrierung - IE7 hat Probleme mit position:relative;

    Hab ich auch nicht, zumindest nicht zu hause. Schau dir die Seite mal bei www.browsershots.org an.

  9. #9
    Teeny
    Themenstarter

    Registriert seit
    31.07.2009
    Beiträge
    21
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Zentrierung - IE7 hat Probleme mit position:relative;

    Zitat Zitat von threadi Beitrag anzeigen
    Hab ich auch nicht, zumindest nicht zu hause. Schau dir die Seite mal bei www.browsershots.org an.
    hm, da scheint die Seite zentriert zu sein (Link zum Bild) - Und es scheint sogar so, als würde die Seite im IE6 funktionieren (zweiter Link), bis auf die Navigation was ich ja aber noch reparieren könnte.

    Dann muss ich wohl mal zu Nachbarn, Freunden oder wem auch immer und mir da mal die Seite anschauen um 100% sicher zu sein.

Ähnliche Themen

  1. Wie erstelle ich ein Element "fixed" aber trotzdem mit "position: relative"?
    Von nilss im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 3
    Letzter Beitrag: 17.03.2010, 16:35
  2. Probleme mit Zentrierung bei Frames
    Von Joerg7777777 im Forum HTML & CSS Forum
    Antworten: 4
    Letzter Beitrag: 23.10.2007, 18:54
  3. Bessere Lösung als position:relative;??
    Von Meitlibei im Forum HTML & CSS Forum
    Antworten: 1
    Letzter Beitrag: 04.12.2006, 10:42
  4. CSS Probleme mit Position
    Von DiamondDog im Forum HTML & CSS Forum
    Antworten: 5
    Letzter Beitrag: 16.09.2006, 21:10
  5. Probleme bei Layer-Position
    Von Jacky im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 2
    Letzter Beitrag: 05.08.2005, 19:49

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •