• Hallo
    In den vorhandenen Beiträgen habe ich leider keine Lösung zu meinem Problem finden könne.
    Ich habe den Container im Body zentriert, das geht auch bei verschiedenen Bildschirmgrößen.
    Fülle ich den Container mit Div-Bereichen, erscheint der Scrollbalken und ich muß den Container in die Mitte rücken,
    obwohl ich den Div "Seitenstreifen" mit Width auto versehen habe und dieser leer ist.
    Kann mir jemand Helfen?
    Beste Grüße
    <body>
    <div id="container">
    <h1>Juwelier und Goldschmiedeatelier in Leipzig</h1>
    <div id="firmierung">Firmierug</div>
    <div id="Navigation">Raum für den Inhalt von id "Navigation"</div>
    <div id="seitenbild">Seitenbild</div>
    <h2> GOLDSCHMIEDEATELIER GARCIA</h2>
    <div id="Seitenstreifen"></div>
    <div id="seitentext">Seitentext</div>
    <div id="fussnavigation">Fussnavigation</div>
    </div>


    </body>


    css basisaufteilung
    @charset "utf-8";
    #firmierung {
    height: 215px;
    width: 650px;
    position: absolute;
    left: 500px;
    top: 118px;
    color: hsla(240,100%,50%,1);
    background-color: hsla(44,100%,97%,1);


    }
    #Seitenstreifen {
    height: 352px;
    position: relative;
    top: 400px;
    text-align: center;
    width: auto;
    margin-right: auto;
    margin-left: auto;
    left: auto;
    right: auto;
    }


    #seitentext {
    background-color: hsla(44,100%,97%,1);
    height: 1500px;
    width: 960px;
    position: absolute;
    left: 500px;
    top: 800px;
    text-align: left;
    font-size: 16px;
    }
    #Navigation {
    background-color: hsla(340,100%,50%,1);
    height: 250px;
    width: 240px;
    position: absolute;
    left: 1220px;
    top: 80px;
    }


    #fussnavigation {
    height: 50px;
    width: 760px;
    position: absolute;
    left: 500px;
    top: 2300px;
    margin-right: auto;
    margin-left: auto;
    padding-right: 100px;
    padding-left: 100px;
    background-color: hsla(0,0%,100%,1);
    }


    #seitenbild {
    background-color: hsla(240,100%,90%,1);
    height: auto;
    width: 460px;
    position: absolute;
    top: 500px;
    left: 1000px;
    z-index: 1;
    }
    h2 {
    font-family: Arial, Helvetica, sans-serif;
    position: absolute;
    left: 510px;
    top: 692px;
    z-index: 1;
    color: #333333;
    font-weight: lighter;
    font-variant: small-caps;
    }
    h1 {
    font-size: 1.2em;
    text-indent: -2450px;
    }


    CSS Zentrierung
    @charset "utf-8";
    body {
    background-color: hsla(60,100%,67%,1);
    margin: 0px;
    height: 100%;
    width: 100%;
    padding: 0px;
    border-top-width: thick;
    border-right-width: thick;
    border-bottom-width: thick;
    border-left-width: thick;
    border-top-style: none;
    border-right-style: none;
    border-bottom-style: none;
    border-left-style: none;
    border-top-color: hsla(80,100%,12%,1);
    border-right-color: hsla(80,100%,12%,1);
    border-bottom-color: hsla(80,100%,12%,1);
    border-left-color: hsla(80,100%,12%,1);
    }
    #container {
    background-color: hsla(140,100%,75%,1);
    height: 2500px;
    width: 2000px;
    margin-top: 0px;
    margin-right: auto;
    margin-left: auto;
    position: relative;
    padding-left: 0px;
    padding-right: 0%;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 18px;
    color: hsla(270,100%,17%,1);
    text-align: center;
    }
    container zentriert sich im body und passt sich verschiedenen Bildschirmgrössen an

  • Hi, bin zwar auch nicht der Ober Guru,


    aber wie ich sehe, strebst Du erst einmal eine Grundstrukturierung an.
    Tippe, daß sich Dein Inhalt im Container abspielen soll. Das ist schon mal O.K.
    den body mit soviel css zu verzieren halte ich für falsch. Ein background-color oder background-image sollte da schön genügen.
    Breiten über 2000px sind ein absolutes no-go. Selbst ein 27-Zoll Bildschirm kommt meist mit 1920x1080 Pixeln daher. Also ist mit allem was kleiner ist, scrollen unumgänglich und nicht gern gesehen.
    Um es einigermaßen im Rahmen zu halten würde ich den Hauptcontainer zwischen 900- max 1200px Breite halten und die Höhe variabel gestalten.
    Grundsätzlich halte ich die o.g. css Datei für sehr überladen und unübersichtlich. Hast Du die selber geschrieben, oder stammt die von einem externen Programm?
    Falls Sie von einem externen Programm kommt, würde ich sie erstmal löschen und neu schreiben. Mit den wesentlich wichtigen Dingen anfangen, Hauptcontainer (Höhe,Breite,Hintergrundfarbe)
    und dan die inneren div's (Höhe, Breite, Hintergrundfarbe), mehr braucht es erstmal nicht, aber man kann schon eine Struktur erkennen und sehen wie sich das ganze Objekt verhält.


    Gruß Ralph

  • Hallo Ralf
    Dein Rat zur Containerbreite hat mich zu einem neuen Lösungsansatz geführt, das eigentliche Problem ist aber folgendes:
    Ich will einen Container estellen, in dem alle andern Elemente ligen und dieser soll sich mittig im Body ausrichten.
    Soweit geht alles gut.
    Der Seitenstreifen soll sich über die 960 Px hinaus über den gesamten Bildschirm verteilen und das ist das Problem.
    Versuche ich den Seitenstreifen im Container anzuordnen, zeigt sich, daß er den optisch nicht verlässt.
    Ordne ich den Seitenstreifen im body an, also auf gleicher Ebene wie den Container, sehe ich im Firefox nur den Container und keinen Streifen.
    Ich sende noch mal den vereifachten Quelltext, vielleicht kann jemand meinen Fehler erkennen.
    Beste Grüße Peter


    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <link href="Stylesheets/Zentrierung0.css" rel="stylesheet" type="text/css">
    </head>


    <body>
    <div id="Container">Raum für den Inhalt von id "Container"
    <div id="Seitenstreifen">Raum für den Inhalt von id "Seitenstreifen"</div>
    </div>
    </body>
    </html>


    css
    @charset "utf-8";
    body {
    height: 100%;
    width: 100%;
    background-color: hsla(240,100%,90%,1);
    }
    #Container {
    background-color: hsla(166,100%,44%,1);
    height: 2000px;
    width: 960px;
    margin-right: auto;
    margin-left: auto;
    position: relative;
    }
    #Seitenstreifen {
    background-color: hsla(60,100%,67%,1);
    height: 352px;
    width: 1200px;
    position: absolute;
    top: 400px;
    }

  • Ich weiß zwar nicht wie das genau aussehen soll, aber wenn ich Deine Daten lade, stört mich, daß der Seitenstreifen bündig mit dem Hauptcontainer anfängt und links nicht darüber
    herausragt. Wäre die u.g. CSS vielleicht ein Ansatz?


    CSS:


    @charset "utf-8";
    body {
    height: 100%;
    width: 100%;
    background-color: hsla(240,100%,90%,1);
    }
    #Container {
    background-color: hsla(166,100%,44%,1);
    height: 2000px;
    width: 960px;
    margin: 0 auto;
    }
    #Seitenstreifen {
    background-color: hsla(60,100%,67%,1);
    height: 352px;
    width: 1200px;
    top:50%; /*zentriert den div erstmal in die Bildschirmmitte*/
    left:50%; /*zentriert den div erstmal in die Bildschirmmitte*/
    position: absolute;
    margin-top: -126px; /*hiermit positionierst Du den div neu (ausgehend von der Bildschirmmitte aus)*/
    margin-left: -600px; /*hiermit positionierst Du den div neu (ausgehend von der Bildschirmmitte aus)
    halbe Werte von height und width ins minus gesetzt ist die Mitte. */
    }

  • Ralph_68: , hundebeinem:


    Bitte benutzt die im Forum dafür vorgesehenen Codeboxen. --> html-seminar.de/woltlab/attachment/478/

    Code
    [code=html]hier schreibe ich meinen html code herein, damit ihn andere im forum übersichtlich lesen können


    [/code]


    Code
    [code=css]und hier css-code ...

    [/code]


    Hallo Ralf
    Der Seitenstreifen soll sich über die 960 Px hinaus über den gesamten Bildschirm verteilen und das ist das Problem.
    Versuche ich den Seitenstreifen im Container anzuordnen, zeigt sich, daß er den optisch nicht verlässt


    Warum auch sollte der Seitenstreifen den Container verlassen? Das ist doch der Sinn von Containern, die Elemente "festzuhalten" ... ;)



    PS: ein gutgemeinter Rat: Vielleicht solltest du das ganze Layout nochmal überdenken. ;):thumbup::)

  • Danke für den Hinweis, daß mit den Code-Boxen kannte ich noch nicht.
    der Grund, warum der Seitenstreifen, der ja in den Hauptcontainer hineingesetzt wurde, dann wieder herausragen soll, erschließt sich mir auch nicht ganz.
    Aber gut! Machbar ist's ja.


    Gruß Ralph

  • Danke, es geht nach dieser Methode.
    mein css sieht nun so aus:

    CSS


    #Seitenstreifen {
    background-color: hsla(60,100%,67%,1);
    height: 352px;
    width: 1100px;
    position: absolute;
    top: 50%;
    margin-top: -320px;
    margin-left: -800px;
    left: 50%;
    padding-top: 0%;
    padding-left: 50%;

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!