Servus,
da ich zur zeit meine HP versuche neu zu gestalten, bin ich auf einen Fehler gestoßen der mir in den letzten Tagen den geraubt hat.
Zur erklärung: ich habe eine leiste (grafik) die mit schlatern (interne und externe links) versehen werden soll. Die interen sind einfach nur Schriflinks während die externe bildlinks sein sollen. Soweit so gut, nur schaffe ich es nicht das a.) die bildlinks auf die rechte seite zu legen b.) das sie nicht die funktion von den internen links übernehmen. Da diese animiert sind. Ich hoffe man kann folgen. Aber ich habe ja noch den Quellcode!!
//Quellcode navi//
<nav id="steuerungunten">
<ul>
<li><a href="xxx.htm">tes</a></li>
<li><a href="xxx.htm">test</a>
<li><a href="xxx.htm">test1</a></li>
<li><a href="xxx.htm">teste</a></li>
</ul>
<nav id="steuer2">
<p><a rel="nofollow" href="http://www.imdb.com/name/nm4125422/" target="_blank"><img src="bilder/imdb.png" width="50" height="24"
alt="IMDb" /></a></p>
</nav>
Alles anzeigen
//quellcode Style//
#steuerungunten {
/*background-color: red; */
background-image: url(bilder/balken_unten.png);
height: 32px;
border-top: 1px solid #5f5c16;
}
#steuer2 a img {
float: left;
margin-right: 20px;
margin-left: 250px;
}
#steuer2 a {
/*font-size: 11pt;*/
display: block;
width: 90px;
/*background: yellow; */
float: left;
/*border-left: 1px solid red; */
text-align: center;
line-height: 32px;
color: #FFF;
text-decoration: none;
}
#steuerungunten ul {
list-style-type: none;
}
#steuerungunten li {
display: inline;
}
#steuerungunten a {
font-size: 11pt;
display: block;
width: 90px;
/*background: yellow; */
float: left;
/*border-left: 1px solid red; */
text-align: center;
line-height: 32px;
color: #FFF;
text-decoration: none;
text-shadow: 0px 0px 0px #e6e6a8;
-webkit-transition: all 800ms ease-in;
-moz-transition: all 800ms ease-in;
-ms-transition: all 800ms ease-in;
-o-transition: all 800ms ease-in;
transition: all 800ms ease-in;
}
#steuerungunten a:hover {
background-color: rgba(255, 233, 0, 0.2);
-webkit-transition: all 400ms ease-in;
-moz-transition: all 400ms ease-in;
-ms-transition: all 400ms ease-in;
-o-transition: all 400ms ease-in;
transition: all 400ms ease-in;;
Alles anzeigen
Bin für jede Variante, Lösung zu haben.
Also jetzt sieht man ja was los ist!
hier noch ein Beispielbild !