Gridsystem

Icemine

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

<!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>

Alles anzeigen

HTML

/* 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%; }
}

Alles anzeigen

Kurokami

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

Icemine

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.

Kurokami

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

djheke

Etwas gekürzt.

HTML

<!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>

Alles anzeigen

Wobei Flexbox vielleicht besser wäre.

Icemine

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?

djheke

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;
}

Alles anzeigen

Icemine

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.

djheke

Zu 1. keine Ahnung. Ohne den gesamten Code kann dir keiner helfen.
Zu 2. so sparst du dir den .col100 Container.

MrMurphy

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:

HTML

<!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>

Alles anzeigen

Gruss

MrMurphy

Tags