4. (CSS)div-Objekt zentrieren?

(CSS)div-Objekt zentrieren?

  • M

    Hallo,

    ich möchte das hier:

    <div align="center" style="width: 400px;">
...
</div>

    in CSS haben.
    text-align:center; hilft im div nicht, das bezieht sich dann nur auf dessen Textinhalt.

    MfG MAV

    0
  • F

    margin-left: auto; margin-right: auto;
    Aber <div align="center"></div> zentriert doch auch nur den Inhalt 😕

    0
  • M

    Super, klappt. 🙂

    0
  • T

    Hi,

    ich habe in der SuFu natürlich einige Thread zu dem Thema gefunden. Allerdings funzt es bei mir nicht so wie es soll. (teste grad mit IE6.0 und FireFox 0.8)

    Es sind alle Elemente absolut in einem div ausgerichtet (id=rahmen). Die Koordinaten beziehen sich dann ja auf das übergeordnete Objekt. Will ich den kompletten Rahmen jetzt aber zentrieren (margin: auto) dann passiert einfach gar nix. Eine Absolute Aussrichtung des Rahmens funktioniert, aber das kann ich ja nciht gebrauchen 😞

    Findet wer einen Fehler, ich find einfach nix? 🙂

    <html>
<head>
<title>blubb</title>
<style type="text/css">
#rahmen
{
        -- position: absolute;
        -- left: 100;
	width:800px;
	margin: auto;
}
#top
{
	position: absolute;
	top: 0px;
	left: 0px;
	width: 800px;
	height: 130px;
	background-color: #F00;
}
#werbebanner
{
	position: absolute;
	top: 40px;
	left: 320px;
	width: 468px;
	height: 60px;
	border: solid 1px #000;
	background-color: #FFF;
}
#login
{
	position: absolute;
	top: 104px;
	left: 399px;
}
#menue
{
	position: absolute;
	top: 130px;
	left: 0px;
	width: 150px;
	height: 200px;
	border-right: solid 1px #F00;
}
#haupt
{
	position: absolute;
	left: 160px;
	top: 140;
	bottom: 10px;
	width: 625px;
}
#fuss
{
	position: absolute;
	top: 330px;
	left: 0px;
	width: 800px;
	border-top: solid 1px #F00;
	text-align: center;
}
input.login
{
	width: 100px;
	border: solid 1px;
	background-color: #FFF;
}
</style>
</head>
<body>
<div id="rahmen">
	<div id="top">
		<div id="werbebanner">
			<a href="#"><img alt="Werbung" src="" /></a>
		</div>
		<div id="login">
			<form action="" method="post">
				Login:
				<input name="user" type="text" maxlength="50" class="login" />
				<input name="pw" type="password" maxlength="50" class="login" />
				<input name="speichern" type="checkbox" />
				speichern?
				<input name="submit" type="submit" value="Los" class="login" style="width:50px" />
			</form>
		</div>
	</div>
	<div id="haupt">
		<h1>
			&Uuml;berschrift
		</h1>
		<p>
			text text text text text text text text text text text text text text text text text text text text text text text text <br />
			text text text text text text text text text text text text text text text text text text text text text text text text <br />
			text text text text text text text text text text text text text text text text text text text text text text text text <br />
			text text text text text text text text text text text text text text text text text text text text text text text text <br />
			text text text text text text text text text text text text text text text text text text text text text text text text <br />
		</p>
	</div>
	<div id="menue">
		<p>
			<br />
			Menue:<br />
			<a href="#">Punkt 1</a><br />
			<a href="#">Punkt 2</a><br />
			<a href="#">Punkt 3</a><br />
			<a href="#">Punkt 4</a>
		</p>
	</div>
	<div id="fuss">
		<p>
			<a href="#">Kontakt</a> - <a href="#">Impressum</a> - <a href="#">AGB</a>
		</p>
	</div>
</div>
</body>
</html>

    VERDAMMT - wollte eigentlich neuen Thread aufmachen *g*

    0
  • F

    Also bei mir sitzt der rote Kasten in der Mitte - oder was meintest du?

    0
  • T

    Jo, das mein ich ?!?!?
    lol?
    Bei mir ist der beim IE und beim Firefox einfach ganz links oben in die Ecke geklatscht, als ob ich margin: 0 gemacht hätte ?!?!?
    kann ja gar nicht sein, ich tüftel hier schon drei std daran rum..

    Ach und da fällt mir grad nochwas ein, hab ich vorhin vergessen zu schreiben.
    Ich habe ja alles absolut positioniert. Allerdings will ich das unterste div nicht absolut setzen. Sondern immer direkt unter das Menü oder den Textteil. Wenn der text jetzt länger wird, dann schiebt der die Linie nicht nach unten sondern schreibt einfach drüber, das ist blöd *g*. "clear: both" beendet ja nur das floaten, es floatet ja aber nix. Wie bekomme ich hin das sich ein nicht absolutes Div an einem absolut positionierten orientiert?

    und dann nochn Pfung Thüringer, bitte 🙂

    0
  • F

    Ich blick nicht mehr so ganz durch - könntest du evtl. Screenshots posten?

    0
  • T

    So siehts grad bei mir aus
    das style-sheet
    datt html-file

    so, ich denke mal auf dem Bild kann man es jetzt ganz gut sehen, habe es ein bischen geändert. Das mit dem zentrieren bekomme ich schon noch irgendwie hin. Da hab ich keine Sorgen drum.

    Allerdings fehlt mir ein Lösungsansatz zu dem Problem das das div mit dem Menü immer direkt mit der unteren Linie abschliesst, egal wieviel Text im Textbereich steht.

    hab ich mich jetzt verständlicher ausgedrückt? 🙂

    0
  • F

    Warum willst du denn unbedingt position:absolute; verwenden 😕

    0
  • T

    hmm,

    weil ich damit vor allem den ganzen Seitenkopf viel einfacher kontruieren kann und keine DIVs als Platzhalter brauche damit es richtig floatet etc.

    Ich möchte im HTML möglichst nur die Informationen (Logo (als Bild), Menulinks, Text) und alles andere möglichst komplett mit CSS formatieren (Positionen, Hintergrundgrafiken, Schriftstile etc.). Schalte ich CSS nun ab, steht alles wunderbar untereinander (z.B. fürn NN4.x, da er das @import ja nicht kennt).

    So wie sich das halt meiner Meinung nach gehören sollte 😉

    Das Problem mit dem unteren DIV habe ich nun gelöst indem ich einfach in dem Textteil ein <hr /> und einen absatz mit den Fuß-Infos eingebaut habe. Jetzt stehen die Links (impressum etc) halt nicht komplett in der Mitte unter der Seite, sondern nur unter dem Text. Das ist auch gar nicht schlimm 🙂

    Jetzt bleibt nur noch das Prob mit dem zentrieren. Ich verstehe nicht wieso

    position:absolute;
left: 100px;

    korrekt funzt.

    margin: auto;

    dagegen nicht.

    wie würdest du es denn positionieren wenn nicht absolut?

    edit: momentan sieht es so aus: http://www.go4get.de (name: test, pw: hans123)

    0
Anmelden zum Antworten