✔ css Grafik mit Rundung

Status
Nicht offen für weitere Antworten.
spamerix hat gesagt.:
Kann mir einer sagen wo ich das her bekommen oder einen sehr guten ansatz geben?
Zum Vergrößern anklicken....
Werf einfach mal einen Blick in den Seitenquelltext (Ansicht -> Seitenquelltext anzeigen), darin findest du zum einen im Dokumentheader das erforderliche Stylesheet und zum anderen weiter unten innerhalb des DIVs #info den dazugehörigen HTML-Code für das Menü.

Für die wenigsten Beispiele bietet der Autor Stu Nicholls einen direkten Download an.

mfg Maik
 
Oh da in den Qulltext blicke ich ja garnicht durch da sind mehre css Datein.

So den html Code habe ich glaube ich.
<div id="wrap">
<ul id="flyout">
<li><a href="#nogo" class="nikon">Nikon<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<b></b>
<ul>
<li><a href="#nogo">Digital D2Xs</a></li>
<li><a href="#nogo">Digital D2Hs</a></li>
<li><a href="#nogo">Digital D200</a></li>
<li><a href="#nogo">Digital D80</a></li>

<li><a href="#nogo">Digital D40x</a></li>
<li><a href="#nogo">Digital Coolpix</a></li>
<li><a href="#nogo">SLR F6</a></li>
<li><a href="#nogo">SLR FM10</a></li>
<li><a href="#nogo">Wideangle</a></li>
<li><a href="#nogo">Telephoto</a></li>
<li><a href="#nogo">Teleconverters</a></li>
<li><a href="#nogo">Speedlights</a></li>
<li><a href="#nogo">Coolscan</a></li>

</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="#nogo" class="canon">Canon<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<b></b>
<ul>
<li><a href="#nogo">Digital IXUS</a></li>
<li><a href="#nogo">Digital EOS-1Ds</a></li>
<li><a href="#nogo">Digital EOS-5D</a></li>
<li><a href="#nogo">Digital EOS-30D</a></li>

<li><a href="#nogo">Digital EOS-400D</a></li>
<li><a href="#nogo">Powershot</a></li>
<li><a href="#nogo">Film EOS-300X</a></li>
<li><a href="#nogo">Film EOS-300V</a></li>
<li><a href="#nogo">Sureshot</a></li>
<li><a href="#nogo">Macro</a></li>
<li><a href="#nogo">Extenders</a></li>
<li><a href="#nogo">Speedlights</a></li>
<li><a href="#nogo">Motor Drives</a></li>

<li><a href="#nogo">Focusing Screens</a></li>

</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="#nogo" class="pentax">Pentax<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<b></b>
<ul>
<li><a href="#nogo">Optio A30</a></li>
<li><a href="#nogo">Optio T30</a></li>
<li><a href="#nogo">Optio S7</a></li>

<li><a href="#nogo">Optio W30</a></li>
<li><a href="#nogo">Digital K10D</a></li>
<li><a href="#nogo">Digital K110D</a></li>
<li><a href="#nogo">Pentax *istDL2</a></li>
<li><a href="#nogo">645NII</a></li>
<li><a href="#nogo">AF-540 FGZ</a></li>
<li><a href="#nogo">KB zoom</a></li>
<li><a href="#nogo">KB macro</a></li>

</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul>

<img src="p5000.jpg" alt="Nikon P5000" title="Nikon P5000" />
<p>The COOLPIX P5000 delivers the kind of advanced functions, ease of operation and outstanding image quality that enables you to capture images precisely as you intended.</p>
<p>A remarkable 10.0 megapixels of resolution combine with a 3.5x Zoom-Nikkor lens equipped with an optical Lens shift Vibration Reduction image stabilization system to give you the power to shoot everything in stunningly sharp detail, and a newly designed mode dial provides fast and easy access to the unlimited creative possibilities offered by P, S, A and M exposure modes.</p>
<p>Its advanced new image-processing engine optimizes performance and color reproduction and features enhanced noise reduction to preserve image quality when you shoot at the high end of its light sensitivity range, which extends up to ISO 3200*. Photographic versatility is further enhanced thanks to its optical viewfinder and the built-in accessory shoe that supports Nikon's advanced i-TTL flash control for external flashes.</p>
<a href="http://www.europe-nikon.com/product/en_GB/products/broad/1145/overview.html" class="nikon_link">Extract from the Nikon website</a>
</div>
Zum Vergrößern anklicken....

Jetzt fehlt nur noch die css aber da blicke ich leider nicht durch.

Kann mir da wer helfen bitte?
 
Zuletzt bearbeitet:
Anhand der beiden verwendeten ID-Bezeichner #wrap und #flyout für das Menü, lässt sich das dazugehörige Stylesheet doch problemlos von den übrigen unterscheiden.

mfg Maik
 
Also müssten das diese sein oder?

#wrap {width:660px; position:relative; background:#000; height:362px; padding:0 30px; color:#999; margin-left:25px;}
#wrap a.nikon_link, #wrap a.nikon_link:visited {color:#bcd; font-size:10px;}
#wrap a.nikon_link:hover {text-decoration:none;}

#flyout {font-size:11px; padding:0; margin:0; list-style:none; width:24px; height:360px; position:absolute; left:-25px;}
#flyout ul {padding:0; margin:0; list-style:none;}
#flyout li {display:block; width:24px; height:120px; background:#1c1c1c;}
#flyout li a {display:block; width:24px; height:120px; text-indent:-999px; text-decoration:none;}
#flyout li a.nikon {background:url(nikon_button.gif);}
#flyout li a.canon {background:url(canon_button.gif);}
#flyout li a.pentax {background:url(pentax_button.gif);}

#flyout table {position:absolute; border-collapse:collapse; top:0; left:0; z-index:100; font-size:1em;}
#flyout li {float:left; margin-bottom:1px;}
#flyout li ul {visibility:hidden; position:absolute; top:0; left:24px; width:400px; height:117px; border-left:1px solid #fff; padding-top:4px;}
#flyout li ul li {display:block; display:inline; width:100px; height:22px; border:0; margin:0 10px; background:transparent;}
#flyout li ul li a {text-indent:0; background:transparent; display:block; width:100px; height:22px; line-height:21px; color:#bbb; border-bottom:1px solid #555; text-decoration:none;}
#flyout li b {visibility:hidden; display:block; width:360px; height:120px; position:absolute; top:0; left:24px; background:#234; opacity:0.8; filter:alpha(opacity=80);}
* html #flyout li a:hover {position:relative; white-space:normal;}
* html #flyout li a:hover ul li a:hover {color:#000; background:#bcd;}
#flyout li:hover {position:relative;}
#flyout li:hover ul li a:hover {background:#bcd; color:#000;}
#flyout li:hover b,
#flyout li a:hover b {
visibility:visible;
}
#flyout li:hover ul,
#flyout li a:hover ul {
visibility:visible;
}
Zum Vergrößern anklicken....


Muss ich jetzt 2 Datein erstellen?

Eine flyout.css und eine wrap.ccs , ich versuche mich erstmal muss ja auch noch die Grafiken finden.
 
spamerix hat gesagt.:
Muss ich jetzt 2 Datein erstellen?

Eine flyout.css und eine wrap.ccs
Zum Vergrößern anklicken....
Wie kommst du darauf?

In der Beispielseite befindet sich der CSS-Code doch auch nur in einem einzigen <style>-Element:

Code: 
<style type="text/css">

#wrap {width:660px; position:relative; background:#000; height:362px; padding:0 30px; color:#999; margin-left:25px;}
#wrap a.nikon_link, #wrap a.nikon_link:visited {color:#bcd; font-size:10px;}
#wrap a.nikon_link:hover {text-decoration:none;}

#flyout {font-size:11px; padding:0; margin:0; list-style:none; width:24px; height:360px; position:absolute; left:-25px;}
#flyout ul {padding:0; margin:0; list-style:none;}
#flyout li {display:block; width:24px; height:120px; background:#1c1c1c;}
#flyout li a {display:block; width:24px; height:120px; text-indent:-999px; text-decoration:none;}
#flyout li a.nikon {background:url(nikon_button.gif);}
#flyout li a.canon {background:url(canon_button.gif);}
#flyout li a.pentax {background:url(pentax_button.gif);}

#flyout table {position:absolute; border-collapse:collapse; top:0; left:0; z-index:100; font-size:1em;}
#flyout li {float:left; margin-bottom:1px;}
#flyout li ul {visibility:hidden; position:absolute; top:0; left:24px; width:400px; height:117px; border-left:1px solid #fff; padding-top:4px;}
#flyout li ul li {display:block; display:inline; width:100px; height:22px; border:0; margin:0 10px; background:transparent;}
#flyout li ul li a {text-indent:0; background:transparent; display:block; width:100px; height:22px; line-height:21px; color:#bbb; border-bottom:1px solid #555; text-decoration:none;}
#flyout li b {visibility:hidden; display:block; width:360px; height:120px; position:absolute; top:0; left:24px; background:#234; opacity:0.8; filter:alpha(opacity=80);}
* html #flyout li a:hover {position:relative; white-space:normal;}
* html #flyout li a:hover ul li a:hover {color:#000; background:#bcd;}
#flyout li:hover {position:relative;}
#flyout li:hover ul li a:hover {background:#bcd; color:#000;}
#flyout li:hover b,
#flyout li a:hover b {
visibility:visible;
}
#flyout li:hover ul,
#flyout li a:hover ul {
visibility:visible;
}

</style>
mfg Maik
 
@maik ich habe 2 css datein gemacht eine wrap und eine fly.

Und wie immer hae ich da auch wieder ein kleines prob.

Hier Navi Link.

Ich habe die breite schon kleiner bekommen, aber es soll nur so breit wie die Kästen an der Seite sind.

Und wie kann ich die Kästen beschriften?
 
spamerix hat gesagt.:
@maik ich habe 2 css datein gemacht eine wrap und eine fly.
Zum Vergrößern anklicken....
Tue, was du trotz meiner Hinweise nicht lassen kannst, aber frag mich dann bitte auch nicht, warum dieses oder jenes nicht funktioniert.

Die Beschriftung der drei Kästen wird im Original mit drei entsprechenden Grafiken umgesetzt, die als Hintergrundbilder in den jeweiligen Links eingesetzt sind.

mfg Maik
 
Code: 
#wrap {width:0; 
	position:relative; 	
	background:#000; 
	height:362px; 
	padding:0 30px; 
	color:#999; 
	margin-left:25px;}
Die fettmarkierten Regeln ergeben, dass diese Box derzeit eine Breite von 60px besitzt und rechts von den drei Kästen ausgerichtet wird.

mfg Maik
 
Maik hat gesagt.:
Tue, was du trotz meiner Hinweise nicht lassen kannst, aber frag mich dann bitte auch nicht, warum dieses oder jenes nicht funktioniert.

Die Beschriftung der drei Kästen wird im Original mit drei entsprechenden Grafiken umgesetzt, die als Hintergrundbilder in den jeweiligen Links eingesetzt sind.

mfg Maik
Zum Vergrößern anklicken....

Bis jetzt geht alles trotz den 2 datein die fehlen.

Habe es jetzt alles hin bekommen und ändere jetzt erstmal nen bischen was drane.

Danke für die ganze Hilfe maik, aber bitte noch nicht Closen.

Bist eigendlich der einzigste der hier hilft?
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück