Demo

Probiere ClanSphere aus und teste daran herum. Demo


Antworten: 12
Seite [1]
Tress13


Highlander




Herkunft: Lüdenscheid
Beiträge: 3048
 # Thema - 30.09.2010 um 16:22 Uhr
Wie ihr aus der Überschrift schon hört, habe habe ich ein Problem mit dem ul.
Es betrifft aber nur Templates, bei denen ich die Navigation wie bei der Seite (siehe Link) habe,
da das ul auch in der Navigation mit drin steckt. Es wird ja auch für den ABCode verwendet.
Ich muss mich also Entscheiden, was ich haben will. Entweder eine passende Navigation
oder die Punkte, die beim klicken auf diesen Button entstehen, werden mir auf dem linken Textfeldrand angezeigt, da ich das margin da weglassen muss.

www.d3m-clan.de/index.php

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.
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.
113.
114.
115.
116.
117.
118.
119.
120.
1. / 2. / ... 
 /* START Navigationsleiste */

a.wlink, a.wlink:visited, a.wlink:active {
  color: #fff;
  text-decoration: none;
  font-weight: bold;
}

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

#navleiste{
  background-image: url('Bilder/Navigation/navigation.jpg');
  width: 1000px;
  height: 69px;
  font-weight: bold;
  text-align: center;
  float: left;
}

ul li {
    position: relative;
    float: left;
    }

li ul {
    position: absolute;
    float: left;
    top: 32px;
    display: none;
    }

ul li a {
    display: block;
    background-color: transparent;
    height: 12px;
    padding: 11px 20px;
    }

ul {
    Position: absolute;
    float: left;
    text-align: left;
    list-style: none;
    width: 1000px;
    height: 40px;
    }

.nav1 {
    left: 0;
    }
    
.nav2 {
    left: -200px;
    }
    
.nav3 {
    left: -400px;
    }

.nav4 {
    left: -600px;
    }
    
li:hover ul, li.over ul { 
    display: block; }

.navi_home {
  list-style: none;
  width: 200px;
  height: 31px;
  float: left;
  margin-top: 2px;
  margin-left: 10px;
}

.navi_home:hover {
  background: url('Bilder/Navigation/home_hover.jpg');
  background-color: transparent;
}

.navi_clan {
  list-style: none;
  width: 200px;
  height: 30px;
  float: left;
  margin-top: 2px;
}

.navi_clan:hover {
  background: url('Bilder/Navigation/clan_hover.jpg');
  background-color: transparent;
}

.navi_gaming {
  list-style: none;
  width: 200px;
  height: 30px;
  float: left;
  margin-top: 2px;
}

.navi_gaming:hover {
  background: url('Bilder/Navigation/gaming_hover.jpg');
  background-color: transparent;
}

.navi_extras {
  list-style: none;
  width: 200px;
  height: 30px;
  float: left;
  margin-top: 2px;
}

.navi_extras:hover {
  background: url('Bilder/Navigation/extras_hover.jpg');
  background-color: transparent;
}

/* ENDE Navigationsleiste */


index.htm +-
 
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.
1. / 2. / ... 
     <div id="navleiste">                       
  <ul> 
    <li class="navi_home"><a href="#"></a>
      <ul class="nav1"> 
         <li><a href="{url:news_recent}" class="wlink">Startseite</a></li>
         <li><a href="{url:static_view:view:id=87}" class="wlink">Geschichte</a></li>
         <li><a href="{url:rules}" class="wlink">Regeln</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:votes}" class="wlink">Umfragen</a></li>
         <li><a href="{url:search}" class="wlink">Search</a></li>
      </ul> 
    </li> 
    <li class="navi_clan"><a href="#"></a> 
      <ul class="nav2"> 
         <li><a href="{url:clans_view:view:id=1}" class="wlink">Clan</a></li>
         <li><a href="{url:members}" class="wlink">Squads</a></li>
         <li><a href="{url:static_view:view:id=79}" class="wlink">Management</a></li>
         <li><a href="{url:users}" class="wlink">Members</a></li>
         <li><a href="{url:static_view:view:id=66}" class="wlink">Beitrittsdaten</a></li>
         <li><a href="{url:static_view:view:id=13}" class="wlink">Team-Chat</a></li>
      </ul> 
    </li> 
    <li class="navi_gaming"><a href="#"></a> 
      <ul class="nav3"> 
         <li><a href="{url:games}" class="wlink">Games</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:cups}" class="wlink">Turniere</a></li>
         <li><a href="{url:clans}" class="wlink">Clan-Archiv</a></li>
      </ul> 
    </li>
    <li class="navi_extras"><a href="#"></a> 
      <ul class="nav4"> 
         <li><a href="{url:gallery}" class="wlink">Galerie</a></li>
         <li><a href="{url:files}" class="wlink">Downloads</a></li>
         <li><a href="{url:static_view:view:id=44}"  class="wlink">Medaillen</a></li>
         <li><a href="{url:shop}" class="wlink">Shop</a></li>
         <li><a href="{url:bets}" class="wlink">Wettbüro</a></li>
         <li><a href="{url:links}" class="wlink">Links</a></li>
         <li><a href="{url:linkus}" class="wlink">Linkus</a></li>
      </ul> 
     </li>
  </ul>
    </div>


Und dann ist da ja noch der Auszug aus der clansphere.css, wo halt das drin steht:

ul {
margin:0;
}


Wenn ich diesen Wert änder, wird mir die Navigation auch entsprechend verschoben.
Weiss vlt jemand von euch Rat ?




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


www.iv-gaming.de | www.iv-artwork.de
Inaktiv
SCHIRI ClanSphere Team


Weltmeister



Herkunft: Hamburg
Beiträge: 5299
 # Antwort: 1 - 30.09.2010 um 16:45 Uhr
einfach der navi ne id geben, z.B. id="navi"

und dann ul#navi {
margin-left: 10px;
}

oder was auch immer die navi an margin haben soll


------------------
www.laszlokorte.de

Inaktiv
|
Tress13
Thread-Ersteller


Highlander




Herkunft: Lüdenscheid
Beiträge: 3048
 # Antwort: 2 - 30.09.2010 um 19:13 Uhr
Hmmm...

Bekomme das irgendwie nicht hin.
Kannste mir das vlt mal in die Dateien einbauen ?



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


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

Inaktiv
|
SlayR ClanSphere Team


Geekboy




Herkunft: Calbe (Saale)
Beiträge: 1133
 # Antwort: 3 - 30.09.2010 um 19:21 Uhr
Versuch mal 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.
1. / 2. / ... 
 ul#navleiste li {
    position: relative;
    float: left;
    }

li#navleiste ul {
    position: absolute;
    float: left;
    top: 30px;
    display: none;
    }

ul#navleiste li a {
    display: block;
    background-color: transparent;
    height: 10px;
    padding: 10px 20px;
    }

ul#navleiste {
    Position: absolute;
    float: left;
    text-align: left;
    list-style: none;
    width: 1000px;
    height: 40px;
    }


------------------
--- CLANSPHERE ---
Professional clan care starts here
Inaktiv
|
Tress13
Thread-Ersteller


Highlander




Herkunft: Lüdenscheid
Beiträge: 3048
 # Antwort: 4 - 30.09.2010 um 19:32 Uhr
Entweder bin ich zu dämlich oder es klappt nicht.



Wie würde denn die html dazu ausschauen ?


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


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

Zuletzt editiert von Tress13 am 30.09.2010 um 19:33 Uhr (1x Editiert)
Inaktiv
|
sgraewe ClanSphere Team

Supporter
Supporter




Beiträge: 6116
 # Antwort: 5 - 30.09.2010 um 19:35 Uhr
<ul id="deineid">
<li></li>
<li></li>
...


Inaktiv
|
SlayR ClanSphere Team


Geekboy




Herkunft: Calbe (Saale)
Beiträge: 1133
 # Antwort: 6 - 30.09.2010 um 19:41 Uhr
Tress, vergiss es. funzt so nicht. habs grade bei mir nochmal durchgetestet
Du arbeitest ja mit mit Klassen für jeden einzelnen Grafik-Hauptnavi button. Du müsstest, denke ich, die ul auf jede verwendete Klasse neu formatieren damit es funzt. Was mich etwas wundert ist die Browserunterstützung...
Das Problem mit der Pseudoklasse :hover ist halt, das der Internet Explorer (ich weiß gar nicht ob der 7 nu konform ist) das nicht versteht.

Also img:hover versteht der IE nicht.

Wenn du die Pseudoklasse :hover benutzen möchtest, kannst du diese nur auf ein a Elemant anwenden.
also img a:hover


------------------
--- CLANSPHERE ---
Professional clan care starts here
Inaktiv
|
Tress13
Thread-Ersteller


Highlander




Herkunft: Lüdenscheid
Beiträge: 3048
 # Antwort: 7 - 01.10.2010 um 15:15 Uhr
Ich glaube ich habe die Lösung.
Falls was mit dem Code nicht stimmt, bitte sagen.
Auch wenn ich was "sparen" kann oder so.

@ SlayR: Könnte ja auch für dich interessant sein.

index.htm +-
 
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.
1. / 2. / ... 
     <div id="navleiste">                       
  <ul id="navi">  
    <li class="navi_home"><a href="#"></a>
      <ul id="nav1"> 
         <li><a href="{url:news_recent}" class="wlink">Startseite</a></li>
         <li><a href="{url:static_view:view:id=87}" class="wlink">Geschichte</a></li>
         <li><a href="{url:rules}" class="wlink">Regeln</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:votes}" class="wlink">Umfragen</a></li>
         <li><a href="{url:search}" class="wlink">Search</a></li>
      </ul> 
    </li> 
    <li class="navi_clan"><a href="#"></a> 
      <ul id="nav2"> 
         <li><a href="{url:clans_view:view:id=1}" class="wlink">Clan</a></li>
         <li><a href="{url:members}" class="wlink">Squads</a></li>
         <li><a href="{url:static_view:view:id=79}" class="wlink">Management</a></li>
         <li><a href="{url:users}" class="wlink">Members</a></li>
         <li><a href="{url:static_view:view:id=66}" class="wlink">Beitrittsdaten</a></li>
         <li><a href="{url:static_view:view:id=13}" class="wlink">Team-Chat</a></li>
      </ul> 
    </li> 
    <li class="navi_gaming"><a href="#"></a> 
      <ul id="nav3"> 
         <li><a href="{url:games}" class="wlink">Games</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:cups}" class="wlink">Turniere</a></li>
         <li><a href="{url:clans}" class="wlink">Clan-Archiv</a></li>
      </ul> 
    </li>
    <li class="navi_extras"><a href="#"></a> 
      <ul id="nav4"> 
         <li><a href="{url:gallery}" class="wlink">Galerie</a></li>
         <li><a href="{url:files}" class="wlink">Downloads</a></li>
         <li><a href="{url:static_view:view:id=44}"  class="wlink">Medaillen</a></li>
         <li><a href="{url:shop}" class="wlink">Shop</a></li>
         <li><a href="{url:bets}" class="wlink">Wettbüro</a></li>
         <li><a href="{url:links}" class="wlink">Links</a></li>
         <li><a href="{url:linkus}" class="wlink">Linkus</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.
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.
113.
114.
1. / 2. / ... 
 /* START Navigationsleiste */

a.wlink, a.wlink:visited, a.wlink:active {
  color: #fff;
  text-decoration: none;
  font-weight: bold;
}

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

#navleiste{
  background-image: url('Bilder/Navigation/navigation.jpg');
  width: 1000px;
  height: 69px;
  font-weight: bold;
  text-align: center;
  float: left;
}

li ul {
    position: absolute;
    float: left;
    top: 32px;
    display: none;
    }

ul li a {
    display: block;
    background-color: transparent;
    height: 12px;
    padding: 13px 20px;
    }

ul {
    Position: absolute;
    float: left;
    text-align: left;
    width: 1000px;
    height: 40px;
    }
    
ul#nav1 li, ul#nav2 li, ul#nav3 li, ul#nav4 li{
  list-style: none;
  float: left;
  text-align: left;
  position: relative;
}

ul#navi {
    margin: 0;
    }

ul#nav1, ul#nav2, ul#nav3, ul#nav4 {
  left: 0;
  top: 27px;
    }
    
li:hover ul, li.over ul { 
    display: block; }

.navi_home {
  list-style: none;
  width: 200px;
  height: 31px;
  float: left;
  margin-top: 2px;
  margin-left: 10px;
}

.navi_home:hover {
  background: url('Bilder/Navigation/home_hover.jpg');
  background-color: transparent;
}

.navi_clan {
  list-style: none;
  width: 200px;
  height: 30px;
  float: left;
  margin-top: 2px;
}

.navi_clan:hover {
  background: url('Bilder/Navigation/clan_hover.jpg');
  background-color: transparent;
}

.navi_gaming {
  list-style: none;
  width: 200px;
  height: 30px;
  float: left;
  margin-top: 2px;
}

.navi_gaming:hover {
  background: url('Bilder/Navigation/gaming_hover.jpg');
  background-color: transparent;
}

.navi_extras {
  list-style: none;
  width: 200px;
  height: 30px;
  float: left;
  margin-top: 2px;
}

.navi_extras:hover {
  background: url('Bilder/Navigation/extras_hover.jpg');
  background-color: transparent;
}

/* ENDE Navigationsleiste */


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


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

Inaktiv
|
SlayR ClanSphere Team


Geekboy




Herkunft: Calbe (Saale)
Beiträge: 1133
 # Antwort: 8 - 02.10.2010 um 09:24 Uhr
Tress: könntest Du Dir bitte nochmal Deine News:recent anschauen? In der php wird ein loop "cats" generiert, der im tpl aber nicht aufgefangen wird und somit gibts dann Fehler im Log. Ich hab erstmal folgende quick&dirty Lösung gemacht:
mehr... +-
 
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.
1. / 2. / ... 
 
//Auszug aus news_recent
  <div class="wars_box">
       <div class="last_wars">{wars:navlist2}</div>
       <div class="next_wars">{wars:navnext}</div>
  </div>

{loop:news}
// Quick&Dirty Patch
{loop:cats}
{stop:cats}
// Qick&Dirty Patch Ende
<div class="news_header">
   <div class="head_news">{news:news_headline}</div>
   <div class="categorie_news">{news:categories_name}</div>
   <div class="bottom_news">{news:news_time} - {news:users_link}</div>
</div>
   <div class="inner_news">{if:catimg}
      <img src="{page:path}{news:url_catimg}" style="float:right" alt="" />{stop:catimg}
      {news:news_readmore}
      {news:news_text}
      {if:readmore}<br /><br /><a href="{url:news_view:id={news:news_id}}">{lang:readmore_go}</a>{stop:readmore}
      {news:pictures}
   </div>

 {if:show}
<div class="inner_news">{lang:mirror}: {loop:mirror}{mirror:news_mirror}{mirror:dot}{stop:mirror}</div>
 {stop:show}
 
<div class="footer_news">{news:comments_link} ({news:comments_count})</div>

{stop:news}

</form>


------------------
--- CLANSPHERE ---
Professional clan care starts here


Zuletzt editiert von SlayR ClanSphere Team am 02.10.2010 um 09:27 Uhr (1x Editiert)
Inaktiv
|
Tress13
Thread-Ersteller


Highlander




Herkunft: Lüdenscheid
Beiträge: 3048
 # Antwort: 9 - 02.10.2010 um 12:53 Uhr
Das ist doch nur für die Kategorie-Auswahl und so.
Da dies aber in dieser recent nicht mit drin ist,
sollte das doch auch keine Probleme geben, oder irre ich mich ?
Außer das dir das in der debug angezeigt wird.

Ausserdem wäre das ein PHP Problem.
Und mit PHP kenne ich mich nicht aus.

Ich könnte höchstens die Kategoprie-Auswahl wieder in die recent.tpl machen.


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


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

Inaktiv
|
SlayR ClanSphere Team


Geekboy




Herkunft: Calbe (Saale)
Beiträge: 1133
 # Antwort: 10 - 02.10.2010 um 12:58 Uhr
Interessanterweise scheint der cats loop nicht wirklich die Kategorieauswahl zu sein. Ich habe per copy&paste bereits die Kategorieauswahl aus der originalen recent.tpl eingebaut, aber die wollte dann nicht mehr laufen...


------------------
--- CLANSPHERE ---
Professional clan care starts here
Inaktiv
|
Tress13
Thread-Ersteller


Highlander




Herkunft: Lüdenscheid
Beiträge: 3048
 # Antwort: 11 - 02.10.2010 um 14:30 Uhr
Das sollte aber für die Kategorien sein.
Schau mal hier:

mehr... +-
 
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
1. / 2. / ... 
 <div class="categorie">
  <div class="categorie_switch">Kategorie
    <select name="where" class="form">
      <option value="0">----</option>{loop:cats}
      <option value="{cats:categories_id}" {if:selected}selected="selected"{stop:selected}>{cats:categories_name}</option>{stop:cats}
     </select>
    <input type="submit" name="submit" value="Anzeigen" />
  </div>
  <div class="field1"><a href="{url:news_list}">Liste</a></div>
  <div class="field2">{head:pages}</div>
</div>


Edit1:

Zu diesem Template gehört eigentlich diese news_recent.tpl:

mehr... +-
 
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.
1. / 2. / ... 
 <form method="post" action="{url:news_recent}">

  <div class="wars_box">
       <div class="last_wars">{wars:navlist2}</div>
       <div class="next_wars">{wars:navnext}</div>
  </div>

{loop:news}

<div class="news_header">
   <div class="head_news">{news:news_headline}</div>
   <div class="categorie_news">{news:categories_name}</div>
   <div class="bottom_news">{news:news_time} - {news:users_link}</div>
</div>
   <div class="inner_news">{if:catimg}
      <img src="{page:path}{news:url_catimg}" style="float:right" alt="" />{stop:catimg}
      {news:news_readmore}
      {news:news_text}
      {if:readmore}
      <br /><br /><a href="{url:news_view:id={news:news_id}}">{lang:readmore_go}</a>
      {stop:readmore}
      {news:pictures}
   </div>

 {if:show}
<div class="inner_news">{lang:mirror}: {loop:mirror}{mirror:news_mirror}{mirror:dot}{stop:mirror}</div>
 {stop:show}
 
<div class="footer_news">{news:comments_link} ({news:comments_count})</div>

{stop:news}

</form>


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


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

Zuletzt editiert von Tress13 am 02.10.2010 um 14:33 Uhr (1x Editiert)
Inaktiv
|
SlayR ClanSphere Team


Geekboy




Herkunft: Calbe (Saale)
Beiträge: 1133
 # Antwort: 12 - 03.10.2010 um 10:52 Uhr
Genau das hab' ich gesucht, Tress. Danke. Bin nämlich grade dabei meine Error-Logs aufzuräumen.
Übrigens habe ich Deine Design-Überarbeitung gleich bei uns untergebracht, sieht wirklich gut aus. Was so ein wenig CSS3 ausmacht

<edit> irgendwas ist immernoch nicht sauber beim Thema ul
sieh Dir mal diesen Link hier an: http://www.ths-germany.de/index/jobs/view/id/2
da überschneidet sich der Text sehr stark, ich denke, es hat etwas mit diesen css Eigenschaften zu tun:
mehr... +-
 
1.
2.
3.
4.
5.
6.
7.
1. / 2. / ... 
 ul {
    Position: absolute;
    float: left;
    text-align: left;
    width: 1000px;
    height: 36px;
    }

Zu finden in der layout.css so etwa Zeile 98


------------------
--- CLANSPHERE ---
Professional clan care starts here


Zuletzt editiert von SlayR ClanSphere Team am 03.10.2010 um 19:23 Uhr (2x Editiert)
Inaktiv
|
Antworten: 12
Seite [1]


Sie müssen sich registrieren, um zu antworten.