|
|||
![]()
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?
__________________
bye Rene |
Sponsored Links |
|
||||
![]()
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.
__________________
Bitte keine PN's - schreibt mir ne anständige Mail oder sprecht mich über Msn / Icq an Milian Wolff | Markdownify | Typogridder |
Sponsored Links |
|
|||
![]()
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>
__________________
</ulle> |
|
|||
![]() Zitat:
|
|
||||
![]()
siehe Ulle, der Junge hats drauf, also wirds gehen
![]()
__________________
Bitte keine PN's - schreibt mir ne anständige Mail oder sprecht mich über Msn / Icq an Milian Wolff | Markdownify | Typogridder |
|
|||
![]()
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> *************************************************
__________________
bye Rene |
|
|||
![]() Zitat:
(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 |
|
|||
![]() Zitat:
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> |
|
|||
![]()
@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> |
Sponsored Links |
|
|||
![]() Zitat:
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 ![]() 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> ![]()
__________________
</ulle> |
Sponsored Links |
![]() |
Themen-Optionen | |
Ansicht | |
|
|
![]() |
||||
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 |