inhalt zentrieren

daniel · #1 02.09.04, 23:33

wer hat noch nicht vor dem problem gestanden eine seite mit css browserunabhängig zu zentrieren?
so gehts:

Code:

body{ text-align: center;}

.centeredDiv{ margin: 0px auto;
              text-align: left;
              width: 400px;}

Zitat:

Der IE erwartet das zentrierte Ausrichten im Elternelement, also im Body-Tag. Bei
den anderen Browsern erfolgt das Zentrieren über margin: 0px auto. Die Null
gibt an, dass oben und unten kein Platz gelassen wird, das "auto" sorgt dafür, dass
der Abstand zum Rand auf der linken und der rechten Seite gleich gross ist.
Das text-align: left sorgt dafür, dass der Text linksbündig ausgerichtet ist. Ist
wegen der Ausrichtungsangabe für den IE im Body notwendig, da sonst der Inhalt
zentriert ausgegeben werden würde.

gefunden auf tutorials.de

c4c · #2 04.09.04, 14:57

Zitat:

Zitat von daniel

wer hat noch nicht vor dem problem gestanden eine seite mit css browserunabhängig zu zentrieren?

Hellau!

Das stimmt. Und nun noch die Preisfrage, wie zentriert man z.B. ein DIV horizontal sowie auch vertikal, ohne dabei auf CSS Hacks zu gehen, im Table height=100% und / oder align=center zu benutzen. Versuche mich schon seit einer gerauemen Zeit, rein interessehalber, daran eine FrameBasierte Website (mit komplett zentriertem Content) auf eine reine "CSS" Site (Tabellen nicht als DesignElement zu benutzen) umzubauen. Erwies sich bisher als recht anspruchsvoll, für mich, da das ganze nicht mit dem DocType HTML TRANSITIONAL umgesetzt werden sollte, sondern eher XHTML STRICT ..

Any Hints?

beste Grüße
stEvo

:roll:

**lutz** · #3 04.09.04, 15:02

http://www.wpdfd.com/editorial/wpd0103.htm#toptip

c4c · #4 04.09.04, 15:27

Zitat:

Zitat von lutz

http://www.wpdfd.com/editorial/wpd0103.htm#toptip

Erstmal danke für die schnelle und sehr informative Info! Gleich gebookmarked!

Aber, leider gibts da noch n Haken

Zitat:

Zitat von http://www.wpdfd.com

Note: Jan 1, 2004. Opera no longer requires this workaround. If you are having problems with this technique, check your DOCTYPE. HTML 4.01 Transitional usually works fine but using Strict or XHTML can cause problems, especially with IE.

:sad:

c4c · #5 06.09.04, 13:14

Hallo noch a mol!

Also, habe mir das ganze nochmal angeschaut was lutz mir da gelinkt hat.

Fand die Idee echt super mit den negativen margins, habe ich zwar schon öfters mal gehört, aber bevor ich die noch wirklich eingesetzt hatte, wurden die von mir eher ignoriert.

Der Autor der Site mein zwar das es Probleme mit unser aller liebster Freund InternetExplorer geben könnte unter Benutzung mit XHTML STRICT, mit meinem IE 6 funktioniert es bisher allerdings ohne Probleme. Mit folgendem CSS habe ich ein 770 px breites auf 550 px hohes DIV konsequent horizontal und vertikal zentriert auf meinem Bildschirm.

Eventuell könnte mir ja der maxhb *zwinker* noch n tip geben, was denn der gute Autor mit der Aussage gemeint haben könnte, das folgender Code Probleme machen könnte bezüglich STRICT ;)

Code:

.zentriertDiv{
	text-align: left;
	position: absolute;
	top: 50%;
	left: 50%;
	width: 770px;
	height: 550px;
	margin-top: -275px;
	margin-left: -385px;
	visibility: visible
	background-color:#E8E8E8;
}

im HTML file steht lediglich noch

Code:

&lt;?xml version="1.0" encoding="iso-8859-1"?>
&lt;!-- &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"> -->
&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 STRICT//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
&lt;html xmlns="http://www.w3.org/1999/xhtml">

&lt;head>
	&lt;title>zentriertes div&lt;/title>
&lt;/head>

&lt;body>

&lt;div class="zentriertDiv">
	
ZENTRIERT

&lt;/div>

&lt;/body>
&lt;/html>

.. für alle die's interessiert ;)

beste Grüße
stEvo

**lutz** · #6 06.09.04, 13:19

ich hab das mal gaaaanz stolz bei einem kunden durchgeführt und schwupps lag ich auf der nase...

konkret:
kunde hat hauptsächlich mac-besucher und bei denjenigen mit macppc IE5 is die seite so hochgerutscht, daß nur die untere hälfte im browserfenster zu sehen war.
und jetzt versuch mal ans headermenü zu kommen, wo du doch bei negativen margins gar nich mehr scrollen kannst... 8)
aber selbst wenn...

c4c · #7 06.09.04, 13:29

Zitat:

Zitat von lutz

ich hab das mal gaaaanz stolz bei einem kunden durchgeführt und schwupps lag ich auf der nase...

grundsätzlich eine gefährliche idee ;)

Zitat:

Zitat von lutz

konkret:
kunde hat hauptsächlich mac-besucher und bei denjenigen mit macppc IE5 is die seite so hochgerutscht, daß nur die untere hälfte im browserfenster zu sehen war.

mist, ich vergesse immer die randgruppen *oops* ;)

naja, um ganz ehrlich zu sein, bei dieser HP interessiert es mich nicht ob MAC IE oder Konquerer darauf zugreifen .. aber in Zukunft geht die Suche dann wohl weiter ;)

EDIT:

Im Konquerer gehts auch ;)

Beste Grüsse
stEvo

**maxhb** · #8 06.09.04, 13:56

Hi!

Zitat:

Zitat von c4c

Eventuell könnte mir ja der maxhb *zwinker* noch n tip geben, was denn der gute Autor mit der Aussage gemeint haben könnte, das folgender Code Probleme machen könnte bezüglich STRICT ;)

Hab's mir mal angeschaut, aber irgendwie habe ich keine Ahnung, worauf der Autor da abhebt - sieht doch alles O.K. aus...

CU
maxhb

c4c · #9 20.09.04, 12:39

Zitat:

Zitat von maxhb

Hab's mir mal angeschaut, aber irgendwie habe ich keine Ahnung, worauf der Autor da abhebt - sieht doch alles O.K. aus...
maxhb

Ich glaub ich weiss was der gute mann damit meint, ob es jetzt aber generell mit dem Zentrieren zu tun hat, habe ich noch nicht getestet

Code:

&lt;style type="text/css" media="screen">&lt;!--

body 
	{
	color: white;
	background-color: #003;
	margin: 0px
	}

#horizon        
	{
	color: white;
	background-color: transparent;
	text-align: center;
	position: absolute;
	top: 50%;
	left: 0px;
	width: 100%;
	height: 1px;
	overflow: visible;
	visibility: visible;
	display: block;
	background-color:cyan;
	}

&lt;/style>

&lt;body>
		&lt;div id="horizon">
			
                      &lt;!-- test -->

		&lt;/div>
	&lt;/body>

Man sehe sich das Ergebnis an, wenn man den Bereich in der div-"Horizon" Section rauslöscht. Die Linie die ursprünglich 1px hoch sein soll, ist nun 19px - wie gesagt es reicht wenn etwas auskommentiert dazwischensteht.

!!!

freaky oder?

**Junior** · #10 20.09.04, 22:06

Zitat:

Zitat von daniel

wer hat noch nicht vor dem problem gestanden eine seite mit css browserunabhängig zu zentrieren?
so gehts:

Code:

body{ text-align: center;}

.centeredDiv{ margin: 0px auto;
              text-align: left;
              width: 400px;}

Zitat:

Der IE erwartet das zentrierte Ausrichten im Elternelement, also im Body-Tag. Bei
den anderen Browsern erfolgt das Zentrieren über margin: 0px auto. Die Null
gibt an, dass oben und unten kein Platz gelassen wird, das "auto" sorgt dafür, dass
der Abstand zum Rand auf der linken und der rechten Seite gleich gross ist.
Das text-align: left sorgt dafür, dass der Text linksbündig ausgerichtet ist. Ist
wegen der Ausrichtungsangabe für den IE im Body notwendig, da sonst der Inhalt
zentriert ausgegeben werden würde.

gefunden auf tutorials.de

In die FAQs gelegt

Junior

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht	Thema bewerten
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln	Thema bewerten:

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
SmoothGallerie zentrieren	huskarlar	TYPO3 4.x Fragen und Probleme	0	20.05.08 20:42
Seite zentrieren	swunder	HTML & CSS	3	05.12.07 19:14
Popup Fenster zentrieren?	lorrey	TYPO3 4.x Fragen und Probleme	1	28.09.07 10:37
Tabelle zentrieren	typo3newbie	TYPO3 4.x Fragen und Probleme	4	10.09.07 13:55
Seiten zentrieren ??	kornwolf	TYPO3 3.x Fragen und Probleme	1	02.02.06 19:06

Suche

Userpanel

inhalt zentrieren

Re: inhalt zentrieren

Danke, aber nicht ganz..

Bei mir funktioniert es so!

ach menno!

Re: Bei mir funktioniert es so!

Re: Bei mir funktioniert es so!

Re: inhalt zentrieren