Herzlich Willkommen, lieber Gast!
  Sie befinden sich hier:

  Forum » HTML / XML / XHTML » Elemente zentrieren ...

Forum | Hilfe | Team | Links | Impressum | > Suche < | Mitglieder | Registrieren | Einloggen
  Quicklinks: MSDN-Online || STL || clib Reference Grundlagen || Literatur || E-Books || Zubehör || > F.A.Q. < || Downloads   

Autor Thread - Seiten: > 1 <
000
18.03.2006, 16:22 Uhr
Reyx
IT-fetischistischer Wurstsalat mit rostigem Berghorn
(Operator)


Hallo,

ich versuche vergeblich seit geraumer Zeit, Elemente auf einer Webseite zentriert darzustellen.

Da die Seitenstruktur recht komplex ist, arbeite ich mit mehreren (5) Layern. Den "Hauptlayer" (das, wo der eigentliche Inhalt drin steht) habe ich wie folgt definiert:

Code:
#Content    {
    background-image: url('gfx/main_background.png');
    position: absolute;
    left: 180px;
    right: 180px;
    top: 147px;
    border-left: 1px #888888 dashed;
    border-right: 1px #888888 dashed;
    padding: 10px 20px 20px 20px;
}


Innerhalb dieser Fläche möchte ich nun Elemente horizontal zentrieren. Wenn ich ihm sage "width: 70%; margin: auto;" funktioniert das im Opera und Firefox auch problemlos, der IE hingegen bezieht die 70% auf die Gesamtgröße der Seite und fegt mir meinen Inhalt über den rechten Seitenrand hinaus ...

Gibt es dazu keine alternative Möglichkeit (die in allen drei Browsern funktioniert)? Oder ist es möglich, den Browsern einzubleuen, worauf sie die 70% beziehen sollen? Da die Position auf absolut steht hat #Content selbst ja keine Breite zugewiesen. Irgendwie bin ich gerade mit meinem Latein am Ende

Dieser Post wurde am 18.03.2006 um 16:22 Uhr von Reyx editiert.
 
Profil || Private Message || Suche Download || Zitatantwort || Editieren || Löschen || IP
001
18.03.2006, 16:27 Uhr
FloSoft
Medialer Over-Flow
(Administrator)


ie7 "css"-javascript schon eingefügt?
--
class God : public ChuckNorris { };
 
Profil || Private Message || Suche Download || Zitatantwort || Editieren || Löschen || IP
002
18.03.2006, 16:34 Uhr
Reyx
IT-fetischistischer Wurstsalat mit rostigem Berghorn
(Operator)


Nein, was genau meinst du damit?
IE7 trifft die Sache aber schon recht genau, mit dem 6er konnte ich es noch nicht ausprobieren ...
 
Profil || Private Message || Suche Download || Zitatantwort || Editieren || Löschen || IP
003
18.03.2006, 17:48 Uhr
FloSoft
Medialer Over-Flow
(Administrator)


hi ich mein das hier:

http://dean.edwards.name/IE7/
--
class God : public ChuckNorris { };
 
Profil || Private Message || Suche Download || Zitatantwort || Editieren || Löschen || IP
004
18.03.2006, 18:13 Uhr
Reyx
IT-fetischistischer Wurstsalat mit rostigem Berghorn
(Operator)


Mhh ... Bringt leider auch nichts

Allerdings bin ich mir nicht so sicher, dass das ein Bug vom IE ist. Bei height ist es ja auch so, dass es, wenn das parent-element keinen height-wert zugewiesen hat, einfach ignoriert wird.
 
Profil || Private Message || Suche Download || Zitatantwort || Editieren || Löschen || IP
005
18.03.2006, 18:32 Uhr
FloSoft
Medialer Over-Flow
(Administrator)


haste mal für dein global "width: 100%" probiert?
--
class God : public ChuckNorris { };
 
Profil || Private Message || Suche Download || Zitatantwort || Editieren || Löschen || IP
006
18.03.2006, 19:00 Uhr
Reyx
IT-fetischistischer Wurstsalat mit rostigem Berghorn
(Operator)


Ja, bringt aber auch nichts. Ich schätze, es liegt einfach am position: absolute;
Es würde auch funktionieren, wenn ich #Content einen width-Wert zuordnen könnte. Das kann ich ja aber auf Grund von position:absolute nicht

Ich schätze mal, dass ist so ohne Weiteres nciht möglich ... Ich muss wohl mal das Gesamtlayout überdenken

EDIT:
Mensch ... Ich merke mal wieder richtig schön, was für ein Müll der IE ist ... Nichtmal Größenangaben mit em kann der brauchbar umsetzen
 
Profil || Private Message || Suche Download || Zitatantwort || Editieren || Löschen || IP
007
18.03.2006, 20:17 Uhr
predator



Hi!

Du könntest einen anderen Fehler des IE ausnutzen, um deine Elemente richtig darzustellen:

Zitat von SelfHTML:
text-align bezieht sich nicht nur auf Textinhalte, sondern auf alle inline dargestellten Elemente (wie z.B. <img>. Der MS Internet Explorer wendet diese Eigenschaft jedoch fälschlich auch auf Block-Elemente an.


Wenn du also ein div hast, das du zentrieren möchtest, legst du zusätzlich ein div mit text-align:center; außendrum. Dadurch wird das innere div im IE zentriert, der FF und Opera ignorieren dies.

Bsp:

CSS:
#Content    {
    background-image: url('gfx/main_background.png');
    position: absolute;
    left: 180px;
    right: 180px;
    top: 147px;
    border-left: 1px #888888 dashed;
    border-right: 1px #888888 dashed;
    padding: 10px 20px 20px 20px;
}

#zentriert    {
    width:70%;
    margin:auto;
    text-align:left;   /* Wenn der Text innerhalb des zentrierten Elements nicht zentriert werden soll */
}

#ie-fix    {
    text-align:center;
}



HTML:
<div id="Content">
    afdafadf
    <div id="ie-fix"><div id="zentriert">Das hier sollte zentriert sein</div></div>
    afdadfeafaf
</div>

--
Gruß
predator
Zitat von Edsger W. Dijkstra:
Es ist praktisch unmöglich, einem Studenten gutes Programmieren beizubringen, wenn er vorher in BASIC programmiert hat. Als potenzielle Programmierer sind sie geistig verstümmelt ohne Hoffnung auf Erholung.
 
Profil || Private Message || Suche Download || Zitatantwort || Editieren || Löschen || IP
008
18.03.2006, 22:39 Uhr
FloSoft
Medialer Over-Flow
(Administrator)


jop das benutz ich auch den fix. ist aber wieder nicht ie-"alpha"7 kompatibel, der hat das korrekte block-layout, da sollte aber der fehler nicht auftreten.
--
class God : public ChuckNorris { };
 
Profil || Private Message || Suche Download || Zitatantwort || Editieren || Löschen || IP
Seiten: > 1 <     [ HTML / XML / XHTML ]  


ThWBoard 2.73 FloSoft-Edition
© by Paul Baecher & Felix Gonschorek (www.thwboard.de)

Anpassungen des Forums
© by Flo-Soft (www.flo-soft.de)

Sie sind Besucher: