Waagerecht + senkrecht mittig

**PHP-Desaster** · 26.05.2008, 08:19

Per CSS geht doch recht gut. Ein Beispiel hast du doch gefunden

JS ist recht kritisch, wenn du JS nicht voraussetzen willst und fängt während des Skalierens schnell an zu hüpfen.
Tabellen sind - wie du schon sagtest - für solche Zwecke TABU!

**mcmurphy** · 26.05.2008, 10:52

CSS hat nur den Nachteil das, wenn der Content kleiner ist als der Viewport, der Content aus dem sichtbaren bereich "fällt".

Wenn einer dafür ne CSS - Lösung kennt - her damit, suche ich schon ewig & 3 tage

**Kropff** · 26.05.2008, 11:07

CSS hat nur den Nachteil das, wenn der Content kleiner ist als der Viewport, der Content aus dem sichtbaren bereich "fällt".

du meinst größer, oder? -> overflow?

grzß
peter

**mcmurphy** · 26.05.2008, 16:52

ja sorry - meinte natürlich wenn der viewport kleiner wird als der content ist....

**Cheadle** · 26.05.2008, 18:35

Wenn einer dafür ne CSS - Lösung kennt - her damit, suche ich schon ewig & 3 tage

So geht das:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Layout 1</title>
<style type="text/css">
<!--
* {
	margin: 0;
	padding: 0;
}
html, body {
	height: 100%;
}
body {
	text-align: center;
}
#distance { 
	float: left;
	width: 1px; /* IE fix */
	height: 50%;
	margin-bottom: -250px;
}
#frame {
	clear: left;
	position: relative;
	width: 980px;
	height: 500px;
	margin: 0 auto;
	text-align: left;
	background: #ccc;
}
-->
</style>
</head>

<body>
<div id="distance"></div>
<div id="frame">Content goes here</div>
</body>
</html>

**pekka** · 26.05.2008, 19:15

@Cheadle: Schön!

Aber trotzdem: Leute, sehts ein - es gibt eben Szenarien, die gehen vernünftig nur mit Tables. Vor allem bei vertikal dynamischen Dingen. Ist einfach so.

**tontechniker** · 26.05.2008, 19:45

Aber trotzdem: Leute, sehts ein - es gibt eben Szenarien, die gehen vernünftig nur mit Tables. Vor allem bei vertikal dynamischen Dingen. Ist einfach so.

Quatsch, geht doch mit CSS super. Bisher noch nichts gesehen wo ich lieber Tabellen benutzt hätte, abgesehen von den Bereichen wo sie wirklich hingehören (Inhalt). Meistens ist CSS sogar noch flexibler, wenn man zum Beispiel Elemente nebeneinander setzt und die dann automatisch in die nächste Zeilen rutschen wenn das Fenster zu klein ist.

**Hopka** · 26.05.2008, 20:11

Man kann auch Tabellen nutzen ohne Tabellen zu nutzen.

Code:

display: table-cell
und Co.

Damit kann man auch Dinge vertikal positionieren und andere Effekte nutzen, die sonst nur mit Tabellen möglich sind.

Ob das sauber ist oder nicht, darüber kann man natürlich streiten.

**mcmurphy** · 27.05.2008, 11:46

Cheadle,
wo haste denn das her? Da sucht man sich denn Ast und dann eine einfache, funktionierende Sache....

Wenn mal nach Berlin kommst lade ich dich auf ein Bier ein....
THX

**Cheadle** · 27.05.2008, 14:29

das hab ich mal bei webmasterworld aufgeschnappt, wenn ich mich nicht irre...

Wenn mal nach Berlin kommst lade ich dich auf ein Bier ein....

Ich erinnere dich daran

**minou** · 28.05.2008, 12:13

Hallo zusammen,

ich habe vor einiger Zeit ein Formular mit OOP und CSS geschrieben, das immer mittig steht in beiden Achsen.

Dies ist der Code, der das Formular an sich zentrieren lässt. Alle Inhalte
lassen sich so zentrieren

EDIT:

body {
background-color: #99ccff;
font-family: arial, verdana, tahoma, helvetica, sans-serif;
}

div.erster {
margin: auto;
text-align: center;
height: 100.00%;
}

fieldset (oder ein div, fieldset ist für ein Formular) {
position: absolute;
left: 50%;
margin-left: -360px;
top: 50%;
margin-top: -245px;
text-align: left;
font-family: arial, verdana, tahoma, helvetica, sans-serif;
font-size: 16px;
background-color: #33c0f9;
padding: 10px;
width: 700px;
height: 465px;
}

Wenn jemand das ganze Formular möchte (PHP Klassendatei) und die vollständige CSS-Datei (txt für die Speicherung), kann es gerne gratis bei mir bekommen (info1@my-webshop.ch).
Als zusätzlicher "Anreiz" habe ich auch eine DOM-manipulation drin, die bei jedem focus auf ein Feld einen Hilfstext ausgibt, der frei definierbar ist.

Gruss

Angehängte Dateien

zentriert1.jpg (60,6 KB, 504x aufgerufen)

**jmc** · 28.05.2008, 13:32

Der obige Code hat mich gerade an ein Problem meinerseits mit dem IE erinnert:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Layout 1</title>
<style type="text/css">
<!--
* {
	margin: 0;
	padding: 0;
}
html, body {
	height: 100%;
}
body {
	text-align: center;
        [COLOR=red]overflow: auto;[/COLOR] 
}
#distance { 
	float: left;
	width: 1px; /* IE fix */
	height: 50%;
	margin-bottom: -250px;
}
#frame {
	clear: left;
	position: relative;
	width: 980px;
	height: 500px;
	margin: 0 auto;
	text-align: left;
	background: #ccc;
}
-->
</style>
</head>

<body>
<div id="distance"></div>
<div id="frame">Content goes here</div>
</body>
</html>

Um den rechten Balken verschwinden zu lassen habe ich overflow auto für den IE benutzt. Dadurch entstehen jedoch beim Verkleinern des Fensters unten zwei Scrollbalken. Woran könnte das liegen?

PS: Ich habe den Code jetzt vollkommen von dir übernommen. Warum verwendest du clear: left; und float: left? Das ist doch hier unnötig, nicht?

Waagerecht + senkrecht mittig