zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > Knowledge Base
Seite neu laden Middle und Center Formatieren

Antwort
 
LinkBack Themen-Optionen Ansicht
  #11 (permalink)  
Alt 31.03.2005, 10:25
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 30.03.2005
Beiträge: 4
ForenNews befindet sich auf einem aufstrebenden Ast
Standard

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.


__________________
bye Rene
Mit Zitat antworten
Sponsored Links
  #12 (permalink)  
Alt 31.03.2005, 10:28
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 02.06.2003
Beiträge: 2.441
ulle befindet sich auf einem aufstrebenden Ast
Standard

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
__________________
</ulle>
Mit Zitat antworten
Sponsored Links
  #13 (permalink)  
Alt 31.03.2005, 10:31
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.792
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

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)
Mit Zitat antworten
  #14 (permalink)  
Alt 31.03.2005, 10:39
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 02.06.2003
Beiträge: 2.441
ulle befindet sich auf einem aufstrebenden Ast
Standard

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.....
__________________
</ulle>
Mit Zitat antworten
  #15 (permalink)  
Alt 31.03.2005, 10:56
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.792
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

Zitat:
Zitat von ulle
Code:
* html body	&#123;
			/* Star-Hack fuer InternetExplorer
			 * individuelle Anpassung
			 * je nach Hoehe des Inhaltes
			 *
			 * fuer IE Win \*/
			height&#58; 60%;
			padding&#58; 20% 0 0 0;
			/* */ /* for Mac IE */
			&#125;
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*
Mit Zitat antworten
  #16 (permalink)  
Alt 31.03.2005, 11:04
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 02.06.2003
Beiträge: 2.441
ulle befindet sich auf einem aufstrebenden Ast
Standard

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"
__________________
</ulle>
Mit Zitat antworten
  #17 (permalink)  
Alt 31.03.2005, 11:29
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.792
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

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
Mit Zitat antworten
  #18 (permalink)  
Alt 31.03.2005, 11:39
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 02.06.2003
Beiträge: 2.441
ulle befindet sich auf einem aufstrebenden Ast
Standard

Du meinst so ungefähr
Code:
* html body	&#123;
			/* Star-Hack fuer InternetExplorer
			 * individuelle Anpassung
			 * je nach Hoehe des Inhaltes
			 *
			 * fuer IE Win \*/
			position&#58; relative;
			top&#58; 30%;
			
			height&#58; 60%;
			/* */ /* for Mac IE */
			&#125;
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>
Mit Zitat antworten
  #19 (permalink)  
Alt 31.03.2005, 11:44
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 02.06.2003
Beiträge: 2.441
ulle befindet sich auf einem aufstrebenden Ast
Standard

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
__________________
</ulle>
Mit Zitat antworten
Sponsored Links
  #20 (permalink)  
Alt 31.03.2005, 11:56
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.792
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

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...
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Verschiebungen bei größerem Bildschirm seelefant CSS 4 28.07.2014 16:43
Unterschiedliche Darstellung in Firefox / IE memphis2k CSS 16 30.08.2011 18:40
Problem mit einem 3D-Effekt moep0710 CSS 12 12.06.2010 15:30
Problem mit CSS in Joomla 1.5 noobilicius CSS 6 25.09.2008 21:24
div middle / center DieLiLLy CSS 2 28.03.2006 12:58


Alle Zeitangaben in WEZ +2. Es ist jetzt 05:53 Uhr.