Runde ecken Box positionieren

[Mo3bius]

Hi,
ich versuche gerade das Design meiner Homepage aufzubessern. dazu möchte ich z.B. runde Boxen einführen. Eine gute Anleitung habe ich hier gefunden:

http://www.andreas-kalt.de/webdesign/tutorials/runde-ecken

(Die Gleiche gibs auch bei selfhtml)

Nun zu meinem Problem: Ich möchte meine Box nicht nur mit top right etc positionieren, sondern halt da wo ich die hin will.
Geht das ohne Tabellen?
Hab das bis jetzt nicht geschafft...

Mfg Mo3bius

[josh]

Hallo,

Nun zu meinem Problem: Ich möchte meine Box nicht nur mit top right etc positionieren, sondern halt da wo ich die hin will.

Wo willst du sie denn haben ;-) Ich verstehe ehrlich gesagt dein Problem nicht.

Gruß

[Mo3bius]

Naja, ich will das die Box in die Mitte der Seite angezeigt wird.

Bis jetzt sieht das so aus:

.ro {
 background:url(../images/ro.gif) top right  no-repeat;
 margin:0;
 padding:0;
}

.lo {
 background:url(../images/lo.gif) top left no-repeat;
 margin:0;
 padding:0;
}

.ru {
 background:url(../images/ru.gif) bottom right no-repeat;
 margin:0;
 padding:0;
}

.lu {
 background:url(../images/lu.gif) bottom left no-repeat;
 margin:0;
 padding:0;
}

Ich hab dann mal das versucht:

.ro {
 background:url(../images/ro.gif) 800px 100px  no-repeat;
 margin:0;
 padding:0;
}

.lo {
 background:url(../images/lo.gif) 100px 100px no-repeat;
 margin:0;
 padding:0;
}

.ru {
 background:url(../images/ru.gif) 800px 800px no-repeat;
 margin:0;
 padding:0;
}

.lu {
 background:url(../images/lu.gif) 100px 800px no-repeat;
 margin:0;
 padding:0;
}

Das hat aber nicht so funktioniert....

Ich hoffe du verstehst mich jetzt :)

[josh]

Hallo,

Positioniere div.ro (äußerster Container) z. B. mit absoluter Positionierung (<http://de.selfhtml.org/css/eigenschaften/positionierung.htm@title=schau bei SELFHTML nach>). Damit das auch so wie gewünscht funktioniert, musst du außerdem bei diesem Container eine Höhen- und Breitenangabe machen.

Ich hoffe du verstehst mich jetzt :)

Jaaa! :-))

Gruß

[Mo3bius]

Ok, nun sieht das schon ganz gut aus :)

Hier der Code:

.ro {
 position: absolute;
        top:100px;
 left:250px;
 background:url(../images/ro.gif) right top no-repeat;
 margin:0;
 padding:0;
}

.lo {
 background:url(../images/lo.gif) left top no-repeat;
 margin:0;
 padding:0;
}

.ru {
 background:url(../images/ru.gif) right bottom no-repeat;
 margin:0;
 padding:0;
}

.lu {
 background:url(../images/lu.gif) left bottom no-repeat;
 margin:0;
 padding:0;
}

Es klappt so, wie ich mir das vorgestellt habe, ich verstehe aber nicht warum...

Das erste Element wird von oben 100 px und von links 250 px positioniert. Warum werden dann die anderen Elemente aber dazu richtig angeordnet?? Die sind doch nicht mir .ro verbunden?
Also von meiner Vorstellung her, müssten die einfach left top, right bottom, left bottom dargestellt werden.

Und noch ne Frage, wie positioniere ich meine Box zentriert in der Mitte?

Mfg Mo3bius

[josh]

Hallo,

Das erste Element wird von oben 100 px und von links 250 px positioniert. Warum werden dann die anderen Elemente aber dazu richtig angeordnet?? Die sind doch nicht mir .ro verbunden?

Sie sind alle Nachfahren von div.ro, weil sie ineinander verschachtelt sind. Daher "erben" sie die Position.

Und noch ne Frage, wie positioniere ich meine Box zentriert in der Mitte?

Siehe http://forum.de.selfhtml.org/hilfe/faq.htm#css-zentrieren

Gruß

[Mo3bius]

Ok, das mit dem Vererben hab ich jetzt gecheckt :)

Das Zentrieren versteh ich aber nicht.  Wenn ich mein erstes Element positioniere, dann muss ich ihm doch eine Position zuweisen?
Also bei ro sieht das so aus:

position: absolute;
        top:100px;
 left:250px;

Will ich nun meinen ganzen Kasten verschieben, weis ich nicht wie. Ich kann ja wohl nicht einfach margin-left:0; margin-right:auto; einfügen, das ändert doch nix an der absoluten Position. (habs getestet)

Kannst du (Josh ;) ) oder sonst hier wer mir weiterhelfen?

Mfg Mo3bius

[josh]

Hallo,

Du musst deinem Kasten zunächst einmal eine Breite zuweisen (sei es nun in %, em, px oder was auch immer). Ansonsten macht horizontales Zentrieren keinen Sinn, weil der Kasten dann sowieso die volle Breite des Elternelements ausfüllt. Zum Zentrieren musst du margin-left:auto; margin-right:auto; verwenden, und nicht

margin-left:0; margin-right:auto;

denn das wäre schlicht und einfach linksbündig.

Möchtest du den Kasten auch vertikal zentrieren, musst du ihn in der Tat absolut positionieren (top:50%) und dann mittels negativem margin-top, der genau die Hälfte der Höhe erhält, zurechtrücken. Hier könntest du dann allerdings die horizontale Zentrierung auf die gleiche Art und Weise durchführen.

Hier noch einmal ein Beispiel.

Gruß