Ergebnis 1 bis 4 von 4

Thema: Zentrieren mit <div> - IE bringt mich zur Verzweiflung

  1. #1
    Benqo
    Gast

    Standard Zentrieren mit <div> - IE bringt mich zur Verzweiflung

    Hallo,

    hab hier ein Problem, bei dem ich echt nicht weiß, warum es existiert.

    Ich habe folgenden HTML-Code:
    Code:
    <html>
      <head>
      <meta http-equiv="content-type" content="text/html; charset=windows-1250">
      <meta name="generator" content="PSPad editor, www.pspad.com">
      <link rel="stylesheet" type="text/css" href="style2.css">
      <title></title>
      </head>
      <body>
        <div id="container">
            <div id="header">
                <div id="logo">[img]logo.png[/img]</div>
                <div id="aktionen">
    
    Aktuelle Aktionen</p></div>
            </div>
            <div id="leiste">
                <ul>[*]Home[*]Mitarbeiter[*]Produkte[/list]
            </div>
            <div id="content">
                <div id="content_sidebar">
                    Sidebar
                </div>
            <div id="containt_main">
          Lorem ipsum dolor sit amet consectetuer cursus Donec cursus consequat accumsan. Vivamus accumsan ridiculus lacinia fringilla est Morbi penatibus nunc dui adipiscing. Nunc Cras Vestibulum metus sed Lorem neque nibh Curabitur eget risus. Accumsan quis Sed Vestibulum enim leo ut laoreet et Pellentesque commodo. Hendrerit laoreet id Nulla consequat auctor.
    
    Risus sodales pellentesque aliquet quis tellus quis sociis facilisis id nulla. Sed at morbi nunc Proin tempus consectetuer ut semper nibh commodo. Pellentesque et feugiat In non et Vestibulum urna congue interdum velit. A cursus penatibus nibh fringilla Curabitur et convallis orci justo id. Tellus lobortis penatibus id magna pretium Vivamus turpis a ipsum nunc. Mauris ipsum ante eget id elit nunc quam sagittis quis id. Ligula Nam.
    
    Nam justo urna interdum interdum nibh elit commodo et pellentesque diam. Orci semper Proin est sit pharetra adipiscing tincidunt elit arcu Vivamus. Laoreet condimentum elit sed Nullam at Quisque Morbi volutpat sodales senectus. Fringilla nec pretium felis lacinia dui at eleifend augue nunc felis. Vitae tincidunt ante est condimentum libero condimentum nisl tortor nisl adipiscing. Lorem dui elit Quisque ut lorem tristique mauris eu.
    
    Ligula Curabitur congue tellus nisl at consequat metus augue tincidunt congue. Interdum pellentesque tellus leo accumsan nascetur ligula eget tincidunt congue elit. Ut fringilla elit mauris egestas id tempus ipsum Aenean Lorem urna. Feugiat porttitor vitae semper non nibh id Morbi et id ut. Pellentesque libero vitae Integer volutpat Curabitur interdum auctor.
    
    
            </div>
        </div>
      </div>
      </body>
    </html>
    Die Stylesheet Definitionen:
    Code:
    body &#123;
    	margin&#58; 0;
    	padding&#58; 0;
    	font&#58; 0.7em Arial, Helvetica, sans-serif;
    	background&#58; #ddd url&#40;bg_tribal.gif&#41; repeat-x scroll;
    &#125;
    
    #container &#123;
    	width&#58; 720px;
    	/* height&#58; 100%; */
    	border-left&#58; 1px solid #666;
    	border-right&#58; 1px solid #666;
    	background-color&#58; #ddd;
    	margin&#58; auto auto;
    &#125;
    
    #header &#123;
    	background-color&#58; #000;
    	color&#58; #fff;
    	height&#58; 150px;
    &#125;
    
    #logo &#123;
    	float&#58; left;
    	background-color&#58; #000;
    	width&#58; 500px;
    	height&#58; 150px;
    &#125;
    
    #aktionen &#123;
    	float&#58; right;
    	color&#58; #f00;
    	background-color&#58; #999;
    	width&#58; 220px;
    	height&#58; 150px;
    	padding&#58; 0;
    	margin&#58; 0;
    &#125;
    
    #aktionen p &#123;
    	text-align&#58; center;
    	margin&#58; -40px 0 0 -60px;
    	position&#58; relative;
    	top&#58; 50%;
    	left&#58; 50%;
    	width&#58; 100px;
    	height&#58; 60px;
    	background&#58; transparent url&#40;pdficon_large.gif&#41; no-repeat scroll 40px 30px;
    	background-color&#58; #fff;
    	padding&#58; 10px;
    &#125;
    
    #leiste &#123;
    	clear&#58; both;
    &#125;
    Folgender Effekt: Firefox stellt alles richtig dar (lange nicht fertig!), d.h. hier wird <div id="containter"> + Inhalt richtig dargestellt - und zwar mittig.
    Internet Explorer? Pah! Der macht natürlich, was er will. Und das ist - alles linksbündig. Egal, ob ich die floats drinnen lasse oder nicht, ist im schlichtweg wurscht.
    Auch der Rest der Sachen, die ich bereits versucht habe, einzurichten, sind ihm egal. Firefox hingegen tut wie ihm geheissen.

    Kann mir wer erklären warum? Und warum in aller Welt wird dieser doofe Internet Explorer noch immer mit $so hohem Marktanteil unterstützt?
    Jedes CSS Design könnte so einfach sein ohne Hacks und Notlösungen ....

    Danke jedenfalls an die, die versuchen, mir da rauszuhelfen. Mag vielleicht an der späten Stunde liegen, aber ich weiß jetzt nimmermehr, was ich noch ändern kann, damit alles mittig ist...

    Gruß, B.
    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
    Meister(in)
    Registriert seit
    04.01.2006
    Ort
    Gotha
    Beiträge
    430
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    umrahme mal deine ganzen divs mit <center> </center>
    dann wird alles mittig gesetzt.
    also so:
    Code:
    <html>  <head>
      <meta http-equiv="content-type" content="text/html; charset=windows-1250">
      <meta name="generator" content="PSPad editor, www.pspad.com">
      <link rel="stylesheet" type="text/css" href="style2.css">
      <title></title>
      </head>
      <body>
    <center>    
    <div id="container">
            <div id="header">
                <div id="logo">[img]logo.png[/img]</div>
                <div id="aktionen">
    
    Aktuelle Aktionen</p></div>
            </div>
            <div id="leiste">
                <ul>[*]Home[*]Mitarbeiter[*]Produkte[/list]
            </div>
            <div id="content">
                <div id="content_sidebar">
                    Sidebar
                </div>
            <div id="containt_main">
                     blablabla
            </div>
        </div>
      </div>
    </center>
      </body>
    </html>
    Das Leben ist binär. Entweder Du bist eine 0 oder eine 1.
    Meine Seite: sr-web.de

  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

    ... oder füge im CSS-Teil bei body noch

    Code:
    text-align&#58;center;
    ein.
    Beachte: Die Textausrichtung ist dann durchgehend zentriert. Du musst dann in den einzelnen text-containern dann wieder
    Code:
    text-align&#58;left;
    eingeben, bei Blocksatz justify.

    Dein Problem ist ein Bug des IE, der mit margin auto nichts anfangen kann.

    Noch ein Tipp: beim #container sollte es lauten
    Code:
    margin&#58; 0 auto;

  4. #4
    Gast

    Standard

    Hab die Lösung gefunden. Das Problem ist ein generelles mit dem DOCTYPE.

    Ein Tip aus einem anderen Forum hat mich an folgendes verwiesen: http://gaby77.ga.funpic.de/web/demos...to-quirks.html

    Einer der weiterführenden Links ist für sowas sehr interessant: http://www.carsten-protsch.de/zwisch...ype/index.html

    Hätte ich nie gedacht, dass DOCTYPE solch große Auswirkung zeigen kann...

    Ach, das mit margin 0px auto; hab ich probiert, hat nichts gebracht, erst der richtige DOCTYPE.

Ähnliche Themen

  1. Verzweiflung
    Von schaefchen im Forum HTML & CSS Forum
    Antworten: 5
    Letzter Beitrag: 16.06.2008, 00:02
  2. ... verzweiflung beim frameset
    Von dingens im Forum HTML & CSS Forum
    Antworten: 21
    Letzter Beitrag: 24.05.2008, 12:09
  3. myspace bringt mich zum verzweifeln!
    Von Anessa im Forum Off Topic und Quasselbox
    Antworten: 2
    Letzter Beitrag: 01.06.2007, 17:36
  4. Was bringt mir die Ip ?
    Von Spellcaster im Forum Computer - Internet Forum
    Antworten: 8
    Letzter Beitrag: 14.10.2004, 20:58
  5. Wie bringe ich einen Pizzaservice zur Verzweiflung?
    Von Carolyn im Forum Das Forum für Spiele, Fun & Jokes
    Antworten: 0
    Letzter Beitrag: 19.06.2003, 16:26

Stichworte

Berechtigungen

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