Killerclown
Gebruiker
- Lid geworden
- 30 dec 2007
- Berichten
- 181
Goeieavond,
Ik heb een pagina op mijn website die perfect getoond wordt in Firefox maar niet in Chrome. (afbeeldingen en knoppen staan over elkaar)
Na wat rondlezen op het internet, zou chrome problemen hebben met "display: flex;"
Weet iemand hoe ik dit kan oplossen?
Het is de enigste pagina waarin ik flex gebruik omdat ik anders de afbeeldingen niet mooi in het midden van het scherm krijg.
Webpagina: 404.html
HTML:
CSS:
Met dank.
Ik heb een pagina op mijn website die perfect getoond wordt in Firefox maar niet in Chrome. (afbeeldingen en knoppen staan over elkaar)
Na wat rondlezen op het internet, zou chrome problemen hebben met "display: flex;"
Weet iemand hoe ik dit kan oplossen?
Het is de enigste pagina waarin ik flex gebruik omdat ik anders de afbeeldingen niet mooi in het midden van het scherm krijg.
Webpagina: 404.html
HTML:
Code:
<div class="container">
<!-- HATCHETMAN -->
<div class="man"><img src="images/hatchetman/juggalo_logo.png" width="100" height="100"></div>
<!-- LOGO -->
<div class="logo"><img src="images/my_creations/404_page.png" width="600" height="300"></div>
<!-- HOME -->
<div class="home">
<a href="index.html"><button class="button404">HOME</button></a>
</div>
<!-- SEARCH -->
<div class="search">
<a href="homepage/search/search.html"><button class="button404">SEARCH</button></a>
</div>
<!-- CONTACT -->
<div class="contact">
<a href="homepage/contact/mailform.php"><button class="button404">CONTACT</button></a>
</div>
</div>
CSS:
Code:
.container {
width: 100%;
height: 100%;
padding-top: 5%;
display: inline-grid;
grid-template-columns: 9% 9% 9% 9% 9% 9% 9% 9% 9% 9% 9%;
grid-template-rows: 25% 25% 25% 25%;
grid-template-areas:
". . man man man man man man man . . "
". . logo logo logo logo logo logo logo . ."
". . . . home search contact . . . ."
;
}
/*GRID AREAS */
.home{
grid-area: home;
display: flex;
justify-content: center;
align-items: center;
}
.man{
grid-area: man;
display: flex;
justify-content: center;
align-items: center;
}
.search{
grid-area: search;
display: flex;
justify-content: center;
align-items: center;
}
.contact{
grid-area: contact;
display: flex;
justify-content: center;
align-items: center;
}
.logo{
grid-area: logo;
display: flex;
justify-content: center;
align-items: center;
}
/* MEDIAQUERIES GRID*/
.container:after {
content: "";
clear: both;
display: table;
}
Met dank.