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

Antworten: 13

Seite [1]

celly

Rock the board

Beiträge: 78

# Thema - 19.02.2012 um 17:01 Uhr

Hallo und guten Tag,

ich möchte auf meiner Hp clan-gs.de ein drop down in die menüleiste einfügen hab jetzt schon viele varianten aus probiert mit java und css nur leider bekomm ich es einfach nicht hin !!

am liebsten währe es mir einfach mit css.

hier mal der auschnitt von index und css:
index...

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.

1. / 2. / ...

  <div id="navigationslayer">
         <ul>
            <li><a href="{url:home}" class="navlink">Home</a></li>
            <li><a href="{url:board}" class="navlink">Forum</a></li>
            <li><a href="{url:members_teams}" class="navlink" >Teams</a></li>
            <li><a href="{url:gbook}" class="navlink">G-buch</a></li>
            <li><a href="{url:users}" class="navlink">Mitglieder</a></li>
            <li><a href="{url:servers_list}" class="navlink">Servers</a></li>
            <li><a href="{url:files_list}" class="navlink">Files</a></li>
            <li><a href="{url:games_list}" class="navlink">Games</a></li>
            <li><a href="{url:gallery_list}" class="navlink">Gallery</a></li>
            <li><a href="{url:contact_mail}" class="navlink">Contact</a></li>
            <li><a href="{url:clansphere_about}" class="navlink">Scriptinfo</a></li>
        </ul>
     </div>

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.

1. / 2. / ...

#navigationslayer {
        position:absolute;
        width:1139px;
        height:40px;
        z-index:6;
        left: 73px;
        top: 321px;
}
#navigationslayer a{
        color:#CCC;
        text-decoration:none;
        font-weight:bold;
}

#navigationslayer a:hover{
        color:#FFF;
        text-decoration:none;
        font-weight:bold;
}
#navigationslayer ul{
        margin:0px;
        height:0px;
        list-style:none;
        margin-top:7px;
        height:31px;
}

#navigationslayer ul li{
        float:left;
        width:92px;
        margin-right:6px;

}

#navigationslayer ul li a{
        color:#FFF;
        text-align:center;
        font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
        padding-top:3px;
        padding-left:15px;
        padding-right:15px;
        padding-bottom:3px;
        text-decoration:none;
        font-size:14px;
}

#navigationslayer ul li a:hover{
        color:#FFF;
        background-color:#777;

        font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
        font-size:14px;
}

könnt ihr mir da weiter helfen ???

MfG: Celly

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

clan-gs.de

Infos und fragen an Info(at)clan-gs(dot)de

Inaktiv

Tress13

Highlander

Herkunft: Lüdenscheid
Beiträge: 3048

# Antwort: 1 - 19.02.2012 um 17:18 Uhr

Hier nach dem Prinzip kannste vorgehen.
Kannste gerne nutzen.

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.

1. / 2. / ...

    <div id="navleiste">
       <ul id="navi">
         <li onmouseover="" class="navi_clan"><a>Überschrift1</a>
           <ul>
             <li><a href="{url:module}">Name</a></li>
             <li><a href="{url:module}">Name</a></li>
         <li><a href="{url:module}">Name</a></li>
         <li><a href="{url:module}">Name</a></li>
           </ul>
         </li>
         <li onmouseover="" class="navi_clan"><a>Überschrift2</a>
           <ul>
             <li><a href="{url:module}">Name</a></li>
             <li><a href="{url:module}">Name</a></li>
         <li><a href="{url:module}">Name</a></li>
         <li><a href="{url:module}">Name</a></li>
           </ul>
         </li>
       </ul>
    </div>

1. / 2. / ...

#navleiste{
  background: #111;
  width: 1000px;
  height: 36px;
  float: left;
  font-weight: bold;
  text-align: left;
  text-decoration: none;
}

#navleiste a{
  background: #111;
  color: #fff;
  padding: 10px 15px 11px 15px;
}

#navleiste a:hover{
  background: #222;
}

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

#navi li ul {               /* Normalzustand eingeklappt */
  display: none;
  text-align: left;
}

#navi li:hover ul {         /* Ausgeklappt */
  display: block;
  z-index: 99999;
}

#navi li ul a{
  text-decoration: none;
  font-weight: normal;
  padding: 5px 0 6px 12px;
}

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

.überschrift1 , .überschrift2 {
  height: 38px;
  float: left;
  text-align: center;
}

.navi_überschrift1 a, .überschrift2 a {
  display: block;
}

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

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

Inaktiv

celly
Thread-Ersteller

Rock the board

Beiträge: 78

# Antwort: 2 - 19.02.2012 um 18:58 Uhr

Ohh super genau das brauche ich ... nur noch ein problem habe ich jetzt habe das

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.

1. / 2. / ...

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

#navi li ul {               /* Normalzustand eingeklappt */
  display: none;
  text-align: left;
}

#navi li:hover ul {         /* Ausgeklappt */
  display: block;
  z-index: 99999;
}

#navi li ul a{
  text-decoration: none;
  font-weight: normal;
  padding: 5px 0 6px 12px;
}

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

.überschrift1 , .überschrift2 {
  height: 38px;
  float: left;
  text-align: center;
}

.navi_überschrift1 a, .überschrift2 a {
  display: block;
}

von dir übernommen aber warum verschiebt er den abschnitt dann komplett also auch die überschrift ???
muss ich da extra was fest legen ???

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.

1. / 2. / ...

<div id="navigationslayer">
         <ul id="navi">
            <li><a href="{url:home}" class="navlink">Home</a>
              <ul>
                 <li><a href="{url:module}">Name</a></li>
                 <li><a href="{url:module}">Name</a></li>
                 <li><a href="{url:module}">Name</a></li>
                 <li><a href="{url:module}">Name</a></li>
            </ul>
           </li>
            <li><a href="{url:board}" class="navlink">Forum</a></li>
            <li><a href="{url:members_teams}" class="navlink" >Teams</a></li>
            <li><a href="{url:gbook}" class="navlink">G-buch</a></li>
            <li><a href="{url:users}" class="navlink">Mitglieder</a></li>
            <li><a href="{url:servers_list}" class="navlink">Servers</a></li>
            <li><a href="{url:files_list}" class="navlink">Files</a></li>
            <li><a href="{url:games_list}" class="navlink">Games</a></li>
            <li><a href="{url:gallery_list}" class="navlink">Gallery</a></li>
            <li><a href="{url:contact_mail}" class="navlink">Contact</a></li>
            <li><a href="{url:clansphere_about}" class="navlink">Scriptinfo</a></li>
        </ul>
     </div>

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

clan-gs.de

Infos und fragen an Info(at)clan-gs(dot)de

Zuletzt editiert von celly am 19.02.2012 um 18:59 Uhr (1x Editiert)

Inaktiv

ev0lution

Geekboy

Beiträge: 1103

# Antwort: 3 - 19.02.2012 um 19:03 Uhr

weil es die class navlink nicht gibt in deiner css ?

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

Zuletzt editiert von ²waq am 19.02.2012 um 19:06 Uhr (3x Editiert)

Inaktiv

Tress13

Highlander

Herkunft: Lüdenscheid
Beiträge: 3048

# Antwort: 4 - 19.02.2012 um 19:05 Uhr

Jep. Und weil du die einzelnen "Überschriften" nicht verwendet hast.

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

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

Inaktiv

ev0lution

Geekboy

Beiträge: 1103

# Antwort: 5 - 19.02.2012 um 19:06 Uhr

sry doppelpost

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

Zuletzt editiert von ²waq am 19.02.2012 um 19:06 Uhr (1x Editiert)

Inaktiv

celly
Thread-Ersteller

Rock the board

Beiträge: 78

# Antwort: 6 - 20.02.2012 um 16:04 Uhr

doch gibt es habe eine neue .css eingebunden und die schaut so aus !

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.

1. / 2. / ...

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

#navi li ul {               /* Normalzustand eingeklappt */
  display: none;
  text-align: left;

}

#navi li:hover ul {         /* Ausgeklappt */
  display: block;
  z-index: 99999;
}

#navi li ul a{
  text-decoration: none;
  font-weight: normal;
  padding: 5px 0 6px 12px;
}

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

.navi_überschrift1 a, .überschrift2 a {
  display: block;
}

hab halt die alten .css codes in der layout.css stehen lassen ...

hoffe das liegt nicht da dran ???

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

clan-gs.de

Infos und fragen an Info(at)clan-gs(dot)de

Inaktiv

Tress13

Highlander

Herkunft: Lüdenscheid
Beiträge: 3048

# Antwort: 7 - 21.02.2012 um 00:40 Uhr

Du kannst das doch so wie oben quasi schon kopieren und nutzen.
Deine Links rein und fertig. Dann vlt bei Bedarf noch etwas anpassen.

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

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

Inaktiv

celly
Thread-Ersteller

Rock the board

Beiträge: 78

# Antwort: 8 - 21.02.2012 um 17:24 Uhr

Ja habe es jetzt soweit übernommen und angepasst ...

hab allerdings noch eine frage *gg*

gibts die möglichkeit das ich das klappmenü also das was sich ausklappt nicht untereinander stehen hab sondern nebeneinander und sich halt anpasst um so mehr links rein kommen?

mfg

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

clan-gs.de

Infos und fragen an Info(at)clan-gs(dot)de

Inaktiv

Tress13

Highlander

Herkunft: Lüdenscheid
Beiträge: 3048

# Antwort: 9 - 21.02.2012 um 23:51 Uhr

Geht bestimmt. Habe ich aber so noch nicht umgesetzt.
Kann dir da also auf die Schnelle auch nicht weiter helfen.

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

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

Inaktiv

Deaktiviert

Supporter

Beiträge: 1287

# Antwort: 10 - 22.02.2012 um 00:09 Uhr

1.
2.
3.

1. / 2. / ...

#navi li ul li {
float:left;
}

Probiers mal so und sag mir, ob das Ansatzweise das ist was du wolltest?

Inaktiv

sgraewe

Supporter

Beiträge: 6116

# Antwort: 11 - 22.02.2012 um 14:12 Uhr

dann muss aber noch die feste breite raus

Inaktiv

celly
Thread-Ersteller

Rock the board

Beiträge: 78

# Antwort: 12 - 22.02.2012 um 15:54 Uhr

meine navi.css sieht jetzt so aus

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.

1. / 2. / ...

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

#navi li ul {               /* Normalzustand eingeklappt */
  display: none;
  text-align: left;

}

#navi li:hover ul {         /* Ausgeklappt */
  display: block;
  z-index: 99999;
}

#navi li ul a{
  text-decoration: none;
  font-weight: normal;
  padding: 15px 0 15p 15px;
}

#navi li {

  float: left;
}

#navi li ul li {
float:left;
}

.navi_überschrift1 a, .überschrift2 a {
  display: block;
}

aber leider klappt das nicht mit dem

1.
2.
3.

1. / 2. / ...

#navi li ul li {
float:left;
}

hatte auch schon das
#navi li {

float: left;
} gelöscht aber leider immer noch alles untereinander !!!

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

clan-gs.de

Infos und fragen an Info(at)clan-gs(dot)de

Zuletzt editiert von celly am 22.02.2012 um 15:55 Uhr (1x Editiert)

Inaktiv

celly
Thread-Ersteller

Rock the board

Beiträge: 78

# Antwort: 13 - 24.02.2012 um 11:36 Uhr

hab es hin bekommen meine .ccs sieht jetzt so aus ...

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.

1. / 2. / ...

#navi, #navi ul  {
  margin: 10px;
  padding: 0;
  position: relative;
  overflow: visible;
}

#navi li ul {               /* Normalzustand eingeklappt */
  display: none;
  text-align: left;

}

#navi li:hover ul {         /* Ausgeklappt */
  display: block;
  z-index: 99999;
  text-align: center;
  vertical-align: middle;
  width:400px;height:28px;
  background-image: url(layout/menuhg.png);
  background-repeat:no-repeat;

}

und wird wie gewünscht nebeneinander angezeit ... musste also nur die breite definieren.

noch ein paar einstellungen und es ist fertig !!

danke für eure hilfe.

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

clan-gs.de

Infos und fragen an Info(at)clan-gs(dot)de

Inaktiv

Antworten: 13

Seite [1]

Sie müssen sich registrieren, um zu antworten.

Forum - Thema
Nächstes Thema ->
Forum -> Support -> (X)HTML, CSS, JavaScript -> drop down menü...css