nicht angemeldet
Contentload mit jquery - Problem Link auf Bild
Hallo liebes Board,
ich habe folgendes Problem. Wenn man unter Firefox auf everland.de und dann Media -> Bilder geht, decken die Links nicht die kompletten Bilder ab. Allerdings nur solange man ganz oben auf der Seite bleibt - scrollt man ein Stück runter funktioniert es wunderbar. Warum passiert das und wie löst man es?
Hier die Codes
Index:
<link rel="stylesheet" type="text/css" href="style.css">
<style type="text/css"></style>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".content").load("home.html");
$('.nav a').click(function(e){
e.preventDefault();
var site = $(this).data('site');
site = site + '.html';
if ($(this).data('site')== 'kontakt') {
document.getElementById("main").style.background ="rgba(230, 230, 250, 0)";
}
else{
document.getElementById("main").style.background ="rgba(230, 230, 250, .7)";
}
$(".content").load(site);
});
});
</script>
<script src="js/lightbox.min.js"></script>
<script type="text/javascript">
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-59489551-1', 'auto');
ga('send', 'pageview');
</script>
</head>
<body>
<div id="background">
<br>
<br>
<iframe src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.facebook.com/pages/Everland/173728986004549&layout=box_count&show_faces=true&width=450&action=like&colorscheme=light&height=80" scrolling="yes" frameborder="0" style="border:none; overflow:hidden; width:100%; height:80px; position: fixed; float: left; top:40%; left:3%;" allowTransparency="false"></iframe><style>.fbook{position: fixed; font-color:#ddd; top:-1668px; font-size:10;}</style></style><style>.fbook-style_map:initreaction=10false_attempt10-border</style> <style>closemap"init"if=fb_connect-start="25"check_bandwith</style>
<iframe allowtransparency="true" scrolling="no" frameborder="no" src="https://w.soundcloud.com/icon/?url=http%3A%2F%2Fsoundcloud.com%2Feverland-irish-folk&color=orange_white&size=64" style="position: fixed; top:60% ; left: 3%; width: 64px; height: 64px;float: left;"></iframe>
<div id="site">
<div id="header">
<div class="nav" id="logo"><a data-site="home" href="home.html" ><img src="media/everland.png"></a></div>
<div id="headmenu">
<div class="nav" id="links">
<ul style="padding-top: 40px;">
<li class="topmenu">
<a data-site="news" href="news.html" ><img src="media/news.png"></a>
</li>
<li class="topmenu">
<a data-site="everland" href="everland.html" ><img src="media/band.png"></a>
<ul>
<li class="submenu" ><a data-site="everland" href="everland.html">Everland</a></li>
<li class="submenu" ><a data-site="lena" href="lena.html">Lena</a></li>
<li class="submenu" ><a data-site="daniel" href="daniel.html">Daniel</a></li>
<li class="submenu" ><a data-site="tina" href="tina.html">Tina</a></li>
<li class="submenu" ><a data-site="maxi" href="maxi.html">Maxi</a></li>
</ul>
</li>
<li class="topmenu">
<a data-site="songs" href="songs.html" ><img src="media/media.png"></a>
<ul>
<li class="submenu" ><a data-site="bilder" href="bilder.html">Bilder</a></li>
<li class="submenu" ><a data-site="songs" href="songs.html">Musik</a></li>
</ul>
</li>
<li class="topmenu">
<a data-site="termine" href="termine.html" ><img src="media/termine.png"></a>
</li>
<li class="topmenu">
<a data-site="kontakt" href="kontakt.html" ><img src="media/kontakt.png"></a>
</li>
</ul>
</div>
</div>
</div>
<div class="content" id="main"></div>
<div class="nav" id="footer">
<a data-site="impressum" href="impressum.html" >Impressum</a>   <a data-site="links" href="links.html" >Links</a><br>
All rights reserved. <br>
Copyright by Everland.
</div>
</div>
</div>
</body></html>
Bilder:
<html>
<head>
<!--<script src="js/jquery-1.11.0.min.js"></script>-->
<link href="css/lightbox.css" rel="stylesheet" />
<link rel="stylesheet" type="text/css" href="style.css">
<style type="text/css"></style>
<script type="text/javascript">
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-59489551-1', 'auto');
ga('send', 'pageview');
</script>
</head>
<body>
<div id="bilder">
<table id="imagetable" border="0" width="100%">
<tr>
<td align="center"><a href="img/pic1.jpg" width="100%" height="100%" data-lightbox="everland"><img src="img/pic1.jpg"></a></td>
<td align="center"><a href="img/pic2.jpg" width="100%" height="100%" data-lightbox="everland"><img src="img/pic2.jpg" ></a></td>
<td align="center"><a href="img/pic3.jpg" width="100%" height="100%" data-lightbox="everland"><img src="img/pic3.jpg" ></a></td>
<td align="center"><a href="img/pic4.jpg" width="100%" height="100%" data-lightbox="everland"><img src="img/pic4.jpg" ></a></td>
<td align="center"><a href="img/pic5.jpg" width="100%" height="100%" data-lightbox="everland"><img src="img/pic5.jpg" ></a></td>
</tr>
</table>
</div>
</body>
</html>
css:
html,body{
margin:0px;
padding:0px;
color:black;
font-family: Calibri,Arial,sans-serif;
font-size: 12px;
}
#background{
background-image: url(media/Hintergrund.JPG);
background-attachment: scroll;
background-size: 100%;
background-repeat: no-repeat;
margin:0px;
padding:0px;
top:0px;
right: 0px;
min-height: 800px;
min-width: 1200px;
height:100%;
width: 100%;
}
#site{
width: 900px;
margin:0 auto;
margin-top: 0px;
}
#header{
width: 100%;
min-height: 120px;
margin:0;
padding:0;
overflow: visible;
}
#logo{
width: 300px;
padding: 0px;
text-align: center;
float: left;
overflow: visible;
}
#logo img{
left: 26px;
position: absolute;
float: left;
top: 0%;
z-index: 0;
width: 360px;
}
#headmenu{
background-image:url(media/menupic.png) ;
background-attachment: scroll;
background-size: 100% ;
background-repeat: no-repeat;
font-weight: bold;
font-size: 20px;
vertical-align: middle;
color:white;
float: right;
text-align: center;
overflow: visible;
width: 710px;
height: 150px;
position: absolute;
left: 393px;
top: 20px;
}
#links{
height: 100%;
vertical-align: middle;
text-align: center;
width: 100% ;
}
#links img{
text-align: center;
width: 100%;
}
/*dropdown menü */
#links ul {
list-style-type:none;
list-style-image:none;
margin:0px;
padding:0px;
}
#links li.topmenu {
float: left;
text-align: center;
width: 17% ;
margin-left: 1.5%;
}
.topmenu a{
float: left;
text-align: center;
}
.topmenu ul{
display:none;
}
.topmenu a, .submenu a {
color:black;
text-decoration:none;
margin:0;
border-collapse:collapse;
}
.submenu a{
font-size:13px;
position:relative;
clear: both;
width: 100%;
min-height: 20px;
background-image: url(media/menupic.png);
background-size: 100% auto;
background-repeat: no-repeat;
}
#links a:visited {
font-weight:bold;
color:black ;
text-decoration:none;
outline: none; }
#links a:hover, .topmenu.on a {
/* color:#4C4C4C;
background-color:#ffddbb !important; */
background-image: 0;
}
.topmenu:hover ul {
display:block;
z-index:500;
}
#links a:focus {
text-decoration:none;
outline: none; }
/*#links a:link {
font-weight:bold;
color:black ;
text-decoration:none; }
#links a:hover {
font-weight:bold;
color: green;
text-decoration:none;
outline: none; }
#links a:focus {
text-decoration:none;
outline: none; }
*/
/*dropdownmenü ende */
/*--------------Main-----------------*/
#main{
background: rgba(230, 230, 250, .7);
overflow: auto;
height:600px;
margin-top: 30px;
width: 100%;
z-index: 50;
clear: both;
min-width: 800px
}
/*------------Footer----------------*/
#footer{
background: rgba(230, 230, 250, .7);
margin-top: 30px;
height: auto;
text-align: center;
width: 100%;
bottom: 0px;
}
#footer a:focus {
text-decoration:none;
outline: none; }
#footer a:visited {
color:blue ;
text-decoration:none;
outline: none; }
/*-----------------------home----------*/
.home{
}
#home{
text-align: center;
width: 100% ;
height: 100% ;
font-family: calibri;
}
#pic{
background-attachment: scroll;
background-size: 100% auto;
margin-left: auto;
margin-right: auto;
margin-top: 20px;
background-image: url(media/pic.png);
background-repeat: no-repeat;
height:370px;
width: 530px;
}
#hometext{
margin-right: 60px;
margin-left: 60px;
font-size: 12pt;
line-height: 1.5;
}
/*----------------News----------------- */
#news{
text-align: center;
width: 100% ;
height: 100% ;
}
.news{
margin-left: 60px;
margin-right: 60px;
border-bottom: 3px dotted gray ;
padding:.5em;
text-align:justify;
font-size: 15px;
}
.news h1{
font-size: 16px;
font-weight: bold;
}
/*----------------Videos----------------- */
#videos{
width: 93%;
margin-right: 3%;
margin-left: 3%;
}
.video{
margin-top: 2%;
}
.vidtext{
margin-top: 2%;
display:none;
position: relative;
text-align: center;
}
#vid1:hover #vidtext1{
display: block;
}
#vid2:hover #vidtext2{
display: block;
}
#vid3:hover #vidtext3{
display: block;
}
#vid4:hover #vidtext4{
display: block;
}
#vid5:hover #vidtext5{
display: block;
}
/*--------------Bilder-------------------*/
#bilder{
width: 100%;
margin-top: 20px;
font-size: 0;
}
#bilder a:focus {
text-decoration:none;
outline: none; }
#imagetable{
margin-left: auto;
margin-right: auto;
}
#imagetable td{
width: 20%;
margin: 5px;
}
#imagetable img{
height: 100px;
}
/*-----------------------kontakt-----------*/
#kontaktl{
width: 49%;
height: 100%;
float: left;
background: rgba(230, 230, 250, .7);
}
#kontaktr{
width: 49%;
height: 100%;
float: right;
background: rgba(230, 230, 250, .7);
}
.kontakt{
margin-top: 30px;
margin-left: 20px;
margin-right: 20px;
}
/*-------------------Band------------------*/
#band{
text-align: left;
margin-top: 50px;
margin-right: 100px;
margin-left: 100px;
font-size: 12pt;
}
/*-----------Termine---------------*/
#termine{
width: 80%;
height: 100%;
margin-left: 10%;
margin-right: 10%;
}
.terminbox{
width: 100%;
}
.terminboxr{
min-width: 200px;
min-height: 200px;
width: 40%;
background-image: url(media/Box.png);
background-attachment: scroll;
background-size: 100% auto;
background-repeat: no-repeat;
margin-top: 30px;
float: right;
}
.terminboxl{
min-width: 200px;
min-height: 200px;
width: 40%;
background-image: url(media/Box.png);
background-attachment: scroll;
background-size: 100% auto;
background-repeat: no-repeat;
margin-top: 30px;
float: left;
vertical-align: middle;
}
.clear{ clear: both;
}
.ttextbox{
margin: 30px;
margin-top: 50px;
width: auto;
height: auto;
}
.ttextbox h1{
font-weight: bold;
font-size: 13px;
}
#terminalt{
padding-top: 40px;
width:100%;
border-bottom: 3px dotted gray ;
font-weight: bold;
font-size: 15px;
text-align: center;
color: gray;
}
/*-------------Links-----------------*/
#linkbox{
width: 100%;
margin-top: 20px;
margin-left: 20px;
font-size: 16px;
}
/*-----------Impressum---------------*/
#impressum{
margin-left: 60px;
margin-right: 60px;
}
#side{
width: 100%;
height: 100%;
}
Vielen Dank, liebe Grüße und frohe Ostern, Maxi
akzeptierte Antworten
Contentload mit jquery - Problem Link auf Bild
Bewertung: keine Bewertung
-
Hallo Maxiquester,
wenn du in deiner CSS Datei diesen Eintrag
#imagetable img { height: 100px; }entfernst, dann wird auch der Link über das komplett Bild gelegt.