Frage stellen
ich hab auf folgender seite eine kleines fotoalbum erstellt:
Galerie
Dies klappt mitlerweile auch ganz gut.
Nun wollte ich den bildern einen Link zum originalbild verpassen, allerdings bekommen die bilder nun einen UNGEWOLLTEN weißen rand... hat jemand ne idee wo der herkommen kann?
Habe schon per regel text-decoration sowie border ausgeschlossen...ohne erfolg.
hier der html teil
- Code: Alles auswählen
<ul id ="galerie">
<li><a href= "album/23.12.2009 Training/slides/img_1564.jpg"> <img src="album/23.12.2009 Training/slides/img_1564.jpg" "alt="" /></a></li>
<li><img src="album/23.12.2009 Training/slides/img_1565.jpg" "alt="" /></li>
<li><img src="album/23.12.2009 Training/slides/img_1566.jpg" "alt="" /></li>
<li><img src="album/23.12.2009 Training/slides/img_1567.jpg" "alt="" /></li>
<li><img src="album/23.12.2009 Training/slides/img_1568.jpg" "alt="" /></li>
<li><img src="album/23.12.2009 Training/slides/img_1569.jpg" "alt="" /></li>
</ul>
und hier die komplette css datei
- Code: Alles auswählen
* ##############################
Layout der Website: bachstelzen.net
#################################*/
/* ############################
Kalibrierung
############################*/
* { padding: 0; margin: 0; } /* Abstände resetten*/
html { /* erzwingt Scrollbar im Firefox */
height: 101%;
}
/*##############################
Allgemeine einstellungen
#############################*/
body {
background-color:#494544; /* Hintergrundfarbe */
color: white; /* Schriftfarbe */
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: medium; /* Schriftgröße */
}
h1 { font-size: 150%; }
h2 { font-size: 130%; }
a { text-decoration: none; } /* Unterstreichung entfernen */
a:link { color: white; }
a:visited { color: #cc6666; }
ul {
list-style-type: none;
}
iframe {
width: 100%;
min-height: 350px;
}
object {
background-color: #333333; /* Hintergrungfarbe für Youtube Video*/
}
/*################################
Bereiche - Allgemein
#############################*/
#wrapper {
background-color: #494544;
color: white;
width: 960px;
margin-top: 10px;
margin-right: auto; /* Abstand rechts */
margin-bottom: 10px;
margin-left: auto; /* Abstand links */
}
#header {
background-image: url('../images/body-bg_onlygrey.jpg');
background-repeat: repeat-x ;
color: black;
}
#header h1 {
color: white;
text-align: center;
font-family: "Arial";
padding: 5px;
letter-spacing: 2px
}
#banner {
padding-top: 30px;
}
#navhorizontal{
text-align: center;
padding-top: 20px;
padding-bottom: 20px;
background-image: url('../images/blacktile.gif');
background-repeat: repeat-x ;
background-position: center;
}
#navhorizontal li{
display: inline;
}
#navhorizontal ul {
padding-left: auto;
padding-right: auto;
}
#navhorizontal a {
color: white;
font-size: 140%;
padding-top: 3px;
padding-bottom: 1px;
padding-left:10px; /*Breite Navi Buttons*/
padding-right: 10px; /* Breite Navi Buttons*/
}
navhorizontal a:visited { color: silver; }
#navhorizontal a:hover,
#navhorizontal a:focus {
/*border-bottom: none;*/
background-image: url('../images/blackover.gif');
background-repeat: repeat-x ;
}
#navvertikal {
width: 200px;
float: left;
padding: 10px 0px 10px 30px;
margin: 20px 20px 20px 10px;
background-color: #333333;
}
#navvertikal a {
display: block;
width: 174px;
height: 33px;
padding-top: 14px;
padding-left: 30px;
/*background-color: gray;*/
background-image: url('../images/navileiste_button_hover.png');
background-repeat: no-repeat;
background-position: left;
color:#333333;
font-size: 80%;
}
#navvertikal a:hover,
#navvertiakl a:focus{
background-image: url('../images/navileiste_button_actvie.png');
font-weight: bold;
}
#navvertikal a.aktivepage { /* Aktive Seite hervorheben*/
margin-left: -20px;
background-image: url('../images/navileiste_button_actvie.png');
}
#navvertikal p{
font-size: 80%;
}
#inhalt{
width: 650px;
min-height: 350px;
margin-top: 20px;
margin-left: 270px;
padding: 20px;
background-color: #333333;
}
#inhalt h3 {
margin-bottom: 15px;
}
#inhalt p {
padding-left: 15px;
}
#inhalt a {
text-decoration: underline ;
color: white;
}
#inhalt a:hover{
border: 1px white dotted;
}
/* #################################
Mitglieder Ansicht
###############################*/
span.mitglieder img { /* BILDER neben Mitglieder Liste*/
position: absolute;
visibility: hidden;
right:30px; top:0px; width:250px; height:250px;
background-color: white;
}
a:hover span.mitglieder img{ /* BILDER neben Mitglieder Liste*/
visibility: visible;}
#inhalt .mitglieder a{
display:block;
padding:3px 0px 3px 0px;
text-decoration: none;
}
#inhalt .mitglieder a:hover {
border-style:none;
font-weight: bold;
}
.mitglieder li {
list-style-type:disc;
margin-left: 20px;
}
/*##############################
Kontakt Formular
############################*/
textarea {
margin-left:20px;
width: 70%;
height: 30%;
}
form {
height: 350px;
}
input {
margin-top: 5px;
margin-bottom: 5px;
margin-left: 20px;
}
/*###############################
Galerie
#######################*/
#galerie {
display: table;
}
#galerie li {
position:relative;
height:100px;
width: 100px;
margin:20px;
float:left;
text-align: center;
overflow:hidden;
}
#galerie img {
width:100px;
}
#galerie img:hover {
position:absolute;
left: -50px;
top: -50px;
width:200%;
z-index:1;
}
#galerie li:hover {
overflow:visible;
}
#galerie li a,
#galerie li a:hover,
#galerie li a:focus {
text-decoration:none;
border-style:none;
}
/* ###################################
Bereiche - Klassen
#############################*/
.clear {
clear:both;
}
img.thumb {
width: 150px;
height: 150px;
margin-right: 100px;
}
.floatleft {
float:left;
}
.floatright {
float: right ;
}
a.backlink {
display: block;
font-size: 80%;
padding-top: 10px;
border: 0 aqua none;
}
.backlink a:hover {
border-style: none;
}
.datum{
text-decoration: underline ;
font-size: 110%;
}
table.mitglieder {
width: 100%;
height: 20px;
border-top: 1px white solid ;
border-bottom: 1px white solid ;
}
table.mitglieder td{
padding: 5px 0px 5px 0px;
}
Hoffe auf eure Hilfe!
MFG
DBzwerg
