Middle und Center Formatieren - Seite 2

ForenNews · #11 (**permalink**) 31.03.2005, 09:25

Hallo, ich hab das mal getestet, die CSS Angaben dazu ausgelagert, wegen der Ordnung usw. ,-)

CSS:

* html div {
/* Star-Hack fuer InternetExplorer
* individuelle Anpassung
* je nach Hoehe des Inhaltes
*
* fuer IE Win \*/
height: 60%;
padding: 20% 0 0 0;
/* */ /* for Mac IE */
}
{
margin: 0;
padding: 0;

border-collapse:collapse;
border-spacing: 0;
}

html,
body {
height: 100%;
width: 100%;

color: #000000;
background-color: #FF9922;

line-height: 1.45;
}

body {
display: table;

font-size: 100.01%;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
}

div{
display: table-cell;

background-color: #FFFFFF;

vertical-align: middle;
text-align: center;

font-size: .8em;
}

p{
/*
* Stellvertreter Block-Elemente
*/
width: 10em;
height: 9.8em;

margin: auto;
border: 1px solid #000000;

background-color: #FF0000;
}

Html Datei:

<!doctype html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">

<head>
<title>xxxx</title>
<link rel="stylesheet" media="screen,projection" type="text/css" href="special.css" />
</head>

<body>

<div>
Dies ist ein Text

</p>

Dies ist ein Text
</div>

</body>

</html>

Das Ergebnis ist nicht unbedingt das, was ich erwartet hab.

ulle · #12 (**permalink**) 31.03.2005, 09:28

Naja Dein Markup/CSS ist auch nicht das was ich erwartet habe

Zitat:

/* CSS */
* {
margin: 0;
padding: 0;

border-collapse:collapse;
border-spacing: 0;
}

/* XHTML */
<div>
Dies ist ein Text

</p>

Dies ist ein Text
</div>

Schön wäre es wenn Du für Deinen Code im Forum auch den BBCODE benutzen würdest

fricca · #13 (**permalink**) 31.03.2005, 09:31

Zitat:

Zitat von ulle

@fricca ; Dein Link zeigt zwar eine Lösung, aber auch eine DIV-Suppe, [...]

... die sich schnell verringern lässt, wenn man von einer fixen Höhe des zentrierten Elements ausgeht (was man bei deiner Star-Hack-Variante für IE IMHO auch tun muss...)

BTW: Ich wollte auch nicht unbedingt zur Nachahmung des genannten Beispiels aufrufen, sondern vielmehr darauf hinweisen, dass das Problem der vertikalen Zentrierung per CSS doch nicht ganz so einfach zu lösen ist...

Zitat:

Zitat von ulle

Und wenn der Validator nicht geschimpft hätte, dann könnte man sogar das DIV einsparen - indem das HTML-Element schon [display: table;] und das BODY-Element [display: table-cell;] "gespielt" hätte.

Dann aber keine Chance mehr für den IE, oder? (die "Invalidität" mal ignoriert)

ulle · #14 (**permalink**) 31.03.2005, 09:39

Zitat:

Zitat von fricca

Dann aber keine Chance mehr für den IE, oder?(die "Invalidität" mal ignoriert)

Naja, mein 2. Beispiel hat der IE6 gefressen......., dieses ist übrigens valide.

Ich meine mich zu erinnern dass Du ja Safari Möglichkeiten hast, wenn ich Dich mal bitten darf.....

fricca · #15 (**permalink**) 31.03.2005, 09:56

Zitat:

Zitat von ulle

Code:

* html body	{
			/* Star-Hack fuer InternetExplorer
			 * individuelle Anpassung
			 * je nach Hoehe des Inhaltes
			 *
			 * fuer IE Win \*/
			height: 60%;
			padding: 20% 0 0 0;
			/* */ /* for Mac IE */
			}

Steh' ich jetzt auf der Leitung?
Das bringt jetzt für vertikale Zentrierung nicht wirklich was. Das padding-top in Prozent richtet sich nach der Breite des Elternelements... Es bleibt also bei gleicher Fenterbreite immer stehen, egal welche Höhe...

fricca
*grübelnddenMacanwerfendfürSafaritest*

ulle · #16 (**permalink**) 31.03.2005, 10:04

Zitat:

Zitat von fricca

Das bringt jetzt für vertikale Zentrierung nicht wirklich was. Das padding-top in Prozent richtet sich nach der Breite des Elternelements...

Yes, das ist richtig, es soll doch auch nur eine Behelfslösung für den IE sein, und dabei nutze ich die Verhältnismäßigkeit des Viewports. Das dies unsauber ist, evtl. auch aus dem Viewport läuft ist mir klar, aber auch egal, keiner wird sich beschweren wenn im IE das Teil oberhalb der Mitte sitzt und die breit/kurz Viewport Server bekommen im zweifel einen Scroll-Balken.

Zumindest kann ich mit dieser Lösung das Teil einfach in einer bestimmten relativen Höhe - "hinhängen"

fricca · #17 (**permalink**) 31.03.2005, 10:29

Zitat:

Zitat von ulle

Yes, das ist richtig, es soll doch auch nur eine Behelfslösung für den IE sein, und dabei nutze ich die Verhältnismäßigkeit des Viewports.

Wär dann nicht ein position:relative; top:20% etwas wirkungsvoller?

Safaritest:
Leider kennt der Safari 1.0.3 wohl auch kein display:table-cell (eine aktuellere Safari-Version kann ich leider grad nicht testen).
Der Container klebt oben.
Schade eigentlich

ulle · #18 (**permalink**) 31.03.2005, 10:39

Du meinst so ungefähr

Code:

* html body	{
			/* Star-Hack fuer InternetExplorer
			 * individuelle Anpassung
			 * je nach Hoehe des Inhaltes
			 *
			 * fuer IE Win \*/
			position: relative;
			top: 30%;
			
			height: 60%;
			/* */ /* for Mac IE */
			}

Jepp, dies ist wesentlich besser !!!!

Das mit dem Safari ist schade, hast Du beide Versionen getestet, also auch die mit [display: table;] im BODY ?

ulle · #19 (**permalink**) 31.03.2005, 10:44

Jetzt könnte man ja auch einen HACK für den Safari bauen,

Und das meine ich, einfach nach Standard, fertig.
Der IE und der Safari kleben es nach oben, gute Browser können es, andere werden es lernen.

NO HACKs

fricca · #20 (**permalink**) 31.03.2005, 10:56

Zitat:

Zitat von ulle

Jetzt könnte man ja auch einen HACK für den Safari bauen,

Kennst du denn einen? Ich konnte noch keinen finden (hatte kürzlich damit gekämpft, dass der Safari min-height nicht kennt

)

Zitat:

Zitat von ulle

hast Du beide Versionen getestet, also auch die mit [display: table;] im BODY ?

Hatte nur die zweite Variante getestet - ich probier später nochmal die andere, habe aber ehrlich gesagt wenig Hoffnung...

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Bild zentrieren	JuKo	CSS	4	21.03.2018 00:35
Verschiebungen bei größerem Bildschirm	seelefant	CSS	4	28.07.2014 15:43
Unterschiedliche Darstellung in Firefox / IE	memphis2k	CSS	16	30.08.2011 17:40
Problem mit einem 3D-Effekt	moep0710	CSS	12	12.06.2010 14:30
Problem mit CSS in Joomla 1.5	noobilicius	CSS	6	25.09.2008 20:24