Voordat ik lightbox in mijn codes heb geplaatst werkte mijn CSS goed.
Maar lightbox werkte niet in mijn codes... dus heb ik mijn codes verwijderd. Ergens conflicteren ze blijkbaar.
Nu werkt mijn lightbox wel maar mijn CSS niet! :evil:
Het maakt ook niet uit of ik mijn CSS en die van lightbox samenvoeg of apart hou..
Kan iemand mij helpen??
HTML:
CSS:
Maar lightbox werkte niet in mijn codes... dus heb ik mijn codes verwijderd. Ergens conflicteren ze blijkbaar.
Nu werkt mijn lightbox wel maar mijn CSS niet! :evil:
Het maakt ook niet uit of ik mijn CSS en die van lightbox samenvoeg of apart hou..
Kan iemand mij helpen??
HTML:
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> invullen </title>
<meta name="keywords" content=" invullen " />
<meta name="description" content=" invullen" />
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
</head>
<body>
<div class="logo">
<img src="logo.jpg" alt="" align="top">
</div>
<div class="navigatie">
<div id="nav-menu">
<ul>
<li>
<a href="/" class="activex" >Home</a>
</li>
<li>
<a href="/" >Portfolio</a>
</li>
<li>
<a href="/" >Over Megin</a>
</li>
<li>
<a href="/" >Nieuws</a>
</li>
<li>
<a href="/" >Contact</a>
</li>
</ul>
</div>
</div>
<div class="blok">
<img src="blok.jpg" align="top">
</div>
<div class="content">
<img src="content.jpg">
</div>
<div class="section">
<h2>Portfolio</h2>
<div class="thumbnail">
<a href="afbeelding2.jpg" rel="lightbox[websites]" title="Dit werkt!Nu nog de afbeelding op het juiste formaat plaatsen."><img src="afbeelding2.jpg" width="95" height="95" BORDER=O alt="Plants: image 1 0f 4 thumb" /></a>
</div>
<div class="thumbnail">
<a href="afbeelding1_groot.jpg" rel="lightbox[websites]" title="Budofightshop - Nog niet online." ><img src="Afbeelding1_groot.jpg" width="95" height="95" BORDER=O alt="Websites: afbeelding 2 van 4 thumb" /></a>
</div>
<div class="thumbnail">
<a href="afbeelding3.jpg" rel="lightbox[websites]" title="The script preloads the next image in the set as you're viewing."><img src="afbeelding3.jpg" width="95" height="95" BORDER=O alt="Websites: afbeelding 3 van 4 thumb" /></a>
</div>
<div class="thumbnail">
<a href="afbeelding4.jpg" rel="lightbox[websites]" title="Press Esc to close"><img src="afbeelding4.jpg" width="95" height="95" BORDER=O alt="Plants: image 4 0f 4 thumb" /></a>
</div>
</div>
</body>
</html>
Code:
#lightbox{ position: absolute; left: 0; width: 100%; z-index: 100; text-align: center; line-height: 0;}
#lightbox img{ width: auto; height: auto;}
#lightbox a img{ border: none; }
#outerImageContainer{ position: relative; background-color: #fff; width: 250px; height: 250px; margin: 0 auto; }
#imageContainer{ padding: 10px; }
#loading{ position: absolute; top: 40%; left: 0%; height: 25%; width: 100%; text-align: center; line-height: 0; }
#hoverNav{ position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; }
#imageContainer>#hoverNav{ left: 0;}
#hoverNav a{ outline: none;}
#prevLink, #nextLink{ width: 49%; height: 100%; background-image: url(data:image/gif;base64,AAAA); /* Trick IE into showing hover */ display: block; }
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url(../images/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(../images/nextlabel.gif) right 15% no-repeat; }
#imageDataContainer{ font: 10px Verdana, Helvetica, sans-serif; background-color: #fff; margin: 0 auto; line-height: 1.4em; overflow: auto; width: 100% ; }
#imageData{ padding:0 10px; color: #666; }
#imageData #imageDetails{ width: 70%; float: left; text-align: left; }
#imageData #caption{ font-weight: bold; }
#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em; }
#imageData #bottomNavClose{ width: 66px; float: right; padding-bottom: 0.7em; outline: none;}
#overlay{ position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000; }
.section{
padding: 1.4em 0 3.2em 0;
overflow: auto;
width: 100%;
}
.first{ border-top: none; padding-top: 0; }
.thumbnail{
padding: 3px 3px 8px 3px;
float: left;
margin-right: 10px;
margin-bottom: 10px;
}
.caption{ font-size: 0.9em; padding-top: 0.2em ;
div.logo {
margin: 0px;
padding: 4px;
position: absolute;
text-decoration: none;
border-style: none;
}
div.blok {
margin: 5px;
padding: 0px;
float: left;
padding-left: 10px;
}
h1 {
text-decoration: none;
font-family:"Verdana", "Arial";
color: #b4bab9;
font-size: 30px;
position:relative;
top: 90px;
left: -970px;
}
h2 {
text-decoration: none;
font-family:"Verdana", Arial;
color: #494949;
font-size: 12px;
position:relative;
top: 80px;
left: -970px;
}
h3 {
text-decoration: none;
font-family:"Verdana", "Arial";
color: #b4bab9;
font-size: 30px;
position:relative;
top: 90px;
left: -970px;
}
h4 {
text-decoration: none;
font-family:"Verdana", Arial;
color: #494949;
font-size: 10px;
position:relative;
top: 80px;
left: -970px;
}
div.content {
margin: 5px;
padding: 0px;
float: left;
padding-left: 10px;
padding-top: -30px;
}
div.welkom {
margin: 0px;
padding: 0px;
float: center;
padding-left: 0px;
padding-top: 0px;
height: 100%;
}
Laatst bewerkt door een moderator:
