zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > Site- und Layoutcheck
Seite neu laden Dreamweaver zerreist Listenstruktur in Vorschau

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 14.10.2012, 22:42
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 14.10.2012
Beiträge: 7
ICurtius befindet sich auf einem aufstrebenden Ast
Standard 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 &amp; 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 &amp; Jackets</a></li>
					<li><a href="#url">Jeans</a></li>
					<li><a href="#url">Knitwear</a></li>
					<li><a href="#url">Shirts &amp; 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 &amp; 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 &amp; 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 &amp; 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 &amp; shoes</a></li>
					<li><a href="#url">Coats &amp; 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 &copy; 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>&nbsp;&nbsp;&nbsp;<a href="http://twitter.com/stucssplay" rel="nofollow"><img src="http://www.cssplay.co.uk/graphic/twitter.png" alt="Twitter" /></a>&nbsp;&nbsp;&nbsp;<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 &amp; 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>&copy; 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 und css code der liste und zu übernehmenden teile schon ein wenig bearbeitet:
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>
hier wie Dreamweaver das zerschießt: Directupload.net - qubvug42.jpg

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
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 14.10.2012, 23:30
Benutzerbild von cebito
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 18.07.2009
Ort: Dresden
Beiträge: 688
cebito sorgt für eine eindrucksvolle Atmosphärecebito sorgt für eine eindrucksvolle Atmosphäre
Standard

Und wir sollen das jetzt nachbauen oder wie? Stell es online und poste einen Link!

btw, schau dir deine Seite in einem echten Browser an. Niemand surft mit Dreamweaver, also wird sie sich auch niemand außer dir jemals im Dreamweaver anschauen.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 14.10.2012, 23:34
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 14.10.2012
Beiträge: 7
ICurtius befindet sich auf einem aufstrebenden Ast
Standard

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.
Mit Zitat antworten
  #4 (permalink)  
Alt 14.10.2012, 23:35
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 14.10.2012
Beiträge: 7
ICurtius befindet sich auf einem aufstrebenden Ast
Standard

Das projekt ist noch nicht so weit vorangeschritten, als das ich euch einen link präsentieren könnte, da es eine alte seite ersetzt, die bis zur vervollständigung noch online bleibt.
Mit Zitat antworten
  #5 (permalink)  
Alt 15.10.2012, 00:11
Benutzerbild von Thielo
Web Ninja
XHTMLforum-Kenner
 
Registriert seit: 17.09.2009
Ort: Stuttgart oder so
Beiträge: 3.372
Thielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein Lichtblick
Standard

Zitat:
Zitat von ICurtius Beitrag anzeigen
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.
Damit du diesen "Dreamweaver"-Aberglauben mal vergisst, empfehle ich dir mal den Editor "Sublime Text 2".

und hier zu deinem Problem das, was auf der Seite von CSSPlay steht:
Zitat:
Tested in IE6, IE7, IE7 emulation, IE8, Firefox, Opera, Safari(PC), Chrome, Flock, SeaMonkey, Avant and Maxthon.
It should also work in all Mac browsers.
Zitat:
Zitat von ICurtius Beitrag anzeigen
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
Dann solltest du es vielleicht erst einmal verstehen, bevor du es einsetzt.

Zitat:
Zitat von ICurtius Beitrag anzeigen
Das projekt ist noch nicht so weit vorangeschritten, als das ich euch einen link präsentieren könnte, da es eine alte seite ersetzt, die bis zur vervollständigung noch online bleibt.
Herr Doktor, ich habe eine fiese Prellung, aber noch ist es nicht blau/rot genug als das ich zu Ihnen kommen möchte.. Ergibt Sinn... total..


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?
Mit Zitat antworten
  #6 (permalink)  
Alt 15.10.2012, 00:23
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 14.10.2012
Beiträge: 7
ICurtius befindet sich auf einem aufstrebenden Ast
Standard

gibt es vielleicht auch noch eine konstruktive rückmeldung?
Mit Zitat antworten
  #7 (permalink)  
Alt 15.10.2012, 01:50
Benutzerbild von Thielo
Web Ninja
XHTMLforum-Kenner
 
Registriert seit: 17.09.2009
Ort: Stuttgart oder so
Beiträge: 3.372
Thielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein Lichtblick
Standard

Zitat:
Zitat von ICurtius Beitrag anzeigen
gibt es vielleicht auch noch eine konstruktive rückmeldung?
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?
Mit Zitat antworten
  #8 (permalink)  
Alt 15.10.2012, 06:35
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 10.01.2010
Beiträge: 1.123
MrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer Mensch
Standard

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)
Mit Zitat antworten
  #9 (permalink)  
Alt 15.10.2012, 09:27
Benutzerbild von Praktikant
Semantikbremse.
XHTMLforum-Kenner
 
Registriert seit: 22.04.2008
Beiträge: 4.985
Praktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz sein
Standard

Zitat:
Zitat von ICurtius Beitrag anzeigen
gibt es vielleicht auch noch eine konstruktive rückmeldung?
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)
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 15.10.2012, 11:44
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 14.10.2012
Beiträge: 7
ICurtius befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von MrMurphy Beitrag anzeigen

a) Probleme mit der Übernahme der Navigation aus CSSplay
Danke
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ä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


Alle Zeitangaben in WEZ +2. Es ist jetzt 10:10 Uhr.