Wie war das nochmal mit dem CSS-Menü?

Grafixboy

Erfahrenes Mitglied
Hi an alle speziell an Mike, Grafixboy hier :)

Ich habe eine Frage zu einem CSS-Menü.
Eben jene Frage hattest du hier schon einmal an
jemand anderes beantwortet.

Nun da ich den Thread dazu nicht mehr finden kann,
weil der Titel wahrscheinlich nicht aussagekräftig genug war, gab ich nach einer 3/4 Stunde auf zu suchen.
Kenne jetzt alle CSS - Menüs von tutorials ;)

Ich will dazu aber auch keinen neuen Thread aufmachen.

Um dieses Menü ging es da
und dieses ist auch die Grundlage für das Meinige.
Im Thread hatte dich einer gebeter den Abstand zwischen den Menüpunkten zu vergrößern.

DL-FLYOUT
http://www.cssplay.co.uk/menus/dl-flyout.html
CSS-only Menü

HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Unbenanntes Dokument</title>
<!--<link rel="stylesheet" media="all" type="text/css" href="http://www.cssplay.co.uk/css/default.css" />-->
<style type="text/css">
<!--
body{background-color: black;}
a, a:visited, a:hover, a:active, a:focus {direction:ltr; outline:0;}

#positioner {position:relative; width:160px; height:155px; padding-left:10px; float:left; background:#000;}
.holder {position:absolute; width:150px; height:25px;}
dl.menu {width:300px; float:left; margin:-32000px 0 0 -9999px;}
.p1 {top:0;}
.p2 {top:26px;}
.p3 {top:52px;}
.p4 {top:78px;}
.p5 {top:104px;}
.p6 {top:130px;}
dl.menu a {display:block; height:25px; font:normal 11px/25px verdana, sans-serif; text-decoration:none; text-indent:10px; border-bottom:1px solid #fff; border-left:1px solid #fff;}

 dl.menu dt {float:left; padding:0; position:relative; left:9999px; z-index:50; margin:32000px 0 0 0;}
 dl.menu dt a {width:149px; background:#f90; float:left; color:#000;}
 dl.menu dt a.sub {background:#c60 url(dl-flyout/arrow.gif) no-repeat 140px center; color:#fff;}
 dl.menu dt a:hover, dl.menu dt a:focus, dl.menu dt a:active {margin-right:1px; text-decoration:none; background-color:#c60; color:#fff;}

 dl.menu dd {float:left; padding:0; margin:0;height:25px;}
 dl.menu dd a {position:relative; background:#f90; width:149px; color:#000; left:10149px; top:-26px; z-index:60;}
 dl.menu dd a:hover, dl.menu dd a:focus, dl.menu dd a:active {margin-right:1px; background:#c60; color:#fff;}
 -->
</style>
</head>
<body>
<div id="positioner">
	<div class="holder p1">
		<dl class="menu">
			<dt><a href="#url">Home</a></dt>

		</dl>
	</div>
	<div class="holder p2">
		<dl class="menu">

			<dt><a class="sub" href="#url">Products</a></dt>
			<dd>
				<a href="#url">Digital Cameras</a>

				<a href="#url">Monopods &amp; Tripods</a>
				<a href="#url">Flashguns &amp; Reflectors</a>

				<a href="#url">Telephoto Lenses</a>
			</dd>
		</dl>

	</div>
	<div class="holder p3">
		<dl class="menu">
			<dt><a class="sub" href="#url">Services</a></dt>
			<dd>

				<a href="#url">Enlarging</a>
				<a href="#url">Framing &amp; Restoring</a>

				<a href="#url">Printing</a>
				<a href="#url">Copying</a>
				<a href="#url">Sepia Toning</a>

			</dd>
		</dl>
	</div>
	<div class="holder p4">

		<dl class="menu">
			<dt><a class="sub" href="#url">Outlets</a></dt>
			<dd>
				<a href="#url">London</a>

				<a href="#url">Gloucestershire</a>
				<a href="#url">East Midlands</a>

				<a href="#url">Glasgow</a>
				<a href="#url">Exeter</a>
			</dd>
		</dl>
	</div>

	<div class="holder p5">
		<dl class="menu">

			<dt><a class="sub" href="#url">Terms</a></dt>
			<dd>
				<a href="#url">Payment Methods</a>
				<a href="#url">Conditions of Sale</a>
				<a href="#url">Privacy Policy</a>

			</dd>

		</dl>
	</div>
	<div class="holder p6">
		<dl class="menu">
			<dt><a href="#url">Site Map</a></dt>
		</dl>
	</div>

</div>

</body>
</html>

Habe mal den hintergrund auf schwarz gesetzt zu besseren Anschauung.

Ich habe nähmlich in FF abgerundete Ecken und wollte mittels CurvyCorners javascript auch in allen nicht -moz und
-webkit unterstützen Browsern auch da die Echen abrunden.

Und dazu brauch ich den Abstand weil sonst der linke und untere Rand durch die beiden border's garnicht mehr rund aussehen.

Wenn du den Thread findest würde mir der Link dahin schon reichen :)

Mit freundlich Grüßen und in hoffnungsvoller Erwartung

Grafixboy

PS: Ich Danke dir schon einmal im Vorraus

Wie war das nochmal mit dem Hinweis in meiner Signatur?! hat gesagt.:
Lesen wirst du ja wohl noch können!

mfg Maik

Tut mir Leid :( Maik

Hab das nicht von jedem User im Kopf und da du mir schon so oft geholfen Hast und ich mir dadurch deinen Usernick schon in meinen Kopf einzementiert habe bin ich nach dem Anmelden direkt in den Nachrichtenbereich (also nicht über Los) :-( weil ich am vortag solange gesucht hatte und das die nacht über mit mir rumgeschleppt hatte.
Also nochmal ganz offiziell Entschuldigung ! :)
(Habe mal lieber nicht geantwortet.)

Ich will dazu aber auch keinen neuen Thread aufmachen.
Muste ich ja nun doch sorry an alle anderen.

Ich hoffe das waren ausreichend versöhnliche Worte. (!)
Mit sehr freundlich Grüßen
 
Zuletzt bearbeitet:
Hi,

was meinst du, mit welchem Arbeits- und Zeitaufwand ich täglich in meinem privaten Forenbereich zugange wäre, wenn nur jede dritte oder vierte User wegen seiner Frage kein neues Thema im Forum eröffnen, sondern sich direkt per PN an mich wenden, und um Hilfe bitten würde? :eek:

Und was meinst du, warum ich dem schon seit geraumer Vergangenheit mit dem Hinweis in meiner Signatur Einhalt gebiete?!

Ich weiß jetzt auch nicht, welches Thema dir da im Kopf umherschwirrt, aber ich bin mir ziemlich sicher, dass dieses genannte Flyout-Menü nicht Gegenstand der Frage- / Problemstellung war.

Stu hat es Mitte September '09 veröffentlicht, und ich kann mich nicht entsinnen, es heute zum zweiten Mal vor Augen gehabt zu haben. Mein ausgeprägtes photographische Gedächtnis hat zumindest überhaupt nicht angeschlagen.

Das Thema mit diesem Menü im Speziellen wird dann wohl auch nicht existieren, wenn du es in diesem überschaubar begrenzten Zeitraum im Forum nicht ausfindig machen konntest.

Und wenn du nun alle behandelten CSS-Menüs aus unserem CSS-Forum kennst, dann sollte dir beim Lesen meiner Beiträge das eine oder andere Mal meine deutlich sichtbare Signatur auch nicht entgangen sein.

Aber gut, deine Entschuldigung ist angenommen, und der Drops damit gelutscht :) Für die Zukunft weißt du ja nun Bescheid ;-)

"Wie war das nochmal mit dem CSS-Menü?"

Tja, wie war das wohl nochmal ...?

mfg Maik
 
Scheinbar hast du dich bei deiner Wahl des Flyout-Menüs in dessen technischer Umsetzung vergriffen, und aus dem großen Pott ausgerechnet die harte Nuß gezogen :)

Zum Gegenvergleich hab ich die Variante http://www.cssplay.co.uk/menus/flyoutt.html mit -moz-border-radius und -webkit-border-radius für Firefox, Google Chrome und Safari ausgestattet, und das Ergebnis kann sich hier doch glatt sehen lassen ;-)

flyoutt-roundedCorners.jpg

HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title> Stu Nicholls | CSSplay | A CSS flyout menu that works in IE</title>

<style type="text/css">

/* ================================================================
This copyright notice must be untouched at all times.

The original version of this stylesheet and the associated (x)html
is available at http://www.cssplay.co.uk/menus/flyoutt.html
Copyright (c) 2005-2007 Stu Nicholls. All rights reserved.
This stylesheet and the assocaited (x)html may be modified in any
way to fit your requirements.
=================================================================== */
/* Hintergrund auf schwarz setzen zu besseren Anschauung */

body { background:#000; }
/* common styling */
.menu {font-family: arial, sans-serif; width:106px; height:150px; position:relative; margin:0; font-size:11px; margin:50px 0;}
.menu ul li a, .menu ul li a:visited {display:block; text-decoration:none; color:#000; width:98px; height:20px; text-align:center; border:3px solid #eee; -moz-border-radius:6px; -webkit-border-radius:6px; background:#f90; line-height:19px; font-size:11px; margin:0 1px 1px 0;}
.menu ul {padding:0; margin:0;list-style-type: none; }
.menu ul li {float:left; margin-right:1px; position:relative;}
.menu ul li ul {display: none;}

/* specific to non IE browsers */
.menu ul li:hover a {color:#fff; background:#c60;}
.menu ul li:hover ul {display:block; position:absolute; top:0; left:105px; width:105px;}
.menu ul li a.hide {background:#c60 url(dl-flyout/arrow.gif) no-repeat 140px center; color:#fff;}
.menu ul li:hover ul li a.hide {background:#c60; color:#000;}
.menu ul li:hover ul li:hover a.hide {width:144px;}
.menu ul li:hover ul li ul {display: none;}
.menu ul li:hover ul li a {display:block; background:#f90; color:#000; width:144px;}
.menu ul li:hover ul li a:hover {background:#c60; color:#000;}
.menu ul li:hover ul li:hover ul {display:block; position:absolute; left:151px; top:0; color:#000;}
.menu ul li:hover ul li:hover ul li a {display:block; width:200px; background:#f90; color:#000;}
.menu ul li:hover ul li:hover ul li a:hover {background:#c60; color:#fff;}
</style>
</head>

<body id="www-cssplay-co-uk">


<h2>A CSS only validating flyout menu - NO javascript</h2>
<h3>24th February 2006</h3>

<div class="menu">

<ul>
<li><a href="http://www.tutorials.de/forum/menu/index.html">HOME</a></li>
<li><a class="hide" href="http://www.tutorials.de/forum/menu/index.html">DEMOS</a>

<!--[if lte IE 6]>
<a href="http://www.tutorials.de/forum/menu/index.html">DEMOS
<table><tr><td>
<![endif]-->

<ul>
<li><a href="http://www.tutorials.de/forum/menu/zero_dollars.html" title="The zero dollar ads page">zero dollars</a></li>
<li><a href="http://www.tutorials.de/forum/menu/embed.html" title="Wrapping text around images">wrapping text</a></li>
<li><a href="http://www.tutorials.de/forum/menu/form.html" title="Styling forms">styled form</a></li>
<li><a href="http://www.tutorials.de/forum/menu/nodots.html" title="Removing active/focus borders">active focus</a></li>
<li><a class="hide" href="http://www.tutorials.de/forum/menu/hover_click.html" title="Hover/click with no active/focus borders">HOVER/CLICK &gt;</a>

<!--[if lte IE 6]>
<a class="sub" href="http://www.tutorials.de/forum/menu/hover_click.html" title="Hover/click with no active/focus borders">HOVER/CLICK &gt;
<table><tr><td>
<![endif]-->

<ul>
<li><a href="http://www.tutorials.de/forum/menu/form.html" title="Styling forms">styled form</a></li>
<li><a href="http://www.tutorials.de/forum/menu/nodots.html" title="Removing active/focus borders">active focus</a></li>
<li><a href="http://www.tutorials.de/forum/menu/hover_click.html" title="Hover/click with no active/focus borders">hover/click</a></li>
</ul>

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

</li>
<li><a href="http://www.tutorials.de/forum/menu/shadow_boxing.html" title="Multi-position drop shadow">shadow boxing</a></li>
<li><a href="http://www.tutorials.de/forum/menu/old_master.html" title="Image Map for detailed information">image map</a></li>
<li><a href="http://www.tutorials.de/forum/menu/bodies.html" title="fun with background images">fun backgrounds</a></li>
<li><a href="http://www.tutorials.de/forum/menu/fade_scroll.html" title="fade-out scrolling">fade scrolling</a></li>
<li><a href="http://www.tutorials.de/forum/menu/em_images.html" title="em size images compared">em sized images</a></li>
</ul>

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

</li>

<li><a class="hide" href="index.html">MENUS</a>

<!--[if lte IE 6]>
<a href="index.html">MENUS
<table><tr><td>
<![endif]-->

<ul>
<li><a href="spies.html" title="a coded list of spies">spies menu</a></li>
<li><a href="vertical.html" title="a horizontal vertical menu">vertical menu</a></li>
<li><a href="expand.html" title="an enlarging unordered list">enlarging list</a></li>
<li><a href="enlarge.html" title="an unordered list with link images">link images</a></li>
<li><a href="cross.html" title="non-rectangular links">non-rectangular</a></li>
<li><a href="jigsaw.html" title="jigsaw links">jigsaw links</a></li>
<li><a href="circles.html" title="circular links">circular links</a></li>
</ul>

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

</li>

<li><a class="hide" href="http://www.tutorials.de/forum/layouts/index.html">LAYOUTS</a>

<!--[if lte IE 6]>
<a href="http://www.tutorials.de/forum/layouts/index.html">LAYOUTS
<table><tr><td>
<![endif]-->

<ul>
<li><a href="http://www.tutorials.de/forum/layouts/bodyfix.html" title="Cross browser fixed layout">Fixed 1</a></li>
<li><a href="http://www.tutorials.de/forum/layouts/body2.html" title="Cross browser fixed layout">Fixed 2</a></li>
<li><a href="http://www.tutorials.de/forum/layouts/body4.html" title="Cross browser fixed layout">Fixed 3</a></li>
<li><a href="http://www.tutorials.de/forum/layouts/body5.html" title="Cross browser fixed layout">Fixed 4</a></li>
<li><a href="http://www.tutorials.de/forum/layouts/minimum.html" title="A simple minimum width layout">minimum width</a></li>
</ul>

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

</li>

<li><a class="hide" href="http://www.tutorials.de/forum/boxes/index.html">BOXES</a>

<!--[if lte IE 6]>
<a href="http://www.tutorials.de/forum/boxes/index.html">BOXES
<table><tr><td>
<![endif]-->

<ul>
<li><a href="spies.html" title="a coded list of spies">spies menu</a></li>
<li><a href="vertical.html" title="a horizontal vertical menu">vertical menu</a></li>
<li><a href="expand.html" title="an enlarging unordered list">enlarging list</a></li>
<li><a href="enlarge.html" title="an unordered list with link images">link images</a></li>
<li><a href="cross.html" title="non-rectangular links">non-rectangular</a></li>
<li><a href="jigsaw.html" title="jigsaw links">jigsaw links</a></li>
<li><a href="circles.html" title="circular links">circular links</a></li>
</ul>

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

</li>

<li><a class="hide" href="http://www.tutorials.de/forum/mozilla/index.html">MOZILLA</a>

<!--[if lte IE 6]>
<a href="http://www.tutorials.de/forum/mozilla/index.html">MOZILLA
<table><tr><td>
<![endif]-->

<ul>
<li><a href="http://www.tutorials.de/forum/mozilla/dropdown.html" title="A drop down menu">drop down menu</a></li>
<li><a href="http://www.tutorials.de/forum/mozilla/cascade.html" title="A cascading menu">cascading menu</a></li>
<li><a href="http://www.tutorials.de/forum/mozilla/content.html" title="Using content:">content:</a></li>
<li><a href="http://www.tutorials.de/forum/mozilla/moxbox.html" title=":hover applied to a div">mozzie box</a></li>
<li><a href="http://www.tutorials.de/forum/mozilla/rainbow.html" title="I can build a rainbow">rainbow box</a></li>
<li><a href="http://www.tutorials.de/forum/mozilla/snooker.html" title="Snooker cue">snooker cue</a></li>
<li><a href="http://www.tutorials.de/forum/mozilla/target.html" title="Target Practise">target practise</a></li>
<li><a href="http://www.tutorials.de/forum/mozilla/splittext.html" title="Two tone headings">two tone headings</a></li>
<li><a href="http://www.tutorials.de/forum/mozilla/shadow_text.html" title="Shadow text">shadow text</a></li>
</ul>

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

</li>

<li><a class="hide" href="http://www.tutorials.de/forum/ie/index.html">EXPLORER</a>

<!--[if lte IE 6]>
<a href="http://www.tutorials.de/forum/ie/index.html">EXPLORER
<table><tr><td>
<![endif]-->

<ul>
<li><a href="http://www.tutorials.de/forum/ie/exampleone.html" title="Example one">example one</a></li>
<li><a href="http://www.tutorials.de/forum/ie/weft.html" title="Weft fonts">weft fonts</a></li>
<li><a href="http://www.tutorials.de/forum/ie/exampletwo.html" title="Vertical align">vertical align</a></li>
</ul>

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

</li>

<li><a class="hide" href="http://www.tutorials.de/forum/opacity/index.html">OPACITY</a>

<!--[if lte IE 6]>
<a href="http://www.tutorials.de/forum/opacity/index.html">OPACITY
<table><tr><td>
<![endif]-->

<ul>
<li><a href="http://www.tutorials.de/forum/opacity/colours.html" title="colour wheel">opaque colours</a></li>
<li><a href="http://www.tutorials.de/forum/opacity/picturemenu.html" title="a menu using opacity">opaque menu</a></li>
<li><a href="http://www.tutorials.de/forum/opacity/png.html" title="partial opacity">partial opacity</a></li>
<li><a href="http://www.tutorials.de/forum/opacity/png2.html" title="partial opacity II">partial opacity II</a></li>
</ul>

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

</li>
</ul>
</div>

</body>
</html>


Wenn du in deinem Menü-Konzept stärkere Rahmen, wie in der Vorlage, einplanst, vorsiehst (in meinem Probelauf hab ich bei r=6px dem Rahmen noch zwei Pixel dazugepackt), mußt du dieses Maß von den bestehenden Breiten- / Höhenangaben subtrahieren, oder die Positionsangaben der Untermenüs korrigieren, denn hier greift ansonsten zu allen vier Seiten das Box-Modell.

Falls aus der IE-Familie der IE6 zu berücksichtigen ist, kannst du dich nun um dessen Stylesheet flyout_ie.css kümmern ;-)

mfg Maik
 
Puh da habe ich aber Glück gehabt, :)
das mir hier nicht neben Sven noch für meine Zwecke nützlichte
Helfer in Notsituationen wegbricht. ^^

Hätte schwören können das du da einer der Mitredner zu diesem Thema warst.
Vielleicht war es ja dann doch Sven Mintel der jenige welcher.

Existieren tut es auf jeden Fall habe es ja gelesen hatte nur zu jener Zeit nie die Absicht
es jemals mit abgerundeten Ecken zu verwenden weil ich dazumal auch
noch nicht CurvyCorners kannte.
Und da wo ich es brauchte hatte ich es über Grafiken gelößt bekommen (hier)

Ja habe schon befürchtet das dass Menü nicht gerade das einfachste ist,
aber ich benutze es schon seit einiger Zeit erfolgreich.
In Verbindung mit css xml xslt & php ist es mir richtig ans Herz gewachsen. ;)
Mir hat daran gefallen das ich da nicht für jeden Browser
irgendwelche CSS-Ausnahmeregeln schaffen muste.
Aber In Moz, Google, Chrome und Safari usw funktioniert meines ja auch mit den
abgerundeten Ecken nur wie gesagt der linke und untere rand scheint IE in
Verbindung mit (CC) nicht zu schmecken (hier).

Das von dir vorgeschlagene Menü ist das nächste
was ich in Angriff nehmen (/dynamisieren) wollte wegen der höheren
Verschachtelungstiefe.
Geht es denn da mit CC und im IE aber ich schätze ja weil es ja keine ränder oder bzw
oder alle Ränder hatt und nicht wie das von mir beprochene nicht auf die 2 angewiesen ist.
So hast du mir da schon ein wenig Arbeit abgenommen. :)

Mit freundlichem Gruße Grafixboy
 
Zuletzt bearbeitet:
Puh da habe ich aber Glück gehabt, :)
das mir hier nicht neben Sven noch für meine Zwecke nützlichte
Helfer in Notsituationen wegbricht. ^^

Hätte schwören können das du da einer der Mitredner zu diesem Thema warst.
Vielleicht war es ja dann doch Sven Mintel der jenige welcher.
Gut möglich, dass sich Sven seinerzeit dem Thema angenommen hat, denn er mimt meine Urlaubsvertretung für das CSS-Board, wenn ich im Sommer und über die Weihnachtsfeiertage die große Biege mache und dem Forum mal für eine Weile den Rücken zukehre :)

Vielleicht hast du das Thema aber auch garnicht hier im CSS-, sondern nebenan im JS-Forum gelesen, wo er hin und wieder einem User Stu Nicholls' CSS-Menüs empfiehlt, anstatt da was mit Javascript auf die Beine stellen zu wollen.

Und da wo ich es brauchte hatte ich es über Grafiken gelößt bekommen (hier)
Dorthin ist keine Verbindung möglich.
Fehler: Server nicht gefunden

Der Server unter cloud-green.de konnte nicht gefunden werden.

Aber In Moz, Google, Chrome und Safari usw funktioniert meines ja auch mit den
abgerundeten Ecken nur wie gesagt der linke und untere rand scheint IE in
Verbindung mit (CC) nicht zu schmecken (hier).

Du solltest vielleicht mal im IE die Anzeige von Scriptfehlern aktivieren, denn die komplette IE-Familie (6 - 8) begrüßt deine Seitenbesucher nach dem Verlassen der Splashseite mit einer JS-Fehlermeldung.

Diese stammt aus der aktuellen Version:

ie8.jpg

Auf der "CurvyCorner"-Seite trifft dies ausschließlich auf den IE6 zu.

Denoch versteht er es, dort und in den einzelnen Beispiel-Seiten die Boxen korrekt abzurunden, was man von deiner Seite nicht behaupten kann, denn dem IE6 scheint da offensichtlich noch einiges mehr nicht so recht zu munden, nachdem man mehrere JS-Fehlermeldungen hintereinander "abnicken" und "wegklicken" durfte :suspekt:

ie6.jpg

Zur vorgerückten Stunde (gefühlt morgens zwischen 3 ~ 4h) und mit den gewissen Bewußtseinszustandsbegleiterscheinungen im Gepäck sicherlich ein psychedelisches Erlebnis für den IE6-Nutzer - fehlt eigentlich zur vollständigen Stimulation nur noch das passende Farbspektrum :)

mfg Maik
 
Ist dir eigentlich schon aufgefallen, dass wir uns hier mit deiner Eingangsfrage überhaupt nicht mehr beschäftigen, sondern sich die Beiträge nur noch um den IE6 und seinen PNG-Fix drehen?

Von daher splitte ich die Themen nun an dieser Stelle -> IE6 und PNG-Fix

mfg Maik
 
Zurück