• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Grafik Link mit Listen Menü - Positionierung

nightmind

Neues Mitglied
Hallo,
habe da ein Problem beim Einbau eines CSS Listen Menüs (dieses hier http://www.designchemical.com/lab/jquery-mega-drop-down-menu-plugin/getting-started/ )

Mein Problem ist folgendes,
ich habe mit Photoshop ein Layout gesliced und habe nun die HTML Datei vorliegen. Nun wollte ich dort ein CSS Menü einbauen.
Der Ausgangspunkt im Layout ist also zum Beispiel die Grafik "Startseite" bei der das Menü nach unten aufklappen soll sobald man darüber fährt.
Dummerweise taucht das Menü jetzt "irgendwo" auf der Seite auf wenn ich über die Grafik Startseite fahre und nicht direkt unter Startseite wo der Kasten eigentlich hin soll.

Meine HTML Datei nach dem Slicen in Photoshop und dem einfügen der nötigen Verweise auf css und js schaut so aus.

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>Testseite</title>
<link href="css/header.css" rel="stylesheet" type="text/css" />
<link href="css/menue.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type='text/javascript' src='js/jquery.hoverIntent.minified.js'></script>
<script type='text/javascript' src='js/jquery.dcmegamenu.1.3.3.js'></script>
<script type="text/javascript">
$(document).ready(function($){
    $('#mega-menu-7').dcMegaMenu({
        rowItems: '3',
        speed: 'fast',
        effect: 'slide'
    });
});
</script>
</head>

<body>
<div id="tableheader">
    <div id="header-01_"><img id="header_01" src="header/header_01.png" width="999" height="144" alt="" /></div>
    <div id="header-02_"><img id="header_02" src="header/header_02.png" width="266" height="26" alt="" /></div>
    <div id="header-home_"><a href="#"><img id="header_home" src="header/header_home.png" width="34" height="15" border="0" alt="zur Startseite" /></a></div>
    <div id="header-04_"><img id="header_04" src="header/header_04.png" width="13" height="74" alt="" /></div>
    <div id="header-news_"><a href="#"><img id="header_news" src="header/header_news.png" width="65" height="15" border="0" alt="Aktuelles" /></a></div>
    <div id="header-06_"><img id="header_06" src="header/header_06.png" width="13" height="74" alt="" /></div>
    <div id="header-board_"><a href="#"><img id="header_board" src="header/header_board.png" width="42" height="15" border="0" alt="Forum" /></a></div>
    <div id="header-08_"><img id="header_08" src="header/header_08.png" width="14" height="74" alt="" /></div>

    <div class="green">
    <ul id="mega-menu-7" class="mega-menu">
    <li>    
    <div id="header-league_"><a href="#"><img id="header_league" src="header/header_league.png" width="33" height="15" alt="Ligen" /></a></div>

    <ul>
    <li><a href="#">Unterpunkt der Liste</a>
    <ul>
        <li><a href="#">Link 1</a></li>
        <li><a href="#">Link 2</a></li>
        <li><a href="#">Link 3</a></li> 
    </ul>
    </li>    
    </ul>
    </li>
    </ul>

    </div>

    
    <div id="header-10_"><img id="header_10" src="header/header_10.png" width="13" height="74" alt="" /></div>
    <div id="header-cups_"><a href="#"><img id="header_cups" src="header/header_cups.png" width="45" height="15" border="0" alt="Pokale" /></a></div>
    <div id="header-12_"><img id="header_12" src="header/header_12.png" width="14" height="74" alt="" /></div>
    <div id="header-ladder_"><a href="#"><img id="header_ladder" src="header/header_ladder.png" width="46" height="15" border="0" alt="Ladder" /></a></div>
    <div id="header-14_"><img id="header_14" src="header/header_14.png" width="13" height="74" alt="" /></div>
    <div id="header-tournament_"><a href="#"><img id="header_tournament" src="header/header_tournament.png" width="56" height="15" border="0" alt="Turniere" /></a></div>
    <div id="header-16_"><img id="header_16" src="header/header_16.png" width="14" height="74" alt="" /></div>
    <div id="header-rules_"><a href="#"><img id="header_rules" src="header/header_rules.png" width="69" height="15" border="0" alt="Regelwerk" /></a></div>
    <div id="header-18_"><img id="header_18" src="header/header_18.png" width="14" height="74" alt="" /></div>
    <div id="header-team_"><a href="#"><img id="header_team" src="header/header_team.png" width="74" height="15" border="0" alt="Ligaleitung" /></a></div>
    <div id="header-20_"><img id="header_20" src="header/header_20.png" width="14" height="74" alt="" /></div>
    <div id="header-faq_"><a href="#"><img id="header_faq" src="header/header_faq.png" width="31" height="15" border="0" alt="Hilfe" /></a></div>
    <div id="header-22_"><img id="header_22" src="header/header_22.png" width="13" height="28" alt="" /></div>
    <div id="header-menu_"><a href="#"><img id="header_menu" src="header/header_menu.png" width="65" height="15" border="0" alt="Allgemein" /></a></div>
    <div id="header-24_"><img id="header_24" src="header/header_24.png" width="38" height="28" alt="" /></div>
    <div id="header-25_"><img id="header_25" src="header/header_25.png" width="34" height="59" alt="" /></div>
    <div id="header-26_"><img id="header_26" src="header/header_26.png" width="65" height="59" alt="" /></div>
    <div id="header-27_"><img id="header_27" src="header/header_27.png" width="42" height="59" alt="" /></div>
    <div id="header-28_"><img id="header_28" src="header/header_28.png" width="33" height="59" alt="" /></div>
    <div id="header-29_"><img id="header_29" src="header/header_29.png" width="45" height="59" alt="" /></div>
    <div id="header-30_"><img id="header_30" src="header/header_30.png" width="46" height="59" alt="" /></div>
    <div id="header-31_"><img id="header_31" src="header/header_31.png" width="56" height="59" alt="" /></div>
    <div id="header-32_"><img id="header_32" src="header/header_32.png" width="69" height="59" alt="" /></div>
    <div id="header-33_"><img id="header_33" src="header/header_33.png" width="74" height="59" alt="" /></div>
    <div id="header-34_"><img id="header_34" src="header/header_34.png" width="31" height="13" alt="" /></div>
    <div id="header-35_"><img id="header_35" src="header/header_35.png" width="65" height="13" alt="" /></div>
    <div id="header-36_"><img id="header_36" src="header/header_36.png" width="15" height="48" alt="" /></div>
    <div id="header-facebook_"><a href="https://www.facebook.com/..." target="_blank"><img id="header_facebook" src="header/header_facebook.png" width="17" height="17" border="0" alt="Folge uns auf Facebook" /></a></div>
    <div id="header-38_"><img id="header_38" src="header/header_38.png" width="4" height="48" alt="" /></div>
    <div id="header-googleplus_"><a href="https://plus.google.com/b/..." target="_blank"><img id="header_googleplus" src="header/header_googleplus.png" width="17" height="17" border="0" alt="Folge uns auf Google+" /></a></div>
    <div id="header-40_"><img id="header_40" src="header/header_40.png" width="4" height="48" alt="" /></div>
    <div id="header-twitter_"><a href="https://twitter.com/..." target="_blank"><img id="header_twitter" src="header/header_twitter.png" width="17" height="17" border="0" alt="Folge uns auf Twitter" /></a></div>
    <div id="header-42_"><img id="header_42" src="header/header_42.png" width="4" height="48" alt="" /></div>
    <div id="header-rss_"><a href="rssfeed.php?section=news"><img id="header_rss" src="header/header_rss.png" width="17" height="17" border="0" alt="RSS-Feed" /></a></div>
    <div id="header-44_"><img id="header_44" src="header/header_44.png" width="171" height="48" alt="" /></div>
    <div id="header-45_"><img id="header_45" src="header/header_45.png" width="4" height="46" alt="" /></div>
    <div id="header-usercp_"><a href="#"><img id="header_usercp" src="header/header_usercp.png" width="130" height="11" border="0" alt="Kontrollzentrum" /></a></div>
    <div id="header-47_"><img id="header_47" src="header/header_47.png" width="13" height="46" alt="" /></div>
    <div id="header-48_"><img id="header_48" src="header/header_48.png" width="130" height="35" alt="" /></div>
    <div id="header-49_"><img id="header_49" src="header/header_49.png" width="17" height="31" alt="" /></div>
    <div id="header-50_"><img id="header_50" src="header/header_50.png" width="17" height="31" alt="" /></div>
    <div id="header-51_"><img id="header_51" src="header/header_51.png" width="17" height="31" alt="" /></div>
    <div id="header-52_"><img id="header_52" src="header/header_52.png" width="17" height="31" alt="" /></div>
</div>
</body>
</html>

Vermutlich ist hier auch einiges falsch ...

Kann mir jemand sagen was ich wo einfügen muß damit dieser verdammte Kasten mit den Links dort auftaucht wo ich ihn haben möchte ? Hatte mich bisher immer mit Tabellen durchgeschlagen deshalb mit dem Div Containern noch nicht soviel Ahnung, hatte mir den Einstieg jetzt nicht so kompliziert vorgestellt .Nachdem ich nun seit 4 Stunden zu keinem Ergebnis komme und kurz vorm ausrasten bin dacht ich ich frag mal hier freundlich nach Hilfe :)

Gruß
 
Hallo,

also ich sag mal so der code ist höflich gesagt nicht ganz optimal bis unbrauchbar :O).

div in li geht ja gar nicht und der rest ist auch bloss div suppe.

Zeige mal ein Link was heist woanders angezeigt?

Cheffchen
 
Hi,
ja das hab ich mir fast gedacht das das oben alles Müll ist *g

Ich habe dir mal per PN nur den Link vom Header geschickt damit du dir Bildlich vorstellen kannst was ich überhaupt will

Dort gibts z.b. Ligen, ich würde es gerne so machen das man mit der Maus drüber fährt und dann halt ein Drop Down Menü kommt um Platz einzusparen. Ich habe nun mit dem im ersten Beitrag verlinkten Menu rumprobiert bekomme es aber nicht so hin das das Drop Down Menü direkt unter Ligen erscheint, sondern es ist in der Linken oberen Ecke. Da ich 3 Drop Down Menüs benötige wird das wohl noch mehr Probleme bringen. Vielleicht ist das obrige Script für mich auch zu schwer aber ich suche nun seit ca. 15 Uhr und finde nichts was ich so nutzen könnte wie ich möchte weil ich immer wieder an der selben Stelle hängen bleibe. Habe auch schon bei selfhtml geschaut aber so richtig bringt mich das auch nicht weiter da dort meist mit Textmenüs Beispiele sind wo ich nicht weiß wie ich die sinnvoll für mein Layout umschreiben könnte.
 
Hallo,

also
mit Photoshop ein Layout gesliced
das kannst getrost vergessen, das wird nichts.

Im Grunde hast ein Kopfbild mit ein Menü drin und ein kleinen block für das SN zeugs.

Also
1 Div mit kopfbild als hintergrundbild ohne Menüs.
1 Div für das Menü, per Position in dem kopfbild div positionieren mit vielleicht ein code von den link unten.

der rest ist css das erste ebene halt dein Bilder genommen werden und nicht der normale text wie HOME.

Wie der zufall es will war gerade noch einer mit ähnlichen Problemen, hier sind 2 links zu beispielen, der zweite ist recht einfach: http://www.html.de/html-und-xhtml/44556-aufklapp-menue-einem-div.html#post317665
es gibt zich fertige im internet, von einfach bis Komplex wie das aus deinem Link.

Cheffchen
 
Hi Cheffchen,
kannst du dir bitte mal den Code anschauen und sagen ob das bis hier hin ok ist oder ob ich da was kürzen kann bzw. was verkehrt ist für den späteren Menü einbau ?

html

HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Unbenanntes Dokument</title>
<link href="css/header.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="site">

    <div id="header">
    <img src="header/header_01.png" width="999" height="36" alt="" title="" />
    <img src="header/header_02.png" width="999" height="36" alt="" title="" />
    <img src="header/header_03.png" width="999" height="36" alt="" title="" />
    <img src="header/header_04.png" width="999" height="36" alt="" title="" />
    
    <img class="img_fl" src="header/header_05.png" width="265" height="15" alt="" />
    <img class="img_fl" src="header/home.png" width="35" height="15" alt="zur Startseite" title="zur Startseite" />
    <img class="img_fl" src="header/news.png" width="78" height="15" alt="Aktuelles" title="Aktuelles" />
    <img class="img_fl" src="header/board.png" width="57" height="15" alt="Forum" title="Forum" />
    <img class="img_fl" src="header/leagues.png" width="46" height="15" alt="Ligen" title="Ligen" />
    <img class="img_fl" src="header/cups.png" width="58" height="15" alt="Pokale" title="Pokale" />
    <img class="img_fl" src="header/ladder.png" width="60" height="15" alt="Ladder" title="Ladder" />
    <img class="img_fl" src="header/tournaments.png" width="69" height="15" alt="Turniere" title="Turniere" />
    <img class="img_fl" src="header/rules.png" width="83" height="15" alt="Regelwerk" title="Regelwerk" />
    <img class="img_fl" src="header/team.png" width="88" height="15" alt="Ligaleitung" title="Ligaleitung" />
    <img class="img_fl" src="header/help.png" width="45" height="15" alt="Hilfe" title="Hilfe" />
    <img class="img_fl" src="header/general.png" width="78" height="15" alt="Allgemein" title="Allgemein" />
    <img class="img_fl" src="header/header_06.png" width="37" height="15" alt="" title="" />
    
    <img class="img_fl" src="header/header_07.png" width="999" height="10" alt="" title="" />

    <img class="img_fl" src="header/facebook.png" width="32" height="17" alt="Folge uns auf Facebook" />
    <img class="img_fl" src="header/googleplus.png" width="21" height="17" alt="Folge uns auf Google +" />
    <img class="img_fl" src="header/twitter.png" width="21" height="17" alt="Folge uns auf Twitter" />
    <img class="img_fl" src="header/rss.png" width="21" height="17" alt="RSS-Feed" title="RSS-Feed" />
    <img class="img_fl" src="header/header_08.png" width="760" height="17" alt="" title="" />
    <img class="img_fl" src="header/usercp.png" width="144" height="17" alt="Kontrollzentrum" title="Kontrollzentrum" />
    
    <img class="img_fl" src="header/header_09.png" width="999" height="31" alt="" title="" />
    </div>
    
</div>
</body>
</html>

CSS
HTML:
@charset "utf-8";
/* CSS Document */

div#site {
    position:absolute;
    width:999px;
    height:100%;
    top: 0px;
    left: 50%;
    margin-left: -500px;
}

div#header {
    width:999px;
    height:218px;
}

.img_fl {
float: left;
}

Sorry für meine Noob Fragen aber ich möchte nicht gleich wieder verkehrt anfangen :)
Grüße
 
Hallo,

das ist kaum besser.
ich schrieb doch:
Also
1 Div mit kopfbild als hintergrundbild ohne Menüs.
1 Div für das Menü, per Position in dem kopfbild div positionieren mit vielleicht ein code von den link unten.

das ist doch eindeutig ein div für das kopfbildbild als hintergrund und darin div für das Menü bzw noch eins für das SN zeug.

eher so, meckst was, code menge ist um einiges weniger und das nur im Kopfbereich :o)

Code:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Unbenanntes Dokument</title>
<style type="text/css">
#kopf {
 display: block;
 height: 250px;
 width: 999px;
 position: relative;
 background-color: #0F0;
}
#hauptnavi {
 position: absolute;
 top: 150px;
 right: 0px;
 width: 800px;
 background-color: #FF0;
}
#hauptnavi ul li {
 display: inline;
}
#hauptnavi ul li a {
 background-color: #CFF;
 padding: 9px;
}
</style>
</head>
<body>
<div id="kopf">
 <div id="hauptnavi">
     <ul>
          <li><a>MENÜP1</a></li>
          <li><a>MENÜP2</a></li>
          <li><a>MENÜP3</a></li>
          <li><a>MENÜP4</a></li>
        </ul>
    </div>
</div>
</body>
</html>
Cheffchen
 
Sorry, ist für mich wie neue Welt, wenn ich da was nicht verstehe mach ichs dann immer so wie ich denk, also hab bitte Verständnis wenn ich manche Sachen nicht richtig verstehe, geb mir Mühe :D

Jetzt ist es hoffentlich so wie du es mir erklärt hast.

CSS
Code:
@charset "utf-8";
/* CSS Document */

div#header {
 display: block;
 height: 219px;
 width: 999px;
 position: relative;
 background-image: url(file:///B|/neu/header/logo.png);
 background-repeat: no-repeat;
}
#hauptnavi {
 position: absolute;
 top: 127px;
 right: 37px;
 height: 15px;
}
#hauptnavi ul li {
 display: inline;
 float: left;
}
#hauptnavi ul li a {
 padding: 0px;
}

html

HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Unbenanntes Dokument</title>
<link href="css/header.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="header">
    <div id="hauptnavi">
        <ul>
            <li><a><img src="header/home.png" width="35" height="15" alt="zur Startseite" title="zur Startseite" /></a></li>
            <li><a><img src="header/news.png" width="78" height="15" alt="Aktuelles" title="Aktuelles" /></a></li>
            <li><a><img src="header/board.png" width="57" height="15" alt="Forum" title="Forum" /></a></li>
            <li><a><img src="header/leagues.png" width="46" height="15" alt="Ligen" title="Ligen" /></a></li>
            <li><a><img src="header/cups.png" width="58" height="15" alt="Pokale" title="Pokale" /></a></li>
            <li><a><img src="header/ladder.png" width="60" height="15" alt="Ladder" title="Ladder" /></a></li>
            <li><a><img src="header/tournaments.png" width="69" height="15" alt="Turniere" title="Turniere" /></a></li>
            <li><a><img src="header/rules.png" width="83" height="15" alt="Regelwerk" title="Regelwerk" /></a></li>
            <li><a><img src="header/team.png" width="88" height="15" alt="Ligaleitung" title="Ligaleitung" /></a></li>
            <li><a><img src="header/help.png" width="45" height="15" alt="Hilfe" title="Hilfe" /></a></li>
            <li><a><img src="header/general.png" width="78" height="15" alt="Allgemein" title="Allgemein" /></a></li>
        </ul>
    </div>
</div>
</body>
</html>

Problem, im Firefox siehts so aus wie es auszusehen hat, bei Opera und IE ist es vertikal um ein paar Pixel verschoben, muss man da auf was bestimmtes achten ? Könntest mir da bitte nochmal helfen ? Könnt auch nen Link schicken damit du es siehst.
 
Zuletzt bearbeitet:
Hallo,

sieht schon mal besser aus obwohl das mit den Bilder in li nicht meinte, geht aber zum anfang schon so.

Link Hilft immer zu helfen, denn so nur mit code ist das nicht immer einfach, gerade bei fremden code.

Cheffchen

PS: in der css, mach mal lieber relativ background-image: url(file:///B|/neu/header/logo.png); so hast nur ärger, also wie bei den bilder im Menü
 
Hallo,

habe mir das angeschaut und ist doch super, ich habe da kein fehler gesehen.

Vergis das mit den Bilder, geht schon so, sonst wird das bloss wieder zu kompleziert für dich.

ich geh mal davon aus das machst mit ein CMS oder?

Cheffchen
 
Hey Cheffchen, danke das du es angeschaut hast. Gab es bei dir keine Probleme im Opera oder IE ?
Frag mich woran das dann bei mir liegt :?: Ich würde dir nochmal einen Screenshot schicken wenn das ok ist ?

Ja mit einem CMS, leider einem sehr alten darum wollte ich fürs neue Design die Templates alle mal überarbeiten da ich nicht denke das sobald auf ein anderes CMS gewechselt wird. Ob ich das mit den DIV Containern hinbekomm ist dann ne andere Sache wenn ich schon bei der kleinen Sache hier meine Probleme habe. Aber "Tabellendesigns" scheinen ja schon seit ner Weile aus der Mode zu sein, muß ich mich wohl irgendwie reinfuchsen in die Materie ;ugl
 
Hallo,

also erstma, bei PN bitte "Direkt antworten" nutzen und vorher den Inhalt aus dem Feld Löschen, da so eine Art verlauf entsteht und alle Beitrag wie hier untereinander angezeigt werden, is zu besseren übersichtm is aber nur tipp.

zu deinem 1px, das ist mir nicht aufgefallen, das liegt daran das ul nicht restest hast und damit nimmt jeder Browser seine Standards die er meint. Am besten mal eine rest.css nutzen und die ganz zum anfang einfügen vor deiner.
Dann ganzt in deiner alles einstellen was möchtest da alle auf 0 gestellt ist wie zb ul und li auf margin:0 und padding:0 was wohl gerade bei dir das problem ist.

einfach mal suchen nach reset css da findest zich, CSS Tools: Reset CSS

einfach an anfang deiner css packen und daran nicht rum schrauben. erst darunter dann wieder sachen überschreiben wenns nicht passt.
Wenn die eingefügt hast dürfte dein Menü etwas höher sitzen als vorher, einfach wieder den top anpassen vom div.

Cheffchen
 
Hi Cheffchen,
ich habe gestern Abend mal noch ein wenig rumgebastelt, habe dir einen Link per PN gesendet. Das Problem mit der verschiebung hat sich durch den Umbau erledigt.

Habe danach mal versucht ein Aufklappmenü wie du es auf Seite 1 verlinkt hast einzubauen, habe aber so meine Probleme mit der neuen Liste in einer Liste und ich habs irgendwie nicht hinbekommen 2 jquery Scripte gleichzeitig zum laufen zu bekommen.

Muss ich da auf was bestimmtes Achten ?
Das Script was ich in die Datei die ich dir per PN geschickt hab einbauen wollte ist übrigens das hier Edit this Fiddle - jsFiddle

Grüße
 
Hallo,

nun hast das ja sogar unbeabsichtigt richtig gemacht mit hintergrundbilder.


Also die zwei jquery müssten gehen, das mit dem untermenü geht wohl auch mit der 1.3er version.
so dürfte das passen (ungetestet)
Code:
$(document).ready(function () {       
    /* Horizontal Menu */
    $('#hauptnavi li a').hover(
        function () {
            //convert current height to negative value
            height = $(this).height() * (-1);
            $(this).stop().animate({'backgroundPosition':'(0 ' + height + ')'}, {duration:160});
        },

        function () {
            //reset the top position
            $(this).stop().animate({'backgroundPosition':'(0 0)'}, {duration:160});
        }
    ); 
    
    /* Unter Menu aufklappen */
    $('div #hauptnavi ul li ul').hide();
    $('div #hauptnavi').click(function(){
        $(this).siblings().find('ul').slideUp(500);
        $(this).find('ul').slideToggle(500);
    });
       });

und html könnte so aussehen:
Code:
<li><a href="[URL="http://www.html.de/view-source:http://www.fireball-e.com/test2/header.html#"]#[/URL]" class="news"></a>
    <ul>
        <li><a href="#">Link 1</a></li>
        <li><a href="#">Link 2</a></li>
        <li><a href="#">Link 3</a></li>
    </ul>
</li>
Cheffchen
 
Hi,
habs mal so eingebaut (auf dem selben Link wie in der PN), funktioniert leider nicht. Muß ich ul noch einen Wert zuweisen per css ?
 
Zurück
Oben