Strohhalm

Sprung zu Navigation. Sprung zu Privat. Sprung zu StyleSwitcher. Sprung zum Inhalt.

 

Sprung zu Navigation. Sprung zu Privat. Sprung zu StyleSwitcher. Sprung zum Inhalt.

Privat

 

Anmelde-Formular



Als Strohhalm-Mitglied registrieren.

 

Sprung zu Navigation. Sprung zu Privat. Sprung zu StyleSwitcher. Sprung zum Inhalt.

Sprung zu Navigation. Sprung zu Privat. Sprung zu StyleSwitcher. Sprung zum Inhalt.

Archiv

 

strohhalm.org / Archiv / (X)HTML & CSS / Eintrag lesen

CSS Frage.

  1. CSS Frage.

    shocki3 04. Dezember 2004, 00:28

    Junge, Junge ich komme nicht drauf.
    Also ich möchte innerhalb eines Layers einen Text anzeigen, innerhalb dieses Layers soll wiederum ein Text in einem neuen Layer angezeigt werden. Es ist also eine Kasten vorhanden, wo Text 1 und Text 2(mit position:absolute verschoben) drinstehen sollte.
    Was dabei rauskommt: Text 2 steht außerhalb des ersten Layers.
    Was mache ich nur falsch ???

    Vielen Dank für die Hilfe ;)


    <body style="background-color: #f5f5f5;">

    <div style="position:absolute; left:15%; margin-top:30px;
    background-color:#ffffff; border-color:#005500;
    width:70%; padding:10px ">
    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. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feug


    <div style="font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;position: absolute;left: 105px;top: 354px;">

    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. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie con

    </div>
    </div>


    </body>

  2. Re: CSS Frage.

    shocki3 04. Dezember 2004, 01:03

    Ok,ok.

    Habe nochmal viel rumprobiert. Es hat also mit position:absolute im 2. div zu tun. Verstehe ich trotzdem nicht so ganz. Eigentlich heisst es doch nur, dass es im verhältnis zum elternelement positioniert wird.
    Ich dachte, das wäre das 1. div. Scheinbar ist doch body das elternelement ?
    absolute bezieht sich also immer auf body ?


    Gruß Jens.

  3. Re: CSS Frage.

    cantor 04. Dezember 2004, 01:09

    Entferne die Angabe position: absolute für das zweite div-Element und setze zur Positionierung stattdessen margins.

  4. Re: CSS Frage.

    DukeXP 04. Dezember 2004, 12:47

    > shocki3:
    > Ich dachte, das wäre das 1. div. Scheinbar ist doch body das elternelement ? absolute bezieht sich also immer auf body ?

    Bei Layern handelt es sich um eine längst in Vergessenheit geratene Erfindung von Netscape. Was du meinst sind DIV-Bereiche. Eine absolute Angabe bezieht sich auf das nächste übergeordnete absolut positionierte Element. In deinem Fall ist kein solches Element vorhanden, so dass sich die Positionsangabe auf die linke obere Ecke des Browserfensters bezieht.

  5. Re: CSS Frage.

    Juggler 04. Dezember 2004, 16:31

    Die erklärung von DukeXP ist fast korrekt.
    Eine absolute Angabe bezieht sich auf das nächste übergeordnete absolut positionierte Element.
    Damit sich eine Absolute Angabe auf das Elternelement bezieht muss dieses lediglich irgendwie positioniert sein. Schon "position:relative" sollte, auch ohne Zahlenwerte, dafür ausreichen.

    MfG
    Juggler

  6. Re: CSS Frage.

    gaby 05. Dezember 2004, 09:50


    Was dabei rauskommt: Text 2 steht außerhalb des ersten Layers.
    Was mache ich nur falsch ???



    Wenn ich dich richtig verstanden habe, willst du den zweiten Kasten innerhalb des ersten Kastens positionieren. Dazu müßtest du der äußeren Box auch eine Höhe geben (zb height:400px;), die ausreicht, die innere Box (incl ihres Abstandes zu den Kanten ihres Elternelementes) vollständig aufzunehmen.

    Dies funktioniert aber nicht immer:
    Hat die innere Box viel Inhalt oder wird die Schrift vergrößert, kann es passieren, daß sie aus der äußeren Box herausläuft,
    Auf keinen Fall aber wird sich die äußere Box, so wie du es vielleicht möchtest, auch entsprechend ausdehnen und die innere umschließen, weil (absolut) positionierte Elemente in keiner Größenabhängigkeit zueinander stehen.

    Ich weiß jetzt nicht, für welche Zwecke du das brauchst, aber IMO bieten sich 2 Lösungen an:
    Beinhaltet die innere Box einen kurzen Fußtext, könntest du sie mit zb position: absolute; left: 105px; bottom: 10px; positionieren (+ height-Angabe für die Außenbox).

    Willst du, daß die äußere Box die innere umschließt und sich mitausdehnt, wenn der Inhalt der inneren Box es erfordert, verzichte auf position:absolute oder relative und positioniere mit margin:


    <div style="margin-left:15%; margin-top:30px;
    width:77%; padding:10px; border: 4px solid blue; ">
    Lorem ipsum dolor sit amet,

    <div style="margin-left: 105px; margin-top: 354px;
    border: 2px solid red;">
    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
    </div>
    </div>



    Eigentlich heisst es doch nur, dass es im verhältnis zum elternelement positioniert wird.
    Ich dachte, das wäre das 1. div.


    Ist es auch. Und es wird auch in Bezug auf das 1. Div positioniert. Das kannst du deutlicher sehen, wenn du dem 2. div einen kleineren top- und left-Wert gibst.



    Grüße
    gaby

 
Nach oben springen

.(c) 2002 - 2019 strohhalm.org Community.Server powered by Manitu.Software powered by Mathias Bank
.Impressum + Team.Datenschutz