|
|||
Dreamweaver zerreist Listenstruktur in Vorschau
Guten Abend ich versuche nun schon seit stunden diese Problem zu lösen und bin nicht wirklich einen Schritt weitergekommen.
Dreamweaver zerreißt Listenstrukturen wie folgt: Directupload.net - cdgmkmn7.jpg er setzt die listen, die iegndlich nebeneinander gehören untereinander..und verhindert somit das konstruktive weiterbearbeiten der Website. Ich wollte die Listenstruktur in meine Seite einbinden: Stu Nicholls | CSSplay | Professional CSS Hover Select Menu der html und css code zur ganzen seite mit hervorgehobenen wichtigen Elementen: HTML-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" xml:lang="en"> <!-- Mirrored from www.cssplay.co.uk/menus/hover-select.html by HTTrack Website Copier/3.x [XR&CO'2010], Sun, 14 Oct 2012 19:01:04 GMT --> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title> Stu Nicholls | CSSplay | Professional CSS Hover Select Menu </title> <meta name="Keywords" content="cssplay, css, play, Cascading, Style, Sheets, experiments, demonstrations, menu, horizontal, dropdown, drop, multi, level, cross, browser, valid, professional, column, drop, hover, select description" /> <meta name="Description" content="CSS play - professional hover select menu with changeable images" /> <meta name="Author" content="Stu Nicholls" /> <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="http://www.cssplay.co.uk/menus/favicon.ico" type="image/x-icon" /> <link rel="icon" href="http://www.cssplay.co.uk/menus/favicon.ico" type="image/ico" /> <link href='http://fonts.googleapis.com/css?family=Ubuntu+Condensed' rel='stylesheet' type='text/css' /> <link href='http://fonts.googleapis.com/css?family=Ubuntu:500,700' rel='stylesheet' type='text/css' /> <!--[if gte IE 7]><!--> <script type="text/javascript">var switchTo5x=true;</script><script type="text/javascript" src="http://w.sharethis.com/button/buttons.js"></script><script type="text/javascript">stLight.options({publisher:'fdc2c422-ae8d-414c-a5bb-68c389e4688d'});</script> <!--<![endif]--> <link rel="stylesheet" media="all" type="text/css" href="http://www.cssplay.co.uk/styles/default.css" /> <[COLOR="Red"]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/hover-select.html Copyright (c) Stu Nicholls. All rights reserved. This stylesheet and the associated (x)html may be modified in any way to fit your requirements. =================================================================== */ #holder {width:750px; height:350px; position:relative; font-family:arial, sans-serif; border-top:1px solid #da8; border-bottom:1px solid #da8; z-index:100;} #holder table {border-collapse:collapse; margin:-1px;} #holder ul {float:left; padding:0; margin:0; list-style:none;} #holder ul.sub {margin-bottom:-4px;} #menuOuter li a.lv1-a {background:blue; zoom:1;} #menuOuter li a.lv1-a:hover {direction:ltr;} #holder ul.sub {float:left;} #holder ul.sub ul {position:absolute; left:-9999px; top:180px;} #holder ul.sub li.sub-li a img {display:block; position:absolute; left:-9999px; border:0; height:200px; width:750px;} #holder ul.sub li.sub-li {display:block; float:left; width:150px; height:240px;} #holder ul.sub li.sub-li a {margin-top:200px; width:110px; display:block; padding:0 20px; height:40px; line-height:40px; color:#fff; text-decoration:none; font-family:arial, sans-serif; font-size:14px;} #holder ul.sub li.sub-li a.a1 {background:#938668;} #holder ul.sub li.sub-li a.a2 {background:#e9a358;} #holder ul.sub li.sub-li a.a3 {background:#9ea64b;} #holder ul.sub li.sub-li a.a4 {background:#dfb344;} #holder ul.sub li.sub-li a.a5 {background:#b8826e;} #menuOuter li:hover ul.sub li.current a {margin-top:200px; height:40px;} #menuOuter li:hover ul.sub li.current ul {left:-9999px;} #menuOuter li:hover ul.sub li.current a img {left:-9999px;} #menuOuter a:hover ul.sub li.current a {margin-top:200px; height:40px;} #menuOuter a:hover ul.sub li.current ul {left:-9999px;} #menuOuter a:hover ul.sub li.current a img {left:-9999px;} #holder ul.sub li.sub-li:hover > a {margin-top:0; height:350px;} #holder ul.sub li.sub-li a:hover {margin-top:0; height:350px;} #holder ul.sub li.current a {margin-top:0; height:350px;} #holder ul.sub li.current a.a1 img {left:0; top:0; z-index:-1;} #holder ul.sub li.current a.a2 img {left:-150px; top:0; z-index:-1;} #holder ul.sub li.current a.a3 img {left:-300px; top:0; z-index:-1;} #holder ul.sub li.current a.a4 img {left:-450px; top:0; z-index:-1;} #holder ul.sub li.current a.a5 img {left:-600px; top:0; z-index:-1;} #menuOuter li:hover ul.sub li.current:hover a {margin-top:0; height:350px;} #menuOuter li:hover ul.sub li.current:hover ul {left:0;} #menuOuter li:hover ul.sub li.current:hover ul li {float:left; height:15px; padding:0; margin:0;} #menuOuter li:hover ul.sub li.current:hover ul li a {height:15px; line-height:15px; margin:0; padding:0 20px;} #menuOuter li:hover ul.sub li.current:hover ul li a:hover {height:15px; line-height:15px; margin:0; padding:0 20px; text-decoration:underline;} #menuOuter a:hover ul.sub li.current a:hover {margin-top:0; height:350px;} #menuOuter a:hover ul.sub li.current a:hover ul {left:0;} #menuOuter a:hover ul.sub li.current a:hover ul li {float:left; height:15px; padding:0; margin:0;} #menuOuter a:hover ul.sub li.current a:hover ul li a {height:15px; line-height:15px; margin:0; padding:0 20px;} #menuOuter a:hover ul.sub li.current a:hover ul li a:hover {height:15px; line-height:15px; margin:0; padding:0 20px; text-decoration:underline;} #holder ul.sub li {position:relative;} #holder ul.sub li.sub-li:hover ul {left:0; width:130px;} #holder ul.sub li.sub-li:hover ul li {float:left; height:15px; padding:0; margin:0;} #holder ul.sub li.sub-li:hover ul li a {height:15px; line-height:15px; margin:0; padding:0 20px; font-size:11px;} #holder ul.sub li.sub-li:hover ul li a:hover {height:15px; line-height:15px; margin:0; padding:0 20px; text-decoration:underline;} #holder ul.sub li.sub-li:hover a.a1 img {left:0; top:0; z-index:-1;} #holder ul.sub li.sub-li:hover a.a2 img {left:-150px; top:0; z-index:-1;} #holder ul.sub li.sub-li:hover a.a3 img {left:-300px; top:0; z-index:-1;} #holder ul.sub li.sub-li:hover a.a4 img {left:-450px; top:0; z-index:-1;} #holder ul.sub li.sub-li:hover a.a5 img {left:-600px; top:0; z-index:-1;} #holder ul.sub li.sub-li a:hover ul {left:0; width:130px;} #holder ul.sub li.sub-li a:hover ul li {float:left; height:15px; padding:0; margin:0;} #holder ul.sub li.sub-li a:hover ul li a {height:15px; line-height:15px; margin:0; padding:0 20px; font-size:11px;} #holder ul.sub li.sub-li a:hover ul li a:hover {height:15px; line-height:15px; margin:0; padding:0 20px; text-decoration:underline;} #holder ul.sub li.sub-li a.a1:hover img {left:0; top:0; z-index:-1;} #holder ul.sub li.sub-li a.a2:hover img {left:-150px; top:0; z-index:-1;} #holder ul.sub li.sub-li a.a3:hover img {left:-300px; top:0; z-index:-1;} #holder ul.sub li.sub-li a.a4:hover img {left:-450px; top:0; z-index:-1;} #holder ul.sub li.sub-li a.a5:hover img {left:-600px; top:0; z-index:-1;} #holder ul.sub li.current ul {left:0; width:130px;} #holder ul.sub li.current ul li {float:left; height:15px; padding:0; margin:0;} #holder ul.sub li.current ul li a {height:15px; line-height:15px; margin:0; padding:0 20px; font-size:11px;} #holder ul.sub li span {display:block;position:absolute; top:240px; left:0; line-height:15px; width:130px; padding:10px; height:90px; z-index:-1; color:#000; text-decoration:none; font-size:11px;} #holder ul.sub li.p1 span {background:#c3a688;} #holder ul.sub li.p2 span {background:#ffe398;} #holder ul.sub li.p3 span {background:#dee68b;} #holder ul.sub li.p4 span {background:#fff384;} #holder ul.sub li.p5 span {background:#f8c2ae;} </style>[/COLOR] </head> </head> <body id="www-cssplay-co-uk" class="menus"> <div id="wrapper"> <div id="topad"> <div id="googletop"> <script type="text/javascript"> Vertical1242022 = false; ShowAdHereBanner1242022 = true; RepeatAll1242022 = false; NoFollowAll1242022 = false; BannerStyles1242022 = new Array( "a{display:block;font-size:11px;color:#888;font-family:verdana,sans-serif;margin:0;text-align:center;text-decoration:none;overflow:hidden; float:left;}", "img{border:0;}", "a.adhere{color:#666;font-weight:bold;font-size:12px;background:#f8f8f8;text-align:center;}", "a.adhere:hover{background:#ddd;color:#333;}" ); document.write(unescape("%3Cscript src='"+document.location.protocol+"//s3.buysellads.com/1242022/1242022.js?v="+Date.parse(new Date())+"' type='text/javascript'%3E%3C/script%3E")); </script> </div> <img src="http://www.cssplay.co.uk/ads/shadow_logo.png" alt="" /> <img src="http://www.cssplay.co.uk/ads/advertise-here.jpg" alt="Advertise here" /> </div> <!-- end topad --> <div id="header"> <div id="logo"> <h1><a accesskey="1" href="http://www.cssplay.co.uk/index.html" title="Home Page">CSS</a></h1> <h2><a accesskey="1" href="http://www.cssplay.co.uk/index.html" title="Home Page"><span><i>p</i>la</span><span class="backy">y</span></a></h2> <h3>Experiments with Cascading Style Sheets</h3> </div> <!-- end of logo --> <ul id="main_menu"> <li id="demos"><a accesskey="A" href="http://www.cssplay.co.uk/menu/">Demos</a></li> <li id="menus"><a accesskey="M" href="http://www.cssplay.co.uk/menus/">Menus</a></li> <li id="layouts"><a accesskey="Y" href="http://www.cssplay.co.uk/layouts/">Layouts</a></li> <li id="boxes"><a accesskey="B" href="http://www.cssplay.co.uk/boxes/">Boxes</a></li> <li id="mozilla"><a accesskey="Z" href="http://www.cssplay.co.uk/mozilla/">Mozilla</a></li> <li id="explorer"><a accesskey="E" href="http://www.cssplay.co.uk/ie/">Explorer</a></li> <li id="opacity"><a accesskey="O" href="http://www.cssplay.co.uk/opacity/">Opacity</a></li> <li id="java"><a accesskey="J" href="http://www.stunicholls.com/" rel="nofollow" title="Over to http://www.stunicholls.com">Javascript</a></li> </ul> <ul id="sub_menu"> <li id="help"><a accesskey="H" href="http://www.cssplay.co.uk/service.html" title="Help and Services">HELP & ASSISTANCE</a></li> <li id="faqs"><a accesskey="Q" href="http://www.cssplay.co.uk/faqs.html" title="FAQ page">FAQs</a></li> <li id="contact"><a accesskey="N" href="http://www.cssplay.co.uk/w3c/contact.html" title="Contact us">CONTACT ME</a></li> <li id="privacy"><a accesskey="V" href="http://www.cssplay.co.uk/w3c/privacy.html" title="Privacy Policy">PRIVACY POLICY</a></li> <li id="sitemap"><a accesskey="S" href="http://www.cssplay.co.uk/sitemap.html" title="Site map">SITE MAP</a></li> <li id="keys"><a accesskey="K" href="http://www.cssplay.co.uk/accesskeys.html" title="Accesskeys">ACCESSKEYS</a></li> <li id="support"><a accesskey="P" href="http://www.cssplay.co.uk/support.html" title="Support">SUPPORT</a></li> <li id="feed"><a accesskey="R" href="http://www.cssplay.co.uk/feed.xml" title="RSS2.0 feed"><img src="http://www.cssplay.co.uk/images/rss.png" alt="rss feed" title="RSS2.0 feed" /></a></li> </ul> <ul id="navigation"> <li><a href="http://www.cssplay.co.uk/index.html">HOME</a></li> <li><a href="http://www.cssplay.co.uk/menus/index.html">LIST</a></li> </ul> <div id="search"> <div class="cse-branding-right" style="background-color:transparent;color:#000000"> <div class="cse-branding-form"> <form action="http://www.cssplay.co.uk/search.html" id="cse-search-box"> <div> <input type="hidden" name="cx" value="partner-pub-6651950180071236:chrtwm-4ria" /> <input type="hidden" name="cof" value="FORID:10" /> <input type="hidden" name="ie" value="UTF-8" /> <input type="text" name="q" size="19" class="search" /> <input type="submit" name="sa" value=" Search" /> </div> </form> </div> <div class="cse-branding-logo"> <img src="http://www.google.com/images/poweredby_transparent/poweredby_000000.gif" alt="Google" /> </div> <div class="cse-branding-text"> Custom Search </div> </div> </div> <!-- end of search --> </div> <!-- end header --> <div id="content"> <div id="info"> <h2>A CSS Select List - with current selection</h2> <h3>13th march 2010</h3> <br /> [COLOR="Red"]<div id="holder"> <ul id="menuOuter"> <li class="lv1-li"> <!--[if lte IE 6]><a class="lv1-a" href="#url1"><table><tr><td><![endif]--> <ul class="sub"> <li class="sub-li p1 current"><a class="a1" href="#url"><img src="http://www.cssplay.co.uk/menus/hover-grow/pic1.jpg" /><b>Womens Wear</b><!--[if gte IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]--> <ul> <li><a href="#url">Dresses</a></li> <li><a href="#url">Coats & Jackets</a></li> <li><a href="#url">Jeans</a></li> <li><a href="#url">Knitwear</a></li> <li><a href="#url">Shirts & Blouses</a></li> <li><a href="#url">Skirts</a></li> <li><a href="#url">Shoes</a></li> </ul> <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean non nunc dolor. Morbi vestibulum volutpat porttitor.</span> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> <li class="sub-li p2"><a class="a2" href="#url"><img src="http://www.cssplay.co.uk/menus/hover-grow/pic2.jpg" /><b>Mens Wear</b><!--[if gte IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]--> <ul> <li><a href="#url">Jackets</a></li> <li><a href="#url">Trousers</a></li> <li><a href="#url">Shirts</a></li> <li><a href="#url">Suits</a></li> <li><a href="#url">Jeans</a></li> <li><a href="#url">Shoes</a></li> </ul> <span>Morbi eget purus elit, sed interdum diam. Maecenas ultricies, nisi ac scelerisque sagittis, est eros euismod nulla.</span> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> <li class="sub-li p3"><a class="a3" href="#url"><img src="http://www.cssplay.co.uk/menus/hover-grow/pic3.jpg" /><b>Boys Wear</b><!--[if gte IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]--> <ul> <li><a href="#url">Shirts</a></li> <li><a href="#url">Jumpers</a></li> <li><a href="#url">Trousers & Jeans</a></li> <li><a href="#url">Trainers</a></li> <li><a href="#url">School Wear</a></li> </ul> <span>Vestibulum at ultricies mauris. Suspendisse potenti. Suspendisse potenti. Fusce lacinia sem et ipsum mattis mollis.</span> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> <li class="sub-li p4"><a class="a4" href="#url"><img src="http://www.cssplay.co.uk/menus/hover-grow/pic4.jpg" /><b>Girls Wear</b><!--[if gte IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]--> <ul> <li><a href="#url">Dresses & Skirts</a></li> <li><a href="#url">'T' Shirts</a></li> <li><a href="#url">Coats</a></li> <li><a href="#url">Jeans</a></li> <li><a href="#url">Accessories</a></li> <li><a href="#url">Belts</a></li> <li><a href="#url">Trainers & Shoes</a></li> </ul> <span>Nulla vitae enim nisl, sed vestibulum neque. Praesent eu malesuada nunc. Aenean fermentum, nulla ut convallis lacinia.</span> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> <li class="sub-li p5"><a class="a5" href="#url"><img src="http://www.cssplay.co.uk/menus/hover-grow/pic5.jpg" /><b>Baby Wear</b><!--[if gte IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]--> <ul> <li><a href="#url">Sleep Suits</a></li> <li><a href="#url">Baby Grows</a></li> <li><a href="#url">Vests</a></li> <li><a href="#url">Socks & shoes</a></li> <li><a href="#url">Coats & Jackets</a></li> <li><a href="#url">Hats</a></li> <li><a href="#url">Jumpers</a></li> </ul> <span>Sed convallis lobortis porttitor. Morbi congue, est ac fermentum elementum, augue tortor tristique libero, quis lobortis erat elit eu eros.</span> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> </ul> </div>[/COLOR] <br /> <p class="info">copyright © stu nicholls - CSS play</p> </div> <!-- end info --> <div id="infoBottom"> <div class="prevNext"> <a href="http://www.cssplay.co.uk/menus/css3-dropdown-all.html" accesskey="N" title="Next Demonstration" class="nextDemo">NEXT</a> <a href="http://www.cssplay.co.uk/menus/bags-dropdown.html" accesskey="P" title="Previous Demonstration" class="prevDemo">PREVIOUS</a> <a accesskey="C" href="http://www.cssplay.co.uk/comments/comments.php?comment_id=Hover%20Select" title="CSSplay comments" class="comments">COMMENTS</a> </div> <div class="box800"> <script type="text/javascript"><!-- google_ad_client = "pub-6651950180071236"; /* 728x90, created 3/24/09 */ google_ad_slot = "2160454816"; google_ad_width = 728; google_ad_height = 90; //--> </script> <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script> </div> </div> <div id="leftCol"> <h3>Information</h3> <p>A fairly simple single level menu, but also extremely complex to do with just CSS.</p> <p>This menu allows you to have a current selection open on page entry but also have this reset when hovering other menu items. The current selection will appear again once the mouse is moved off the menu. In this demo the Womens Wear shows the current selected page.</p> <p>Tested in IE6, IE7, IE7 emulation, IE8, Firefox, Opera, Safari(PC), Chrome, Flock, SeaMonkey, Avant and Maxthon.</p> <p>It should also work in all Mac browsers.</p> <br /> <div class="box475"> <script type="text/javascript"><!-- google_ad_client = "pub-6651950180071236"; /* 468x60, created 3/20/09 */ google_ad_slot = "7558797043"; google_ad_width = 468; google_ad_height = 60; //--> </script> <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script> </div> <h3>Copyright</h3> <p class="bold">Because of all the time and effort spent in producing this demonstration<br />I would ask that you respect my copyright.</p> <ol> <li>If you are using this on a personal web site then please retain the copyright comment in the stylesheet.<br /><span class="red">A donation to the '<a href="http://www.cssplay.co.uk/support.html">Support <b class="css">CSS</b><span class="play">play</span></a>' fund is now required for this demonstration.</span></li> <li>If you are using this on a commercial web site, or as a paying job for a client, then please email me asking for permission - stu{at}cssplay.co.uk <span class="red">and again a donation to the '<a href="http://www.cssplay.co.uk/support.html">Support <b class="css">CSS</b><span class="play">play</span></a>' fund is required.</span></li> <li>If you are having problems integrating any of my demonstrations into your website then I now offer a service to fault find and correct any errors that you may have introduced. Please email me for more information.</li> </ol> <h3>Terms and Conditions</h3> <p class="bold">This demonstration can be used subject to the following terms and conditions.</p> <ol> <li>If you wish to use this demonstration in your website(s) please email me stu{at}cssplay.co.uk seeking permission.</li> <li>You may NOT place this demonstration on another site for others to download.</li> <li>You may NOT redistrubute or resell this demonstration.</li> <li>Users agree not to remove or edit the credit notice within the stylesheet, or claim that this demonstration is their own.</li> <li><span class="bold">Please see the Copyright statement above regarding the requirement for a <span class="red">support donation</span>.</span></li> </ol> </div> <!-- end leftCol --> <div id="midCol"> <div class="box300"> <h3>Recommended Sites</h3> <ul class="cssplay"> <li><a href="http://www.free-download.org/top/">Most downloaded software</a></li> <li><a href="http://www.uk-cheapest.co.uk/">Register Domain Name</a></li> <li><a href="http://www.lava.com.au/">Web Design</a></li> <li>Top <a href="http://www.webdesigncwd.co.uk/">Website Design</a> Company CWD. Get the Perfect Website!</li> <li><a href="http://www.graphicevidence.co.uk/">graphic designers</a></li> <li><a title="SEO in Kent" href="http://www.seoluno.co.uk/">SEO in Kent</a></li> </ul> </div> </div> <!-- end midCol --> <br class="clear" /> </div> <!-- end content --> <div id="rightCol"> <div class="googlemedium"> <script type="text/javascript"><!-- google_ad_client = "ca-pub-6651950180071236"; /* medium rectangle */ google_ad_slot = "4755057509"; google_ad_width = 300; google_ad_height = 250; //--> </script> <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script> </div> <div class="box300"> <h3>Please Support CSS play</h3> <div style="width:258px; text-align:center;"> <form action="https://www.paypal.com/cgi-bin/webscr" method="post"> <div> <input type="hidden" name="cmd" value="_s-xclick" /> <input type="hidden" name="hosted_button_id" value="3206316" /> <input type="image" src="http://www.cssplay.co.uk/graphic/paypal2.png" name="submit" alt="PayPal - The safer, easier way to pay online." /> <img alt="" src="https://www.paypal.com/en_GB/i/scr/pixel.gif" width="1" height="1" /> </div> </form> </div> </div> <div class="box300"> <h3>CSS play Recommend</h3> <p><a class="bannerad" href="http://www.dynamicdrive.com/style/"><img src="http://www.cssplay.co.uk/ads/dynamicdrive.gif" alt="Free, practical CSS menus, layouts, and examples" title="Free, practical CSS menus, layouts, and examples" width="220" height="100" /></a></p> </div> <!-- B S A HERE --> <div class="box300"> <h3>Follow CSS play</h3> <br /> <p><a href="http://facebook.com/StuCSSplay" rel="nofollow"><img src="http://www.cssplay.co.uk/graphic/facebook.png" alt="Facebook" /></a> <a href="http://twitter.com/stucssplay" rel="nofollow"><img src="http://www.cssplay.co.uk/graphic/twitter.png" alt="Twitter" /></a> <a href="http://www.cssplay.co.uk/facebook-fan-page.html" rel="nofollow"><img src="http://www.cssplay.co.uk/graphic/fanpage.jpg" alt="Facebook Fan Page" /></a><span class='st_sharethis_large' ></span><br /> </p> <div class="g-plusone"></div> <script type="text/javascript"> (function() { var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true; po.src = 'https://apis.google.com/js/plusone.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s); })(); </script> </div> <div class="box300"> <h3>CSS play pages</h3> <ul> <li><a href="http://www.cssplay.co.uk/favicon_ads.html">Favicon Advertising</a></li> <li><a href="http://www.cssplay.co.uk/ads_page.html">Advertising rates</a></li> <li><a href="http://www.cssplay.co.uk/service.html">Web design & assistance</a></li> <li><a href="http://www.istu.co.uk/" rel="nofollow"><b>iStu</b> - NEW website!</a></li> <li><a href="http://www.w3css.co.uk/" rel="nofollow"><b>w3css</b> - NEW website!</a></li> </ul> </div> </div> <!-- end rightCol --> <br class="clear" /><br /> </div> <!-- end wrapper --> <div id="footer"> <div id="foot"> <p>© 2005-2012 Stu Nicholls - CSS play - All rights reserved</p> </div> <!-- end foot --> </div> <!-- end footer --> <script src="http://www.google-analytics.com/urchin.js" type="text/javascript"> </script> <script type="text/javascript"> _uacct = "UA-451410-1"; urchinTracker(); </script> </body> <!-- Mirrored from www.cssplay.co.uk/menus/hover-select.html by HTTrack Website Copier/3.x [XR&CO'2010], Sun, 14 Oct 2012 19:01:04 GMT --> </html> HTML-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"> #holder {width:750px; height:350px; position:relative; font-family:arial, sans-serif; border-top:1px solid #da8; border-bottom:1px solid #da8; z-index:100;} #holder table {border-collapse:collapse; margin:-1px;} #holder ul {float:left; padding:0; margin:0; list-style:none;} #holder ul.sub {margin-bottom:-4px;} #menuOuter li a.lv1-a {background:blue; zoom:1;} #menuOuter li a.lv1-a:hover {direction:ltr;} #holder ul.sub {float:left;} #holder ul.sub ul {position:absolute; left:-9999px; top:180px;} #holder ul.sub li.sub-li a img {display:block; position:absolute; left:-9999px; border:0; height:200px; width:750px;} #holder ul.sub li.sub-li {display:block; float:left; width:150px; height:240px;} #holder ul.sub li.sub-li a {margin-top:200px; width:110px; display:block; padding:0 20px; height:40px; line-height:40px; color:#fff; text-decoration:none; font-family:arial, sans-serif; font-size:14px;} #holder ul.sub li.sub-li a.a1 {background:#938668;} #holder ul.sub li.sub-li a.a2 {background:#e9a358;} #holder ul.sub li.sub-li a.a3 {background:#9ea64b;} #holder ul.sub li.sub-li a.a4 {background:#dfb344;} #holder ul.sub li.sub-li a.a5 {background:#b8826e;} #menuOuter li:hover ul.sub li.current a {margin-top:200px; height:40px;} #menuOuter li:hover ul.sub li.current ul {left:-9999px;} #menuOuter li:hover ul.sub li.current a img {left:-9999px;} #menuOuter a:hover ul.sub li.current a {margin-top:200px; height:40px;} #menuOuter a:hover ul.sub li.current ul {left:-9999px;} #menuOuter a:hover ul.sub li.current a img {left:-9999px;} #holder ul.sub li.sub-li:hover > a {margin-top:0; height:350px;} #holder ul.sub li.sub-li a:hover {margin-top:0; height:350px;} #holder ul.sub li.current a {margin-top:0; height:350px;} #holder ul.sub li.current a.a1 img {left:0; top:0; z-index:-1;} #holder ul.sub li.current a.a2 img {left:-150px; top:0; z-index:-1;} #holder ul.sub li.current a.a3 img {left:-300px; top:0; z-index:-1;} #holder ul.sub li.current a.a4 img {left:-450px; top:0; z-index:-1;} #holder ul.sub li.current a.a5 img {left:-600px; top:0; z-index:-1;} #menuOuter li:hover ul.sub li.current:hover a {margin-top:0; height:350px;} #menuOuter li:hover ul.sub li.current:hover ul {left:0;} #menuOuter li:hover ul.sub li.current:hover ul li {float:left; height:15px; padding:0; margin:0;} #menuOuter li:hover ul.sub li.current:hover ul li a {height:15px; line-height:15px; margin:0; padding:0 20px;} #menuOuter li:hover ul.sub li.current:hover ul li a:hover {height:15px; line-height:15px; margin:0; padding:0 20px; text-decoration:underline;} #menuOuter a:hover ul.sub li.current a:hover {margin-top:0; height:350px;} #menuOuter a:hover ul.sub li.current a:hover ul {left:0;} #menuOuter a:hover ul.sub li.current a:hover ul li {float:left; height:15px; padding:0; margin:0;} #menuOuter a:hover ul.sub li.current a:hover ul li a {height:15px; line-height:15px; margin:0; padding:0 20px;} #menuOuter a:hover ul.sub li.current a:hover ul li a:hover {height:15px; line-height:15px; margin:0; padding:0 20px; text-decoration:underline;} #holder ul.sub li {position:relative;} #holder ul.sub li.sub-li:hover ul {left:0; width:130px;} #holder ul.sub li.sub-li:hover ul li {float:left; height:15px; padding:0; margin:0;} #holder ul.sub li.sub-li:hover ul li a {height:15px; line-height:15px; margin:0; padding:0 20px; font-size:11px;} #holder ul.sub li.sub-li:hover ul li a:hover {height:15px; line-height:15px; margin:0; padding:0 20px; text-decoration:underline;} #holder ul.sub li.sub-li:hover a.a1 img {left:0; top:0; z-index:-1;} #holder ul.sub li.sub-li:hover a.a2 img {left:-150px; top:0; z-index:-1;} #holder ul.sub li.sub-li:hover a.a3 img {left:-300px; top:0; z-index:-1;} #holder ul.sub li.sub-li:hover a.a4 img {left:-450px; top:0; z-index:-1;} #holder ul.sub li.sub-li:hover a.a5 img {left:-600px; top:0; z-index:-1;} #holder ul.sub li.sub-li a:hover ul {left:0; width:130px;} #holder ul.sub li.sub-li a:hover ul li {float:left; height:15px; padding:0; margin:0;} #holder ul.sub li.sub-li a:hover ul li a {height:15px; line-height:15px; margin:0; padding:0 20px; font-size:11px;} #holder ul.sub li.sub-li a:hover ul li a:hover {height:15px; line-height:15px; margin:0; padding:0 20px; text-decoration:underline;} #holder ul.sub li.sub-li a.a1:hover img {left:0; top:0; z-index:-1;} #holder ul.sub li.sub-li a.a2:hover img {left:-150px; top:0; z-index:-1;} #holder ul.sub li.sub-li a.a3:hover img {left:-300px; top:0; z-index:-1;} #holder ul.sub li.sub-li a.a4:hover img {left:-450px; top:0; z-index:-1;} #holder ul.sub li.sub-li a.a5:hover img {left:-600px; top:0; z-index:-1;} #holder ul.sub li.current ul {left:0; width:130px;} #holder ul.sub li.current ul li {float:left; height:15px; padding:0; margin:0;} #holder ul.sub li.current ul li a {height:15px; line-height:15px; margin:0; padding:0 20px; font-size:11px;} #holder ul.sub li span {display:block;position:absolute; top:240px; left:0; line-height:15px; width:130px; padding:10px; height:90px; z-index:-1; color:#000; text-decoration:none; font-size:11px;} #holder ul.sub li.p1 span {background:#c3a688;} #holder ul.sub li.p2 span {background:#ffe398;} #holder ul.sub li.p3 span {background:#dee68b;} #holder ul.sub li.p4 span {background:#fff384;} #holder ul.sub li.p5 span {background:#f8c2ae;} </style> </head> <body> <div id="holder"> <ul id="menuOuter"> <li class="lv1-li"> <ul class="sub"> <li class="sub-li p1 current"><a class="a1" ><img src="#" /><b>News</b></a> <span>Beschreibung...</span> //i deletet a bit here to put it as i would like to use it...don't think that that is the problem! <ul> <li class= "Probe"> <a>Text<br /> bmSVDHAFDF</a> </li> </ul> </li> <li class="sub-li p2"><a class="a2"><img src="#" /><b>Veranstaltungen</b></a> <span>Beschreibung...</span> </li> <li class="sub-li p3"><a class="a3"><img src="#" /><b>Wissenswertes</b></a> <span>Beschreibung...</span> </li> <li class="sub-li p4"><a class="a4"><img src="#" /><b>Girls Wear</b></a> <span>Beschreibung...</span> </li> <li class="sub-li p5"><a class="a5"><img src="#" /><b>Baby Wear</b></a> <span>Beschreibung...</span> </li> </ul> </li> </ul> </div> </body> </html> findet ihr den fehler ich nicht. ich würde mich sehr freuen, wenn ihr euch in den doch sehr komplexen css code einlesen könntet um mir weiterhelfen zu können. Ich hatte schon einmal vor ein paar jahren probleme damit..da hatte ich mir geholfen, es neu zu schreiben doch das hier ist für mich zu hoch mit freundlichen Grüßen IC |
Sponsored Links |
Sponsored Links |
|
|||
Im browser ist wie gesagt alles normal, es hätte ja sein können, das hier leuten diese problem bereits bekannt ist und eine lösung parat haben, bzw. sie den fehler der das problem erst macht finden könnten.
zu aller letzt seht ihr ja welche funktionen die listen haben, und da gibt es ja die möglichkeit das ihr es anders umgesetzt hättet. |
|
||||
Zitat:
und hier zu deinem Problem das, was auf der Seite von CSSPlay steht: Zitat:
Zitat:
Zitat:
Edit sagt: Wenn man mir jetzt wieder negatives Gemecker vorwerfen will, just do it
__________________
Hier ein immer gültiges Statement: Überarbeite deine Code, lerne die Grundlagen, widersprich mir nicht, wehre dich nicht, ich habe Recht, wir sind Lolgion, wir sind viele.. potato... All meine Angaben sind ohne Gewähr, es könnte also trotz meiner Unfehlbarkeit dazu kommen dass ich falsch liege www.richard-thiel.de | Müssen Websiten überall gleich ausschauen? |
|
||||
So 2 Leute sagen dir, das der Dreamweaver keine repräsentative Darstellung eines Designs bietet (Außer diese sind bis aufs kleinste Milimeterchen perfekt nach DW-Vorgaben).
Und dann willst du weitere Rückmeldungen, weil du unbedingt mit Dreamwear in der Design-Vorschau Ansicht arbeiten willst?
__________________
Hier ein immer gültiges Statement: Überarbeite deine Code, lerne die Grundlagen, widersprich mir nicht, wehre dich nicht, ich habe Recht, wir sind Lolgion, wir sind viele.. potato... All meine Angaben sind ohne Gewähr, es könnte also trotz meiner Unfehlbarkeit dazu kommen dass ich falsch liege www.richard-thiel.de | Müssen Websiten überall gleich ausschauen? |
|
|||
Hallo ICurtius,
du vermengst wohl zwei Probleme. a) Probleme mit der Übernahme der Navigation aus CSSplay Bei mir werden (im Firefox) aus beiden Quellcodes von dir keine fehlerfreien Seiten angezeigt. In seiner Einstiegsseite beschreibt Stu Nichols wie sein Quelltext übernommen werden muss, damit seine Beispiele wie von ihm vorgeschlagen funktionieren. Du versuchst offenbar erst mal die gesammte Seite mit dem Beispiel zu speichern und dann alles rauszulöschen, was deiner Meinung nach unnötig ist. Das ist der falsche Weg. Wenn ich das Beispiel wie von Stu Nichols vorgeschlagen zusammensetze funktioniert es auch fehlerfrei. b) Vorschau im Dreamweaver Die Entwurfsansicht im DW ist eine reine Arbeitsansicht, die die Funktionen der Seite wie im Browser gar nicht nachbilden soll. Sie erhebt damit auch gar nicht die Absicht die Vorschau in den Browsern zu ersetzen. Sie ist als funktionsloser Roh-Entwurf ohne Funktionen gedacht. Um die Funktionen, und damit auch css-Spielereien, direkt im DW einer ersten Prüfung zu unterziehen gibt es den Live-Code im Zusammenspiel mit der Live-Ansicht. Damit kann man im Regelfall (und das funktioniert auch mit den Beispiel von Stu Nichols) die Funktion der Seite prüfen ohne den DW zu verlassen und hat damit noch immer den "kurzen" Zugriff auf den Quelltext. Siehe auch Adobe Dreamweaver * Vorschau von Seiten und noch ein Video dazu http://tv.adobe.com/de/watch/trainin...und-live-code/ Wobei auch diese Vorschau nicht die direkte Kontrolle in den einelnen Browsern mit all ihren Eigenheiten ersetzen kann und soll. Nach grundlegenden Änderungen sollten die Fortschritte also immer noch in den gebräuchlichen Browsern geprüft werden, die entsprechend auch direkt aus dem DW heraus direkt mit der Seite aufgerufen werden können. Gruss MrMurphy Geändert von MrMurphy (15.10.2012 um 06:50 Uhr) |
|
||||
Ja: Hör auf im DW die Design-View anzusehen und für alles weitere wird ein Link, der zeigt was du bereits umgesetzt hast, benötigt. Wir basteln hier keinen Quellcode zusammen, dazu haben wir zu wenig Zeit.
__________________
Rettet die Erde.... sie ist der einzige Planet mit Schokolade! Geändert von Praktikant (15.10.2012 um 09:38 Uhr) |
Sponsored Links |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Dreamweaver CS3 & korrektes doctype/head-Bereich? | tiga | (X)HTML | 4 | 26.10.2008 17:18 |
Dreamweaver konvertierung von HTML auf XHTML | Friedel | (X)HTML | 12 | 24.10.2005 22:23 |
CSS und Dreamweaver | Blume | CSS | 6 | 09.08.2005 10:53 |
Dreamweaver und Sonderzeichen (Entitäten) | feelx | (X)HTML | 16 | 21.02.2005 23:29 |
Validieren von XHTML mit DreamWeaver | greeny | (X)HTML | 0 | 06.09.2004 15:54 |