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

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.
__________________
bye Rene
Mit Zitat antworten
Sponsored Links
  #22 (permalink)  
Alt 01.04.2005, 12:53
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
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>
Mit Zitat antworten
Sponsored Links
  #23 (permalink)  
Alt 01.04.2005, 12:58
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 02.06.2003
Beiträge: 2.441
ulle befindet sich auf einem aufstrebenden Ast
Standard

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.
__________________
</ulle>
Mit Zitat antworten
  #24 (permalink)  
Alt 07.04.2005, 11:26
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.786
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
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.
Mit Zitat antworten
  #25 (permalink)  
Alt 01.08.2005, 15:12
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.786
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

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...
Mit Zitat antworten
  #26 (permalink)  
Alt 01.08.2005, 15:41
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
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.
__________________
</ulle>
Mit Zitat antworten
  #27 (permalink)  
Alt 01.08.2005, 15:45
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.786
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
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?
Mit Zitat antworten
  #28 (permalink)  
Alt 01.08.2005, 16:07
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
[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>
__________________
</ulle>
Mit Zitat antworten
  #29 (permalink)  
Alt 01.08.2005, 16:30
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.786
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
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
Mit Zitat antworten
Sponsored Links
  #30 (permalink)  
Alt 01.08.2005, 16:33
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 02.06.2003
Beiträge: 2.441
ulle befindet sich auf einem aufstrebenden Ast
Standard

</>
__________________
</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
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
div middle / center DieLiLLy CSS 2 28.03.2006 11:58


Alle Zeitangaben in WEZ +2. Es ist jetzt 14:59 Uhr.