• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

Layout zentrieren

Alarik

Alarik

New member
Hallo erstmal...

Bei CSS hatte ich immer schon dasselbe Problem, nämlich bei verschiedene Möglichkeiten zu zentrieren.
Da hat Google immer andere Varianten gefunden, aber bisher hat noch nie etwas gepasst.

Also ich habe ein Layout, das in mehrere Bilder zerteilt ist. Prinzipiell könnte ich diese mit Hilfe einer Tabelle richtig darstellen und zB in der Navi meine Links in die Zelle eintragen. Das gesamte Layout lässt sich somit auch Zentrieren (die Tabelle), weil das Design nicht den gesamten Platz auf der Seite einnimmt (zB 750x500).

Doch ich möchte auf Tabellen verzichten und stattdessen dasselbe über CSS mit den HTML-Div Tags machen.
Eigentlich eh kein Problem...bis auf das Zentrieren des gesamten Gerüstes.

ALso ich habe hier ne absolute Positionierung. left: 50% würde alle Elemente an die selbe Position verschieben, das ist kein richtiges Zentrieren.

Ich habe da ne kleine Lösung gefunden, indem ich ein normalen div Bereich (ohne Positionierung) als "Eltern-Element" nutze und zentriere es. Dann kann ich darin relative die Positionierung aller Elemente oder Bilder festlegen. mit z-index möchte ich eine Textebene mit einem positionierten Div drüberlegen.
Doch er lässt mich nicht zwei relative Elemente überlappend positionieren, sondern fügt die Textebene einfach drunter unter das Bild-Layout.

Wie ihr vielleicht lest, hab ich schon alles mögliche ausprobiert und würde gern ein paar nützliche Tipps von euch erhalten. Hoffe mein Problem liegt klar auf der Hand. Bis dann.
 
Das ist tatsächlich eine 'Glaubensfrage'.
:D

Erstmal ist der Link von womstar relevant.

Es gibt aber natürlich mehr Lösungswege...
was mir da so einfällt:

1) Im Prinzip spricht rein gar nichts gegen eine Tabelle mit einer Zelle,
so wie Du auch in Deinem Thread beschreibst.

2)
Code: 
body {
    [B]text-align:center;[/B]
    }
#hauptdiv {
    width:750px;
    height:500px;
    [B]text-align:left;[/B]
    }
 
@womstar

Danke für den Link. Die Methoden kenne ich jedoch schon, das ist nur die Zentrierung....

Ich möchte aber bei "weiteren Code" die einzelnen Bilder für mein Layout einfügen, und zwar positioniert.
Und genau da fängt erst das Problem an.
Weil beispielsweise das Bild am linken und das Bild am rechten Rand beides in die Mitte mit-zentriert wird.

Ein Versuch war wie gesagt mit relativer Positionierung, wo sich noch ein neues Problem ergab....

@dkdenz
Ja, bisher regelte ich es auch immer mit Tabelle.

Doch viele Leute meinen, dass Tabellen ja eigentlich nicht für Layout erfunden wurden
und die neuen Homepages nur noch aus CSS bestehen sollten.

Nun würde ich es gerne versuchen, so etwas mit CSS hinbekommen,
mich interessiert es auch wie die anderen Leute das regeln.

Danke schonmal, vielleicht weiss jemand noch eine Lösung
 
Zuletzt bearbeitet:
Im Prinzip hatte dkdenz es mit seinem Codeschnipsel schon angedeutet.

Global wurde ja erstmal für Alles zentrieren angegeben. Du mußt halt für alle inneren Bereiche, text-align:left oder right definieren, damit diese nicht ebenfalls zentriert werden.
 
Nur blöd das da meines achtens nur der IE mit macht.


Code: 
<style type="text/css">
p,div {

	margin			: 0px;
	padding			: 0px;
}

body {

	font			: normal 11px Arial,Helvetica,Sans-Serif;
}

#contentcenter {

	width			: 955px;

	position		: absolute;
	left			: 50%;
	
	margin-left		: -480px;
	padding			: 10px 0px 10px 0px;	

	background-color	: #EFEFEF;
}

#left {

	width			: 240px;

	margin-left		: 5px;
	margin-right		: 20px;

	background-color	: #CCC;

	float			: left;
}

#middle {

	width			: 420px;

	background-color	: #CCC;

	float			: left;
}

#right {

	width			: 240px;

	margin-left		: 20px;
	margin-right		: 5px;

	background-color	: #CCC;

	float:left;
}

.clearboth {

	font-size		: 1px;
	line-height		: 0px;

	clear			: both;
}

.textblockpadding {

	padding			: 6px;
}
</style>

<div id="contentcenter">
	<div id="left">
		<div class="textblockpadding">
			<p><strong>Lorem ipsum dolor</strong></p>
			<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
		</div>
	</div>	
	<div id="middle">
		<div class="textblockpadding">
			<p><strong>Lorem ipsum dolor</strong></p>
			<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
		</div>
	</div>
	<div id="right">
		<div class="textblockpadding">
			<p><strong>Lorem ipsum dolor</strong></p>
			<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
		</div>
	</div>
	<br class="clearboth" />
</div>
 
womstar schrieb:
Nur blöd das da meines achtens nur der IE mit macht.
Zum Vergrößern anklicken....

Asche auf mein Haupt...
womstar hat recht...
Aber korrekterweise sollte das nicht unerwähnt geblieben sein...

Hier noch eine Möglichkeit, damit die Verwirrung komplett wird: :D

Code: 
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">
        <head>
                <meta http-equiv="content-type" content="text/html;charset=utf-8" />
                <title>Zentriert</title>
                <meta http-equiv="Content-Style-Type" content="text/css" />
                <style type="text/css">/*<![CDATA[*/ #hauptdiv { background:#ff0000; position:absolute; top:5%; left:15%; width:70%; height:70%; }  /*]]>*/</style>
        </head>
        <body>
            <div id="hauptdiv">Hallo, ich bin zentriert...</div>
        </body>
</html>
 
Zuletzt bearbeitet:
phuh, stimmt überhaupt, ich falle auch immer wieder auf den naheligenden Gedanken des Aussenbereichs rein, ;)
 
Danke dkdenz, das kommt der Sache schon näher.
Muss ich wohl die Prozentwerte je nach Größe ändern.
Kann man die irgendwie errechnen oder schätzt man sie einfach ab?
 
Naja, über den Daumen gepeilt kriegt man das schon hin...
Das gute an relativen (%) Angaben ist, das Layout ist immer flexibel.
Wenn man von Pixeln ausgeht, kann man grob 100px = 10% rechnen.
In Deinem Fall (750px) müsste das so aussehen:

12.5% 75% 12.5%

Also
Code: 
position:absolute; left:12.5%; width:75%;

Der Rest ergibt sich ja von selbst...

Und was Du dann innerhalb dieses DIV's machst, ist reine Rechenarbeit...
 
Zuletzt bearbeitet:
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben