Hallo!
Omdat ik afgelopen 2 weken goed ziek ben en ik me normale werk niet kan doen probeer ik onze website te vernieuwen en ben begonnen met een kaal documentje,
nu ben ik erg nieuw in html maar het is boeiend
Nu heb ik het volgende probleem, ik wil een rollover/swap image gebruiken in mijn menu links mijn vraag is wat is de beste manier hiervoor?
Ik heb veel oplossingen gezien maar mijn afbeelding geeft me een handicap omdat het om een transparante afbeelding is.
heb veel zelf gerommeld maar kom er niet uit.
En als de image werkt zoek ik nog een oplossing om text te centeren in de image...
En Als er eventuele fouten of opmerkingen zijn laat het me graag weten!
Hier mijn Html & CSS
De CSS:
Omdat ik afgelopen 2 weken goed ziek ben en ik me normale werk niet kan doen probeer ik onze website te vernieuwen en ben begonnen met een kaal documentje,
nu ben ik erg nieuw in html maar het is boeiend
Nu heb ik het volgende probleem, ik wil een rollover/swap image gebruiken in mijn menu links mijn vraag is wat is de beste manier hiervoor?
Ik heb veel oplossingen gezien maar mijn afbeelding geeft me een handicap omdat het om een transparante afbeelding is.
heb veel zelf gerommeld maar kom er niet uit.
En als de image werkt zoek ik nog een oplossing om text te centeren in de image...
En Als er eventuele fouten of opmerkingen zijn laat het me graag weten!
Hier mijn Html & CSS
HTML:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>nieuwe site</title>
<link href="style/style.css" rel="stylesheet" type="text/css">
<script language="javascript">
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
</script>
</head>
<body>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : '{XXXXXXXXXXX}',
xfbml : true,
version : 'v2.0'
});
};
(function(d, s, id){
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {return;}
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/nl_NL/sdk.js#xfbml=1&version=v2.0";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
<div id="outside_wrapper">
<div class="Header"><img src="Images/Banner.jpg" width="2000" height="350" alt="banner"></div>
</div>
<div id="wrapper">
<div id="center">
<div id="left">
<div id="menu">
<ul class="menu">
<li><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('menu','','Images/menu/menuvimage2.gif',1)"><img src="Images/menu/menuimage1.gif" width="150" height="83"></a></li>
<li><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('menu','','Images/menu/menuvimage2.gif',1)"><img src="Images/menu/menuimage1.gif" width="150" height="83"></a></li>
<li><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('menu','','Images/menu/menuvimage2.gif',1)"><img src="Images/menu/menuimage1.gif" width="150" height="83"></a></li>
</ul>De CSS:
HTML:
@charset "utf-8";
#htm, body {
margin: 0;
padding: 0;
width: 100%;
background-repeat: no-repeat;
background-size: cover;
background-image: url(../Images/background.jpg);
background-repeat:repeat;
}
#outside_wrapper #Header {
width: 100%;
background-repeat: no-repeat;
background-size: auto;
}
#wrapper {
width: 1600px;
margin-right: auto;
margin-left: auto;
padding-left: 20px;
margin 0 auto -200px;
}
#wrapper #center {
padding-top: 50px;
height: 1500px;
width: 1500px;
}
#wrapper #center #contain {
height: 1200px;
width: 800px;
float: left;
display: block;
overflow: hidden;
position:relative;
margin-right: 10px;
background-image: url(../Images/text%20menu.png);
background-repeat: repeat-x;
padding-top: 0px;
}
#wrapper #center #menuright {
height: 1200px;
width: 350px;
display:block;
position: relative;
overflow:hidden;
}
#wrapper #center #menuright #Fbbox {
height: 620px;
display: block;
position: relative;
padding-top: 50px;
display: block;
overflow:hidden;
background-image: url(../Images/text%20menu.png);
}
#wrapper #center #menuright #Fbbox .fb-like-box {
width: 330px;
height: 500px;
left: 10px;
position:relative;
}
#wrapper #center #menuright #fbcommandbox {
}
#wrapper #center #menuright #sisopbezoek {
position: relative;
height: 400px;
margin-top: 40px;
display: block;
background-image: url(../Images/text%20menu.png);
}
#wrapper #center #left {
height: 950px;
width: 180px;
float: left;
margin-right: 30px;
display:block;
position:relative;
}
#wrapper #center #left #menu {
height: 950px;
width: 180px;
float: left;
padding-top: 30px;
background-image: url(../Images/text%20menu.png);
background-repeat: repeat-x;
}
#left #menu .menu {
list-style: none;
padding-left: 20px;
}
#left #menu .menu li {
}
#left #menu .menu li a img {
}
#wrapper #menutop {
height: 100px;
width: auto;
}
#footer {
background-color: #3C0;
position: relative;
margin-top: -50px;
height: 50px;
clear: both;
bottom:0;
}
.centerimage {
display: block;
margin-left: auto;
margin-right: auto;
padding-top: 50px;
position: relative;
}
.divcenter {
margin-left: auto;
margin-right: auto;
width: 8em;
}
.textcenter {
text-align: center;
font-family: Verdana, Geneva, sans-serif;
}
.textmenu {
position: absolute;
margin: auto;
display: block;
vertical-align: middle;
}
h1 {
font-family: Verdana, Geneva, sans-serif;
font-size: 25px;
margin-top: 5px;
}
