So wie auf dem Bild vom Chrome sollten meine Buttons aussehen! Leider ist im Firefox NICHTS zu sehen.
Ich habe rausgefunden, dass wenn ich ins alt tag "fhfd" reinschreibe, das bild dann soviel platz wie "fhfd" braucht einnimmt - aber wie kann ich das ganze Bild zurück holen????
Die Bilder lade ich als background-image rein weil ich dann noch ein :hover image machen will.
Hier mein CSS:
#work{
width:100%;
height:100%;
padding-top: 10%;
}
#workicons{
width: 709px;
height: 685px;
margin: 0 auto;
}
.firsticon{
margin-bottom: 50px;
width: 200px;
height:195px;
box-shadow: 0px 1px 10px black;
-webkit-box-shadow: 0px 1px 10px black;
-moz-box-shadow:0px 1px 10px black;
}
.icon{
margin: 0 0 50px 50px;
width: 200px;
height:195px;
box-shadow: 0px 1px 10px black;
-webkit-box-shadow: 0px 1px 10px black;
-moz-box-shadow:0px 1px 10px black;
}
#illustrator{
background-image:url(../logos/illustrator_1.jpg);
}
#flash{
background-image:url(../logos/flash_1.jpg);
}
#indesign{
background-image:url(../logos/indesign_1.jpg);
}
#premiere{
background-image:url(../logos/premiere_1.jpg);
}
#photoshop{
background-image:url(../logos/photoshop_1.jpg);
}
#dreamweaver{
background-image:url(../logos/dreamweaver_1.jpg);
}
#uek{
background-image:url(../logos/uek.jpg);
}
#projekte{
background-image:url(../logos/projekte.jpg);
}
#foto{
background-image:url(../logos/foto.jpg);
}
Ich habe rausgefunden, dass wenn ich ins alt tag "fhfd" reinschreibe, das bild dann soviel platz wie "fhfd" braucht einnimmt - aber wie kann ich das ganze Bild zurück holen????
Die Bilder lade ich als background-image rein weil ich dann noch ein :hover image machen will.
HTML:
<div id="work"><h1>Work</h1>
<div id="workicons">
<a href="seiten/work.html"><img class="firsticon" alt="" id="illustrator"></a>
<a href="seiten/work.html#flash"><img class="icon" alt="" id="flash"></a>
<a href="seiten/work.html#indesign"><img class="icon" alt="" id="indesign"></a>
<a href="seiten/work.html#premiere"><img class="firsticon" alt="" id="premiere"></a>
<a href="seiten/work.html#photoshop"><img class="icon" alt="" id="photoshop"></a>
<a href="seiten/work.html#htmlcss"><img class="icon" alt="" id="dreamweaver"></a>
<a href="seiten/work.html#uek"><img class="firsticon" alt="" id="uek"></a>
<a href="seiten/work.html#projekte"><img class="icon" alt="" id="projekte"></a>
<a href="seiten/work.html#fotografie"><img class="icon" alt="" id="foto"></a>
</div>
</div>
Hier mein CSS:
#work{
width:100%;
height:100%;
padding-top: 10%;
}
#workicons{
width: 709px;
height: 685px;
margin: 0 auto;
}
.firsticon{
margin-bottom: 50px;
width: 200px;
height:195px;
box-shadow: 0px 1px 10px black;
-webkit-box-shadow: 0px 1px 10px black;
-moz-box-shadow:0px 1px 10px black;
}
.icon{
margin: 0 0 50px 50px;
width: 200px;
height:195px;
box-shadow: 0px 1px 10px black;
-webkit-box-shadow: 0px 1px 10px black;
-moz-box-shadow:0px 1px 10px black;
}
#illustrator{
background-image:url(../logos/illustrator_1.jpg);
}
#flash{
background-image:url(../logos/flash_1.jpg);
}
#indesign{
background-image:url(../logos/indesign_1.jpg);
}
#premiere{
background-image:url(../logos/premiere_1.jpg);
}
#photoshop{
background-image:url(../logos/photoshop_1.jpg);
}
#dreamweaver{
background-image:url(../logos/dreamweaver_1.jpg);
}
#uek{
background-image:url(../logos/uek.jpg);
}
#projekte{
background-image:url(../logos/projekte.jpg);
}
#foto{
background-image:url(../logos/foto.jpg);
}