Hallo Tachikoma,
Nur eins der Bilder ist jetz rechts, weil
ich grad testen wollt ob ich schon total
plemmplemm bin oder ob float right noch geht!
In Deinem CSS steht ein ganzer Haufen Quatsch...
Ich hab jetzt gerade keinen Webspace zur Hand, deswegen poste ich die wichtigsten Änderungen hier ins Forum.
Hab mir nicht alles durchgeschaut, aber jetzt funktioniert es wenigstens.
links.css:
/* CSS Document */
/* Die folgenden Container betreffen die linkSeite links.html */
#portfolio {
position: absolute 120px 10px 10px 10px;
width: 320px;
height: 168px;
background-color: transparent;
border: none;
}
#portfolio ul {
width: 490px;
height: 345px;
list-style-type: none;
}
#portfolio li {
border: none;
list-style-type: none;
}
#portfolio a.gallery, #container a.gallery:visited {
display: block;
height: 168px;
width: 30px;
background-color: transparent;
text-decoration: none;
margin: 0px;
text-align: left;
cursor: default;
float: left;
background: url(../pix/60to60.jpg);
margin-right:10px;
}
#portfolio a.gallery span {
position: absolute;
width: 0px;
height: 0px;
right:10px;
top:300px;
overflow: hidden;
}
#portfolio a.gallery:hover {
border: 0px;
margin: 0px 10px 0px 0px;
}
#portfolio a.gallery:hover img {
border: 0px;
}
#portfolio a.gallery:hover span {
position: absolute;
top: 120px;
right: 10px;
z-index: 100;
color: #CCCCCC;
width: 160px;
height: 345px;
border: 0px;
}
und die geänderten Ausschnitte aus der HTML-Datei:
<div id="portfolio">
<ul>
<li><a class="gallery" href="#nogo"><span><img src="pix/awhead.jpg" alt="Nicholas Bredel" /><br /> <h1>Mr. Bredel aka danick</h1><p>Ähnlich wie Motoko, nur wesentlich früher, entstand diese Illustrator "ClipArt" Umsetzung der Schauspielerin Eva Mendes. </p></span></a></li>
<li><a class="gallery" href="#nogo"><span><img src="pix/awhead.jpg" alt="Osthessen Gesoxx" /><br /> <h1>Osthessen Gesoxx</h1><p>Ähnlich wie Motoko, nur wesentlich früher, entstand diese Illustrator "ClipArt" Umsetzung der Schauspielerin Eva Mendes. </p></span></a></li>
<li><a class="gallery" href="#nogo"><span><img src="pix/awhead.jpg" alt="Logo & Signet Design | Illustrator" /><br /> <h1>Logo & Signet Design | Illustrator</h1><p>Das Logo ist das Herz der Corporate Identity und somit das wichtigste Element... sowie die Grundlage für das weitere Erscheinungsbild. Weniger ist dabei meistens mehr, deshalb aber nicht minder wertvoll.</p></span></a></li>
<li><a class="gallery" href="#nogo"><span><img src="pix/awhead.jpg" alt="Alpha" /><br /> <h1>Referenz</h1><p>Hier ist eine Beispielreferenz</p></span></a></li>
<li><a class="gallery" href="#nogo"><span><img src="pix/awhead.jpg" alt="Alpha" /><br /> <h1>Referenz</h1><p>Hier ist eine Beispielreferenz</p></span></a></li>
<li><a class="gallery" href="#nogo"><span><img src="pix/awhead.jpg" alt="Alpha" /><br /> <h1>Referenz</h1><p>Hier ist eine Beispielreferenz</p></span></a></li>
<li><a class="gallery" href="#nogo"><span><img src="pix/awhead.jpg" alt="Alpha" /><br /> <h1>Referenz</h1><p>Hier ist eine Beispielreferenz</p></span></a></li>
<li><a class="gallery" href="#nogo"><span><img src="pix/awhead.jpg" alt="Alpha" /><br /> <h1>Referenz</h1><p>Hier ist eine Beispielreferenz</p></span></a></li>
</ul>
</div>
Schau es Dir aber nochmal auf verschiedenen Browsern an und überprüfe Dein CSS im allgemeinen mal. Da ist ziemlich viel völlig unnütz.
Gruß,
small-step