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

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

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

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

Supporter

Beiträge: 6116

# Antwort: 5 - 30.09.2010 um 19:35 Uhr

<ul id="deineid">
<li></li>
<li></li>
...

Inaktiv

SlayR

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

/* 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

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

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

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 am 03.10.2010 um 19:23 Uhr (2x Editiert)

Inaktiv

Antworten: 12

Seite [1]

Sie müssen sich registrieren, um zu antworten.

Forum - Thema
Nächstes Thema ->
Forum -> Support -> (X)HTML, CSS, JavaScript -> Problem mit ul