Blokken structuur kan het beter?

Status
Niet open voor verdere reacties.
damnsharp

damnsharp

Terugkerende gebruiker
Lid geworden
6 jan 2012
Berichten
1.394
Hoi!
Ik heb bij een website een blokken structuur zoals bijgevoegd voorbeeld plaatje gemaakt.
Vooral blok 4 was een uitdaging. Althans, met een position: absolute kreeg ik die goed voor mekaar.
Maar er zijn een paar dingen.

1. Omdat de site responsive is moet ik blok 4 bij diverse breakpoints breder of smaller maken. Dat is meer werk, wellicht kan dit handiger.
Bij mobiel zorg ik dat alle blokken 100% width hebben en blok 4 de position relative krijgt.

2. Als blok 1 en 2 meer content bevatten dan gaat blok 4 niet omlaag natuurlijk.

Plaatje:
content-blokken.JPG

JSFiddle

Hoe kan ik dit het beste aanpakken? Misschien toch vaste hoogtes voor blokken geven?

Thanks!
 
Hoi damnsharp,

Afgeleid van Bootstrap grid - alleen smartphone (xs) en tablet/pc (sm)
- één container direct onder body
- in een row zet je col(s)
- in een col zet je row(s)
- in een row zijn alle col(s) bij elkaar opgeteld 100%
- een col bestaat uit 12 stukken (col-xs-6 is dus 50%)
- xs is een smartphone; sm is hier een tablet én pc

HTML
Code: 
<body>
<div class="container">
   <div class="row">
      <div class="col col-xs-12 col-sm-6">
         <div class="row">
            <div class="col col-xs-6">
            </div>
            <div class="col col-xs-6">
            </div>
         </div>
         <div class="row">
            <div class="col col-xs-12">
            </div>
         </div>
      </div>
      <div class="col col-xs-12 col-sm-6">
      </div>
   </div>
</div>
</body>

CSS
Code: 
* {
   /* width/height altijd inclusief padding/border */
   -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
           box-sizing: border-box;
}
/* smartphone over volle breedte */
.container {
   margin: 0 auto;
}
/* tablet breakpoint en width niet aanpassen! */
@media (min-width: 768px) {
   .container { width: 750px; }
}
/* pc breakpoint en width mag je aanpassen */
@media (min-width: 992px) {
   .container { width: 970px; }
}
.col {
   /* minimaal 1px hoog voor als col leeg is */
   position: relative;
   float: left;
   min-height: 1px;
}
/* smartphone, tablet en pc */
.col-xs-6  { width: 50%; }
.col-xs-12 { width: 100%; }
/* afwijkend bij tablet en pc; breakpoint niet aanpassen! */
@media (min-width: 768px) {
   .col-sm-6  { width: 50%; }
   .col-sm-12 { width: 100%; }
}
/* clearfix row vanwege float bij col */
.row:before, .row:after {
   display: table;
   content: " ";
}
.row:after {
   clear: both;
}

Suc6. Have fun.
 
Laatst bewerkt:
Dank je wel @bron voor reageren! :thumb: Ik ga het straks lekker uitproberen en laat weten hoe het gaat.
 
Met jsfiddle geprobeerd en dummy content en dat loopt lekker! Thanks, ik zet de vraag op opgelost want vast vooruit nu ermee. :)
 
Status
Niet open voor verdere reacties.
Steun Ons

Nieuwste berichten

Terug
Bovenaan Onderaan