[css] div zentrieren und xhtml 1.0 strict

ZeroFlash · 12. April 2006

moin

will nen container mit ner festen größe horizontal wie vertikal mittig zentrieren.
hatte ja auch mal eine methode die funktioniert hat doch sobald ich ein doctype reinmache zerschiest es mir das layout und alles wandert an den oberen bildrand... ja code wäre nicht schlecht...

so der html code:

HTML:

<!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="en" lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
	<title>titel</title>
	<link rel="stylesheet" type="text/css" href="styles.css"/>
</head>
<body>
	<div class="distance"></div>
	<div class="content">
		content
	</div>
</body>
</html>

und noch der css code:

HTML:

body {
	text-align:center;
	margin:0px;
	padding:0px;
	}
.distance {
	width:100%;
	height:50%;
	margin-bottom:210px;
	float:left;
	}
.content {
	margin:0 auto;
	position:relative;
	text-align:left;
	width:704px;
	height:410px;
	clear:left;
	border:1px dashed black;
	}

ja wie gesagt ohne doctype alles wunderbar nur man will es ja ordentlich machen und hat den drang es zu validieren und dann das.

hat jemand ne idee? oder eventuell eine andere lösung, damit es validiert werden kann und trotzdem noch ne feste größe hat?

mh1001 · 12. April 2006

Hallo,

wenn dein Container ohnehin eine feste größe hat reicht ein einfaches "position: relative;" bzw. "position: absolute;" in Verbindung mit "left: 50%; top: 50%;" und einen "margin-left" / "margin-top", dessen Wert die negative halbe Containerbreite / -höhe beträgt.

MfG mh1001

ZeroFlash · 12. April 2006

nicht wirklich. das macht dann zwar was es soll aber nimm mal das browserfenster und schieb es von unten her zusammen dann schiebt sich alles aus dem fenster raus. und wenn dann ein user eine kleine auflösung hat fehlt die hälfte....

mh1001 · 12. April 2006

Das Problem lässt sich ganz einfach umgehen, indem du dem Elternelement eine minmale Breite und Höhe zuweist.
Dies lässt sich sich mit den CSS-Attributen "min-width" und "min-height" realisieren.

MfG mh1001

ZeroFlash · 12. April 2006

nun ja wenn es so einfach wäre würde es nicht so viele threads im netzt geben die sich damit beschäftigen...

das mit mininmaler breite und höhe ist browser abhängig und der am meißten vervreitete macht es schon mal gleich gar nicht. somit fällt die lösung schon mal raus.

mh1001 · 12. April 2006

Das es mit der Unterstützung der Attribute "min-width" und "min-height" natürlich mal wieder im Bezug auf den Internet-Explorer nicht so gut aussieht stimmt allerdings.
Aber auch dies könnte man mit JavaScript und einer kleinen if-Bedingung bzw. per expression() leicht auch für den Internet-Explorer verständlich machen.

Eine andere, reine CSS-Variante fällt mir eigentlich nicht ein und ich vermute auch sehr stark, dass es ansonsten keine Möglichkeiten gibt, eine solche Platzierung in validem XHTML und reinem CSS zu realisieren.

MfG mh1001

ZeroFlash · 12. April 2006

nun ja eine variante mit javascript fällt schon mal raus... weil es ja userseitig ist und wenn aus dann wird es nicht richtig dargestellt. will mit der lösung ja alle erreichen. guck dir doch mal den code von mir oben an.der geht an und für sich. nur hab ich ihn noch nicht für xhtml 1.0 strict zum laufen bekommen.

aber allein weil es ohne ein doctype geht liegt die vermutung nahe, dass es auch mit irgendwie gehen muss und auch gehen wird

mh1001 · 12. April 2006

Ich bleibe dennoch bei der Vermutung, dass dies so direkt nicht möglich ist.

Zumindest ist mir auch noch nie eine Seite untergekommen, wo dies in irgendeiner Weise so realisiert war.

Allerdings halte ich die JavaScript-Variante für doch recht zuverlässig. Wenn man davon ausgeht, dass vielleicht 65% der Besucher den Internetexplorer nutzen, 10% der Nutzer eine Auflösung benutzen, die in obigem Beispiel zu Problemen führen könnte und dann vielleicht noch 2% davon mit deaktiviertem JavaScript durch das Web surfen, dann wäre der Anteil der betroffenen Benutzer mit 0,13% doch recht gering.

Auf alles kann man schließlich auch keine Rücksicht nehmen, nur weil so manches Softwareunternehmen meint, sich bei der Browser-Entwicklung an keinerlei Standards halten zu müssen.

MfG mh1001

ZeroFlash · 12. April 2006

tut mir leid ich muss dich eines besseren belehren

HTML:

<!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="en" lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
	<title>title</title>
	<style type="text/css">
	body {
	height:100%;
	margin:0px;
	padding:0px;
	}
.distance {
	width:99%;
	height:50%;
	margin-bottom:-205px;
	float:left;
	border:1px dashed red;
	}
.content {
	margin:auto;
	position:relative;
	text-align:left;
	width:704px;
	height:410px;
	clear:left;
	border:1px dashed black;
	}
</style>
</head>
<body>
	<div class="distance"></div>
	<div class="content"><p>geil?</p></div>	
</body>
</html>

so css is valide und xhtml1.0 strict auch und es schaut ziemlich zentriert aus... allerdings nur im ie. bin leider net @ home und hab hier erst jetzt firefox gefunden ach fuck

mh1001 · 12. April 2006

Ich mag dich zwar ungern enttäuschen, aber so ganz ist das auch noch nicht das Wahre.

Die aktuelle Beta-Version des Internet-Explorers 7 stellt das ganze zwar korrekt dar, der aktuelle Firefox verweigert aber eine solche Darstellung.
Dort hängt der Container wieder am oberen Viewport-Rand: *klick*
Auch Opera scheint an dem Code keinen gefallen zu finden.

MfG mh1001

ZeroFlash · 12. April 2006

ja ich weiß... leider

aber nimm mal das doctype etc raus und dann gehts

hängt das an den negativen margins?

V1tzl1 · 13. April 2006

Hi ich kann dein Problem zur Zeit nicht verstehen, du hasst 2 unterschiedliche valide CSS (Der erste mit mh1001 Änderungen).
Der eine funzt im Opera und FF und der andere im IE. Also nutz man den Opera / FF Style und überschreibt mit Conditional Comments den Style IE gerecht. So ist alles valide und es klappt für alle...

mh1001 schrieb:
[...]Wenn man davon ausgeht, dass vielleicht 65% der Besucher den Internetexplorer nutzen, 10% der Nutzer eine Auflösung benutzen, die in obigem Beispiel zu Problemen führen könnte und dann vielleicht noch 2% davon mit deaktiviertem JavaScript durch das Web surfen[...]

Warum sollte ein Internet Explorer User JavaScript deaktivieren. Der einzige Grund das zu deaktivieren ist Sicherheit und wer darauf abfährt nutzt doch nicht den IE

ZeroFlash · 13. April 2006

naja wie gesagt der 1. code ist zwar valide aber er zeigt es in keinem browser so an wie er soll... e klebt immer am oberen bildrand

Phux · 13. April 2006

Warum machst Du es nicht einfach so:
(Bsp.)

Code:

<html>
<head>
<style type="text/css">
<!--
 
BODY {
 margin: 0px 0px 0px 0px;
}
 
#zentriert {
 position: absolute;
 width: 400px;
 height: 300px;
 left: 50%;
 top: 50%;
 margin-left: -200px;
 margin-top: -150px;
}
 
-->
</style>
<title>Elemente genau in der Mitte der Webseite zentrieren</title>
</head>
<body>
 
<div id="zentriert">
iocus curo Agnellus divinus. Ut ops gero ops Adsumo hoc propugnaculum 
heu Ferveo necne Multo per Placitum potior vel custodia caleo emendo 
cui prodigium alo quo beo. Amens lugo res hoc rus te Felix. Do magnificentia 
fundo ait duo cui consul claritas Quorum ira ago ruo Moestitia, subnego 
en proletarius os nos, vivo his ferox Seputus lex Triduum tam in quinquagesimus 
nec usquequaque vomer requietu.<br>
iocus curo Agnellus divinus. Ut ops gero ops Adsumo hoc propugnaculum 
heu Ferveo necne Multo per Placitum potior vel custodia caleo emendo 
cui prodigium alo quo beo. Amens lugo res hoc rus te Felix. Do magnificentia 
fundo ait duo cui consul claritas Quorum ira ago ruo Moestitia, subnego 
en proletarius os nos, vivo his ferox Seputus lex Triduum tam in quinquagesimus 
nec usquequaque vomer requietu.
</div>
 
</body>
</html>

ZeroFlash · 13. April 2006

das problem mit den negativen margins liegt darin, was ist wenn die bildschirmauflösung kleiner als die festgelegte fenstergröße im css ist? dann schiebt sich alles über den oberen linken rand hinaus und der content verschwindet.

so ich hab mal wieder was valides und geht soweit im ie und firefox... safari hab ich leider nur @ home zum testen muss ich nacher mal schaun.

xhtml:

HTML:

<!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="en" lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
<title>title</title>
<link rel="stylesheet" type="text/css" href="styles.css"/>
</head>
<body>
	<div id="distance"></div>
	<div id="container">
	</div>
</body>
</html>

css:

HTML:

* {
	margin:0;
	padding:0;
}
html, body {
	height:100%;
}
body {
	background-color:#fc6;
	color:#630;
	font:100.01%/1.4 sans-serif;
	text-align:center;
}
#distance { 
	width:1px;
	height:50%;
	margin-bottom:-13.75em;
	float:left;
}
#container {
	margin:0 auto;
	position:relative;
	text-align:left;
	height:27.5em;
	width:45em;
	clear:left;
	border:1px solid #000000;
}

mh1001 · 13. April 2006

Das schaut zwar so weit ganz gut aus, der Bedingung mit der festen Höhe/Breite kommt dies aber nicht ganz nach.

Sollte ein Besucher die Seite mit einer kleineren bzw. größeren Schriftgröße besuchen, so ändert sich auch gleich die Containergröße mit.

MfG mh1001

Phux · 13. April 2006

Wie gross ist schon die Chance, dass ein User sein Fenster kleiner als 700x400 hat und dabei keine Komforteinbusse in Kauf nimmt

Man kann sich auch selber Probleme schaffen...

ZeroFlash · 13. April 2006

eben ... allen kann man es nun mal nicht recht machen. man kann nur versuchen die breite masse zu erreichen. irgendwo muss man auch mal abstriche machen.

ich für meinen teil bin zu frieden. es geht ist srict xhtml und css is auch gültig was will ich mehr? ok aussehen tut es auch noch wie ich will.. ergo problem gesolved.

Suche

ZeroFlash

Lt. Junior Grade

mh1001

Lt. Commander

ZeroFlash

Lt. Junior Grade

mh1001

Lt. Commander

ZeroFlash

Lt. Junior Grade

mh1001

Lt. Commander

ZeroFlash

Lt. Junior Grade

mh1001

Lt. Commander

ZeroFlash

Lt. Junior Grade

mh1001

Lt. Commander

ZeroFlash

Lt. Junior Grade

V1tzl1

Lt. Junior Grade

ZeroFlash

Lt. Junior Grade

Phux

Cadet 4th Year

ZeroFlash

Lt. Junior Grade

mh1001

Lt. Commander

Phux

Cadet 4th Year

ZeroFlash

Lt. Junior Grade

Ähnliche Themen