zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden CSS Einsteiger bittet um Hilfe

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 06.09.2007, 15:40
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 06.09.2007
Beiträge: 9
pcklinik befindet sich auf einem aufstrebenden Ast
Standard Erledigt - Horizonales Pulldown-Menu . CSS Einsteiger bittet um Hilfe

Hallo zusammen ! Zunächst bitte ich mal um Entschuldigung wenn ich euch nerve aber ich bin CSS Newbe.

Ich versuche im Moment ein CSS Menue u bauen das grundsätzlich auf einem Menue von Stu Nicclos basiert. Es ist/war ein horizonales Pulldown-menue das ich mir eingenen Grafiken angepasst habe.Das Menue funktioniert auch soweit.

Ich habe nur auf einem Button ein Submenue das im Moment auch einwandfrei nach unten aufgeht. LEIDER brauche ich genau diese 2 Menuepunkt dann NEBENEINANDER. Ich abe schon Bücher gewälzt und gegoogelt - mir andere Menues, bei denen geht angesehen (die waren aber nicht pulldown) - leider bin ich aber nicht weitergekommen.

Kann mir jemand helfen?

Hier mal meine Source - Ich bin für jeden Tip dankbar!!
Gruß
Frank Hamm



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml2/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> PC-KLinik Limburg 2007 - inspired by Stu Nicholls | CSSplay | A Professional drop-down menu</title>
<style type="text/css">

/* ================================================== ==============
This copyright notice must be kept untouched in the stylesheet at
all times.

The original version of this stylesheet and the associated (x)html
is available at Stu Nicholls | CSSplay | A Professional drop-down menu
Copyright (c) 2005-2007 Stu Nicholls. All rights reserved.
This stylesheet and the associated (x)html may be modified in any
way to fit your requirements.
================================================== ================= */
#multi-level {height:42px; position:relative; z-index:100;}
#multi-level .pad {float:left;}

/* Das Menue Styling */
/* Entfernen der paddings, margins and bullets aus der Liste */
.menu, .menu ul {list-style-type:none; padding:0; margin:0; font-family:arial, sans-serif;}

/* Set up the top level list items and float left to place inline */
.menu li.top {display:block; float:left; position:relative;}

/* Style and position the table so it takes no part in the menu function. The font size is necessary for IE5.5 */
.menu table {border-collapse:collapse; width:0; height:0; position:absolute; top:0; left:0;}

/* Default top link link styling */
.menu li.top a.top_link {display:block; float:left; height:42px;}
.menu li.top a span {position:absolute; left:-9999px; top:0; z-index:0; font-size:10px;} /* move the link text off screen */

/* pre-load the hover images into the lists */
.menu li.p1 {width:94px; background:url(multi_level-files/start.jpg) no-repeat;;}
.menu li.p2 {width:94px; background:url(multi_level-files/pkw-lackieranlage.jpg) no-repeat;;}
.menu li.p3 {width:94px; background:url(multi_level-files/lkw-lackieranlage.jpg) no-repeat;;}
.menu li.p4 {width:94px; background:url(multi_level-files/industrielackieranlage.jpg) no-repeat;;}
.menu li.p5 {width:94px; background:url(multi_level-files/vorbereitung.jpg) no-repeat;;}
.menu li.p6 {width:94px; background:url(multi_level-files/farbmisch.jpg) no-repeat;;}
.menu li.p7 {width:94px; background:url(multi_level-files/service.jpg) no-repeat;;}


/* set up the normal unhovered images in the links */
.menu li a#start {width:94px; background:url(multi_level-files/start-over.jpg) no-repeat;}
.menu li a#pkwlackierkabine {width:94px; background:url(multi_level-files/pkw-lackieranlage-over.jpg) no-repeat;}
.menu li a#lkwlackierkabine {width:94px; background:url(multi_level-files/lkw-lackieranlage-over.jpg) no-repeat;}
.menu li a#industrielackierkabine {width:94px; background:url(multi_level-files/industrielackieranlage-over.jpg) no-repeat;}
.menu li a#vorbereitung {width:94px; background:url(multi_level-files/vorbereitung-over.jpg) no-repeat;}
.menu li a#farbmisch {width:94px; background:url(multi_level-files/farbmisch-over.jpg) no-repeat;}
.menu li a#services {width:94px; background:url(multi_level-files/service-over.jpg) no-repeat;}



/* Styling der Liste oder Link hover. Abhängig vom verwendeten Browser */
.menu a:hover {visibility:visible;} /* for IE6 */
.menu li:hover { position:relative; z-index:200;} /* for IE7 */

/* make the links transparent on hover so that the hover images in the lists show through (no flicker) */
.menu li a#start:hover, .menu li:hover a#home,
.menu li a#pkwlackierkabine:hover, .menu li:hover a#pkwlackierkabine,
.menu li a#lkwlackierkabine:hover, .menu li:hover a#lkwlackierkabine,
.menu li a#industrielackierkabine:hover, .menu li:hover a#industrielackierkabine,
.menu li a#vorbereitung:hover, .menu li:hover a#vorbereitung,
.menu li a#farbmisch:hover, .menu li:hover a#farbmisch,
.menu li a#services:hover, .menu li:hover a#farbmisch {background:transparent;}

/* naechste Menuebene wird unsichtbar gemacht indem sie mit left:-9999px; top:-9999px; aus dem Bildschirm geschoben wird. */
.menu ul,
.menu :hover ul ul,
.menu :hover ul :hover ul ul,
.menu :hover ul :hover ul :hover ul ul,
.menu :hover ul :hover ul :hover ul :hover ul ul {position:absolute; left:-9999px; top:-9999px; width:0; height:0;}

/* Einstellungen fuer das erste Dropdown Sublevel level */
.menu :hover ul.sub {left:0; top:35px; background: #fff; padding:3px 0; border:1px solid #888; white-space:nowrap; width:93px; height:auto;}
.menu :hover ul.sub li {display:block; height:20px; position:relative; float:left; width:90px;}
.menu :hover ul.sub li a {display:block; font-size:11px; height:20px; width:87px; line-height:20px; text-indent:5px; color:#000; text-decoration:none; border:3px solid #fff; border-width:0 0 0 3px;}
.menu :hover ul.sub li a.fly {background:#fff url(multi_level-files/arrow.gif) 80px 7px no-repeat;}
.menu :hover ul.sub li a:hover {background:#37a237; color:#fff;}
.menu :hover ul.sub li a.fly:hover {background:#37a237 url(multi_level-files/arrow_over.gif) 80px 7px no-repeat; color:#fff;}
.menu :hover ul li:hover > a.fly {background:#37a237 url(multi_level-files/arrow_over.gif) 80px 7px no-repeat; color:#fff;}

/* set up the flyout levels when hovering */
.menu :hover ul :hover ul,
.menu :hover ul :hover ul :hover ul,
.menu :hover ul :hover ul :hover ul :hover ul,
.menu :hover ul :hover ul :hover ul :hover ul :hover ul
{left:90px; top:-4px; background: #fff; padding:3px 0; border:1px solid #888; white-space:nowrap; width:93px; z-index:200; height:auto; z-index:300;}

</style>


</style>
</head>

<body>
<div id="multi-level">
<img class="pad" src="multi_level-files/quermenue-button-1.jpg" title="" alt="" />
<ul class="menu">
<li class="top p1"><a href="http://www.cssplay.co.uk" id="start" class="top_link"><span>Home</span></a></li>
<li class="top p2"><a href="http://www.cssplay.co.uk" id="pkwlackierkabine" class="top_link"><span>pkwlackierkabine</span><!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class="sub">
<li><a href="../ie/">Standart</a></li>
<li><a href="../ie/">Profi</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>

<li class="top p3"><a href="http://www.cssplay.co.uk" id="lkwlackierkabine" class="top_link"><span>lkwlackierkabine</span></a></li>


<li class="top p4"><a href="http://www.cssplay.co.uk" id="industrielackierkabine" class="top_link"><span>industrielackierkabine</span></a></li>


<li class="top p5"><a href="http://www.cssplay.co.uk" id="vorbereitung" class="top_link"><span>vorbereitung</span></a></li>


<li class="top p6"><a href="http://www.cssplay.co.uk" id="farbmisch" class="top_link"><span>farbmisch</span></a></li>


<li class="top p7"><a href="http://www.cssplay.co.uk" id="services" class="top_link"><span>services</span></a></li>

<img class="pad" src="multi_level-files/quermenue-button-8.jpg" title="" alt="" />

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

Geändert von pcklinik (06.09.2007 um 16:47 Uhr)
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
Benötige Hilfe :( Html / Css Problem? Stefanie CSS 9 17.05.2011 19:12
Redesign für Steiner Cycling Team pkipper Site- und Layoutcheck 11 09.02.2011 13:25
Bitte um Hilfe bei der CSS Positionierung matschi CSS 7 10.11.2008 18:12
Css navi problem IE 6 HILFE.... slave (X)HTML 9 28.10.2007 14:07
Hilfe bei CSS Design jochen35 CSS 3 30.10.2006 17:54


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