Demo

Probiere ClanSphere aus und teste daran herum. Demo


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.
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.
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: 1102
 # 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: 1102
 # 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
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 ClanSphere Team

Supporter
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.