Beiträge von Icemine

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.

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?

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.

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