ein div container zentriert---> wie 2 unterschiedliche bg-img links und recht außerhalb

Diese Seite verwendet Cookies. Durch die Nutzung unserer Seite erklären Sie sich damit einverstanden, dass wir Cookies setzen. Weitere Informationen

  • ein div container zentriert---> wie 2 unterschiedliche bg-img links und recht außerhalb

    Hi, ich habe ein kleines Problem und vielleicht kann mir ja einer von euch bei der Lösung behilflich sein.

    Ich habe mehrere Div-Container, einen für den Header, einen für den Content und einen für den Boarder.
    Diese sind alle durch magin: 0, auto, 0, auto; zentriert.
    Jetzt ist es jedoch so, das ich außerhalb dieser Div's links und rechts ein Background-Image haben möchte, welche sich per Background-Repeat: repeat-x; über die beieden linken und rechten seiten erstecken.
    Das ist aber durch margin nicht möglich, da es ja den kompletten freiraum nutzt, ich habe es mit einer table versucht, jedoch nimmt Chrome dies nicht an, muss jedoch zwingen browser übergreifend gleich bleiben.
    Vielleicht hilft euch der Code und dieses Bild um zu verstehen was ich meine:

    Quellcode

    1. <body>
    2. <div id="website">
    3. <div id="header_box">
    4. </div>
    5. <div id="content_box">
    6. </div>
    7. <div id="boarder">
    8. </div>
    9. </div>
    10. </body>

    und natürlich die css:

    Quellcode

    1. * {
    2. border:0px;
    3. margin:0px;
    4. padding:0px;
    5. }
    6. div {
    7. border-left:1px;
    8. border-right:1px;
    9. border-left-style:solid;
    10. border-right-style:solid;
    11. border-left-color:#000;
    12. border-right-color:#000;
    13. }
    14. div#website {
    15. border:0px;
    16. width:900px;
    17. height:auto;
    18. margin-left:auto;
    19. margin-right:auto;
    20. }
    21. div#header_box {
    22. width:900px;
    23. margin-top:0px;
    24. margin-right:auto;
    25. margin-left:auto;
    26. }
    27. div#content_box {
    28. width:900px;
    29. height:400px;
    30. }
    32. div#boarder {
    33. width:900px;
    34. height:3px;
    35. background-color:#7e2a2f;
    36. margin-right:auto;
    37. margin-left:auto;
    38. }
    Alles anzeigen

    [Blockierte Grafik: http://img408.imageshack.us/img408/778/unbenannt1zk.jpg]

  • Hi,

    du könntest das hier mal probieren --->
    quirksmode.org/css/multiple_backgrounds.html

    2 div --> im äußeren kommt das vom link oben rein, und in das äußere div ein zweites (innere / entprechend der breite der 2 Hintergrundbilder schmaler)), in diesem kannst du dann dein content baun.

    So in etwa -->

    Quellcode

    1. .wrapper {
    2. background-image: url(links.png), url(rechts.png);
    3. background-repeat: no-repeat;
    4. background-position: top left, top right;
    5. }


    Quellcode

    1. <div class="wrapper">
    2. <div id="website">
    3. <div id="header_box">123</div>
    4. <div id="content_box">456</div>
    5. <div id="boarder">789</div>
    6. </div>
    7. </div>


    sieht bei mir so aus -->
    [Blockierte Grafik: http://www.abload.de/img/unbenanntesdokument_12snb0.png]

    Blau: links
    Rot: rechts

    Dieser Beitrag wurde bereits 3 mal editiert, zuletzt von der_robert ()

  • klasse ansatz, aber klappt nur teilweise

    Das ist ein klasse Ansatz.
    Ich habe gerade mal versucht es umzusetzen und bin dabei jedoch auf ein weiteres Problem gestoßen, welches ich in dem davor auch schon hatte.
    Es sind zwei BG-Images die nur 6px breit sind und sollen auf der x-achse repeated werden.
    Jedoch überlappen sich dann die beiden Images, da sich ja dann beide über die gesamte Länge ausstrecken.
    [Blockierte Grafik: http://img819.imageshack.us/img819/6004/unbenannt1hw.jpg]

  • Hey,

    eine weitere Möglichkeit währe:

    Quellcode

    1. <html>
    2. <div id="header">
    3. <div id="header_content">
    4. <!--> Content <-->
    5. </div>
    6. <div>
    7. <html>

    Quellcode

    1. #header {
    2. width:100%;
    3. margin:0px;
    4. padding:0px;
    5. border:1px solid #000;
    6. background:url(background.jpg);
    7. background-position:center;
    8. }
    9. #header_content {
    10. width:900px;
    11. margin:0 auto;
    12. }
    Alles anzeigen


    Du hättest dann nur ein Bild mit einer Breite von z.B. 1082px (Bildschirme die eine höhere Auflösung haben, bekommen rechts & links weise Ränder. Aber das kommt sehr selten vor.).

    Die Frage ist hier die Performance:
    Ist es schneller, eine Datei zu übertragen oder mehrere kleine Datei. Es gibt ja immer einen gewissen "Overhead" da fällt z.B. der Verbindungsaufbau und die Paketlaufzeit mit rein.
    Oft ist es einfacher eine große Datei zu verwende als viele kleine Dateien für die jeweils eine neue Verbindung zum Server aufgebaut werden muss.
    Chrome kann das ja wunderbar analysieren.
    Du kannst ja austesten was schneller ist:
    - viele kleine Dateien zu laden, oder
    - eine große Datei zu laden.

    Ich habe festgestellt das es oft sinnvoller/schneller ist, Grafiken zusammenzufassen und dann ggf. mittels CSS anzupassen (nur teile der Grafik sichtbar machen).
    Bsp.: Google: google.de/images/srpr/nav_logo27.png
    My lovely mister singing club...