HTML: zentriert ohne tables

[EnimaN]

HTML: vertikal zentriert ohne tables

mein problem ist ganz simpel: ich möchte ein object, fester größe, (in dem fall ein flashmovie) zentriert anzeigen. bisher habe ich einfach ne tabelle mit height: 100% gemacht und dann vertical-align: middle...

nun versuche ich aber nach und nach tabellen im layout wegzulassen, nur habe ich bis jetzt keine lösung gefunden

edit: nach weiterem suchen habe ich nun ein work-around entdeckt, der mich allerdings nicht zufrieden stellt: man setzt top: 50% und dann margin-top auf das negative der halben höhe...

negative marginwerte sind zwar afaik nicht w3c konform, aber eine andere lösung habe ich nicht entdeckt

 

[Steep]

was hassu gegen tables?

 

[drogenkotzbart]

http://www.thenoodleincident.com/tutorials/box_lesson/basic_centered.html
http://bluerobot.com/web/css/center1.html
http://glish.com/css/3.asp

Hilft dir das weiter?

 

[EnimaN]

die ersten beiden links habe ich auch schon gefunden -_-

ich will vertikal! zentrieren und dabei weder auf tabels zurückgreifen noch css3 nutzen, da ältere browser das nicht darstellen

auf tabels möchte ich fürs layout prinzipiell verzichten... gründe wurden hier im forum schon genügen genannt...

 

[drogenkotzbart]

http://css.fractatulum.net/sample/layout4format.htm
http://mrclay.org/web_design/centered_image/

Und ja, du hast recht, ich rate nur...

 

[EnimaN]

der erste link ist gut

naja aber alles nur work-arounds, die zudem nicht auf allen browsern richtig funktionieren, da werde ich wohl doch auf meine guten alten tabellen zurückgreifen...

 

[RRA^StArFiRe]

benutz doch frames o_O

 

[Sacknase]

Original geschrieben von Starfire
benutz doch frames o_O

:kotzen:


tables werden doch von jedem Browser Unterstüzt... ich glaub das is schon seit urzeiten im HTML mit eingearbeitet und zu einem Standart erklärt worden: selbst IE 3.0 unterstüzt sogar tables

 

[BiBaButzemann]

Hier mal ne Mischung aus was Copy-Pasten + selbstgemacht, damit es pixelgenau wird.

Ist n Standardlayout: Banner, links Menu, Kontent, rechts noch was (hier etwas schmal, Maße musst dir halt anpassen) unten n Footer.

CSS bekommt ne min-height für Mozilla (für IE only gehts auch ohne), falls der Text im Kontent kürzer als linke Menülänge ist. (Man kann es zwar durch weitere margin: -1px auch machen, dann ist es aber nicht mehr pixelgenau)

Mag jetzt vielleicht die Top-Lösung sein , ob so mega valid weiss ich auch nicht (nicht getestet), aber es ist eine, die funzt.



HTML:

<div id="container">


	<div id="header">Header</div>


	<div class="outer">
		<div id="float-wrap">
				
			<div id="left">Linkes Menu</div>
  		
  		
  		<div class="center">
  		<div id="main-content">Hauptkontent</div>
			</div>
			
		</div>

		<div id="right">
			<div id="container-right">Rechtes Menu</div>
		</div> 

	</div>

	<div id="footer">Footer</div> 

</div>

</body>

CSS:

html, body
{
	margin: 0;
	padding: 0;
	border: 0;
}

body { 
	background: #1E1E1E; 
	text-align: center;
	margin: 10px;
}




#header
{
	width: 100%;
	height: 110px;
}


#container
{
	margin: 0 auto;
	width: 780px;
	text-align: left;
	background: #464646;
}


* html #container
{  
	width: 780px;
}

.outer {
	position: relative;
	margin-left: 139px;
	width: 631px;
}

* html .outer
{
	width: 631px;
}

#float-wrap 
{
	float: left;
	width: 631px;
}

.center
{
	float: right;
	width: 631px;
	margin-left: -1px;
	background: #333333;
	min-height: 620px;
}

#main-content
{
	margin: 10px;
}

#left
{
	float:left;
	position: relative;
	width: 139px; 
	margin-left: -139px;
}

#right
{
	float: left; 
	position: relative;
	width: 10px;
	margin-right: -11px;
}


#container-right 
{ 
	width: 10px;
	margin: 0px;
}

#footer
{
	background: #FFFFFF;
	position: relative;
	width: 100%; 
	height: 30px;
	clear: both;
}

.clear
{
	clear: both;
}

Ach ja, Haupt-background sitzt in #container.

P.S. Angewendet sieht man es in http://www.mog-server.de/socom/site/index.php

CSS: http://www.mog-server.de/socom/public/css/default.css

(Kontent ist da oft nicht von mir und jo, es ist oft nicht wirklich xtml (doctype))

 

[EnimaN]

ich habe mal den titel geändert, da hier viele denken, dass ich das ganze horizontal zentrieren will, mein ziel ist es aber das ganze vertikal zu machen -.- naja es scheint einfach keine zufriedenstellende lösung zu geben...

 

[Sacknase]

Original geschrieben von EnimaN
ich habe mal den titel geändert, da hier viele denken, dass ich das ganze horizontal zentrieren will, mein ziel ist es aber das ganze vertikal zu machen -.- naja es scheint einfach keine zufriedenstellende lösung zu geben...

das is mir schon klar... aber wieso willst du das ohne tables machen?

U.a. ist das der sinn der Tables...


http://de.selfhtml.org/index.htm

vielleicht findest hier was?

 

[EnimaN]

nein das ist eben nicht der sinn von tabels...
und selfhtml ist mir schon ein begriff O_o

 

[Zwaps]

Meines Wissens sind negativ margins sehr wohl w3c konform, und wenn du keine "Workarounds" benutzen willst, dann kommen Tables doch gar nicht in Frage, oder?

Ein Tipp: Keine Angst vor CSS Workarounds wie negative margins usw.
Das Selbe machen wir mit Spacern, blind tables etc, es fällt nur niemanden mehr auf.

Go 4 CSS
Auch wenn es dir (jetzt noch) weh tut.

 

[EnimaN]

ich habe keine angst vor work-arounds, das problem ist nur, dass sich die implementierung solcher sachen schnell mal ändern kann und dann die webseite in einem jahr auf den neusten browsern scheisse aussehen kann mich wundert, dass sowas bei der einführung von css nicht mit bedacht wurde...

 

[Sas~iN~LoVe]

Ist schon richtig, vertikales Zentrieren ist mit CSS einfach die Pest, da es nicht so geht, wie mans eigentlich erwarten würde...

 

[Zwaps]

Naja die aktuelle CSS Definition ist auch schon alt.
Wie gesagt, ich freu mich auf CSS3 von ganzem Herzen.

Aber dann sollte man auch CSS Profi sein, um direkt richtig einsteigen zu können und die neuen Möglichkeiten, die sich dort für völlig neue Design auftun, sofort nutzen zu können.

 

[Sas~iN~LoVe]

Klar ist CSS 2 schon alt, wird aber dennoch nicht zufriedenstellend unterstützt. Und jetzt überleg dir mal wie das mit Version 3 wird.

 

[Supervisor3]

also ich hab vor paar tagen ne box mit css zentriert und hab dabei auch den "trick" mit dem negativen margin-wert verwendet. der css-validator entdeckt keinen fehler.

und wo wir schon dabei sind hab ich auch ne kleine frage:

ich hab in einem div-element auch noch ne 3 spaltige tabelle eingeführt. das problem liegt darin, das, wenn viel text in der mittleren zeile steht, der texteingabestartpunkt in der rechten spalte immer weiter nach unten gezogen wird. Dh er ist nicht auf der gleichen Höhe wie die texteingabe in der mittleren spalte (nämlich ganz oben). ich hab schon alles mögliche probiert, aber ich kriegs nicht hin, dass er oben bleibt.
Versteht jemand was ich meine und kann helfen?

 

[EnimaN]

setze für die td elemente der tabelle vertical-alignment auf top

das sollte das problem lösen, falls ich es richtig verstanden habe...

 

[Supervisor3]

jetzt gehts
ich hatte in der tabellen-spalte für den text noch ein div-element erstellt und hab immer in dem anstatt für die gesamte spalte änderungen vorgenommen
das war ja klar das das nicht funkt lol