:: ClanSphere :: Free OpenSource Clan CMS :: - Forum

Antworten: 3

Seite [1]

Pornflakes

Rock the board

Beiträge: 97

# Thema - 03.06.2011 um 14:22 Uhr

Hey!

Ich bastel mir derzeit ne neue HP. Jetzt hab ich aber das Problem, dass mir mein Flyout Menu den Inhalt verschiebt. Und wenn ich dem Inhalt sage position:absolute; dann legt sich das flyout hinter den Inhalt

Hier der Link: http://nga-clan.tk/index.php?mod=clansphere&action=temp_list&template=test

Wie kann ich das am besten lösen?

------------------

Inaktiv

Tress13

Highlander

Herkunft: Lüdenscheid
Beiträge: 3048

# Antwort: 1 - 03.06.2011 um 14:32 Uhr

Also ich habe so ein Dropdown-Menü folgender massen gelöst:

index.htm

1. / 2. / ...

  <div id="navleiste">
  <ul id="navi">
    <li class="navi_home">
      <ul>
        <li><a href="{url:news_recent}" class="wlink">Startseite</a></li>
        <li><a href="{url:gbook}" class="wlink">Gbook</a></li>
        <li><a href="{url:board}" class="wlink">Forum</a></li>
        <li><a href="{url:articles}" class="wlink">Artikel</a></li>
        <li><a href="{url:news}" class="wlink">News-Archiv</a></li>
        <li><a href="{url:votes}" class="wlink">Umfragen</a></li>
        <li><a href="{url:search}" class="wlink">Search</a></li>
      </ul>
    </li>
    <li class="navi_clan">
      <ul>
        <li><a href="{url:squads}" class="wlink">Squads</a></li>
        <li><a href="{url:members}" class="wlink">Members</a></li>
        <li><a href="{url:users}" class="wlink">Community</a></li>
        <li><a href="{url:rules}" class="wlink">Regeln</a></li>
        <li><a href="{url:history}" class="wlink">History</a></li>
      </ul>
    </li>
    <li class="navi_gaming">
      <ul>
        <li><a href="{url:games}" class="wlink">Games</a></li>
        <li><a href="{url:maps}" class="wlink">Karten</a></li>
        <li><a href="{url:events_agenda}" class="wlink">Events</a></li>
        <li><a href="{url:wars}" class="wlink">Clanwars</a></li>
        <li><a href="{url:awards}" class="wlink">Awards</a></li>
        <li><a href="{url:clans}" class="wlink">Clan-Archiv</a></li>
      </ul>
    </li>
    <li class="navi_extras">
      <ul>
          <li><a href="{url:gallery}" class="wlink">Galerie</a></li>
        <li><a href="{url:files}" class="wlink">Downloads</a></li>
        <li><a href="{url:links}" class="wlink">Links</a></li>
        <li><a href="{url:replays}" class="wlink">Wiederholungen</a></li>
      </ul>
     </li>
     <li class="navi_kontakt">
      <ul>
          <li><a href="{url:fightus_new}" class="wlink">Fight us</a></li>
        <li><a href="{url:joinus_new}" class="wlink">Join us</a></li>
        <li><a href="{url:linkus}" class="wlink">Link us</a></li>
        <li><a href="{url:partner}" class="wlink">Partner</a></li>
        <li><a href="{url:faq}" class="wlink">FAQ's</a></li>
      </ul>
     </li>
  </ul>
  </div>

layout.css

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.

1. / 2. / ...

/* START Navigationsleiste */

a.wlink, a.wlink:visited, a.wlink:active {
  background: url('Bilder/Navigation/dropdown_bg.png');
  color: #fff;
  text-decoration: none;
  font-weight: normal;
  padding: 6px 0 6px 20px;
  display: block;
}

a.wlink:hover {color: #777;}

#navleiste{
  background-image: url('Bilder/Navigation/navleiste.jpg');
  width: 1000px;
  height: 39px;
  float: left;
  padding-top: 5px;
}

#navi, #navi ul  {
   list-style-type:none;
   margin:0;
   padding:0;
   position: relative;
   overflow: visible;
}

#navi li ul {               /* Normalzustand eingeklappt */
   display:none;
   margin-top: 36px;
   text-align: left;
}
#navi li:hover ul {         /* Ausgeklappt */
   display:block;
}

#navi li {
   width:169px;
   float:left;
}

.navi_home {
  width: 169px;
  height: 36px;
  float: left;
  margin-left: 35px;
}

.navi_clan,.navi_gaming,.navi_extras,.navi_kontakt {
  width: 169px;
  height: 36px;
  float: left;
  margin-left: 20px;
}

.navi_home:hover {
  background: url('Bilder/Navigation/home_hover.png');
}
.navi_clan:hover {
  background: url('Bilder/Navigation/clan_hover.png');
}
.navi_gaming:hover {
  background: url('Bilder/Navigation/gaming_hover.png');
}
.navi_extras:hover {
  background: url('Bilder/Navigation/extras_hover.png');
}
.navi_kontakt:hover {
  background: url('Bilder/Navigation/kontakt_hover.png');
}

/* ENDE Navigationsleiste */

Vlt hilft dir das ja irgendwie weiter.

------------------

www.iv-gaming.de | www.iv-artwork.de

Inaktiv