✔ transparente Navigation und runde Ecken

S

Superdok

Erfahrenes Mitglied
Hi,
ich versuche mich gerade wieder an eine Naviagtion, die allerdings transparent sein sollte und runde Ecken haben sollte. Als kleine Vorschau: Sie soll ungefähr so ausschauen am Ende
http://www.abload.de/image.php?img=testsaiv.jpg
Durch die Transparenz soll also der der Hintergrund durchscheinen und die Naviagtion soll runde Ecken haben.
Die beiden .pngsfür die Runden Ecken habe ich auch mal hochgeladen
nav_leftn99b.png

nav_rightdxk0.png

Nun ja ich hab mal angefangen, dacht erst es ist schon nicht alzu schwer, aber dann bin ich auf ein Problem gestossen. Erst einmal mein Code
Html:
HTML: 
[...]
<div id="header">
      <div id="navigation">
        <ul>
          <li><a href=""><span>Verlinkung 1</span></a></li>
          <li><a href=""><span>Verlinkung die 2.</span></a></li>
          <li><a href=""><span>Nummer 3</span></a></li>
          <li><a href=""><span>Die 4.</span></a></li>
        </ul>
      </div>
    </div>
[...]

CSS:
Code: 
#header {
	background-image: url('images/head.jpg');
	height: 30px;
	padding-left: 100px;
	padding-top: 145px;
}
#navigation {
	height: 30px;
}
#navigation ul {
	float: left;
	list-style-type: none;
	margin:0;
	padding: 0;
}
#navigation li {
	margin-left: 20px;
	float:left;
}
#navigation li a {
	display:block;
	color:#FFFFFF;
	font-size: 13px;
	background: url('images/nav_left.png') no-repeat left top;
 filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=crop src=’http://www.tutorials.de/forum/images/transparent.png’);
	padding: 5px 0 10px 5px;
	text-decoration: none;
}
#navigation li a span {
	background: url('images/nav_right.png') no-repeat right top;
	height: 30px;
	padding: 5px 15px 10px 10px;
}
Prinzipiell bin ich gar nicht so weit vom Ziel entfernt,allerdings schon noch ein kleines Stück. Der Code oben sieht zwar ungefähr so aus, wie ichs will, aber die rechte Seite leider nicht
http://www.abload.de/image.php?img=test2wan9.jpg

Würde ich keine Transparenz benutzen, könnte man die Überlappung nicht erkennen. Geht sowas überhaupt ohne Weteres? Also Transparnz und runde Ecken bei einer Navigation?
Villeicht weiß jemand eine Antwort
 
Zuletzt bearbeitet:
Ok danke für die beiden Links, ich habe mich mal am ersten versucht, aber dadurch, dass die ganzen divs innerhalb eines li sinds, das wiederum formatiert wird, wurden die irgendwie schief angezeigt, außerdem war der Code vollkommen unleserlich danach, auch nach einrücken.
Es mag also sicherlich eine gute Möglichkeit sein, die aber 1. im IE 6 nicht richtig funktioniert, aber so wie ich das sehe nur sinnvoll, falls man wirklich eine vollkommen abgerundete variable Box braucht, bei mir soll ja nur am oberen Rand Ecken sein.

Die 2. Variante habe ich mir mal angeschaut und diese schaut für mich auf den ersten Blick ein wenig besser und auch besser strukturiert aus, als die 1. Variante. Allerdings habe ich nach deiner ersten Link und nach dem gescheiterten Versuch eine andere variante überlegt, welche funktioniert. Die 2. Möglichkeit habe ich also dann nicht mehr getestet.

In meinen Fall hat meine "Notlösung" geholfen, bei komplexeren Hintergrundbilder usw. wird das aber nicht gehen :)
Das Bild der linken durchsichtigen Navigation (das Längere) ist weiterhin ein .png, also durchsichtig, das rechte kleinere Bild der Navigation mit der rechten Runde oberen Ecke ist allerdings ein .jpg,hat also keine Transparenz, sondern hab als Hintergrund das Holz. Dadurch, dass das Holz ein Muster ist, fällt es auch bei genauem Hinschauen nicht auf, dass nur die linke Seite wirklich transparent ist.
Mit einem komplexen Hintergrund geht sowas mit Sicherheit nicht, aber bei mir zum Glück geht es.

Trotzdem Danke für die beiden Links, ich werde mal den 2. bei Gelegenheit noch probieren, ob ich sowas nutzen könnte, wenn ich erneut so etwas machen will...
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück