Middle und Center Formatieren - Seite 3

ForenNews · #21 (**permalink**) 31.03.2005, 12:47

Zitat:

Zitat von ulle

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

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

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

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

</p>

Dies ist ein Text
</div>

ups *g* habs gefixt.

Zitat:

Zitat von ulle

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 !!!!

Danke. Hab ich gleich mit übernommen.

ulle · #22 (**permalink**) 01.04.2005, 13:53

Zitat:

Zitat von fricca

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

)

<edit>
siehe auch http://www.css-technik.de/details/30...owser-Bugs.htm
</edit>

Keinen speziellen für Safari, und auch kein Hack, aber

Code:

head:first-child+body #id 
{
....
}

Ich denke mal der Browser der diesen Selektor lesen kann, der kann auch [min-height]

Übrigens Mozilla 1.xx / Opera 7.xx können es interpretieren

@fricca - Teste bitte mal ob der Safari das interpretiert, besser wäre natürlich wenn noch mehr Leute sich mal beteitigen und wir ein Cross-Browser Test hinbekommen.

Code:

head:first-child+body
			{
			/* wenn der erste Tag nach dem 
			 * </head> ein <body> ist !!
			 * (immer der Fall)
			 * 
			 * Mozilla 1.xx / Opera 7.xx
			 */
			background-color:	#FF0000;
			}

<edit>
Der Safari kann diesen Selector doch lesen, trotzdem kann er kein min-height !!
http://www.xhtmlforum.de/viewtopic.php?p=23102#23102
</edit>

ulle · #23 (**permalink**) 01.04.2005, 13:58

Safari-Hack von Toscho

....diesen hatte ich mal von Toscho gespeichert

Code:

Eine nebenwirkungsfreie Methode, Safari anzusprechen, existiert nicht. 
Er versteht jedoch – wie sonst nur Mozilla – die Pseudoklasse »:last-child«. 
So läßt sich eine Regel erst für Safari schreiben und danach für Mozilla wieder überschreiben: 

Code: 
body:last-child p { 
        color:  blue; 
} 
body:-moz-last-node p { 
        color:  black; 
} 


Seit Version 1.2.3 versteht Safari die Pseudoklasse »:lang()«, 
so lassen sich jüngere Versionen leicht ansprechen: 
Code: 
:lang(de) body:last-child p { 
        color:  blue; 
} 


Dieser Trick sollte in regelmäßigen Abständen überprüft werden, 
denn sobald ein anderer Browser ebenfalls »:last-child« interpretiert, 
funktioniert das nicht mehr.

fricca · #24 (**permalink**) 07.04.2005, 12:26

Zitat:

Zitat von ulle

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

So, jetzt nochmal mit Safari reingeschaut:

Variante 1 - body {display:table}
Container klebt links oben

Variante 2 - body {display:table-cell}
Container klebt Mitte oben

Im Camino funktionieren beide Varianten einwandfrei.

fricca · #25 (**permalink**) 01.08.2005, 16:12

Mal das Thema vertikale Zentrierung wieder aufwärmen.
Ich bin auf ein Verhalten gestoßen, dass vertikales Zentrieren möglich macht, wenn man ein Element mit float-Eigenschaft und negativem margin vor das zu zentrierende setzt:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Vertikal zentriert?</title>
<style type="text/css">

	* {
		margin:0;
		padding:0;
		}

	html, body {
		height:100%;
		}

	body {
		background-color:silver;
		text-align:center;
		}

	#abstand { 
		width:5px;
		height:50%;
		background-color:red;
		margin-bottom:-200px; /* halbe Höhe von #container */
		float:left;
		}

	#container {
		margin:0 auto;
		text-align:left;
		height:400px;
		width:700px;
		clear:left;
		background-color:yellow;
		}

</style>
</head>
<body>

	<div id="abstand"></div>
	<div id="container">Text Text Text Text</div>

</body>
</html>

Der #container bewegt sich so nicht über die obere Kante des #abstand hinaus; so ganz verstehe ich zwar gerade nicht, weshalb das so ist, aber vielleicht kann's jemand erklären...

edit:
---
Ich glaube, jetzt verstanden zu haben, warum es funktioniert:
#distance/#abstand bekommt 50% von der Höhe des Viewports und einen negativen margin-bottom in der halben Höhe von #container, damit sich #container in die vertikale Mitte des Viewports bewegt.
So würde #container nach oben verschwinden, sobald die halbe Höhe von #container größer als die halbe Höhe des Viewports wäre (wie bei der Methode mit position absolute)
float und clear hilft, weil für clear(:left) festgelegt ist:
| [...] to place the top border edge below the
| bottom outer edge of any left-floating boxes
Da es negative Höhen nicht gibt, sitzt der untere Rand von #distance/#abstand auch bei margin-bottom > height nie über der oberen Kante der Box und #container bewegt sich maximal bis dorthin.
---

Positiv getestet in:

Win:
Opera 6-8
Netscape 6+7
Firefox 1.04
IE 5.0 - 6

Mac OsX:
Safari 1.0.3
Netscape 7
Opera 6
Camino

Mac OS9:
Mozilla 1.2.1
Netscape 7

Funktioniert nicht in MacIE 5, da height:50% falsch berechnet wird (50% der Breite des Elternelements?)

edit: funktioniert auch in IE5 Mac (OS X und OS 9), wenn im Quirksmodus und kein html, body {height:100%} (merci zweistein)
Geeignete Doctype um nur IE Mac in den Quirks-Modus zu setzen: HTML 4.01 Strict ohne URL
Ins reguläre Stylesheet muss html, body {height:100%;} rein, nur für IE5 Mac dann wieder überschreiben [separates Stylesheet per @import("iemac.css");]
hier eine online-Version (bei Detlef Graff abgelegt - Merci

)

Bitte mal anschauen und testen.

Grüße
fricca

PS: ich find's nicht so toll, dass ein zusätzliches Element benötigt wird - aber das lässt sich z.B. als Container für Sprunglinks nutzen - und schon ist es kein überflüssiges Markup mehr...

ulle · #26 (**permalink**) 01.08.2005, 16:41

Zitat:

Zitat von fricca

Der #container bewegt sich so nicht über die obere Kante des #abstand hinaus; so ganz verstehe ich zwar gerade nicht, weshalb das so ist, aber vielleicht kann's jemand erklären...

Ist doch klar, ob Du jetzt die "Starthöhe" per Floating-Element auf 50% des Viewports setzt oder ganz ohne Float+Clear ist doch egal. Maßgeben ist der negative Margin des 1., also des oberen Elements. Und mit dem negativen Margin ziehst Du das folgende Element entsprechend nach oben. Wäre das Gleiche wie absolute Postionierung auf 50% und ein negatives margin-top, entsprechend halbe Höhe des zu zentrierenden Containers.

fricca · #27 (**permalink**) 01.08.2005, 16:45

Zitat:

Zitat von ulle

Ist doch klar, ob Du jetzt die "Starthöhe" per Floating-Element auf 50% des Viewports setzt oder ganz ohne Float+Clear ist doch egal. Maßgeben ist der negative Margin des 1., also des oberen Elements. Und mit dem negativen Margin ziehst Du das folgende Element entsprechend nach oben. Wäre das Gleiche wie absolute Postionierung auf 50% und ein negatives margin-top, entsprechend halbe Höche des Containers.

Eben gerade nicht. Bei absoluter Positionierung verschwindet der Container nach oben aus dem Viewport - in meinem Beispiel tut er das nicht, sondern er bleibt an der Oberkante von #abstand stehen. Auch dann, wenn #abstand eine geringere Höhe als 200px hat.
[Schmeiß float und clear raus und er verschwindet wieder...]
Oder ist das bei dir anders, wenn du den Code auprobierst?

ulle · #28 (**permalink**) 01.08.2005, 17:07

Zitat:

Zitat von fricca

[Schmeiß float und clear raus und er verschwindet wieder...]

Stimmt......

/ so hattest Du es ja auch beschrieben

Zitat:

Zitat von fricca

Der #container bewegt sich so nicht über die obere Kante des #abstand hinaus;

Prima Workout! Bleibt aber der Nachteil dass man wissen muß wie hoch der Container sein muß

XHTML 1.0 STRICT

IE6 und FF = Okay

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 => Markup-Semantic">
/*<![CDATA[*/


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

html,
body		{
			color:		#000000;
			background:	#EEEEEE;
			
			line-height: 1.45;
			
			height : 100%;
			}

body		{
			font-size:   100.01%;
			font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
			}
			
			
#viewport50	{
			/* [float] verhindert 
			 * negatives verrutschen des #container
			 * aus denm Viewport
			 */ 
			float:left;
			
			display: block;
			
			height:50%;
			width:5px; 
			
			/*halbe Hoehe von #container
			 */ 
			margin-bottom: -20em; 
			
			background-color:red; 
			} 

		
#container 	{
			clear:left;
			 
			/* halbe Hoehe negativer [margin-bottom] im #viewport50
			 */ 
			min-height: 40em;
			 
			/** fuer alle Browser; 
			 */    
			height: auto ! important; 
			/* nur fuer IE-Win (size-value); 
			 * verbergen IE-Mac \*/ 
			height: 40em; 
			/* ende verbergen IE-Mac */ 
			
			width: 80%; 
 
			margin: 0 auto; 

			background-color:yellow; 
			} 

/*]]>*/
</style>

</head><body>


   <div id="viewport50"></div> 
   <div id="container">Text Text Text Text</div> 


</body></html>

fricca · #29 (**permalink**) 01.08.2005, 17:30

Zitat:

Zitat von ulle

Bleibt aber der Nachteil das man wissen muß wie Hoch der Container sein muß

Ja, das stimmt leider.

Wobei sich mir immer noch die Frage stellt, weshalb es überhaupt funktioniert...

Gibt's da eine Regel bei float und clear, die ich gerade nicht finde

ulle · #30 (**permalink**) 01.08.2005, 17:33

</>

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 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