73%
22%
19%
11%
6%
Montag, 28. März 2005, 14:37
Und wieder mal CSS: Positionierung
Nach einigen gelösten Problemen stoße ich auch immer wieder auf neue. So möchte ich das "konstruieren", was ich zur Veranschaulichung hier als Grafik angehängt habe.
Während Box1 und Box2 kein Problem darstellen, gelingt es mir nicht, die Box3 rechts neben der Box2 zu platzieren ...
Während Box1 und Box2 kein Problem darstellen, gelingt es mir nicht, die Box3 rechts neben der Box2 zu platzieren ...
Montag, 28. März 2005, 20:22
Inzwischen habe nach einigem Probieren eine Lösung gefunden, die zumindest im Opera und Firefox zum gewünschten Ergebnis führt.
CSS:
HTML:
Aber: Bei der Anzeige mit dem IE fehlt das Element "Box" komplett. Wieso?
CSS:
|
Quellcode |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
.content_bg {
position: relative;
top: 100px;
margin: 0 auto;
background-color: #EFEFEF;
}
.content {
margin-left: 35px;
width: 600px;
background-color: #FFFFFF;
border: solid 1px;
}
.content_main {
margin-left: 70px;
margin-right: 80px;
text-align: justify;
border: solid 1px;
}
.box {
position: absolute;
left: 640px;
bottom: 0px;
border: 1px solid;
width: 135px;
height: 10px;
}
|
HTML:
|
|
Quellcode |
1 2 3 4 5 6 7 8 9 10 11 12 |
<div class="content_bg"> content_bg <div class="content"> content <div class="content_main"> content_main </div> </div> <div class="box"> box </div> </div> |
Aber: Bei der Anzeige mit dem IE fehlt das Element "Box" komplett. Wieso?
Dieser Beitrag wurde bereits 4 mal editiert, zuletzt von »sutadur« (28. März 2005, 23:36)
Montag, 28. März 2005, 23:47
|
|
Quellcode |
1 2 3 4 5 |
.content_bg {
position: relative;
top: 100px;
margin: 0 auto;
background-color: #EFEFEF; }
|
Hier hast du 2 Positionierungsarten, die sich widersprechen.
|
|
Quellcode |
1 |
margin: 0 auto; |
heißt:
die box soll innerhalb ihres Elternelementes zentriert werden und am oberen Rand desselben kleben.
Hier fehlt aber die Breitenangabe.
Ohne diese nimmt der Browser seinen Default-Wert, und der ist 100%.
Wenn die Box aber die ganze Breite des Browserfensters ausfüllt, kann sie nicht zentriert sein.
mit
|
|
Quellcode |
1 2 |
position: relative; top: 100px; |
verschiebst du die ganze Box von ihrer Normal-Position um 100px nach oben.
da 'position' eine höhere Priorität hat als 'margin', wird Letzgenanntes ignoriert.
--------------------------------------------------------
Warum deine Außen-box die inneren Boxen nicht umschließt?
es fehlt clear:both nach der letzten float-box.
mit 'float' wird ein Element aus dem Textfluß genommen, ähnlich wie bei 'position:absolute', d.h: die übrigen Elemente erkennen es nicht mehr und richten sich auch nicht mehr an ihm aus.
Die außenbox ignoriert also ihre innenliegende float-box und ist deshalb nur so hoch, wie ihr Inhalt, den sie erkennt: das div mit der Klassenbezeichnung 'box'.
Mit 'clear:both' stellst du den normalen Textfluß wieder her.
Zum besseren Verständnis gib mal jedem Div einen andersfarbigen Rahmen.
---------------------------------------------------
es wäre hilfreicher gewesen, wenn du den Text in den DIVs den Namen der Boxen der Zeichnung angeglichen hättest.
So muß ich erst raten, welche box im Quelltext mit welcher box auf der Zeichnung übereinstimmen soll.
außerdem fehlen die Deklarationen des selektors ".box"
Wenn du den Quelltext nach dieser Zeichnung ausrichtest, dürfte es richtig werden
http://www.directupload.net/show_image.p…&n=RtnHU46y.png
Hier das Posting aus "meinem" Forum
http://www.selfhtml.de/forum/zeigebeitrag_1_90723__.php3
Wenn du den dortigen Quelltext und die Erklärung dazu nachvollziehst, kannst du es dann auf dein Problem übertragen. Einziger Unterschied: box 3 ist bei 'Firechatter' eine Grafik, aber das ist egal.
gaby
Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von »gaby*« (29. März 2005, 00:39)
Dienstag, 29. März 2005, 00:07
Die Angabe von "margin: 0 auto;" war im Prinzip nicht dafür gedacht, die Anzeige zu zentrieren. Vielmehr wollte ich damit erreichen, dass die Box tatsächlich die gesamte Breite des Browserfensters ausfüllt. Aber offensichtlich geht das auch ohne ... also lass ich das mal weg.
Mir ist dann übrigens auch mal aufgefallen, dass ich die Definition von ".box" vergessen hab. Ich hab den Eintrag nun editiert und auch nochmal überarbeitet, wobei das ganze nun nur noch entfernt etwas mit der Darstellung im Eröffnungsbeitrag zu tun hat. Dabei habe ich übrigens auch die DIVs entsprechend den Texten benannt ...
Die genannten Links werde ich mir nochmal intensiv anschauen, versprochen ...
)
Mir ist dann übrigens auch mal aufgefallen, dass ich die Definition von ".box" vergessen hab. Ich hab den Eintrag nun editiert und auch nochmal überarbeitet, wobei das ganze nun nur noch entfernt etwas mit der Darstellung im Eröffnungsbeitrag zu tun hat. Dabei habe ich übrigens auch die DIVs entsprechend den Texten benannt ...
Die genannten Links werde ich mir nochmal intensiv anschauen, versprochen ...
) Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von »sutadur« (29. März 2005, 00:18)