Ik heb een container van 100% width en 100% height als achtergrond, om alles over de volledige schermbreedte te krijgen. Maar is mss niet nodig, kan ik evengoed tegen de body werken?
Ik heb ondertussen geleerd dat er voor verschillende schermresoluties, verschillend @media-queries dienen ingesteld te worden voor bepaalde elementen wanneer die niet goed staan. Daarnaast gebruik ik ook allemaal percentages voor de afmetingen.
Hieronder post ik mijn code voor de index-pagina.
Daar zit ik voorlopig met twee probleempjes:
1. De lettergrootte past zich niet mee aan, hoewel ik met em-afmetingen werk (of doe ik het fout?).
2. De twee ENTER-links onder de afbeelding krijg ik niet op één lijn gezet.
Iemand ideetjes?
Groetjes (code hieronder)
<code>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial scale-1.0">
<title>3D-architectuur_index</title>
<link href="Stylesheet_index.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="wrapper">
<div id="divlog">
<img src="Afbeeldingen/Logo3Dindex.jpg" alt="logo_3darchitectuur" class="Img_Index">
<a href="HTML/3D-architectuur_Home.htm" class="welkomstlink1">ENTER SITE</a>
<a href="HTML/3D-architectuur_Home.htm" class="welkomstlink2">ENTER SITE</a>
<p id="copyright">
3D - architectuur<br>
ir. architect Bart Baeken
<p id="linkJPopsdesign">
(website created by <a href="https://
www.linkedin.com/profile/view?trk=tab_pro&locale=en_US&id=13219065"; class="linkJPops" target="_blank">Jasper Verelst)</a>
</div>
</div>
</body>
</html>
html {
font-size:16px;
}
body {
width:100%;
height:100%;
font-family:"Helvetica Neue Light", Calibri Light, Futura Bk;
color:#979595;
background-color:white;
font-size:100%;
}
#wrapper {
position:absolute;
width:100%;
height:100%;
margin:0 auto;
background:white;
border:1px solid white;
font-size:100%;
}
/*
body:hover {
-webkit-transform: scale(1.1);
-ms-transform: scale(1.1);
transform: scale(1.1);
}
*/
#divlog {
display:block;
margin-top:15%;
margin-left:auto;
margin-right:auto;
width:50%;
height:50%;
border-width:;
border-style:;
border-radius:;
box-shadow:;
text-align:;
vertical align:;
}
.Img_Index {
width:100%;
height:auto;
}
.welkomstlink1:link {
text-decoration:none;
font-family:"Helvetica Neue Light", Calibri Light, Futura Bk;
color:#979595;
font-size:1.1875em;
margin-left:20%;
}
.welkomstlink2:link {
text-decoration:none;
font-family:"Helvetica Neue Light", Calibri Light, Futura Bk;
color:#979595;
font-size:1.1875em;
margin-left:68%;
}
/*
.DivWelkomstlink1 {
width:15%;
height:10%;
position:relative;
margin-left:31%;
margin-top:-5%;
}
.DivWelkomstlink2 {
position:relative;
margin-left:60%;
margin-top:-6%;
width:15%;
height:10%;
}
*/
.welkomstlink1:hover {
font-family:"Helvetica Neue Light", Calibri Light, Futura Bk;
color:#979595;
-webkit-transform: scale(1.1);
-ms-transform: scale(1.1);
transform: scale(1.1);
}
.welkomstlink2:hover {
font-family:"Helvetica Neue Light", Calibri Light, Futura Bk;
color:#979595;
-moz-transform: scale (1.1);
-webkit-transform: scale(1.1);
-ms-transform: scale(1.1);
transform: scale(1.1);
}
.welkomstlink1:active {
font-family:"Helvetica Neue Light", Calibri Light, Futura Bk;
color:#979595;
}
.welkomstlink2:active {
font-family:"Helvetica Neue Light", Calibri Light, Futura Bk;
color:#979595;
}
.welkomstlink1:visited {
font-family:"Helvetica Neue Light", Calibri Light, Futura Bk;
color:#979595;
}
.welkomstlink2:visited {
font-family:"Helvetica Neue Light", Calibri Light, Futura Bk;
color:#979595;
}
#copyright {
text-align:center;
margin-top:20%;
margin-left:auto;
margin-right:auto;
font-size:1em;
font-family:"Helvetica Neue Light", Calibri Light, Futura Bk;
color:#979595;
}
span:hover {
-moz-transform: scale (1.1);
-webkit-transform: scale(1.1);
-ms-transform: scale(1.1);
transform: scale(1.1);
}
/*
span {
font-family:"Helvetica Neue Light", Calibri Light, Futura Bk;
color:#979595;
display:block;
text-align:center;
margin-left:auto;
margin-right:auto;
margin-bottom:0;
font-size:1em;
}
*/
#linkJPopsdesign {
display:block;
font-family:"Helvetica Neue Light", Calibri Light, Futura Bk;
color:#979595;
text-decoration:none;
margin-top:1%;
text-align:center;
}
.linkJPops:link {
font-family:"Helvetica Neue Light", Calibri Light, Futura Bk;
color:#979595;
text-decoration:none;
}
.linkJPops:hover {
font-family:"Helvetica Neue Light", Calibri Light, Futura Bk;
color:#979595;
-moz-transform: scale (1.1);
-webkit-transform: scale(1.1);
-ms-transform: scale(1.1);
transform: scale(1.1);
text-decoration:none;
}
.linkJPops:active {
font-family:"Helvetica Neue Light", Calibri Light, Futura Bk;
color:#979595;
text-decoration:none;
}
.linkJPops:visited {
font-family:"Helvetica Neue Light", Calibri Light, Futura Bk;
color:#979595;
text-decoration:none;
}
</code>
