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

Welcher Brauser hat Recht, IE oder FF und Opera?

P

PORTAL

Neues Mitglied
Hallo zusammen,

bin beim herumspielen auf folgendes Problem gestoßen, und nun benötige ich euren rat:
Es geht um eine einfache Positionierung der Gesamtseite in der Mitte des Bildschirms. Dafür wollte ich einfach einen <div> Tag benutzen in dem dann alles abgespielt wird. Hier der Quelcode:


HTML: 
...
<body>
  <div id="center_div" style="text-align:center; border:1px dotted black;">
     <p>text anything text </p>
    <form method="post" action="#" style="margin:15px; padding:10px; border:1px solid black; width:30%;">
        <fieldset>
             <legend>Input name</legend>
               <input type="text" name="name" size="30" value="bag" />
        </fieldset>
    </form>
    <p>text anything text </p>
  </div>
  </body>
...
Bitte, testet es mal mit IE, FF und Opera.
Die beiden letzten zeigen den Text in der Mitte der Seite und die Form links, da es ja kein Text sondern ein Block Element ist. IE platziert alles in der Mitte.

 [FONT=&quot]Fügt man nun [/FONT]
Code: 
position:relative; left:50%;
[FONT=&quot]
[/FONT]
HTML: 
  <body>

  <div id="center_div" style="text-align:center; border:1px dotted black;">
    <p>text anything text </p>
    <form method="post" action="#" style="position:relative; left:50%; margin:15px; padding:10px; border:1px solid black; width:30%;">
        <fieldset>
             <legend>Input name</legend>
               <input type="text" name="name" size="30" value="bag" />
        </fieldset>
    </form>
    <p>text anything text </p>
  </div>

  </body>
[FONT=&quot]zur Positionierung des Formulars hinzu, bewegen FF und Opera das Formular in die Mitte des Bildschirmes. IE rechnet die 50% aber irgendwie von der Mitte des Bildschirmes und bewegt das Formular komplett auf die rechte Seite.

[/FONT] Nun meine Frage: Was mache ich hier Falsch(Gedankfehler), oder wie kann man alle Elemente auf der Seite auf einen Schlag in der Mitte des Bildschirmes positionieren? Bzw., welcher Brauser hat recht bei der Interpretation der CSS Anweisungen?

Ich bedanke mich im Voraus für eure Ideen
PORTAL
 
Werbung:
Hallo,
alle haben recht ausser Du :O).
wie kommst darauf?
position:relative; left:50%;
Zum Vergrößern anklicken....

mach male einfach in css
body{margin:0 auto}
#center_div{width:800px}
800 halt deine breite.
die restlichen style von center_div nimm erstmal raus wie text-align:center.

Cheffchen
 
Hallo Cheffchen,
Cheffchen schrieb:
wie kommst darauf?
position:relative; left:50%;
Zum Vergrößern anklicken....
Zum Vergrößern anklicken....
Die Positionierung für den <form> Tag habe ich eingeführt um die Form eben in die Mitte der Seite zu platzieren, da die ja sonst links bleibt, obwohl alles anderes mittig dargestellt wird. Relativ ist es zu anderen Elementen auf der Seite, und Prozentangaben sind ja verständlich.

Cheffchen schrieb:
mach male einfach in css
body{margin:0 auto}
#center_div{width:800px}
800 halt deine breite.
die restlichen style von center_div nimm erstmal raus wie text-align:center.
Cheffchen
Zum Vergrößern anklicken....
Das löst mein Problem mit der Platzierung aller Elemente in der Mitte der Seite gar nicht. Im Gegenteil schränkt mich dein Vorschlag bei einer bestimmte breite der Seite nur ein, und(!) diese 800px werden ja von links gerechnet, damit würde ich eine 800px breite Seite haben, die links positioniert wäre, ich möchte aber alles in der Mitte des Bildschirms haben. (Am Rande. Hast du meine Beispiele ausprobiert?)
Ich glaube das wir da an einander vorbei reden, oder ich habe mich nicht klar genug ausgedruckt.

Mir geht es darum, dass Browser diesen einfachen Code unterschiedlich realisieren, und ich möchte eine allgemeine Lösung zur Platzierung aller Elemente in der Mitte der Seite finden.

Ich bin weiterhin gespannt auf eure Ideen.
PORTAL
 
Werbung:
Code: 
#center_div {
 margin:0 auto;
  width:800px;
}

Die 800px kannst Du natürlich an deine Wünsche anpassen. Und das klappt so auch nur sauber, wenn ein gültiger Doctype vorhanden ist.
 
Hallo,

Es geht um eine einfache Positionierung der Gesamtseite in der Mitte des Bildschirms.
Zum Vergrößern anklicken....
threadi ist wohl auch meiner meinung, danke.
Das geht halt nur mit margin:0 auto;.

Habe auch dein gedanken fehler mit "position:relative; left:50%;"
Die left:50% sind einfach falsch denn.
Hast view 1000px breit
Seite ist 400px breit.
jetzt machst left:50%; also nimmt der Browser die 50% von 1000px, das sind 500px(ungetestet da kein taschenrechner bei hand).
also positioniert der die Seite bei left:500px, das der IE das trozdem mittig zeigt ist wieder nur ein beweis was der für schrott macht :O).

Ich hätte ja deins ja mal schnell getestet aber da fehlt ja die hälfte bei der htm und eine einfache css fehlt total.

Cheffchen
 
Geloest

Hallo zusammen!
Wünsche euch eine neue erfolgreiche Woche!
Vielen Dank für eure Antworten.
Beim Schreiben einer Antwort für euch habe meinen Denk-Fehler gefunden! Den vollständigen Code kann man unten sehen!

HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  <meta name="generator" content="PSPad editor, www.pspad.com">
  <title>Elemente mittig positionieren mit CSS</title>
  <style type="text/css"><!--

    #center_div{
      margin:0 auto;
      width:800px;
      border:5px solid black;
      /* text-align:center;  /* - Richtet Elemente in der Mitte des Blocks */
                             /* - Dies kann man einsetzen um nicht bei
                             /* allen Elementen die Ausrichtung expliziet
                             /* angeben zu muessen, funktioniert leider nicht
                             /* bei allen Elementen */
    }
    form{
      /* position:relative;  /* - Dies ist war falsche Loesung */
      /* left:30%;           /* - Dies ist war falsche Loesung */
      /* margin:0 auto;      /* - Dies ist die RICHTIGE Loesung fuer mein Problem */
      width:40%;
      padding:3px; /* Damit man den Rahmen um die Form besser sieht */
      border:2px solid red;
      
    }
  //--></style>

  </head>
  <body>
    <div id="center_div">
      <p>text anything text <br>text anything text <br>text anything text<br>...</p>
      <br>
      <div>
      <form method="post" action="#">
            <fieldset>
               <legend>Das ist die Form</legend>
                 Eingabe: <input type="text" name="name" size="15" value="bag" />
           <p>weitere Inhalte innerhalb der Form</p>
           Auswahl: <input type="radio" name="check" value="1">
           <br>...
            </fieldset>
      </form>
      </div>
      <br>
        <p>text anything text <br>text anything text <br> ... </p>
    
  </div>
  </body>
</html>
Nun habe ich die gesamte Seite als Quellcode reingestellt. Die CSS Anweisungen habe ich alle in Kopf der Datei verschoben, damit diese auf einen Blick sichtbar werden. Und als den DOCTYPE habe ich die letzte Version von HTML, sogar in der „strict“ variante ausgewählt.
Mit CSS lässt es sich jetzt Wunderbart spielen. Ich habe einige Anweisungen auskommentiert damit man so zusagen den Grundzustand sieht. Nun kann man die auskommentierten Zeilen wieder einbinden und die Unterschiede sehen.

Danke noch ein Mal!

PORTAL

P.S.: An Moderator des Forums: Die Frage kann man als Erledigt markieren, danke!
 
Zuletzt bearbeitet:
Werbung:
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben