Martijn31
Gebruiker
- Lid geworden
- 6 sep 2009
- Berichten
- 362
Hallo Helpmij,
Ik ben bezig met een weergave voor zowel de mobiel als een normaal beeldscherm.
Bij de mobiele weergave worden de borders netjes onder elkaar geplaatst, maar de normale weergave worden de borders naast elkaar geplaatst.
hier een precies voorbeeld van wat er gebeurd:
Nu vraag ik me af hoe ik de borders onder elkaar uitgelijnt krijg, zodat ik ze breder kan maken
hier de css
Weet iemand de juiste oplossing? het is niet de bedoeling dat er iets veranderd aan de mobiele weergave. Alvast bedankt.
Ik ben bezig met een weergave voor zowel de mobiel als een normaal beeldscherm.
Bij de mobiele weergave worden de borders netjes onder elkaar geplaatst, maar de normale weergave worden de borders naast elkaar geplaatst.
hier een precies voorbeeld van wat er gebeurd:
Nu vraag ik me af hoe ik de borders onder elkaar uitgelijnt krijg, zodat ik ze breder kan maken
hier de css
Code:
/* SECTIONS */
.section {
clear: both;
padding: 0px;
margin: 0px;
}
/* KOLOMMEN OPSTARTEN */
.col {
display: block;
float:left;
margin: 1% 0 1% 1.6%;
}
.col:first-child { margin-left: 0; }
/* GROUPEREN */
.group:before,
.group:after { content:""; display:table; }
.group:after { clear:both;}
.group { zoom:1; /* For IE 6/7 */ }
/* OPBOUW VAN 4 RESPONSIVE KOLOMMEN */
.span_4_of_4 {
width: 100%;
}
.span_3_of_4 {
width: 74.6%;
}
.span_2_of_4 {
width: 49.2%;
}
.span_1_of_4 {
width: 23.8%;
}
body {
background-color:#BDBDBD; list-style-image: url("../afbeeldingen/webopmaak/blauwblokje.png");
}
A:link { text-decoration: none; color: #000000 }
A:visited { text-decoration: none; color: #990000 }
A:hover { text-decoration: none; color: #800040 }
A:active { text-decoration: none; color: #cc00FF }
div#afbeelding, #afbeelding1, #afbeelding2, #afbeelding3 {
background: #E0ECF8; url(../_img/para.jpg) no-repeat 0 0;
border-radius: 10px; float: left;
padding: 15px;
height: auto;
width: 185px;
border: 3px solid #A9D0F5;
}
#wrapper {
margin: 0 auto;
width: 1100px;}
#headerwrap {
width: 1100px;
float: inherit;
margin: 0 auto;}
#header {
height: 75px;
background: #FFFFFF;
border-radius: 20px;
border: 5px solid #ebebeb;
margin: 5px; }
#welkomsblokwrap {
width: 1100px;
float: left;
margin: 0 auto;}
#welkomsblok {
height: auto;
background: #FFFFFF;
border-radius: 10px;
border: 1px solid #FFFFFF;
margin: 1px; line-height: 20px; padding: 17px; }
#navigatiewrap {
width: 1000px;
float: left;
margin: 0 auto;
padding: 10px; overflow: hidden;}
#navigatie {
height: 30px;
background: #000000;
border-radius: 10px;
border: 5px solid #000000;
margin: 5px; color: white;}
#eersteblok {
height: 1000px;
background: #FFFFFF;
border-radius: 10px;
border: 1px solid #FFFFFF;
margin: 1px; line-height: 20px; padding: 17px; }
#tweedeblok {
height: 1000px;
background: #FFFFFF;
border-radius: 10px;
border: 1px solid #FFFFFF;
margin: 1px; line-height: 20px; padding: 17px; }
#derdeblok {
height: 1000px;
background: #FFFFFF;
border-radius: 10px;
border: 1px solid #FFFFFF;
margin: 1px; line-height: 20px; padding: 17px; }
#vierdeblok {
height: 1000px;
background: #FFFFFF;
border-radius: 10px;
border: 1px solid #FFFFFF;
margin: 1px; line-height: 20px; padding: 17px; }
#footerwrap {
width: 100%;
float: left;
margin: 0 auto;}
#footer {
height: auto;
background: #000000;
border: 5px solid #81BEF7;
margin: 5px; color: white; padding: 5px; }
/* GO FULL WIDTH BELOW 480 PIXELS */
@media only screen and (max-width: 1020px) {
.col { margin: 1% 0 1% 0%; }
.span_1_of_4, .span_2_of_4, .span_3_of_4, .span_4_of_4 { width: 100%; }
A:link { text-decoration: none; color: #000000 }
A:visited { text-decoration: none; color: #990000 }
A:active { text-decoration: none; color: #cc00FF }
div#afbeelding, #afbeelding1, #afbeelding2, #afbeelding3 {
background: #E0ECF8; url(../_img/para.jpg) no-repeat 0 0;
border-radius: 10px; font-size: 180%; line-height: 50px;
padding: 4%;
height: auto;
width: 90%;
border: 5px solid #A9D0F5;}
select {
width: 500px;
height: 130px;
font-size: 200%;
float : right;}
#rssOutput {
font-size: 140%;}
#welkomsblokwrap {
width: 1100px;
float: left;
margin: 0 auto;}
#welkomsblok {
background: #FFFFFF;
height: auto;
min-height: 160px;
border-radius: 25px;
border: 1px solid #FFFFFF; padding: auto; line-height: 30px;
margin: 2%; font-size: 120%; list-style-image: url("../afbeeldingen/webopmaak/blauwblokje1.png"); }
#header {
height: auto;
background: #FFFFFF;
border-radius: 20px; text-align: left;
border: 1px solid #FFFFFF;
margin: 30px; font-size: 100%; padding: 1%;}
#navigatie {
height: 40px;
background: #000000; font-size: 100%;
border: 5px solid #000000;
margin: 30px; color: white; padding: 1%; }
#eersteblok {
background: #FFFFFF;
height: auto;
border-radius: 25px;
border: 1px solid #FFFFFF; padding: auto; line-height: 30px;
margin: 2%; font-size: 160%; list-style-image: url("../afbeeldingen/webopmaak/blauwblokje1.png"); }
#tweedeblok {
background: #FFFFFF;
height: auto;
border-radius: 25px;
border: 1px solid #FFFFFF; padding: auto; line-height: 30px;
margin: 2%; font-size: 160%; list-style-image: url("../afbeeldingen/webopmaak/blauwblokje1.png"); }
#derdeblok {
background: #FFFFFF;
height: auto;
border-radius: 25px;
border: 1px solid #FFFFFF; padding: auto; line-height: 30px;
margin: 2%; font-size: 160%; list-style-image: url("../afbeeldingen/webopmaak/blauwblokje1.png"); }
#vierdeblok {
background: #FFFFFF;
height: auto;
border-radius: 25px;
border: 1px solid #FFFFFF; padding: auto; line-height: 30px;
margin: 2%; font-size: 160%; list-style-image: url("../afbeeldingen/webopmaak/blauwblokje1.png"); }
#footer {
height: auto;
background: #000000; font-size: 80%;
border: 10px solid #81BEF7;
margin: 5px; color: white; padding: 1%; }
Weet iemand de juiste oplossing? het is niet de bedoeling dat er iets veranderd aan de mobiele weergave. Alvast bedankt.
Laatst bewerkt: