kostenloser Webspace werbefrei: lima-city


CSS - DIV container automatisch an Seitengröße anpassen

lima-cityForumDie eigene HomepageHTML, CSS & Javascript

  1. Autor dieses Themas

    nightmare2407

    nightmare2407 hat kostenlosen Webspace.

    Hallo zusammen,

    ich benötige noch einmal Hilfe um meine Seite weiter zu bringen. Wenn ich im Moment hingehe und meine Seite groß und klein ziehe tag/rutschen">rutschen die Divs ineinander das soll nicht passieren. Wie kann ich das Problem einfach lösen?


    Danke
  2. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

  3. Ich verstehe das Problem nicht richtig... deine Seite schein zu funktionieren... da rutscht ja gar nichts ineinander.
    Meist du den Effekt, der durch das responsive-Design erzielt wird?

    Ich nehme an, es handelt sich um eine andere Seite:
    Wie positionierst du deine div's? Relativ oder absolut?
    Bei einer relativen Positionierung sollten die eigentlich nicht untereinander rutschen können... also nehme ich einmal an du positionierst die absolut.

    Absolute Positionierung solltest du eigentlich nicht unbedingt benutzen zum Aufbau einer Seite, bzw. nur gezielt für einzelne Elemente, die immer gleich positioniert werden sollen. Beispielsweise macht es Sinn, ein Menü immer am oberen Bildschirmrand anzuzeigen, auch wenn ein User auf der Seite nach unten scrollt.

    Relative Positionierung mit CSS:
    http://www.mediaevent.de/tutorial/css-position-absolute-relative.html

    Unter diesem Link findest du eine Erklärung, wie das mit der CSS-Positionierung genau funktioniert.
  4. Autor dieses Themas

    nightmare2407

    nightmare2407 hat kostenlosen Webspace.

    Den meisten Elementen die ich habe ist keine position direkt zugewiesen. Ich habe die meisten divs mit margin von den Seiten bewegt und habe wenn es sein musste relativ benutzt außer für das Menü wie du schon sagtest. Mir ist durchaus bewusst das ich manche sachen absolute setzen slollte und manche eben relativ. Ich habe halt echt nur das Problem wenn ich das Browser Fenster schmäler rutscht die linke in dir rechte navi und wenn ich im Browser zoome zerstückelt es die Seite von der größe.

    Ich werde mir deinen Link mal anschauen und morgen nochmal gucken ob ich es umgesetzt kriege. Ich versuche halt eine Lösung zu finden das die divs sich an sich net verändern aber kleiner und größer werden . Der Inhalt soll natürlich das gleiche machen und ja ansonsten gehe ich davon aus das wenn ich diese relative Positionierung mache sich alles divs sauber untereinander schieben und ich eine Seite habe die dann halt etwas gequetscht aussieht.

    Ich würde gerne Bilder und quelltext zeigen aber kann ich nicht da es Firmenintern ist und copxrights mit sich bringt .
  5. Ich wurde mal gerne ein Beispiel deines Codes sehen

    Das was du beschreibst ist wohl darauf zurückzuführen, dass du kein äusseres div hast mit einer festen Breite (width)

    <div style="width: 1004px; box-sizing: border-box;">
        <div style="width: 100%">Titel</div>
        <div>Inhalt</div>
    </div>


    Ich würde dies einmal probieren mit dem äusseren div-container
  6. Autor dieses Themas

    nightmare2407

    nightmare2407 hat kostenlosen Webspace.

    Guten Morgen,

    Du hast recht das ich keinen äußeren div container habe meine primären divs die alles beinhalten sind die Navi, der Header und der content, das würde also heißen wenn ich alles in einen container rein schmeiße das sich mein Inhalt anpasst wenn ich mit relative und min height usw arbeite?

    /*innerer-Seitenkontent*/
    #middle
    {
    background-color : #******;
    margin : 5%;
    width : 90%;
    position : relative;
    height : 1600px;
    border : 3px solid #abcdef;
    box-shadow : 5px 5px rgba(0,0,0,0.5);
    }

    so sieht mein middle aus im content hier ist dann sozusagen der Inhalt der Seite sichtbar weil ich die Navi auf jeder Seite haben möchte und sich nur die Mitte verändern soll aber das ist ja nicht mein Problem Ich habe halt nur die schwierigkeit das die navi in meinen Content also auch in den middle rutscht.

    /*äußerster-Rand*/
    #naviBorderL
    {
    width : 17.5%;
    position : absolute;
    margin-top : 1%;
    margin-left : 1%;
    }

    /*Navigationsbild*/
    #brand
    {
    hier ist noch die URL etc.
    width : 300px;
    height : 230px;
    }

    /*innerer-Navigationsrand*/
    #navLeft
    {
    width : 17.5%;
    margin-left : 1.5%;
    }

    /*Navigationsmenue*/
    #menue
    {
    margin-bottom : 0.5%;
    width : 323px;
    }


    Ich hoffe das hilft ein wenig
  7. hm... also ich würde das folgendermassen angehen:
    Ich habe den Code nicht getestet. Es kann sein, dass etwas nicht funktioniert...

    Style:
    nav, main, footer {
    width: 1004px;
    margin: 10px auto;
    }


    Html
    <nav>
      <a href="/html/">HTML</a> |
      <a href="/css/">CSS</a> |
      <a href="/js/">JavaScript</a> |
      <a href="/jquery/">jQuery</a>
    </nav>
    
    <main>
      <h1>Web Browsers</h1>
      <p>Google Chrome, Firefox, and Internet Explorer are the most used browsers today.</p>
    
      <article>
        <h1>Google Chrome</h1>
        <p>Google Chrome is a free, open-source web browser developed by Google,
        released in 2008.</p>
      </article>
    
      <article>
        <h1>Internet Explorer</h1>
        <p>Internet Explorer is a free web browser from Microsoft, released in 1995.</p>
      </article>
    
      <article>
        <h1>Mozilla Firefox</h1>
        <p>Firefox is a free, open-source web browser from Mozilla, released in 2004.</p>
      </article>
    </main>
    
    <footer>
      <p>Posted by: Hege Refsnes</p>
      <p>Contact information: <a href="mailto:someone@example.com">
      someone@example.com</a>.</p>
    </footer>


    Erklärung
    width: 1004px;
    setzt eine feste Breite der Container
    margin: 10px auto;
    setzt den margin oben und unten auf 10px und rechts & links auf auto, was eine horizontale Zentrierung zur Folge hat.

    mit html5 sind einige interessante neue Tags dazugekommen. informier dich doch etwas genauer unter folgenden Links.
    nav tag html5: http://www.w3schools.com/tags/tag_nav.asp
    main Tag html5: http://www.w3schools.com/tags/tag_main.asp
    article Tag html5: http://www.w3schools.com/tags/tag_article.asp
    footer Tag html5: http://www.w3schools.com/tags/tag_footer.asp
  8. Autor dieses Themas

    nightmare2407

    nightmare2407 hat kostenlosen Webspace.

    Hey Dankeschön,

    das hat gut geklappt und die Links helfen auch sehr. Ich bin ein Praktikant und muss ne Webseite designen ich bin froh das ihr mir so helft :)

  9. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?

Über lima-city

Login zum Webhosting ohne Werbung!