JeroenHulshof
Gebruiker
- Lid geworden
- 13 dec 2012
- Berichten
- 43
Hallo,
Ik had al een vraag over hoe ik de background 100% zou kunnen doen, en daar heb ik gewoon antwoord op gekregen en dat is verholpen, maar nu komt het volgende probleem:
Ik heb deze vraag denk ik al wel eens eerder gesteld, maar ben er niet uit gekomen.
Als ik op mijn 13" MacBook kijk, staat alles goed op de plek zoals ik het wil.
Ik heb op http://www.jeroenhulshof.nl/test een voorbeeld geplaatst met daarin 2 vakken. in 1 vak staat "Over mij", en het andere vak is Socialmedia.
Op mijn laptop staat alles goed naast elkaar. Maar op een televisie beeldscherm of een beeldscherm dat groter is dan 13" staat de social media balk wel op de zelfde hoogte, maar veel meer naar rechts. Dat is enorm lelijk want dan heb ik op een groter beeldscherm veel ruimte tussen Over mij en Socialmedia.
CSS:
Hopelijk weten jullie hoe ik dit fix
Ik had al een vraag over hoe ik de background 100% zou kunnen doen, en daar heb ik gewoon antwoord op gekregen en dat is verholpen, maar nu komt het volgende probleem:
Ik heb deze vraag denk ik al wel eens eerder gesteld, maar ben er niet uit gekomen.
Als ik op mijn 13" MacBook kijk, staat alles goed op de plek zoals ik het wil.
Ik heb op http://www.jeroenhulshof.nl/test een voorbeeld geplaatst met daarin 2 vakken. in 1 vak staat "Over mij", en het andere vak is Socialmedia.
Op mijn laptop staat alles goed naast elkaar. Maar op een televisie beeldscherm of een beeldscherm dat groter is dan 13" staat de social media balk wel op de zelfde hoogte, maar veel meer naar rechts. Dat is enorm lelijk want dan heb ik op een groter beeldscherm veel ruimte tussen Over mij en Socialmedia.
CSS:
Code:
@charset "UTF-8";
/* CSS Document */
body{
font-family: verdana;
margin: 0px auto;
position: relative;
width: 100%;
background-color: rgb(172, 172, 172);
background-repeat: repeat;
background-position: center center;
background-attachment: fixed;
}
#container{
width: 100%;
height: 100%;
margin: 0px auto;
}
#header{
width: 101%;
height: 116px;
margin-top: -21px;
margin-left: -10px;
background-image: url('./../images/bgheader.png');
background-repeat: repeat;
background-position: center center;
background-attachment: fixed;
font-family: verdana;
}
#logo{
width: 100px;
height: 100px;
margin-left: 61px;
margin-top: 32px;
position: absolute;
}
#nav{
float: right;
margin-top: 61px;
margin-right: 1px;
text-shadow: 0 1px 1px rgba(0,0,0,0.6);
}
ul {
list-style-type: none;
height: 80px;
width: 358px;
margin: auto;
}
ul li a:hover{
color: #CF2718;
}
ul a {
padding-right: 10px;
padding-left: 10px;
display: block;
line-height: 80px;
text-decoration: none;
font-family: Georgia, "Roboto", sans-serif;
font-size: 15px;
color: #FFF;
}
li {
float: left;
}
#content{
width: 740px;
min-height: 223px;
background-color: #FFF;
margin-top: 10px;
margin-left: 50px;
box-shadow: 2px 2px rgb(201, 201, 201);
position: absolute;
}
#contentbanner{
width: 772px;
margin-left: -19px;
height: 41px;
background-image: url('./../images/sprite.png');
margin-top: 29px;
}
#contentinfo{
width: 515px;
height: 23px;
margin-top: -15px;
margin-left: -90px;
color: #FFFFFF;
text-align: center;
cursor: pointer;
line-height: 30px;
text-shadow: 0 1px 1px rgba(0,0,0,0.6);
font-family: 'Roboto',sans-serif;
}
#socialmedia{
width: 375px;
height: 229px;
float: right;
margin-right: -350px;
background-color: #FFF;
margin-top: 10px;
box-shadow: 2px 2px rgb(201, 201, 201);
}
#socialmediabanner{
width: 370px;
margin-left: -11px;
height: 41px;
background-image: url('./../images/ssprite.png');
color: #FFF;
cursor: pointer;
text-align: left;
padding-left: 25px;
line-height: 30px;
font-family: 'Roboto',sans-serif;
}
#footer{
width: 100%;
height: 21px;
background-color: #CF2718;
margin-top: 100%;
text-align: center;
color: #FFF;
}Hopelijk weten jullie hoe ik dit fix
