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
  #1 (permalink)  
Alt 30.03.2005, 09:49
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 30.03.2005
Beiträge: 4
ForenNews befindet sich auf einem aufstrebenden Ast
Standard 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?
__________________
bye Rene
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 30.03.2005, 16:59
Benutzerbild von The Doc
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 19.01.2005
Beiträge: 1.113
The Doc befindet sich auf einem aufstrebenden Ast
Standard

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

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>
Mit Zitat antworten
  #4 (permalink)  
Alt 30.03.2005, 22:49
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 17.02.2005
Beiträge: 137
nicmare befindet sich auf einem aufstrebenden Ast
Standard

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
Mit Zitat antworten
  #5 (permalink)  
Alt 30.03.2005, 23:53
Benutzerbild von The Doc
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 19.01.2005
Beiträge: 1.113
The Doc befindet sich auf einem aufstrebenden Ast
Standard

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
Mit Zitat antworten
  #6 (permalink)  
Alt 31.03.2005, 08:45
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 30.03.2005
Beiträge: 4
ForenNews befindet sich auf einem aufstrebenden Ast
Standard

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

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

@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>
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 31.03.2005, 10: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 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

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
__________________
</ulle>
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
Bild zentrieren JuKo CSS 4 21.03.2018 01:35
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


Alle Zeitangaben in WEZ +2. Es ist jetzt 15:50 Uhr.