Demo

Probiere ClanSphere aus und teste daran herum. Demo


Antworten: 8
Seite [1]
LoNE|Hitman


King for a day





Beiträge: 376
 # Thema - 01.02.2011 um 18:07 Uhr
An alle CSS-Profis hier unter euch mal eine Frage. Ich habe ein doppeltes Dropdown Menu mit CSS an meine Wünsche angepasst. Nun habe ich das Problem, dass ich gerne die Sublinks wie News, Articles... nicht als reinen Text machen will, sondern als Grafik mit nem Hovereffekt der auch aus einer Grafik besteht. Leider blicke ich inzwischen bei den ganzen Klassen nicht mehr durch und weiß nicht genau was ich wo ändern muss. Vielleicht sieht ja von den Profis einer schnell wo ich ansetzen muss.

So sieht der html-Code der Navi aus: +-
 
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
1. / 2. / ... 
 <div id="container_navi">
        <div id="navi">
            <ul id="navi_main">
                <li id="{users:nav:id=1}"><a href="#" onfocus="if(this.blur)this.blur()"><!--[if gte IE 7]><!--></a><!--<![endif]-->
                    <!--[if lte IE 6]><table><tr><td><![endif]-->
                        <ul>
                            <li><a href="{url:news_recent}">News</a></li>
                            <li><a href="{url:articles_list}">Articles</a></li>
                            <li><a href="{url:gbook}">Guestbook</a></li>
                            <li><a href="{url:users_list}">Users</a></li>
                            <li><a href="{url:search}">Search</a></li>
                        </ul>
                    <!--[if lte IE 6]></td></tr></table></a><![endif]-->
                </li>
            </ul> 
        </div>
    </div>


Hier die 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.
78.
79.
80.
81.
82.
83.
84.
85.
86.
87.
88.
89.
90.
91.
92.
93.
94.
95.
96.
97.
98.
99.
100.
101.
102.
103.
104.
105.
106.
107.
108.
109.
110.
111.
112.
1. / 2. / ... 
 /* ================================================================
This copyright notice must be untouched at all times.

The original version of this stylesheet and the associated (x)html
is available at http://www.cssmenus.co.uk
Copyright (c) 2009- Stu Nicholls. All rights reserved.
This stylesheet and the associated (x)html may be modified in any
way to fit your requirements.
=================================================================== */
#container_navi {
    width: 974px;
    height: 110px;
    position: relative;
    background-image: url(bilder/navi_bg.png);
}
#navi{
    width: 557px;
    height: 60px;
    position: relative;
    margin-left: 210px;
}
#navi li {
    float: left;
}

/* ================================================================ */

#navi_main {
    padding:0;
    margin:0;
    list-style:none;
    width:95px;
    height:40px;
    background:url(bilder/navi_main.png);
    position:absolute;
    left: 0px;
    top: 0px;
}
#navi_main table {
    border-collapse: collapse;
    width: 0; 
    height: 0; 
    margin: 0;
}
#navi_main li {
    float: left;
}
#navi_main li a {
    display: block;
    height: 40px; 
    padding: 0 95px 0 0; 
    text-decoration: none; 
    font-family: "Courier New", Courier, monospace;
    font-weight: bolder;
}
#navi_main li a:hover {
    background: url(bilder/navi_main_hover.png) no-repeat left top; 
    line-height: 60px; 
    height: 60px; 
    cursor: default;
}
#navi_main li:hover > a {
    background: url(bilder/navi_main_hover.png) no-repeat left top; 
    height: 60px;
}
#navi_main ul {
    padding: 0 0 0 0; 
    margin: 0 0 0 -110px; 
    list-style: none; 
    position: absolute; 
    height: 35px; 
    width: 310px; 
    left: -9999px; 
    top: 60px; 
    z-index:10;
}
#navi_main ul li {
    height: 35px; 
    line-height: 35px;
}
#navi_main ul.right li {
    float: left;
}
#navi_main ul li a {
    color: #000000; 
    padding: 0 5px 0 5px; 
    height: 35px; 
    line-height: 35px; 
    font-size: 13px;    
    vertical-align: middle;
    font-weight: bolder;
    text-decoration: none;    
}
#navi_main ul li a:hover {
    height: 35px; 
    line-height: 35px; 
    background: transparent; 
    color: #000000;
    font-weight: bolder;
    font-size: 13px;    
    vertical-align: middle;
    text-decoration: underline; 
    cursor: pointer; 
}
#navi_main :hover ul {
    left:0;
}
#navi_main_active {
    background: url(bilder/navi_main_hover.png) no-repeat left top; 
    height: 60px;
}


------------------
"Wer glaubt ein Licht am Ende des Tunnels zu sehen, sollte sich Gedanken machen, ob es nicht ein Zug ist, der einem entgegen kommt!"


System Info:
Clansphere Version: 2011.4.3
CS Website: http://www.lone-clan.de/
Browser: Firefox 27.0 / IE 9 / Safari 5 / Opera 11.11 / Google Chrome 7
OS: Windows 7 Home Premium x64
Inaktiv
fUnK3r ClanSphere Team


Specialist





Beiträge: 1656
 # Antwort: 1 - 02.02.2011 um 12:17 Uhr
einfach dem jeweiligen li-tag eine eigene class oder id geben und in CSS anpassen ...


------------------
Grüßle Jo
><(((°> Son of God through Jesus Christ his Son <°)))><
www.funk3r.de
while (!asleep() ) sheep++;
Inaktiv
|
LoNE|Hitman
Thread-Ersteller


King for a day





Beiträge: 376
 # Antwort: 2 - 04.02.2011 um 23:44 Uhr
Das versuche ich ja schon seit Wochen, aber ich raff das nicht. Sobald ich in den folgenden id's was ändere sprengt es die Navi auseinander und es passt nichts mehr.

 
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
1. / 2. / ... 
 #navi_main ul li a {
    color: #000000; 
    padding: 0 5px 0 5px; 
    height: 35px; 
    line-height: 35px; 
    font-size: 13px;    
    vertical-align: middle;
    font-weight: bolder;
    text-decoration: none;    
}
#navi_main ul li a:hover {
    height: 35px; 
    line-height: 35px; 
    background: transparent; 
    color: #000000;
    font-weight: bolder;
    font-size: 13px;    
    vertical-align: middle;
    text-decoration: underline; 
    cursor: pointer; 
}


Lasse ich diese Id's aber wie sie sind, werden irgendwelche id's die ich den li-tags um den Link gebe einfach ignoriert.
Schreib doch bitte mal in meinen Code oben rein wie ich was ändern müsste damit es sich nicht mehr gegenseitig ausschließt.


------------------
"Wer glaubt ein Licht am Ende des Tunnels zu sehen, sollte sich Gedanken machen, ob es nicht ein Zug ist, der einem entgegen kommt!"


System Info:
Clansphere Version: 2011.4.3
CS Website: http://www.lone-clan.de/
Browser: Firefox 27.0 / IE 9 / Safari 5 / Opera 11.11 / Google Chrome 7
OS: Windows 7 Home Premium x64

Inaktiv
|
Tress13


Highlander




Herkunft: Lüdenscheid
Beiträge: 3048
 # Antwort: 3 - 05.02.2011 um 05:20 Uhr
Habe dazu bei mir auch ein Thema offen. Vlt hilft es dir ja weiter.

TressDesignz.de / Dropdown Navigation


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


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

Zuletzt editiert von Tress13 am 05.02.2011 um 05:20 Uhr (1x Editiert)
Inaktiv
|
LoNE|Hitman
Thread-Ersteller


King for a day





Beiträge: 376
 # Antwort: 4 - 10.02.2011 um 16:50 Uhr
Hey Tress danke für deine Hilfe, habs genau so versucht wie du aus deiner Seite vorgeschlagen hast, aber der hover Effekt der Subnavi will noch nicht so richtig. Alles ander klappt mittlerweile.

Hier mal mein Code:

.css
 
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
1. / 2. / ... 
 
a.navi1 {
    background: #33FF33;
    width: 59px;
    height: 25px;
}

a.navi1:hover {
    background: #006699;
    width: 59px;
    height: 25px;
}


.html
 
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
1. / 2. / ... 
 
<ul id="navi_main">
  <li id="id1_{users:nav:id=1}"><a href="#" onfocus="if(this.blur)this.blur()"><!--[if gte IE 7]><!--></a><!--<![endif]-->
    <!--[if lte IE 6]><table><tr><td><![endif]-->
      <ul>
        <li><a href="{url:news_recent}" class="navi1"></a></li>
      </ul>
    <!--[if lte IE 6]></td></tr></table></a><![endif]-->
  </li>
</ul>
 



Ich hab als vereinfachung einfach mal irgendeinen Farbcode als background genommen. Sollte dann ja auch mit nem Bild gehen. Der normale Link wird auch dargestellt, aber der hover geht nicht. Da kommt einfach keine Farbe. Der Link geht aber und hat auch die richtige Größe beim Hover.
Wo liegt der Fehler?


------------------
"Wer glaubt ein Licht am Ende des Tunnels zu sehen, sollte sich Gedanken machen, ob es nicht ein Zug ist, der einem entgegen kommt!"


System Info:
Clansphere Version: 2011.4.3
CS Website: http://www.lone-clan.de/
Browser: Firefox 27.0 / IE 9 / Safari 5 / Opera 11.11 / Google Chrome 7
OS: Windows 7 Home Premium x64

Inaktiv
|
Tress13


Highlander




Herkunft: Lüdenscheid
Beiträge: 3048
 # Antwort: 5 - 10.02.2011 um 17:03 Uhr
In dem hover brauchste auf jeden Fall die Daten nicht nochmal rein zu schreiben,
wenn sie schon in der normalen Klasse mit drin stehen.
Nur das was sich ändert muss da rein. Ist aber hier nicht unser Problem.

Hast du vlt einen Link zu der Navi.
Ist doch nicht die auf deiner Page, oder ?

http://lone-clan.de/index.php


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


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

Inaktiv
|
LoNE|Hitman
Thread-Ersteller


King for a day





Beiträge: 376
 # Antwort: 6 - 10.02.2011 um 17:19 Uhr
Ne die isses nicht^^
Der Link zu der neuen Page ist folgender:
http://www.lone-clan.de/update/clansphere/index/news/recent

Kannst auch gerne ne kurzes Feedback zum Design abgeben^^

Ich habe den css Code so wie er da steht seinerzeit von cssmenus.co.uk übernommen und nur das angepasst was ichmusste, damit es passt. Ich habe den Eindruck dass sich da einige Klassen aber geneseitig blockieren irgendwie.

Hier nochmal das ganze CSS für den Teil "Main": +-
 
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.
78.
79.
80.
81.
82.
83.
84.
85.
86.
87.
88.
89.
90.
91.
92.
93.
94.
95.
96.
97.
98.
99.
100.
101.
102.
103.
104.
105.
106.
107.
108.
109.
110.
1. / 2. / ... 
 /* ================================================================
This copyright notice must be untouched at all times.

The original version of this stylesheet and the associated (x)html
is available at http://www.cssmenus.co.uk
Copyright (c) 2009- Stu Nicholls. All rights reserved.
This stylesheet and the associated (x)html may be modified in any
way to fit your requirements.
=================================================================== */
#container_navi {
    width: 974px;
    height: 110px;
    position: relative;
    top: 0px;
    left: 0px;
    background-image: url(bilder/navi_bg.png);
    z-index: 1;
}
#navi{
    width: 557px;
    height: 60px;
    position: relative;
    margin-left: 210px;
    z-index: 3;
}
#navi li {
    float: left;
}

/* ================================================================ */

#navi_main {
    padding:0;
    margin:0;
    list-style:none;
    width:95px;
    height:40px;
    background:url(bilder/navi_main.png);
    position:absolute;
    left: 0px;
    top: 0px;
}
#navi_main table {
    border-collapse: collapse;
    width: 0; 
    height: 0; 
    margin: 0;
}
#navi_main li {
    float: left;
}
#navi_main li a {
    display: block;
    height: 40px; 
    padding: 0 95px 0 0; 
}
#navi_main li a:hover {
    background: url(bilder/navi_main_hover.png) no-repeat left top; 
    height: 60px; 
    cursor: default;
}

#navi_main ul {
    padding: 0 0 0 0; 
    margin: 0 0 0 -130px; 
    list-style: none; 
    position: absolute; 
    height: 25px; 
    width: 359px; 
    left: -9999px; 
    top: 55px; 
}
#navi_main ul li {
    height: 25px; 
    line-height: 25px;
}
#navi_main ul.right li {
    float: left;
}
#navi_main ul li a {
    padding: 0 0 0 0; 
    height: 25px; 
}
#navi_main ul li a:hover {
    height: 25px; 
    background: transparent; 
    cursor: pointer;
}
#navi_main :hover ul {
    left:0;
}
#id1_navi_main_active {
    background: url(bilder/navi_main_hover.png) no-repeat left top; 
    height: 60px;
}

a.navi1 {
    background: #33FF33;
    width: 59px;
    height: 25px;
}

a.navi1:hover {
    background: #006699;
    width: 59px;
    height: 25px;
}


/* ================================================================ */


Und hier nochmal der ganze Code der index.php nur mit dem Teil "Main" drin: +-
 
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
1. / 2. / ... 
     <tr>
            <td>
                <div id="container_navi">
                    <div id="navi">
                        <ul id="navi_main">
                            <li id="id1_{users:nav:id=1}"><a href="#" onfocus="if(this.blur)this.blur()"><!--[if gte IE 7]><!--></a><!--<![endif]-->
                                <!--[if lte IE 6]><table><tr><td><![endif]-->
                                    <ul>
                                        <li><a href="{url:news_recent}" class="navi1"></a></li>
                                        <li><a href="{url:articles_list}"><img src="bilder/navi_main_articles.png" alt="Articles" border="0" /></a></li>
                                        <li><a href="{url:gbook}"><img src="bilder/navi_main_gb.png" alt="Guestbook" border="0" /></a></li>
                                        <li><a href="{url:users_list}"><img src="bilder/navi_main_users.png" alt="Users" border="0" /></a></li>
                                        <li><a href="{url:search}"><img src="bilder/navi_main_search.png" alt="Search" border="0" /></a></li>
                                    </ul>
                                <!--[if lte IE 6]></td></tr></table></a><![endif]-->
                            </li>
                        </ul>  
 
                    </div>
                </div>
            </td>
        </tr>


------------------
"Wer glaubt ein Licht am Ende des Tunnels zu sehen, sollte sich Gedanken machen, ob es nicht ein Zug ist, der einem entgegen kommt!"


System Info:
Clansphere Version: 2011.4.3
CS Website: http://www.lone-clan.de/
Browser: Firefox 27.0 / IE 9 / Safari 5 / Opera 11.11 / Google Chrome 7
OS: Windows 7 Home Premium x64

Inaktiv
|
Tress13


Highlander




Herkunft: Lüdenscheid
Beiträge: 3048
 # Antwort: 7 - 10.02.2011 um 18:20 Uhr
Mir kommt das gerade irgendwie sehr viel Code vor.
Ich habe viel weniger bei mir. Hast ja oben gesehen.
Kannste nicht einfach den Übernehmen und nur die Parameter ändern, ohne die Namen noch umzubenennen ?
Blicke da irgendwie nicht ganz durch.

Bei mir kommt der hover-effekt von der Linkklasse,
aber du hast bei dir zusätzlich noch Bilder in deiner index drin.
Würde als erstes mal alle Bilder NUR über CSS laufen lassen.


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


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

Inaktiv
|
LoNE|Hitman
Thread-Ersteller


King for a day





Beiträge: 376
 # Antwort: 8 - 10.02.2011 um 18:52 Uhr
Ich werd das nachher mal versuchen. Danke dir erstmal...

EDIT:

So läuft jetzt bei mir alles so wie es soll. Ist zwar wieder ein riesige nav.css geworden, aber die ist jetzt übersichtlich und ich weiß genau was ich wo ändern kann und muss. Danke dir Tress. Einmal mit einer sauberen Vorlage arbeiten wirkt manchmal wunder^^


------------------
"Wer glaubt ein Licht am Ende des Tunnels zu sehen, sollte sich Gedanken machen, ob es nicht ein Zug ist, der einem entgegen kommt!"


System Info:
Clansphere Version: 2011.4.3
CS Website: http://www.lone-clan.de/
Browser: Firefox 27.0 / IE 9 / Safari 5 / Opera 11.11 / Google Chrome 7
OS: Windows 7 Home Premium x64

Zuletzt editiert von eumelchen am 11.02.2011 um 18:23 Uhr (1x Editiert)
Inaktiv
|
Antworten: 8
Seite [1]


Sie müssen sich registrieren, um zu antworten.