ich habe da mit CSS einen content mit einer grösse von 800x430px mittig platziert, das geht auch problemlos. nun möchte ich aber das es auh wirklich in der mitte platziert wird das ganze, also auch von oben, so das das ganze immer schön in der mitte ist. habe da auch was gemacht aber, die scrollbalken werden angezeigt, sobald man das browser fenster verkleinert. hat jemand einen sinnvollen CSS code, welcher eben das erzielt das die site schön in der mitte platziert wird?

danke für jede hilfe.......

hier ist ein beispiel http://intensivstation.ch/files/templates/temp11.html und hier findest du weitere beispiele http://intensivstation.ch/css/

/benno

Ich bau das immer in einen table mit 100% Höhe ein, dort dann mittig setzen.

Liebling: ja das habe ich auch schon gemacht, ist aber ein bisschen unschön, ist ja alles in CSS realisierbar, daher würde ich das gerne mal machen und zugleich CSS besser anwenden können ! möchte in zukunft nur mit CSS arbeiten.

benno: danke für die links, ich schau gleich

hmm.... ist noch nicht ganz das was ich suche! es sollte in etwa so aussehen, wie dieses beispiel, meiner jetzigen site, die aber noch mit tabellen aufgebaut ist! ! ich suche eigentlich den gleichen effekt, wie wenn man eine100% tabelle erstellen würde und nachher den inhalt darin platzieren kann. dann wird ja alles immer schön in der mitte angezeigt. das möchte ich jetzt mit CSS machen.

Kuck mal hier: http://www.quirksmode.org/css/centering.html

ja so was hab ich gesucht, herzlichen dank

Für mich klappte das letztens so:

#wrapper {
position:absolute;
top: 50%;
left: 50%;
height: 600px;
width: 800px;
margin: -300px 0 0 -400px;
}

URL: www.repro-trier.de

Der Trick ist: Absolute Position, jeweils mit 50%. Dann ist dein Container aber noch nicht mittig, sondern wird mit seiner linken oberen Ecke genau in der Mitte sein. Die richtige Ausrichtung genau in die Mitte machst du dann mit den negativen Margins. Solltest du dem Container "wrapper" eine border zuweisen wollen, musst du das negative Margin jeweils um 2px verringern.

Serge Paulus: Glaub meins ist einfacher

davek

Eines der "schönsten" zentrierten Layouts (mit CSS) finde ich ist dieses hier (einfache Beispiele): http://www.craetive.de/ bzw. http://www.mrcuk.net/ bzw. http://www.bootsmannpictures.com/index.html

Ist eigentlich ein RapidWeaver-Theme ( http://www.rapid-ideas.com/themes/pro/camilo.html ), aber vielleicht kann man da ja auch was von "lernen" ...

bei diesem beispiel stürzt bei mir safari ab:

http://www.mrcuk.net/

wie sieht das bei euch aus

davek

Hmmm, geht hier perfekt...!?

du musst mal das browser fenster verkleinern und wieder vergrössern usw. dann stürzt safari ab

davek

Neeee, tut es bei mir nicht... komisch.

Es gab aber vor kurzem einige Updates für das Theme (ich habe das auch mal gekauft), die einige "kleine Fehler" behoben haben...
Vielleicht ist das ja noch mit einer alten Version erstellt worden!?

benno

Vielen Dank!
Das ist eine sehr hilfreiche Seite.

davek<br>Nö, funktioniert einwandfrei.

Hot Mac: komisch , ich hab das jetzt ein paar mal probiert und safari ist immer abgestürzt, wahrscheinlich wegem dem update auf Mac OS X 10.4.7

auf alle fälle das schönste CSS beispiel ist für mich persönlich:

http://www.bootsmannpictures.com/index.html

habe das jetzt einmal bei mir angewendet, funktioniert erstaunlich gut

davek<br>Hab auch schon 10.4.7 drauf.
Seltsam ...

Vielleicht ist Dein Mac einfach schon zu alt.

Hot Mac<br>
ja ich denke auch mein powerbook ist einfach schon zu alt , also dann muss ich wohl jetzt ein MBP 17" bestellen, ansonsten kann ich ja diese site nicht anschauen

Kommando zurück!

Jetzt stürzt Safari auch bei mir ab.

Hot Mac: und ich hätte jetzt schon beinah die bestellung für ein MBP abgeschickt (w00t)

na da kann ich ja noch eine zeitlang auf dem powerbook arbeiten

davek<br>Wenn's Dich nicht in den Fingern juckt.

davek

Verkleiner und Vergrößern geht .... PB mit 10.4.6 und eins mit 10.4.7
Aber es stürzt wohl ab einer bestimmten Verkleinerug auch bei mir immer ab..

Bei den anderen Beispielen gehts hingegen prima ....

P.S.:
Die bootsmann-Seite sah früher wirklich super aus (hab mir deswegen RW und das Theme gekauft) ... Ich finde, sie hat etwas nachgelassen....

so ich habe gestern so ein CSS erstellt und es funktioniert auch einwandfrei auf fast jedem browser, und zwar, wie könnte es anders sein, hat der IE massive probleme mit dieser darstellung. er will das ganze design nicht in der mitte darstellen. wie gesagt in jedem browser funktioniert es ansonsten, unter Mac & WIN, aber eben der IE will einfach nicht.

eigentlich könnt ihr diese site anschauen:

http://www.bootsmannpictures.com/index.html

wenn man diese site im IE darstellen möchte, wird gar nichts angezeigt, das ist das eine. bei mir wird zwar alles dargestellt, aber eben nicht in der mitte.

nun meine frage, kennt jemand eine lösung für dieses problem? gibt es eine zusätzliche CSS code zeile, mit der man das auch unter dem IE browser zum laufen bringt

so sieht der CSS code aus, der eben das ganze in der mitte platziert:


/*inhalt*/
#inhalt {
background-color: #FFFFFF;
position: absolute;
top: 4%;
left: 4%;
right: 4%;
bottom: 4%;
margin: auto;
text-align: center;
width: 800px;
height: 430px;
}

weiss jemand ob es mit CSS möglich ist nun dies auch auf dem IE Browser zum laufen zu bringen?

danke für eure hilfe oder auch links mit weiteren infos

davek: Ich zitiere mich dann mal selbst... Diese Lösung hab ich dir ne halbe Stunde (28.06.06 - 09:54) nachdem du den Thread eröffnet hast gepostet: zzz

Ist super-easy und klappt auch im IE.

Für dich muss das dann so aussehen:

/*inhalt*/
#inhalt {
background-color: #FFFFFF;
position: absolute;
top: 50%;
left: 50%;
margin: -215px 0 0 -400px;
text-align: center;
width: 800px;
height: 430px;
}

ja verzeih mir doch, hab nicht mehr daran gedacht, war zu sehr mit diesem CSS beschäftigt

Ja, aber irgendwo in einer nachfolgenden css-Def muss wieder text-align: left; vorkommen, sonst wird jeder Text mittig geschrieben, was sicherlich nicht sein soll....

Sch**ss IE... obiges steht übrigens auch in quirksmode.org.

Serge Paulus<br>

das kannst du ja dann noch im body tag definieren! auf alle fälle habe ich das mal jetzt getestet und es funktioniert auch im IE

Hab auch ne CSS Frage:
Ich möchte ein Element (div) ganz am Ende (also unten auf) der Seite plazieren. egal wie lang der restliche Content ist. bisher nicht hingekriegt.

das sollte doch mit einem bottom gehen, mache das immer so! hast du evtl. ein konkretes beispiel?

Wurde die Lösung schon genannt?
Ansonsten mein Senf:

html { margin: 0px; padding: 0px; }

/* --- Hack für den IE --- */
/* --- Der IE kann leider kein auto also --- */

body { text-aling: center; }
div#allesmittig { text-aling:left; }

MacSebi
Das div muss im Content liegen.
Also:

<head>
<style type="text/css">
#container {
width: 760px;
\width: 780px;
w\idth: 760px;
margin: 10px;
margin-left: auto;
margin-right: auto;
padding: 10px; }

#banner {
padding: 5px;
margin-bottom: ;
background-color: gray); }

#content {
padding: 5px;
background-color: gray; }

#footer {
clear: both;
padding: 5px;
margin-top: ;
background-color: red); }
</style>
</head>
<body>
<div id="container">
<div id="banner">&nbsp;</div>

<div id="content">&nbsp;der inhalt</div>

<div id="footer">&nbsp;bottom</div>
</div>
</body>
</html>

Super, Tricky. danke, ich schau's mir mal an. Komme aber erst Samstag dazu...

np. Gib bescheid was sich da ergeben hat

davek

sehr coole bilder, einige recht dunkel hast du die alle hier in Hamburg aufgenommen? auch welche in Veddel oder Wilhelmsburg? sieht fast so aus. mach schnell weiter damit ich mehr Biler meiner geliebten Heimatstadt sehen kann

icerikku: welche bilder meinst du ?!

Tricky:

Schonmal ganz gut, aber wie mache ich das, wenn ich die anderen divs (also zB Banner und content) mit position:absolute positionieren möchte?
(oder macht man das anders?)

Warum position:absolute ?
Geht alles mit verschachtelten divs.
Also nix machen mit position:absolute
sondern nur mit padding und margin.

...und wie kriege ich auf die Weise Spalten hin? dann sind die divs immer untereinander...
Ich glaub ich bin zu blöde...

Sag mal was du brauchst, vielleicht kann ich helfen.
Schon mit:
float:right;
Versucht?

hm... also prinzipiell sowas in der Art:

http://suedtirol.heise-server.de/login.php


... teilweise aber auch dreispaltig mit einer (Kopf-)zeile über allen drei Spalten und ner Fußzeile unter der mittleren...
Versuch gerad ein Template für Mambo/Joomla zu bauen...

Etwa so:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
#container {
width: 760px;
\width: 780px;
w\idth: 760px;
border: 1px solid red;
margin: 10px;
margin-left: auto;
margin-right: auto;
padding: 10px; }

#banner {
padding: 5px;
margin-bottom: ; }

#content {
padding: 5px;
margin-left: ;
margin-right: ; }

#sidebar-a {
float: left;
width: ;
margin: 0;
margin-right: ;
padding: 5px; }

#sidebar-b {
float: right;
width: ;
margin: 0;
margin-left: ;
padding: 5px; }

#footer {
clear: both;
padding: 5px;
margin-top: ; }
</style>
</head>
<body>
<div id="container">
<div id="banner">&nbsp;Banner</div>

<div id="sidebar-a">&nbsp;links</div>

<div id="sidebar-b">&nbsp;rechts</div>

<div id="content">&nbsp;inhalt</div>

<div id="footer">&nbsp;footer-bottom</div>
</div>
</body>
</html>


Gute Links:
CSS 2 Spezifikationen http://www.edition-w3c.de/TR/1998/REC-CSS2-19980512/
Webentwicklung http://jendryschik.de/wsdev/
Faux Columns http://www.alistapart.com/articles/fauxcolumns/
Workshop http://www.css4you.de/

PS: Doctype nicht vergessen!

davek<br>


Ahhh bei mir auch

Woran liegt des?

RobStyle: das habe ich nicht weiter verfolgt , wäre aber interessant dies herauszufinden