• De afgelopen dagen zijn er meerdere fora waarop bestaande accounts worden overgenomen door spammers. De gebruikersnamen en wachtwoorden zijn via een hack of een lek via andere sites buitgemaakt. Via have i been pwned? kan je controleren of jouw gegeven ook zijn buitgemaakt. Wijzig bij twijfel jouw wachtwoord of schakel de twee-staps-verificatie in.

Weer niet goed gekeurd

Status
Niet open voor verdere reacties.

markvelde

veldesign
Lid geworden
9 aug 2006
Berichten
818
Waarderingsscore
6
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
 
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;
}
}
 
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.
 
Hallo,

bedankt voor het meedenken, zal de uitslag delen :)
 
Leuk, succes gewenst.

Je kunt naar wens ook #article (ipv #amfi) linkermarge geven, het effect is hetzelfde.
 
Heb wel gemerkt dat je foto's niet proportioneel blijven bij vergroten/verkleinen van venster website.
 
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 🤔
 
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%;
    }
}
 
Bedankt voor je tijd.
Hoe kan ik nu controleren of de weergave goed is?
 
Je kunt het browserwindow verkleinen/vergroten en zo de pagina testen, of is dat niet wat je bedoelt?
 
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!!
 
Status
Niet open voor verdere reacties.
Steun Ons

Nieuwste berichten

Terug
Bovenaan