Inneren Container über Grenzen des übergeordneten

  • CSS

Es gibt 6 Antworten in diesem Thema. Der letzte Beitrag () ist von Manü.

    Inneren Container über Grenzen des übergeordneten

    Ahoi,

    ich habe ein mittelschweres Problem und suche dazu einfach mal andere Möglichkeiten der Lösung.
    Es gibt als einen Container der den Content einer Seite hält. Dieser wird auf eine bestimmte Breite in der Seite gehalten.
    Um das mal etwas abstrakt darzustellen:

    HTML-Quellcode

    1. <html>
    2. <head></head>
    3. <body>
    4. <header>...</header>
    5. <section id="content">
    6. <div id="first">...</div>
    7. <div id="second">Dieser Container soll über die Breite von "content" auf die gesamte Seitenbreite angesetzt werden!</div>
    8. <div id="third">...</div>
    9. </section>
    10. <footer>...</footer>
    11. </body>
    12. </html>


    Die Section "content" ist zb. auf 60% Breite festgelegt:
    #content{
    width: 60%;
    }

    jetzt habe ich den Container "second" soweit bearbeitet, dass er auf die gesamte Breite der Seite passt, über den übergeordneten Container hinaus.
    #second{
    position: absolut;
    width: 100%;
    left:0;
    }

    Mein Problem ist nun, dass er durch die absolute Positionierung natürlich über vorherige und folgende Container drüber rutscht. Jetzt könnte ich mit einer Höhe und einem margin-bottom das ganze nach unten hin anpassen, was auch möglich ist und funktioniert.
    Nun könnte ich via jquery aber auch die übergeordneten Elemente vom Seitenbeginn abfragen damit ein margin-top setzen und dem vorherigen Container noch ein margin-bottom geben.

    Eine ander möglichkeit wäre es wohl auch, via jquery die browser breite zu ermitteln und den Container "second" auf die Breite fest zu legen. Natürlich bis Minimum content-Breite.

    Hat aber vielleicht jemand noch eine Möglichkeit ohne JQuery? Wie man Kunden ja kennt, ein starres Design muss dabei dynamisch sein -.-
    Grüße Manu

    Was Gott dem Menschen erspart hat, kann der Computer.
    Billy ©, (*1932), Schweizer Aphoristiker
    Quelle: www.Aphorismen.de

    Sorry ich verstehe nicht ganz was jetzt genau die Frage ist. Mal paar Ansätze:

    - position heißt "absolute" nicht "absolut"
    - Wenn die Positionierung des parent-containers (#content) auf relative steht und der child-container auf absolute, dann landest du mit top: 0 und left: 0 in der linken oberen Ecke des parent-containers. Und rutscht nicht darüber hinaus. Außer du vergibst negativ-Werte, wie top: -32px und left: -32px
    - Wieso überhaupt absolut positionieren?
    - #content ist ja nur 60% von der Seitenbreite. Soll #second nun trotzdem 100% der Seitenbreite haben? Oder nur 100% von den 60%?
    - Mit Javascript würde ich persönlich auf gar keinen Fall irgendwas machen, das mit dem Layout zu tun hat - ist wohl Geschmackssache.

    Mach mal im Paint mit Rechtecken kurz eine Skizze wie es sein soll. Oder gibt einfach den Link zur Seite. Jedenfalls, beschreib nochmal genauer, was du machen willst.

    Link :thumbup:
    Hello World

    Bild funktioniert leider nicht ;)
    Oh ich hab mich bei absolute verschrieben -.- .. aber nur hier ist nicht kopiert gewesen.

    Ich sehe gerade, ich hab mich wirklich undeutlich ausgedrückt ^^

    Der gesamte Content auf der Start wie auf allen anderen Seiten ist auf 60% der Seite eingestellt.
    Jetzt soll auf die Startseite ein Container, der über diese Content-breite hinaus die Gesamte Seitenbreite einnimmt.
    Darüber gibt es "first" mit Inhalt und darunter "third" mit Inhalt. Wenn dich den Container "second" also absolut positioniere, damit ich ihn unabhängig von "content" eine größere Breite geben kann, schiebt sich "first" und "third" natürlich dahinter.
    Der Container "second" soll aber an der Stelle dazwischen bleiben nur eben die breite von "content" ignorieren und 100% der Seitenbreite einnehmen.
    Man sollte vielleicht noch dazu sagen, "content" ist zentriert.

    Ich hoffe das ist verständlicher.

    Auf der Seite musste ich schon hin und wieder mal mit js etwas tricksen um bestimmte Vorstellungen des Kunden herzustellen ... vielleicht fehlen mir auch einfach manchmal noch einige CSS3-Tricks


    EDIT:
    eine weiter Möglichkeit die mir einfällt, ist es die Sache ein wenig umzudrehen.
    Wenn meine Seite 100% Breite darstellt und der content 60% Breite zentriert. Dann müssten die beiden Außenseiten ja jeweils 20% sein, somit kann ich den Container ja auf 140% Breite setzen und ein margin-left von -20%, somit sollte es eigentlich funktionieren, dass der Container über die Breite der gesamten Seite verläuft.
    Grüße Manu

    Was Gott dem Menschen erspart hat, kann der Computer.
    Billy ©, (*1932), Schweizer Aphoristiker
    Quelle: www.Aphorismen.de

    Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von „Manü“ ()

    Hi,

    dann würde ich vielleicht umdenken. Mach alles auf 100% und mach jeweils für die Container-Blöcke rechts und links ein margin von je 30%. Nur für #second belässt du es so (ohne Margin). Dann müsste das gut hinhauen und ist auch noch sauber. Und du verzichtest auf absolute positionierungen.
    Alternativ kannst du eine fixe Breite vergeben, display auf Block stellen und margin auf 0px auto.

    Link :thumbup:
    Hello World

    Schau dir mal bitte den Edit meines letzten Posts an ... was hälst du von der Idee?

    Eigentlich wollte ich die umliegende Struktur dafür nicht anfassen, wenn ich also die Klassen für den Content bearbeite, müsste die Section "content" auf 100% setzen, somit also noch eine weiter Klasse für 60%-container und 100%-container schaffen bzw. mit eben mit dem Margin, und die in den jeweiligen Seiten eintragen. Zumal es dann also heißt den Gesamten Content neu auszurichten nur für einen einzigen Container.

    Deine Alternative werden ich mal ausprobiere. Ich sag also nochmal Bescheid wie es lief.
    Grüße Manu

    Was Gott dem Menschen erspart hat, kann der Computer.
    Billy ©, (*1932), Schweizer Aphoristiker
    Quelle: www.Aphorismen.de

    Hi,

    ich hab es eigentlich so gemeint:



    Code:

    HTML-Quellcode

    1. <!DOCTYPE html>
    2. <html>
    3. <head>
    5. <title>Test</title>
    7. <style>
    8. *{
    9. padding: 0px;
    10. margin: 0px;
    11. }
    13. div{
    14. border: 1px solid #cccccc;
    15. background-color: #f4f4f4;
    16. padding: 32px;
    17. display: block;
    18. }
    20. #content > div{
    21. width: 60%;
    22. margin: 0px auto;
    23. margin: 8px auto;
    24. }
    26. #content > #second{
    27. width: 100%;
    28. }
    30. header, footer{
    31. padding: 32px;
    32. background-color: #008a00;
    33. color: #ffffff;
    34. }
    35. </style>
    37. </head>
    38. <body>
    39. <header>Header</header>
    40. <section id="content">
    41. <div id="first">First</div>
    42. <div id="second">Dieser Container soll über die Breite von "content" auf die gesamte Seitenbreite angesetzt werden!</div>
    43. <div id="third">Third</div>
    44. </section>
    45. <footer>Footer</footer>
    46. </body>
    47. </html>



    Link :thumbup:
    Hello World

Facebook
Telefonspende