XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   Knowledge Base (http://xhtmlforum.de/forumdisplay.php?f=79)
-   -   Middle und Center Formatieren (http://xhtmlforum.de/showthread.php?t=34945)

ForenNews 30.03.2005 09:49

Middle und Center Formatieren
 
Hi,

ich hab da ein Problem. Ich möchte einen Conti zentriert und mittig in der Höhe ausrichten. Für zentriert hab ich eine Lösung gefunden bei css4you, die folgend aussieht:

<div style="vertical-align: middle; BORDER-RIGHT: #000000 1px solid; BORDER-TOP: #000000 1px solid; MARGIN: 0px auto; BORDER-LEFT: #000000 1px solid; WIDTH: 760px; BORDER-BOTTOM: #000000 1px solid; BACKGROUND-COLOR: #bdbec6; TEXT-ALIGN: left">
<div id="title" style="width: 758; height: 100">
<h1>Header</h1>
</div>
<div id="left">
<div class="menucontainer">
<p class="menutitle">MENU 1</p>


Hyperlink 1 Hyperlink 2
Hyperlink 3 Hyperlink 4
Hyperlink 5
</div>
</div>
<div id="content">
<h2 style="MARGIN-TOP: 10px"> </h2>
</div>


<br style="CLEAR: both">
</div>

Nur, wie bekomm ich das in der Höhe mittig ausgerichtet?

The Doc 30.03.2005 16:59

vertical-align, geht aber afaik nur in Tabellenzellen. Deshalb entweder nen div rum mit display:table; und den content mit display:table-cell; und vertical-align:middle; oder ne Tabelle drum.

ulle 30.03.2005 18:04

Warum nicht BODY als [display: table;] ??

So geht es zwar nicht im IE, zumindest nicht vertikal, aber wer will das schon wissen...



Code:

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>xxxx</title>

<style type="text/css" media="screen,projection" title="Druckvorschau-semantic-Test">
/*<![CDATA[*/


*                        {
                        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;
                        }
                       
               


/*]]>*/
</style>


</head>
<body>

<div>
        Dies ist ein Text
       

       

 </p>
       

        Dies ist ein Text
</div>

</body>
</html>


nicmare 30.03.2005 22:49

Zitat:

Zitat von The Doc
vertical-align, geht aber afaik nur in Tabellenzellen. Deshalb entweder nen div rum mit display:table; und den content mit display:table-cell; und vertical-align:middle; oder ne Tabelle drum.

das ist mir neu. is das in den gängigen browsern kompatibel? also ie, ff, nn, opera

The Doc 30.03.2005 23:53

siehe Ulle, der Junge hats drauf, also wirds gehen :)

ForenNews 31.03.2005 08:45

Hallo, danke für Eure Hilfe. Also Table, in welcher Form kam nicht in Frage, damit arbeite ich seit jahren und bin genausolang zwar fix damit - aber auch unzufrieden. ;)

Die Lösung von Ulle sieht sehr interessant aus, hat aber den entscheidenten Nachteil, das sie nicht mit dem IE funktioniert, und damit grobgeschätzt 100% der Zielkundschaft ausgeschlossen wären. Für ein privates Projekt wär vllt. ok *g*, aber gewerbliche Projekte brauchen halt schon paar zuschauer. ;)

Auf dem CSB hat man folgende Lösung erarbeitet, die nach der ersten Betrachtung gestern Abend schon mal gut funktionierte. Ich stell die hier mal ein, falls das auch jemand gebrauchen kann. Erstellt wurde es von s0nic:

************************************************

<!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>aaa</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<style type="text/css">
<!--
#horizon {
position: absolute;
top: 50%;
left: 0px;
width: 100%;
margin-top: -170px;
text-align: center;
min-width: 760px;
}
#wrapper {
background-color: #fff;
position: relative;
text-align: left;
width: 760px;
height: 340px;
margin: 0px auto;
background-color: #bdbec6;
border:#000 1px solid;
}

#wrapper h1 {
height: 100px;
}

#wrapper #left {
float:left;
padding-right:20px;
}

.menucontainer ul {
list-style-type:none;
padding:0;
}
-->
</style>
</head>
<body>

<div id="horizon">
<div id="wrapper">

<h1>Header</h1>

<div id="left">
<div class="menucontainer">
MENU 1
<ul>[*]Hyperlink 1[*]Hyperlink 2[*]Hyperlink 3[*]Hyperlink 4[*]Hyperlink 5[/list] </div>
</div>

<div id="content">
<h2 style="MARGIN-TOP: 10px">lalala</h2>



bissle text...

bissle text...

bissle text...

bissle text...

bissle text...
</p>
</div>

</div>
</div>
</body>
</html>
*************************************************

fricca 31.03.2005 09:49

Zitat:

Zitat von ForenNews
Code:

#horizon {
            position: absolute;
            top: 50%;
            [...]
            margin-top: -170px;
            [...]
        }


Diese Art der vertikalen Zentrierung hat leider den Nachteil, dass der Inhalt nach oben aus dem Anzeigebereich verschwindet, wenn das Fenster zu "kurz" wird - und das ohne dass man hinscrollen könnte...
(Und der IE5 Mac kann das überhaupt nicht - die oberen 50% des divs sind nicht sichtbar)

Hier hat sich jemand ausführliche Gedanken zu dem Problems gemacht - ergänzend zu ulles Lösung auch für IE.

Grüße
fricca

ulle 31.03.2005 09:51

Zitat:

Zitat von ForenNews
Die Lösung von Ulle sieht sehr interessant aus, hat aber den entscheidenten Nachteil, das sie nicht mit dem IE funktioniert, und damit grobgeschätzt 100% der Zielkundschaft ausgeschlossen wären.

Der IE hat nur vertikal ein Problem damit, und wenn schon, es ist ja möglich mit einem StarHack ein wenig nachzuhelfen. Bis der IE dann auch mal CSS2.1 gelernt hat kann man sich wie gezeigt behelfen. Okay es ist nicht genau in dcer Mitte, aber wer nimmt es so genau. Der visuelle Eindruck und die Sematik ist wohl wichtiger.

Einfach ins CSS einfügen
Code:

* 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 */
                        }


ulle 31.03.2005 09:58

@fricca ; Dein Link zeigt zwar eine Lösung, aber auch eine DIV-Suppe, ich weiß nicht ob dann eine "Markup" <table> nicht schlauer ist. Alles mit Gewalt von Tables auf DIV-Container zu heben macht wohl wenig Sinn.

Code:

<div id="outer">
  <div id="middle">
    <div id="inner">


ulle 31.03.2005 10:04

Zitat:

Zitat von The Doc
siehe Ulle, der Junge hats drauf, also wirds gehen

Himmel, das sehe ich ja jetzt erst. Nur keine Blumen, bin eben/gestern erst selbst auf diese Lösung gekommen. Ob das alle Browser problemlos einlesen weiß ich noch nicht.

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. Funktioniert hat es, aber Valide ist es nur wenn nach dem BODY ein "natürliches" BLOCK-Element folgt. Schade !!

Falls man nur ein "natürliches" Block-Element benutzt :arrow:

Code:

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>xxxx</title>

<style type="text/css" media="screen,projection" title="Druckvorschau-semantic-Test">
/*<![CDATA[*/


*                        {
                        margin:  0;
                        padding: 0;
                       
                        border-collapse:collapse;
                        border-spacing: 0;
                        }



html,
body                {
                        display: table;
                       
                        height:  100%;
                        width:  100%;
                       
                        color:                                #000000;
                        background-color:        #FF9922;
                        }

                       


body                {
                        display: table-cell;
                       
                        background-color:        #FFFFFF;
                       
                        vertical-align: middle;
                        text-align:        center;
                        }                       



* 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 */
                        }                       


                       
p                        {
                        /*
                        * stellvertreter Block-Elemente
                        */
                        width: 10em;
                        height: 9.8em;
                       
                        margin: auto;
                        border: 1px solid #000000;
                       
                        background-color:        #FF0000;
                        }
                       
                       
/*]]>*/
</style>


</head>
<body>

       

 </p>

</body>
</html>

Geht aber nicht mit einem IMG-Tag, da "natürliches" Inline-Element. Aber nur für Bilder gibt es ja die Hintergrund-Zentrierung ;)


Alle Zeitangaben in WEZ +2. Es ist jetzt 21:27 Uhr.

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2020, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2020