Vraag Weer niet goed gekeurd

markvelde

veldesign
Hallo,

opdracht ingeleverd bij LOI en wat ik als feedback terug krijg is dit:

(
Beste student, sommige elementen vallen net buiten je structuur bij het groter/kleiner maken van je desktop pagina. let vooral op de medium-kleine resoluties.
-karper valt boven de andere content items
- zoogdieren valt er net onder de ander categorie items
- het midden van de content elementen valt niet buiten het midden van de categorie elementen (brasem etc) )

Op mobiel, ipad en desktop getest en alles verschijnt perfect in scherm.
CSS aangepast in procenten maar volgens LOI komt het geheel niet goed uit in scherm.
Weet nu even niet meer wat ik moet doen. codes etc gecontroleerd en alles werkt.
Iemand een blik werpen op mijn site?

www.schoonheidssalonlabeauty.nl/test
 

maulem

Gevestigd lid
In de Bureaubladlay-out ingesteld:

#amfi margin-left: 2.5%;

In de Tabletlay-out:

#amfi margin-left: 1%;

In de Mobiele lay-out:

#amfi geen margin-left

Verder #blok_1 t/m #blok_6 consequent margin-top:1em; gegeven in alle media queries

In Mobiele lay-out voor #nav ingesteld: font-size: 0.8em;

CSS:
@charset "utf-8";
@import url("GermaniaOne_Regular/stylesheet.css");
@import url("A_Monumentottldccm/stylesheet.css");
/* Eenvoudige, dynamische media
   Opmerking: voor dynamische media moet u de hoogte- en breedtekenmerken voor de media verwijderen uit de HTML-code
   http://www.alistapart.com/articles/fluid-images/
*/
img, object, embed, video {
    max-width: 100%;
}
/* IE 6 biedt geen ondersteuning voor max-width en gebruikt standaard de breedte 100% */
.ie6 img {
    width: 100%;
}
/*
    Eigenschappen van dynamisch raster van Dreamweaver
    ----------------------------------
    dw-num-cols-mobile:        5;
    dw-num-cols-tablet:        8;
    dw-num-cols-desktop:    10;
    dw-gutter-percentage:    25;
    
    Geïnspireerd door "Responsive Web Design" van Ethan Marcotte
    http://www.alistapart.com/articles/responsive-web-design
    
    en "Golden Grid System" van Joni Korpi
    http://goldengridsystem.com/
*/

/* Mobiele lay-out: 480 px en lager. */



.gridContainer {
    margin-left: auto;
    margin-right: auto;
    width: 87.36%;
    padding-left: 1.82%;
    padding-right: 1.82%;
}
#LayoutDiv1 {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
}
#header {
    clear: both;
    float: left;
    width: 100%;
    display: block;
}
#article {
    clear: both;
    float: left;
    width: 100%;
    display: block;
    margin-top: 1em;
    height: 100%;
    margin-bottom: 1em;
}
#amfi {
    clear: both;
    float: left;
    margin: 1%;
    width: 47%;
    height: 100px;
    display: block;
    border-radius: 25px;
    border: solid 1px;
   text-align: center;
    
}
#vogels {
    clear: none;
    float: left;
    margin: 1%;
    
    width: 47%;
    height: 100px;
    display: block;
    border-radius: 25px;
    border: solid 1px;
    text-align: center;
}
#vissen {
    clear: both;
    float: left;
    margin: 1%;
    width: 47%;
    height: 100px;
    display: block;
    border-radius: 25px;
    border: solid 1px;
    text-align: center;
}
#zoog {
    clear: none;
    float: left;
    margin: 1%;
    width: 47%;
    height: 100px;
    display: block;
    border-radius: 25px;
    border: solid 1px;
    text-align: center;
}
#footer {
    clear: both;
    float: left;
    margin-left: 0;
    margin-top:1em;
    width: 100%;
    display: block;
    font-size: 10px;
    text-align: center;
}
#nav {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
    height: 30px;
    text-align: center;
    margin-top: -40px;
    background-color: rgba(204,204,204,1);
    opacity: 0.5;
    margin-bottom: 1em;
    text-shadow: 2px 2px #FF0000;
    word-spacing: 0.5em;
    font-size: 0.8em;
    
}
#content {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
}
#blok_1 {
    clear: none;
    float: left;
    width: 45%;
    display: block;
    margin-top:1em;
    margin-left:0.7%;
    position: relative;
}
#blok_2 {
    clear: none;
    float: right;
    width: 45%;
    display: block;
    margin-top: 1em;
    margin-left: 1.5%;
    position: relative;
}
#blok_3 {
    clear: none;
    float: left;
    margin-left: 1.5%;
    display: block;
    width: 45%;
    margin-top: 1em;
    position: relative;
}
#blok_4 {
    clear: none;
    float: right;
    width: 45%;
    display: block;
    margin-left:0.7%;
    margin-top: 1em;
    position: relative;
}
#blok_5 {
    clear: both;
    float: left;
    width: 45%;
    display: block;
    margin-top: 1em;
    margin-left: 1.5%;
    position:relative;
}
#blok_6 {
    clear: none;
    float: right;
    margin-left: 1.5%;
    width: 45%;
    display: block;
    margin-top: 1em;
    position:relative;
}
#content #blok_6 .center {
    color: rgba(42,0,0,1);
}

#blok_1 img {
    width: 100%;
    height: 150px;
    
}
#blok_2 img {
    width: 100%;
    height: 150px;
}
#blok_3 img {
    width: 100%;
    height: 150px;
}
#blok_4 img {
    width: 100%;
    height: 150px;
}
#blok_5 img {
    width: 100%;
    height: 150px;
}
#blok_6 img {
    width: 100%;
    height: 150px;
}
.center {
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  text-align: center;
  font-size: 18px;
  color: rgba(255,255,255,1);
}


#footer p {
    font-family: "GermaniaOne Regular";
}
#verloop {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
    height: 50px;
    background-image: linear-gradient(black, white, black);
}


/* Tabletlay-out: 481 px tot 768 px. Neemt stijlen over van: mobiele lay-out. */

@media only screen and (min-width: 481px) {
.gridContainer {
    width: 90.675%;
    padding-left: 1.1625%;
    padding-right: 1.1625%;
}
#LayoutDiv1 {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
}
#header {
    clear: both;
    float: left;
    width: 100%;
    display: block;
}
#article {
    clear: both;
    float: left;
    width: 100%;
    display: block;
    height: auto;
    
}
#amfi {
    clear: both;
    float: left;
    width: 22.5%;
    margin:1%;
    margin-left: 1%;
    display: block;
    border-radius: 25px;
    border: solid 1px;
    text-align: center;
    text-decoration: none;
}
#vogels {
    clear: none;
    float: left;
    margin:1%;
    width: 22.5%;
    display: block;
    border-radius: 25px;
    border: solid 1px;
    text-align: center;
    text-decoration: none;
}
#vissen {
    clear: none;
    float: left;
    margin:1%;
    width: 22.5%;
    display: block;
    border-radius: 25px;
    border: solid 1px;
    text-align: center;
}
#zoog {
    clear: none;
    float: left;
    margin:1%;
    width: 22.5%;
    display: block;
    border-radius: 25px;
    border: solid 1px;
    text-align: center;
}



#footer {
    clear: both;
    float: left;
    margin-left: 0;
    margin-top:1em;
    width: 100%;
    display: block;
    text-align: center;
    font-size: 16px;
}
#nav {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
    text-align: center;
    height: 30px;
    margin-top: -40px;
    word-spacing:0.3em;
    margin-bottom: 1em;
    background-color: rgba(204,204,204,1);
    opacity: 0.5;
    padding-bottom: 1em;
    text-shadow: 2px 2px #FF0000;
    font-size:1em;
}
#content {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
}
#blok_1 {
    clear: none;
    float: left;
    width: 32%;
    display: block;
    margin-left: 0.7%;
    margin-top: 1em;
    position:relative;
}
#blok_2 {
    clear: none;
    float: left;
    margin-left:1.5%;
    width: 32%;
    display: block;
    margin-top: 1em;
    position:relative;
}
#blok_3 {
    clear: none;
    float: left;
    width: 32%;
    display: block;
    margin-left: 1.5%;
    margin-top: 1em;
    position:relative;
}
#blok_4 {
    clear: both;
    float: left;
    width: 32%;
    display: block;
    margin-left: 0.7%;
    margin-top: 1em;
    position:relative;
}
#blok_5 {
    clear: none;
    float: left;
    margin-left: 1.5%;
    width: 32%;
    display: block;
    margin-top: 1em;
    position:relative;
}
#blok_6 {
    clear: none;
    float: left;
    margin-left: 1.5%;
    width: 32%;
    display: block;
    margin-top: 1em;
    position:relative;
}
#blok_1 img {
    width: 100%;
    height: 200px;
}
#blok_2 img {
    width: 100%;
    height: 200px;
}
#blok_3 img {
    width: 100%;
    height: 200px;
}
#blok_4 img {
    width: 100%;
    height: 200px;
}
#blok_5 img {
    width: 100%;
    height: 200px;
}
#blok_6 img {
    width: 100%;
    height: 200px;
}
.center {
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  text-align: center;
  font-size: 18px;
  color: rgba(255,255,255,1);
 
}


#footer p {
    font-family: "GermaniaOne Regular";
}
#verloop {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
    height: 10px;
    background-image: linear-gradient(black, white, black);
}
}

/* Bureaubladlay-out: 769 px tot maximaal 1232 px.  Neemt stijlen over van: mobiele lay-out en tabletlay-out. */

@media only screen and (min-width: 769px) {
.gridContainer {
    width: 88.2%;
    max-width: 1232px;
    padding-left: 0.9%;
    padding-right: 0.9%;
    margin: auto;
}
#LayoutDiv1 {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
}
#nav {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
    text-align: center;
    height: 30px;
    margin-top: -40px;
    background-color: rgba(204,204,204,1);
    opacity: 0.5;
    margin-bottom: 1em;
    word-spacing: 5em;
    text-shadow: 2px 2px #FF0000;
    font-size: 1em;
}
#header {
    clear: none;
    float: left;
    width: 100%;
    display: block;
}
#article {
    clear: both;
    float: left;
    width: 100%;
    display: block;
    height: auto;
}
#amfi {
    clear: both;
    float: left;
    margin: 1%;
    margin-left: 2.5%;
    width: 22%;
    display: block;
    border-radius: 25px;
    border: solid 1px;
    text-align: center;
    text-decoration: none;
}
#vogels {
    clear: none;
    float: left;
    margin: 1%;
    width: 22%;
    display: block;
    border-radius: 25px;
    border: solid 1px;
    text-align: center;
}
#vissen {
    clear: none;
    float: left;
    margin:1%;
    width: 22%;
    display: block;
    border-radius: 25px;
    border: solid 1px;
    text-align: center;
}
#zoog {
    clear: none;
    float: left;
    margin:1%;
    width: 22%;
    display: block;
    border-radius: 25px;
    border: solid 1px;
    text-align: center;
}
#footer {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
    text-align: center;
    font-size: 16px;
    margin-top: 1em;
}
#content {
    clear: both;
    float: left;
    width: 100%;
    display: block;
}
#blok_1 img {
    width: 100%;
    height: 200px;
}
#blok_2 img {
    width: 100%;
    height: 200px;
}
#blok_3 img {
    width: 100%;
    height: 200px;
}
#blok_4 img {
    width: 100%;
    height: 200px;
}
#blok_5 img {
    width: 100%;
    height: 200px;
}
#blok_6 img {
    width: 100%;
    height: 200px;
}
#blok_1 {
    clear: none;
    float: left;
    width: 32.1%;
    display: block;
    margin-top: 1em;
    margin-left: 0.7%;
    position:relative;
}
#blok_2 {
    clear: none;
    float: left;
    width: 32.1%;
    display: block;
    margin-top: 1em;
    margin-left: 1.5%;
    position:relative;
}
#blok_3 {
    clear: none;
    float: left;
    width: 32.1%;
    display: block;
    margin-top: 1em;
    margin-left: 1.5%;
    position:relative;
}
#blok_4 {
    clear: both;
    float: left;
    width: 32.1%;
    display: block;
    margin-left: 0.7%;
    margin-top: 1em;
    position:relative;
}
#blok_5 {
    clear: none;
    float: left;
    margin-left: 1.5%;
    width: 32.1%;
    display: block;
    margin-top: 1em;
    position:relative;
}
#blok_6 {
    clear: none;
    float: left;
    margin-left: 1.5%;
    width: 32.1%;
    display: block;
    margin-top: 1em;
    position:relative;
}
.center {
    position: absolute;
    left: 0;
    top: 50%;
    width: 100%;
    text-align: center;
    font-size: 18px;
    color: rgba(255,255,255,1);
}


#footer p {
    font-family: "GermaniaOne Regular";
}

#verloop {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
    height: 20px;
    background-image: linear-gradient(black, white, black);
}
}
#nav ul {
    list-style-type: none;
    text-align: center;
    font-size: 1em;
}
#nav ul li {
    display: inline;
}
}
 

maulem

Gevestigd lid
Karper staat bij nader beschouwing nog steeds niet goed. In alle weergaven nu margin-left: 1.23%; gezet voor alle blokken #blok_1 t/m #blok_6. Verhelpt het probleem, dat ontstaat als het aantal images verspringt van 3 naar 2 items naast elkaar.

In Bureaubladlay-out #amfi margin-left: 3%; gezet. Zit wat meer in het midden.
 

maulem

Gevestigd lid
Leuk, succes gewenst.

Je kunt naar wens ook #article (ipv #amfi) linkermarge geven, het effect is hetzelfde.
 

artstudiog

Enthousiast
Heb wel gemerkt dat je foto's niet proportioneel blijven bij vergroten/verkleinen van venster website.
 

markvelde

veldesign
idd, wordt er niet mooier op.
Volgende feedback LOI
  • Bij een venstergrootte tussen de 1024px en 1280px worden de blokken in twee rijen van twee weergegeven en de plaatjes in twee rijen van drie.
dus nog aanpassen naar 2x2 blokken.

? Niet echt duidelijk!!

Alles bekeken in dreamweaver. Verschillende venstergroottes, verschillende browsers.
Ik kan even niets ontdekken of ik begrijp de opmerking niet 🤔
 

maulem

Gevestigd lid
Vermoedelijk moet dit worden beschouwd als een extra opdracht, waarbij media queries worden gebruikt om de blokken tussen de 1024px en 1280px in 2x2 weer te geven.

Ik heb de volgende CSS gemaakt.

CSS:
@charset "utf-8";
@import url("GermaniaOne_Regular/stylesheet.css");
@import url("A_Monumentottldccm/stylesheet.css");
/* Eenvoudige, dynamische media
   Opmerking: voor dynamische media moet u de hoogte- en breedtekenmerken voor de media verwijderen uit de HTML-code
   http://www.alistapart.com/articles/fluid-images/
*/
img, object, embed, video {
    max-width: 100%;
}
/* IE 6 biedt geen ondersteuning voor max-width en gebruikt standaard de breedte 100% */
.ie6 img {
    width: 100%;
}
/*
    Eigenschappen van dynamisch raster van Dreamweaver
    ----------------------------------
    dw-num-cols-mobile:        5;
    dw-num-cols-tablet:        8;
    dw-num-cols-desktop:    10;
    dw-gutter-percentage:    25;
    
    Geïnspireerd door "Responsive Web Design" van Ethan Marcotte
    http://www.alistapart.com/articles/responsive-web-design
    
    en "Golden Grid System" van Joni Korpi
    http://goldengridsystem.com/
*/

/* Mobiele lay-out: 480 px en lager. */



.gridContainer {
    margin-left: auto;
    margin-right: auto;
    width: 87.36%;
    padding-left: 1.82%;
    padding-right: 1.82%;
}

#LayoutDiv1 {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
}

#header {
    clear: both;
    float: left;
    width: 100%;
    display: block;
}

#article {
    float: left;
    width: 100%;
    margin-top: 1em;
    height: 100%;
    margin-bottom: 1em;
}

#amfi {
    clear: both;
    float: left;
    margin: 1%;
    width: 47%;
    height: 100px;
    display: block;
    border-radius: 25px;
    border: solid 1px;
    text-align: center;
}

#vogels {
    clear: none;
    float: left;
    margin: 1%;
    width: 47%;
    height: 100px;
    display: block;
    border-radius: 25px;
    border: solid 1px;
    text-align: center;
}

#vissen {
    clear: both;
    float: left;
    margin: 1%;
    width: 47%;
    height: 100px;
    display: block;
    border-radius: 25px;
    border: solid 1px;
    text-align: center;
}

#zoog {
    clear: none;
    float: left;
    margin: 1%;
    width: 47%;
    height: 100px;
    display: block;
    border-radius: 25px;
    border: solid 1px;
    text-align: center;
}

#footer {
    clear: both;
    float: left;
    margin-left: 0;
    margin-top: 1em;
    width: 100%;
    display: block;
    font-size: 10px;
    text-align: center;
}

#nav {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
    height: 30px;
    text-align: center;
    margin-top: -40px;
    background-color: rgba(204,204,204,1);
    opacity: 0.5;
    margin-bottom: 1em;
    text-shadow: 2px 2px #FF0000;
    word-spacing: 0.5em;
    font-size: 0.8em;
}

#content {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
}

#blok_1 {
    clear: none;
    float: left;
    width: 45%;
    display: block;
    margin-top: 1em;
    margin-left: 1.23%;
    position: relative;
}

#blok_2 {
    clear: none;
    float: right;
    width: 45%;
    display: block;
    margin-top: 1em;
    margin-left: 1.23%;
    position: relative;
}

#blok_3 {
    clear: none;
    float: left;
    margin-left: 1.23%;
    display: block;
    width: 45%;
    margin-top: 1em;
    position: relative;
}

#blok_4 {
    clear: none;
    float: right;
    width: 45%;
    display: block;
    margin-left: 1.23%;
    margin-top: 1em;
    position: relative;
}

#blok_5 {
    clear: both;
    float: left;
    width: 45%;
    display: block;
    margin-top: 1em;
    margin-left: 1.23%;
    position: relative;
}

#blok_6 {
    clear: none;
    float: right;
    margin-left: 1.23%;
    width: 45%;
    display: block;
    margin-top: 1em;
    position: relative;
}

#content #blok_6 .center {
    color: rgba(42,0,0,1);
}

#blok_1 img {
    width: 100%;
    height: 150px;
}

#blok_2 img {
    width: 100%;
    height: 150px;
}

#blok_3 img {
    width: 100%;
    height: 150px;
}

#blok_4 img {
    width: 100%;
    height: 150px;
}

#blok_5 img {
    width: 100%;
    height: 150px;
}

#blok_6 img {
    width: 100%;
    height: 150px;
}

.center {
    position: absolute;
    left: 0;
    top: 50%;
    width: 100%;
    text-align: center;
    font-size: 18px;
    color: rgba(255,255,255,1);
}


#footer p {
    font-family: "GermaniaOne Regular";
}

#verloop {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
    height: 50px;
    background-image: linear-gradient(black, white, black);
}


/* Tabletlay-out: 481 px tot 768 px. Neemt stijlen over van: mobiele lay-out. */

@media only screen and (min-width: 481px) {

    .gridContainer {
        width: 90.675%;
        padding-left: 1.1625%;
        padding-right: 1.1625%;
    }

    #LayoutDiv1 {
        clear: both;
        float: left;
        margin-left: 0;
        width: 100%;
        display: block;
    }

    #header {
        clear: both;
        float: left;
        width: 100%;
        display: block;
    }

    #article {
        float: left;
        width: 100%;
        margin-top: 1em;
        height: 100%;
        margin-bottom: 1em;
    }

    #amfi {
        clear: both;
        float: left;
        width: 22.5%;
        margin: 1%;
        display: block;
        border-radius: 25px;
        border: solid 1px;
        text-align: center;
        text-decoration: none;
        margin-left: 1%;
    }

    #vogels {
        clear: none;
        float: left;
        margin: 1%;
        width: 22.5%;
        display: block;
        border-radius: 25px;
        border: solid 1px;
        text-align: center;
        text-decoration: none;
    }

    #vissen {
        clear: none;
        float: left;
        margin: 1%;
        width: 22.5%;
        display: block;
        border-radius: 25px;
        border: solid 1px;
        text-align: center;
    }

    #zoog {
        clear: none;
        float: left;
        margin: 1%;
        width: 22.5%;
        display: block;
        border-radius: 25px;
        border: solid 1px;
        text-align: center;
    }



    #footer {
        clear: both;
        float: left;
        margin-left: 0;
        margin-top: 1em;
        width: 100%;
        display: block;
        text-align: center;
        font-size: 16px;
    }

    #nav {
        clear: both;
        float: left;
        margin-left: 0;
        width: 100%;
        display: block;
        text-align: center;
        height: 30px;
        margin-top: -40px;
        word-spacing: 0.3em;
        margin-bottom: 1em;
        background-color: rgba(204,204,204,1);
        opacity: 0.5;
        padding-bottom: 1em;
        text-shadow: 2px 2px #FF0000;
        font-size: 1em;
    }

    #content {
        clear: both;
        float: left;
        margin-left: 0;
        width: 100%;
        display: block;
    }

    #blok_1 {
        clear: none;
        float: left;
        width: 32%;
        display: block;
        margin-left: 1.23%;
        margin-top: 1em;
        position: relative;
    }

    #blok_2 {
        clear: none;
        float: left;
        margin-left: 1.23%;
        width: 32%;
        display: block;
        margin-top: 1em;
        position: relative;
    }

    #blok_3 {
        clear: none;
        float: left;
        width: 32%;
        display: block;
        margin-left: 1.23%;
        margin-top: 1em;
        position: relative;
    }

    #blok_4 {
        clear: both;
        float: left;
        width: 32%;
        display: block;
        margin-left: 1.23%;
        margin-top: 1em;
        position: relative;
    }

    #blok_5 {
        clear: none;
        float: left;
        margin-left: 1.23%;
        width: 32%;
        display: block;
        margin-top: 1em;
        position: relative;
    }

    #blok_6 {
        clear: none;
        float: left;
        margin-left: 1.23%;
        width: 32%;
        display: block;
        margin-top: 1em;
        position: relative;
    }

    #blok_1 img {
        width: 100%;
        height: 200px;
    }

    #blok_2 img {
        width: 100%;
        height: 200px;
    }

    #blok_3 img {
        width: 100%;
        height: 200px;
    }

    #blok_4 img {
        width: 100%;
        height: 200px;
    }

    #blok_5 img {
        width: 100%;
        height: 200px;
    }

    #blok_6 img {
        width: 100%;
        height: 200px;
    }

    .center {
        position: absolute;
        left: 0;
        top: 50%;
        width: 100%;
        text-align: center;
        font-size: 18px;
        color: rgba(255,255,255,1);
    }


    #footer p {
        font-family: "GermaniaOne Regular";
    }

    #verloop {
        clear: both;
        float: left;
        margin-left: 0;
        width: 100%;
        display: block;
        height: 10px;
        background-image: linear-gradient(black, white, black);
    }
}

/* Bureaubladlay-out: 769 px tot maximaal 1232 px.  Neemt stijlen over van: mobiele lay-out en tabletlay-out. */

@media only screen and (min-width: 769px) {

    .gridContainer {
        width: 88.2%;
        max-width: 1232px;
        padding-left: 0.9%;
        padding-right: 0.9%;
        margin: auto;
    }

    #LayoutDiv1 {
        clear: both;
        float: left;
        margin-left: 0;
        width: 100%;
        display: block;
    }

    #nav {
        clear: both;
        float: left;
        margin-left: 0;
        width: 100%;
        display: block;
        text-align: center;
        height: 30px;
        margin-top: -40px;
        background-color: rgba(204,204,204,1);
        opacity: 0.5;
        margin-bottom: 1em;
        word-spacing: 5em;
        text-shadow: 2px 2px #FF0000;
        font-size: 1em;
    }

    #header {
        clear: none;
        float: left;
        width: 100%;
        display: block;
    }

    #article {
        float: left;
        width: 100%;
        margin-top: 1em;
        height: 100%;
        margin-bottom: 1em;
        margin-left: 2%;
    }

    #amfi {
        clear: none;
        float: left;
        margin: 1%;
        width: 22%;
        display: block;
        border-radius: 25px;
        border: solid 1px;
        text-align: center;
        text-decoration: none;
    }

    #vogels {
        clear: none;
        float: left;
        margin: 1%;
        width: 22%;
        display: block;
        border-radius: 25px;
        border: solid 1px;
        text-align: center;
    }

    #vissen {
        clear: none;
        float: left;
        margin: 1%;
        width: 22%;
        display: block;
        border-radius: 25px;
        border: solid 1px;
        text-align: center;
    }

    #zoog {
        clear: none;
        float: left;
        margin: 1%;
        width: 22%;
        display: block;
        border-radius: 25px;
        border: solid 1px;
        text-align: center;
    }

    #footer {
        clear: both;
        float: left;
        margin-left: 0;
        width: 100%;
        display: block;
        text-align: center;
        font-size: 16px;
        margin-top: 1em;
    }

    #content {
        clear: both;
        float: left;
        width: 100%;
        display: block;
    }

    #blok_1 img {
        width: 100%;
        height: 200px;
    }

    #blok_2 img {
        width: 100%;
        height: 200px;
    }

    #blok_3 img {
        width: 100%;
        height: 200px;
    }

    #blok_4 img {
        width: 100%;
        height: 200px;
    }

    #blok_5 img {
        width: 100%;
        height: 200px;
    }

    #blok_6 img {
        width: 100%;
        height: 200px;
    }

    #blok_1 {
        clear: none;
        float: left;
        width: 32.1%;
        display: block;
        margin-top: 1em;
        margin-left: 1.23%;
        position: relative;
    }

    #blok_2 {
        clear: none;
        float: left;
        width: 32.1%;
        display: block;
        margin-top: 1em;
        margin-left: 1.23%;
        position: relative;
    }

    #blok_3 {
        clear: none;
        float: left;
        width: 32.1%;
        display: block;
        margin-top: 1em;
        margin-left: 1.23%;
        position: relative;
    }

    #blok_4 {
        clear: both;
        float: left;
        width: 32.1%;
        display: block;
        margin-left: 1.23%;
        margin-top: 1em;
        position: relative;
    }

    #blok_5 {
        clear: none;
        float: left;
        margin-left: 1.23%;
        width: 32.1%;
        display: block;
        margin-top: 1em;
        position: relative;
    }

    #blok_6 {
        clear: none;
        float: left;
        margin-left: 1.23%;
        width: 32.1%;
        display: block;
        margin-top: 1em;
        position: relative;
    }

    .center {
        position: absolute;
        left: 0;
        top: 50%;
        width: 100%;
        text-align: center;
        font-size: 18px;
        color: rgba(255,255,255,1);
    }


    #footer p {
        font-family: "GermaniaOne Regular";
    }

    #verloop {
        clear: both;
        float: left;
        margin-left: 0;
        width: 100%;
        display: block;
        height: 20px;
        background-image: linear-gradient(black, white, black);
    }


#nav ul {
    list-style-type: none;
    text-align: center;
    font-size: 1em;
}

    #nav ul li {
        display: inline;
    }

}

@media only screen and (min-width: 1024px) {
    #article {
        margin-left: 3%;
    }

    #amfi {
        width: 45%;
        clear: both;
    }

    #vogels {
        width: 45%;
        clear: none;
    }

    #vissen {
        width: 45%;
        clear: both;
    }

    #zoog {
        width: 45%;
        clear: none;
    }
}

@media only screen and (min-width: 1280px) {
    #amfi {
        clear: none;
        width: 22%;
    }

    #vogels {
        clear: none;
        width: 22%;
    }

    #vissen {
        clear: none;
        width: 22%;
    }

    #zoog {
        clear: none;
        width: 22%;
    }
}
 

maulem

Gevestigd lid
Je kunt het browserwindow verkleinen/vergroten en zo de pagina testen, of is dat niet wat je bedoelt?
 

markvelde

veldesign
in css6 kun je verschillende windows testen.
In alle browserwindows zag de pagina er zo uit zoals het volgens mij moest zijn.
Ook in verschilende resoluties zag de pagina er goed uit, zowel bureau, ipad, en mobiel.
Zal de code die u stuurde in mijn css verwerken.
bedankt!!
 
Bovenaan Onderaan