Ergebnis 1 bis 10 von 10

Thema: Gridsystem

  1. #1
    HTML Newbie
    Registriert seit
    10.06.2015
    Beiträge
    4
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard Gridsystem

    Hallo,

    ich habe folgendes Problem:

    Ich habe eine Website erstellt mit einem Header, einer Topbar, einer fixbreiten Sidebar, einem flexible Contentbereich und einem Footer.

    Nun würde ich gerne innerhalb des Contentbereiches ein 3x3 Gridsystem integrieren, bekomme dies aber nicht hin. Kann mir da jemand weiter helfen? Das ganze sollte am Ende natürlich responsiv/skalierbar sein.

    Anbei der HTML/CSS code und ein Livebeispiel: http://85.25.67.244/tobias/vorlagen/test/

    HTML-Code:
    <!doctype html><!-- HTML5 :) -->
    <html>
    <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" href="./styles/style.css" type="text/css" />
    
    <title>Seitenname</title>
    </head>
    
    <body>
    <div id="wrap">
      <div id="header">
        <h1>Header</h1>
      </div>
      <!--header-->
      <div id="topbar"> Test </div>
      <!--topnavi-->
      <div id="contentwrap">
        <div id="sidebar">Sidebar</div>
        <!--sidebar-->
        <div class="section group">
        <div class="col span_1_of_3">
        This is column 1
        </div>
        <div class="col span_1_of_3">
        This is column 2
        </div>
        <div class="col span_1_of_3">
        This is column 3
        </div>
    </div>
        <div class="section group">
        <div class="col span_1_of_3">
        This is column 1
        </div>
        <div class="col span_1_of_3">
        This is column 2
        </div>
        <div class="col span_1_of_3">
        This is column 3
        </div>
    </div>
        <div class="section group">
        <div class="col span_1_of_3">
        This is column 1
        </div>
        <div class="col span_1_of_3">
        This is column 2
        </div>
        <div class="col span_1_of_3">
        This is column 3
        </div>
    </div>
        
        <div id="contentmain">Content</div>
        <!--contentmain--> 
      </div>
      <!--contentwrap--> 
      <div id="footer">Footer</div><!--footer-->
    </div>
    
    <!--wrap-->
    </body>
    </html>
    HTML-Code:
    /* Reset*/
    * {
        padding : 0;
        margin : 0;
        border: 0;
             box-sizing: border-box;
    }
    /* Body */
    body {
        font : normal normal 0.70em/1.6em Verdana, Tahoma, sans-serif;
        color: #454040;
        background : #ccc;
        text-align : left;
    
    }
    /* Generelle Einstellungen */
    a {
        color : #FFF;
        background-color : inherit;
        text-decoration : none;
    }
    a:hover {
        text-decoration : underline;
    }
    /* Wrap zum zentrieren der Seite */
    div#wrap {
        margin: 0px auto;
        width: 84%;
        max-width:1024px;
    }
    /* Aufbau */
    div#header {
        width: 100%;
        height: 150px;
        background-color: #2F2C2C;
        color: #ccc;
    }
    div#header h1 {
        position : relative;
        top : 20px;
        left : 20px;
        font : bolder 50px 'Trebuchet MS', Arial, Sans-serif;
        color : #EEEEEE;
    }
    div#topbar {
        width:100%;
        height:50px;
        background-color:#fff;
        border-top:5px solid #E7590B;
        border-bottom:5px solid #fff;
    }
    div#contentwrap {
        clear : both;
        width:100%;
        background-color:#E9E9E9;
        border-top:1px solid #ccc;
        padding:20px;
        }
    div#sidebar {
        float : left;
        height:450px;
        width:250px;
        background-color:#fff;
        border:1px solid #ccc;
        border-top:5px solid #E7590B;
        
    }
    div#contentmain {
        margin: 0 0 0 270px;
        height:450px;
        background-color:#fff;
        border:1px solid #ccc;
        border-top:5px solid #E7590B;
    }
    div#contentbox {
        background-color:#123456;
    }
    div#footer {
        text-align: center;
        color : #FFF;
        background : #2F2C2C;
        padding : 0;
        font-size : 88%;
        height:40px;
        width:100%;
        line-height:40px;
    }
    /*  SECTIONS  */
    .section {
        clear: both;
        padding: 0px;
        margin: 0px 0px 0px 270px;
    }
    
    /*  COLUMN SETUP  */
    .col {
        display: block;
        float:left;
        margin: 1% 0 1% 1.6%;
        background-color:#ccc;
    }
    .col:first-child { margin-left: 0; }
    
    /*  GROUPING  */
    .group:before,
    .group:after { content:""; display:table; }
    .group:after { clear:both;}
    .group { zoom:1; /* For IE 6/7 */ }
    
    /*  GRID OF THREE  */
    .span_3_of_3 { width: 100%; }
    .span_2_of_3 { width: 66.13%; }
    .span_1_of_3 { width: 32.26%; }
    
    /*  GO FULL WIDTH BELOW 480 PIXELS */
    @media only screen and (max-width: 480px) {
        .col {  margin: 1% 0 1% 0%; }
        .span_3_of_3, .span_2_of_3, .span_1_of_3 { width: 100%; }
    }
    Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
    Diese Diskussion ist älter als 90 Tage. Die darin enthaltenen Informationen sind möglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!

  2. #2
    Teeny
    Registriert seit
    02.06.2015
    Beiträge
    21
    Danke
    5
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Gridsystem

    Tschuldige -- hab den Contentwrap übersehen

    EDIT:
    Auf deinem Livetest habe ich mal das "Clear: Both" von den Sections weg gemacht und ein Float: Left eingefügt, das hat diese dann auch verschoben. Zu mir wurd mal gesagt man sollte immer auf den Float achten. Er ist wichtig.

    Gruß Kuro
    Geändert von Kurokami (10.06.2015 um 18:09 Uhr)

  3. #3
    HTML Newbie
    Themenstarter

    Registriert seit
    10.06.2015
    Beiträge
    4
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Gridsystem

    Hallo Kurokami,

    vielen Dank für dein Posting!
    Das Problem bei mir ist dann allerdings, dass es immer noch kein 3x3 Gridsystem ergibt. Auch das verschieben des Gridcodes in die #contentmain bringt keine Verbesserung leider.

    Edit: sry habs falsch gemacht, Ja das 3x3 Grid ist dann korrekt allerdings über allen anderen Containern und er soll ja quasie neben der Sidebar sein, wo der Content steht.
    Geändert von Icemine (10.06.2015 um 18:40 Uhr)

  4. #4
    Teeny
    Registriert seit
    02.06.2015
    Beiträge
    21
    Danke
    5
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Gridsystem

    Hi Icemine,

    ich bin mir nicht Sicher ob es funktioniert aber wenn du dem Contet über Metatags eine maximale breite zuweist und ihm float: left; zuweist und dem Grid auch dann sollte er Theoretisch gesehen auf Maxbreite gehen und daneben sein, somit wäre es Responsive, denke ich.

    Grüße ^^

  5. #5
    Meister(in)
    Registriert seit
    24.02.2007
    Beiträge
    460
    Danke
    0
    Bekam 47 mal "Danke" in 47 Postings

    Standard AW: Gridsystem

    Etwas gekürzt.
    Code:
    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Seitenname</title>
    
    <style>
    * {
     padding : 0;
     margin : 0;
     border: 0;
     box-sizing: border-box;
    }
    
    #wrap {
     width:90%;
     margin:0 auto;
     overflow:hidden;
     background:#ddd;
    }
    
    #header {
     background:#aaa;
     padding:30px;
    }
    
    #topbar {
     float:left;
     width:100%;
     background:#dad;
     min-height:50px;
    }
    
    #sidebar {
     width:30%;
     min-height:400px;
     float:left;
     background:#daa;
    }
    
    #content {
     width:70%;
     float:left;
     background:#aed;
    }
    
    #footer {
     padding:20px;
     background:#ada;
     clear:both;
    }
    
    .col33 {
     float:left;
     width:33.334%;
     background:#09c;
    }
    
    .col100 {
     float:left;
     width:100%;
     background:#a33;
    }
    
    p {
     margin:5px;
     padding:5px;
     background:#333;
     color:#fff;
    }
    </style>
    </head>
    
    <body>
    <div id="wrap">
    
      <div id="header"><h1>Header</h1></div>
      <div id="topbar"><p>Tobbar</p></div>
      <div id="sidebar"><p>Sidebar</p></div>
    
       <div id="content">
        <div class="col33"><p>This is column 1</p></div>
        <div class="col33"><p>This is column 2</p></div>
        <div class="col33"><p>This is column 3</p></div>
        <div class="col33"><p>This is column 1</p></div>
        <div class="col33"><p>This is column 2</p></div>
        <div class="col33"><p>This is column 3</p></div>
        <div class="col33"><p>This is column 1</p></div>
        <div class="col33"><p>This is column 2</p></div>
        <div class="col33"><p>This is column 3</p></div>    
       
        <div class="col100"><p>Content</p></div>     
       </div>
     
      <div id="footer"><p>Footer</p></div>
    
    </div>
    </body>
    </html>
    Wobei Flexbox vielleicht besser wäre.

  6. #6
    HTML Newbie
    Themenstarter

    Registriert seit
    10.06.2015
    Beiträge
    4
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Gridsystem

    Danke für deine Hilfe aber auch da ist es nich so exakt wie es soll. Die fixe Breite bei der Sidebar geht verloren und die is schon erwünscht. Sonst sieht das Layout ja irgendwann mega unschön aus.

    Was genau ist denn Flexbox?

  7. #7
    Meister(in)
    Registriert seit
    24.02.2007
    Beiträge
    460
    Danke
    0
    Bekam 47 mal "Danke" in 47 Postings

    Standard AW: Gridsystem

    Googel kann helfen. Auch zum Thema clearfix. Wenn man was will, ist lesen sehr hilfreich.
    Aber hier eine kleine Änderung.
    Code:
    #sidebar {
     width:300px;
     min-height:400px;
     float:left;
     background:#daa;
    }
    
    #content {
     width:calc( 100% - 300px );
     float:left;
    }
    
    /* Für den Fal, dass die Container unterschiedlich hoch sind */
    .col33:nth-child(3n+1) {
     clear:left;
    }
    Geändert von djheke (11.06.2015 um 10:16 Uhr)

  8. #8
    HTML Newbie
    Themenstarter

    Registriert seit
    10.06.2015
    Beiträge
    4
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Gridsystem

    Hallo djheke,

    deine Lösung is super! Mir war nicht bewusst, dass calc massenfähig geworden ist. Aber auch da habe ich ein Problem: so bald ich auf zu große Bildschirme gehe, skaliert der contentbereich und damit auch die cols nicht mit, die bleiben kleben. Zumindest, wenn ich das in meinem Editor simuliere (kann selber nur bis 1280*1024 gehen und da klappt das perfekt!). Hast du eine Ahnung woran das liegen könnte? Ich seh da keine Logik hinter.

    Außerdem verstehe ich nich so ganz was
    Code:
    /* Für den Fal, dass die Container unterschiedlich hoch sind */
    .col33:nth-child(3n+1) {
     clear:left;
    }
    bezweckt.

  9. #9
    Meister(in)
    Registriert seit
    24.02.2007
    Beiträge
    460
    Danke
    0
    Bekam 47 mal "Danke" in 47 Postings

    Standard AW: Gridsystem

    Zu 1. keine Ahnung. Ohne den gesamten Code kann dir keiner helfen.
    Zu 2. so sparst du dir den .col100 Container.
    Geändert von djheke (12.06.2015 um 09:12 Uhr)

  10. #10
    Großmeister(in)
    Registriert seit
    04.08.2009
    Beiträge
    569
    Danke
    0
    Bekam 66 mal "Danke" in 64 Postings

    Standard AW: Gridsystem

    Hallo,

    ich würde das mit Flexbox lösen.

    Die Abstände, Größen, Einheiten und Bezeichnungen kannst du an deine Seite anpassen. Ich finde zum Beispiel die HTML5-Container wesentlich übersichtlicher als die veraltete divitis:

    Code:
    <!DOCTYPE html>
    <html lang="de">
    <head>
       <meta charset="utf-8"><!-- Schließende Slashes sind unter HTML5 nicht erforderlich, aber erlaubt -->
       <title>Gridsystem 3x3 01</title>
       <meta name="description" content="HTML5, CSS3">
       <meta name="viewport" content="width=device-width, initial-scale=1.0">
       <!-- Um alte IE HTML5-tauglich zu machen -->
       <!--[if lt IE 9]>
          <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
       <![endif]-->
       <!-- Internes CSS ("type="text/css" ist unter HTML5 nicht erforderlich) -->
       <style>
       @media all {
          /* Neue HTML5-Elemente für ältere Browser als Block-Elemente übergeben */
          header, nav, main, aside, footer, section, article, figure, figcaption, audio, video {
             display: block;
          }
          * {
             -moz-box-sizing: border-box;
             box-sizing: border-box;
          }
          html {
             font-size: 100%;
          }
          body {
             padding: 0;
          }
          header,
          nav,
          aside,
          article,
          section,
          footer {
             padding: 0.5rem;
             border: 2px solid silver;
             border-radius: 0.5rem;
             margin: 0.5rem;
          }
          main {
             display: flex;
          }
          aside {
             width: 12rem;
          }
          article {
             display: flex;
             flex-wrap: wrap;
             flex: 1;
          }
          section {
             width: 31.3%;
             margin: 0.5rem 1%;
          }
       }
       @media all and (max-width: 900px) {
          main {
             flex-wrap: wrap;
          }
          aside,
          article {
             width: 100%;
          }
       }
       @media all and (max-width: 600px) {
          section {
             width: 100%;
          }
       }
       </style>
    </head>
    <body>
       <header>
          <h2>header</h2>
       </header>
       <nav>
          <h2>nav</h2>
       </nav>
       <main>
          <aside>
             <h2>aside</h2>
          </aside>
          <article>
             <section>
                <h2>section 01</h2>
             </section>
             <section>
                <h2>section 02</h2>
             </section>
             <section>
                <h2>section 03</h2>
             </section>
             <section>
                <h2>section 04</h2>
             </section>
             <section>
                <h2>section 05</h2>
             </section>
             <section>
                <h2>section 06</h2>
             </section>
             <section>
                <h2>section 07</h2>
             </section>
             <section>
                <h2>section 08</h2>
             </section>
             <section>
                <h2>section 09</h2>
             </section>
          </article>
       </main>
       <footer>
          <h2>footer</h2>
       </footer>
    </body>
    </html>
    Gruss

    MrMurphy
    Geändert von MrMurphy (12.06.2015 um 09:38 Uhr)

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •