Menü erstellen problem Hilfe!!

Diveraowd · 03.05.2011

Hallo

Ich mache gerad eine Webseite.Ich habe mich für so ein Menü entschieden Da ich kein code für so ein Menü gefunden hab, habe ich den Quelcode genommen und nur davon das Menü genommen. Wenn ich bei Dreamweaver auf live ansicht gehe sieht es so au swie es sollte. wenn ich im bearbeitungsmodus bin sieht es so wie im oberen Foto. Vielleicht weiß einer von euch warum es so ist oder hat einen code für so ein Menü.

Ich freue mich über jede Antwort die mir weiterhilft

terrapack · 03.05.2011

AW: Menü erstellen problem Hilfe!!

Hallo Diveraowd,

es ist doch eigentlich recht irrelevant, wie es in den unterschiedlichen Modi von Dreamweaver aussieht. Ausschlaggebend ist doch nur die fertige Seite, die im Browser angezeigt wird. Wird sie denn da richtig ausgegeben?

So ein Menü ist eigentlich nicht schwer selber zu machen, wenn man die erforderlichen Kenntnisse in HTML, CSS und JavaScript hat. Ohne die kann man auch nicht einfach so Code von einer Website kopieren. Es gehören immer andere Dateien dazu, die der Seite ihr Verhalten und Aussehen geben.

DanielB86 · 09.05.2011

AW: Menü erstellen problem Hilfe!!

Würde dir gern weiterhelfen, aber leider kann ich auf den Bildern kaum was erkennen? Hast du den Code 1:1 kopiert?

Kackstift · 10.05.2011

AW: Menü erstellen problem Hilfe!!

Kopier am besten mal deinen aktuellen Quellcode hier rein, dann kann man sich das auch mal angucken.. die Bilder sind zu klein und viel zu unscharf um irgendwas zu erkennen

lauffreak · 10.05.2011

AW: Menü erstellen problem Hilfe!!

moin

es fehlt wohl auch ein list-style: none; im li tag?
Am besten du legst eine Testsite an und postest den link hier- dann können wir sehen und im css lesen, wo der Fehler ist.

Grüße*lauffreak

Diveraowd · 13.05.2011

AW: Menü erstellen problem Hilfe!!

Ok ich werde morgen mein Code hier reinposten. Aber danke Schonmal für die antworten

Diveraowd · 14.05.2011

AW: Menü erstellen problem Hilfe!!

Hallo

Hier ist der Code den ich hab.Hab dazu noch eine Frage und zwar wie kann man es so machen statt mit der Maus rüber fahren dass man auf ein Menü klickt und dann erst das Menü ersceint und erst verschwindet wen man das nächste Menü öffnen will. Ich hoffe jeman d versteht wie ich es meine

Hier der Code

Code:

<!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=utf-8" />
<title>Unbenanntes Dokument</title>
<style type="text/css">
#apDiv1 {
    position:absolute;
    left:18px;
    top:32px;
    width:557px;
    height:535px;
    z-index:1;
}
</style>
</head>

<body>
<div id="apDiv1"><!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=utf-8" />
<title>Unbenanntes Dokument</title>
<style type="text/css">
#menueleiste {
    position:absolute;
    left:61px;
    top:29px;
    width:518px;
    height:538px;
    z-index:1;
}
</style>
</head>

<body>
<div id="apDiv1"><!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="X-UA-Compatible" content="IE=EmulateIE7" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title> Stu Nicholls | CSSplay | A sliding definition list menu</title>
<meta name="Author" content="Stu Nicholls" />
<meta name="Keywords" content= "cssplay, css, play, Cascading, Style, Sheets, experiments, demonstrations, menu, flyout, slide, definition, list, drop, multi, level" />
<meta name="Description" content="CSS - Cutting edge Cascading Style Sheets. Experiments in CSS" />
<meta name="verify-v1" content="n3Dpx4NklZjg5p/Tq7h1q+Oj6Ml83crtkO/PwepVQ6Y=" />
<meta http-equiv="imagetoolbar" content="no" />


<link rel="meta" href="http://www.cssplay.co.uk/labels.rdf" type="application/rdf+xml" title="ICRA labels" />
<meta http-equiv="pics-Label" content='(pics-1.1 "http://www.icra.org/pics/vocabularyv03/" l gen true for "http://cssplay.co.uk" r (n 0 s 0 v 0 l 0 oa 0 ob 0 oc 0 od 0 oe 0 of 0 og 0 oh 0 c 0)  gen true for "http://www.cssplay.co.uk" r (n 0 s 0 v 0 l 0 oa 0 ob 0 oc 0 od 0 oe 0 of 0 og 0 oh 0 c 0))' />
<link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="http://www.cssplay.co.uk/feed.xml" />

<link rel="shortcut icon" href="../favicon.ico" type="image/x-icon" />
<link rel="icon" href="../favicon.ico" type="image/ico" />
<style type="text/css">
@import url(


<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 
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.
=================================================================== */
#dlmenu {height:10em; margin:20px 0 300px 10px;}
#menu {list-style-type:none; margin:0 0 10px; padding:0; position:absolute; width:15em; background:#fff; z-index:100;}
#menu li {display:block; padding:0; margin:0; position:relative; z-index:100;}
#menu li a, #menu li a:visited {display:block; text-decoration:none;}
#menu li dd {display:none;}
#menu li:hover, #menu li a:hover {border:0;}
#menu li:hover dt a , #menu li a:hover dt a {background:#d4d8bd url(top_grad_2.gif) center center; color:#ff0; }
#menu li:hover dd, #menu li a:hover dd {display:block;}
#menu li:hover dl, #menu li a:hover dl {height:20em; background:#b4be9c url(sub_grad.gif);}
#menu table {border-collapse:collapse; padding:0; margin:-4px; font-size:1em;}
#menu dl {width: 15em; margin: 0; background: #6f9c6f; cursor:pointer;}
#menu dt {margin:0; padding: 0; font-size: 1.1em; border-top:1px solid #cce;}
#menu dd {margin:0; padding:0; font-size: 1em; text-align:left; }
.gallery dt a, .gallery dt a:visited {display:block; color:#fff; padding:5px 5px 5px 10px; background:#949e7c url(top_grad.gif) center center;}
.gallery dd a, .gallery dd a:visited {color:#000; min-height:1em; text-decoration:none; display:block; padding:4px 5px 4px 20px; background:#b4be9c url(sub_grad.gif);}
* html .gallery dd a, * html .gallery dd a:visited {height:1em;}
.gallery dd a:hover {background:#7aa; color:#ff0;}

</style>


</head>


    <div id="wrapper"><!-- end of header -->



<div id="dlmenu">
<ul id="menu">
<li>
<!--[if lte IE 6]><a href="#nogo"><table><tr><td><![endif]-->
<dl class="gallery">
    <dt><a href="http://www.psd-tutorials.de/forum/menu/index.html">DEMOS</a></dt>
    <dd><a href="http://www.psd-tutorials.de/forum/menu/zero_dollars.html" title="The zero dollar ads page">zero dollars</a></dd>
    <dd><a href="http://www.psd-tutorials.de/forum/menu/embed.html" title="Wrapping text around images">wrapping text</a></dd>
    <dd><a href="http://www.psd-tutorials.de/forum/menu/form.html" title="Styling forms">styled form</a></dd>

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

</dl>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li>
<!--[if lte IE 6]><a href="#nogo"><table><tr><td><![endif]-->
<dl class="gallery">
    <dt><a href="index.html">MENUS</a></dt>
    <dd><a href="spies.html" title="a coded list of spies">spies menu</a></dd>
    <dd><a href="vertical.html" title="a horizontal vertical menu">vertical menu</a></dd>
    <dd><a href="expand.html" title="an enlarging unordered list">enlarging list</a></dd>

    <dd><a href="enlarge.html" title="an unordered list with link images">link images</a></dd>
    <dd><a href="cross.html" title="non-rectangular links">non-rectangular links</a></dd>
    <dd><a href="jigsaw.html" title="jigsaw links">jigsaw links</a></dd>
    <dd><a href="circles.html" title="circular links">circular links</a></dd>
</dl>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li>
<!--[if lte IE 6]><a href="#nogo"><table><tr><td><![endif]-->

<dl class="gallery">
    <dt><a href="http://www.psd-tutorials.de/forum/layouts/index.html">LAYOUTS</a></dt>
    <dd><a href="http://www.psd-tutorials.de/forum/layouts/bodyfix.html" title="Cross browser fixed layout">Fixed 1</a></dd>
    <dd><a href="http://www.psd-tutorials.de/forum/layouts/body2.html" title="Cross browser fixed layout">Fixed 2</a></dd>
    <dd><a href="http://www.psd-tutorials.de/forum/layouts/body4.html" title="Cross browser fixed layout">Fixed 3</a></dd>
    <dd><a href="http://www.psd-tutorials.de/forum/layouts/body5.html" title="Cross browser fixed layout">Fixed 4</a></dd>
    <dd><a href="http://www.psd-tutorials.de/forum/layouts/minimum.html" title="A simple minimum width layout">minimum width for Internet Explorer</a></dd>

</dl>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li>
<!--[if lte IE 6]><a href="#nogo"><table><tr><td><![endif]-->
<dl class="gallery">
    <dt><a href="http://www.psd-tutorials.de/forum/mozilla/index.html">MOZILLA</a></dt>
    <dd><a href="http://www.psd-tutorials.de/forum/mozilla/dropdown.html" title="A drop down menu">drop down menu</a></dd>
    <dd><a href="http://www.psd-tutorials.de/forum/mozilla/cascade.html" title="A cascading menu">cascading menu</a></dd>
    <dd><a href="http://www.psd-tutorials.de/forum/mozilla/content.html" title="Using content:">content:</a></dd>

    <dd><a href="http://www.psd-tutorials.de/forum/mozilla/moxbox.html" title=":hover applied to a div">mozzie box</a></dd>
    <dd><a href="http://www.psd-tutorials.de/forum/mozilla/rainbow.html" title="I can build a rainbow">rainbow box</a></dd>
    <dd><a href="http://www.psd-tutorials.de/forum/mozilla/snooker.html" title="Snooker cue">snooker cue made using border art</a></dd>
    <dd><a href="http://www.psd-tutorials.de/forum/mozilla/target.html" title="Target Practise">target practise</a></dd>
</dl>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul>
</div>







</div>
</body>
</html>