[CSS] Hover-Button // Navbar

Tja, ich bin grad voll im Testen und rumprobieren für unser Forum und steh grad bissl an. Es geht darum einen Hover-Button zu erstellen und den mittels CSS zu "steuern". Hier mal der Code:

Code:

#forum
{
  display: block;
  width: 67px;
  height: 40px;
  background: url("blablubburl");
}
#forum:hover
{
  background-position: 0px -40px;
}
#forum:active
{
  background-position: 0px -80px;
}#forum span
{
  display: none;
}


Und hier der Text auf der Seite/im Modul:

Code:

<a id="forum" href="/forum.htm" title="Forum"><span>Forum</span></a>

Funktioniert super, man fährt mit der Maus über den Button, das bild verschiebt sich, man klickt drauf und das nächste Bild erscheint.
Mein Problem an der ganzen Sache ist nun, dass ich den Code nicht für jeden Button selber schreiben will, sondern einmal und dass dan drauf zugegriffen wird. Meine bisherigen CSS- und Html-Skills beruhen auf Copy'n'Paste, was sich aba mit der Zeit ändern soll ^^

Wie ist es möglich den Pfad vom Bild im "html-code" angeben kann, damit ich nicht jeden Button einzeln machen muss?

So, ich hab mir den Quellcode der Portalseite mal angeschaut und mir stellt sich nun folgende Frage:

Wo finde ich die Klasse "mainmenu"?

Code:

<li><a class="mainmenu" href="/forum.htm"><img id="i_icon_mini_index" src="urlvombild" border="0"  hspace="0" alt="Startseite" title="Startseite" /></a></li>

Im CSS unter Administrator/Anzeige/Farben/CSS Stylesheet -> "CSS-Gerüst des Forums ansehen" steht's nicht.

Im allgemeinen geht's mir darum die Navigationszeile oben (Portal, Forum, FAQ, ...) mittels Rollover-Buttons (Hover-Buttons) zu verschönern. Aufgrund meines Dickschädls möchte ich das mittels CSS und HTML machen, ohne das Navigationsmenü "unsichtbar" zu machen und eins komplett neu schreiben.

Du kannst NICHT auf das SYSTEM zugreifen!

jumpy

Ok is klar, irgendwo müssen Grenzen sein =) Mal schaun ob ich das irgendwie anders lösen kann.

Edit:
Gibts irgendwo ne Beschreibung zu dem System? Wenn man da nichts ändern kann, kann man wenigstens auf die Klassen zugreifen?

Hi Ju,

nein, auf die "Klassen" kannst Du auch nicht wirklich zugreifen, definiere bitte mal "Klassen".

Natürlich, wenn Du soviel an Eigenanteil einbringen willst, wäre es angedachter, Du würdest Dir, falls noch nicht vorhanden, einen Serverplatz mieten der PHP5/SQL fähig ist und Du Dir aus dem Netz ein Open Source Forum ziehst,was Du selber modifizieren kannst, wie Du möchtest.
Meineserachtens reicht dieses Forum mehr als vollkommen aus und deckt mehr als 100% alle Einstellungen ab, die man benötigt und darüber hinaus noch viel mehr.
Ich für meine Person, war damals drauf und drann eins zu programmieren, beliess es aber bei einem Chat, weil gerade das Forum hier nicht nochmal erfunden werden muß, es ist da
Ansonsten, beschäftige Dich intensiver mit PHP/JS/CSS und Visual C/Basic und bastel was neues *smile*.

LG.
Jumpy

Also eigenen Server und so mieten is mir zu viel - dafür reicht das Angebot hier leicht. Ich versuch halt grad noch die Grenzen in Erfahrung zu bringen, und wie weit man Sachen anpassen kann. Ich hab so Ideen wie Hover-Buttons in der Navigationsleiste, angepasstes/eigenes Login-Modul, ... Ob und wie umsetzbar wird sich noch zeigen, da setz ich gern meinen Kopf durch bis ich anstehe =)

PHP/JS/CSS/Vicual C/Basic ... hmmm ... bis jetz kam ich ja mit VBA aus, mit dem Projekt hier muss ich allerdings eindeutig mehr lernen *gg* und ich denk mit den netten Leuten hier ist das auch durchaus möglich. Ich hab natürlich auch vor funktionierende Sachen hier zu posten


Hier wär schon meine nächste Frage:

Hat wer ne Ahnung wie ich Buttons nebeneinander bekomme, und nicht untereinander? Zu sehen im Forum wenn man sich registriert hat - hier der Code im Modul:

Code:

/*code von den buttons*/
#forumbtn
{
  display: block;
  width: 67px;
  height: 40px;
  background: url("urlstehthier");
}
#forumbtn:hover
{
  background-position: 0px -40px;
}
#forumbtn:active
{
  background-position: 0px -80px;
}
#forumbtn span
{
  display: none;
}
-->
</style>

<a id="forumbtn" href="/forum.htm" title="Forum"><span>Forum</span></a>
<a id="newsbtn" href="/portal.htm" title="News"><span>News</span></a>

meinst du auf der Startseite das Multiforum?

die Anleitung dazu findest du hier

ähm nein, ich post am besten mal nen Screen - bin da immer bissl faul *gg*



Hab das schnell mal mit Paint gebastelt =)

Gut, hier mal nen Vorschlag, ob es bei Deinem Vorhaben funzt, kann ich Dir nicht sagen, probiere es mal aus, am besten teste dies in einer NEUEN HTML Datei (z.b. Dreamweaver):

CSS Code:

Code:


/* menue oben */


#menu2 a {
   display: block;
   color: #A4A4A4;
   text-decoration: none;
   font-family: verdana, sans-serif;
   font-size: 8pt;
   padding-left: 1px;
   padding-top: 3px;
   padding-bottom: 0px;
   margin: 0px auto;
   width: 118px;
   height: 22px;
   background-image: url(../images/bu_off.gif);
   font-weight: bold;
}

#menu2 a:visited{
   color: #A4A4A4;
   text-decoration: none;
   font-family: verdana, sans-serif;
   font-size: 8pt;
   padding-left: 1px;
   padding-top: 3px;
   padding-bottom: 0px;
   margin: 0px auto;
   width: 118px;
   height: 22px;
   background-image: url(../images/bu_off.gif);
   font-weight: bold;
}

#menu2 a:active {
   color: #A4A4A4;
   text-decoration: none;
   font-family: verdana, sans-serif;
   font-size: 8pt;
   padding-left: 1px;
   padding-top: 3px;
   padding-bottom: 0px;
   margin: 0px auto;
   width: 118px;
   height: 22px;
            background-image: url(../images/bu_off.gif);
   font-weight: bold;
}

#menu2 a:hover {
   color: #ffffff;
   text-decoration: none;
   font-family: verdana, sans-serif;
   font-size: 8pt;
   padding-left: 1px;
   padding-top: 3px;
   padding-bottom: 0px;
   margin: 0px auto;
   width: 118px;
   height: 22px;
   background-image: url(../images/bu_on.gif);
   font-weight: bold;
}


Dazu die zu positionierende Tabellenstruktur:

Code:


 <td colspan="2"><table width="358" height="23"  border="0" align="center" cellpadding="0" cellspacing="0" id="menu2" >
              <tr>
                <!-- <td width="119" align="center" ><a href="index.htm" target="_parent">ZUGANG</a></td> -->
                <td width="119" align="center" ><a href="http://boycraze.gettalk.net"target="_parent">18+ ENTER</a></td>
                <td width="119" align="center" ><a href="faq.html" onMouseOver="winopen(); return true;" onMouseOut="msg.close();" target="_parent">Warnung!</a></td>
                <td width="119" align="center" ><a href="http://www.gidf.de" target="_parent">E X I T </a></td>
              </tr>
          </table></td>


Gut Du kannst auch mit Layern arbeiten, inwieweit Du dies hier realisieren kannst, mußt Du testen, bei mir geht es
Ah...
zur Buttongrafik, Grösse der Buttons 120/25
Angabe im CSS 118/22

Viel Glück und ZERSCHIESS Dein FORUM NICHT!!!

Jumpy

hmmm ... Tabelle war ein gutes Stichwort.

CSS-Code hab ich gleich lassen, HTML hier:

Code:

<table border="0">
   <tr>
           <td width="67" align="center"><a id="forumbtn" href="/forum.htm" title="Forum"><span>Forum</span></a></td>
                <td width="67" align="center"><a id="newsbtn" href="/portal.htm" title="News"><span>News</span></a></td>
                <td width="67" align="center"><a id="faqbtn" href="/faq.htm" title="FAQ"><span>FAQ</span></a></td>
      <td width="67" align="center"><a id="suchenbtn" href="/search.forum" title="Suchen"><span>Suchen</span></a></td>
      <td width="67" align="center"><a id="memberbtn" href="/memberlist.forum" title="Member"><span>Member</span></a></td>
      <td width="67" align="center"><a id="gruppenbtn" href="/groupcp.forum" title="Gruppen"><span>Gruppen</span></a></td>
      <td width="67" align="center"><a id="profilbtn" href="/profile.forum?mode=editprofile" title="Profil editieren"><span>Profil</span></a></td>
      <td width="67" align="center"><a id="pmbtn" href="/msg.forum?folder=inbox" title="PM"><span>PM</span></a></td>
      <td width="67" align="center"><a id="logbtn" href="/" title="Log-In/-Out"><span>Log-In/-Out</span></a></td>
   </tr>
</table>

Layer sagt mir (noch) nichts ^^ muss ich mal nachlesen.

Danke für den Tipp

Julian


PS:
Portal-Struktur hab ich tatsächlich beim ersten Versuch zerschossen *gg* aba ich mach imemr brav Backup's bevor ich was änder.

Hier noch ein TiPP / Tutorial:
CSS TUT

In den Modulen kannst Du mit Tabellen arbeiten, kein Problem

Wichtiger ist die CSS Anpassung, nimm dazu TopStyle light, ist Freeware, wenn Du auf der Page bist, gehe dort nach ganz UNTEN, dort kannst Du TopStyle light laden...hier der LINK

Viel Spass damit, ist klasse

Jumpy

Ps.: denke daran die ID in der Tabelle vom CSS zu setzen, sonst funzt es net

Code:


<table width="358" height="23"  border="0" align="center" cellpadding="0" cellspacing="0" id="menu2" >

Danke für den Tipp - Tutorial hab ich gleich gelesen, jetz versteh ich schon mal CSS bissl besser. Der Rest kommt dann sicher mit der Zeit ^^

Das Programm werd ich mir auch mal bei gelegenheit anschaun.

So, aba Back 2 Topic:

Hoverbar funktioniert eingeschränkt
* 2 verschiedene Module für Besucher und Registrierte
* Funktioniert zur Zeit nur auf der Portal-Seite :/

Deswegen auch meine Frage - kann irgendwie über dem Forum ein Modul platzieren? Oder es mittels Code nach oben bringen?

Im schlimmsten Fall ist es sicher möglich das ganze Forum auf eine Html-Seite neu zu basteln, will ich mir aba eher nicht antun.

Ju der Bastelkönig *smile*

jo, Du kannst ein Modul zu "oberst" bringen, klar vorher erstellen, unter:
Admin Bereich ->Module -> Verwaltung der Portalseiten -> Struktur dort:
Ein persönliches Modul erstellen.

Glaube aber nicht, das es das ist was Du willst.

Das zweitere wäre realistischer, du brauchst ne index.html mit ner framesteuerung für 2 Frames, dann z.B. eine Page "oben.htm" und eine "inhalt.htm", das wäre ne Framevariate und viel Arbeit ist es auch nicht.
Du kannst aber auch eine ganz normale Page machen als Tabellenkonstruktion wobei Du der Tabelle 2 Zeilen und 1 Spalte gibst, in die obere kommt Dein "Menü" in die untere das "Forum". (setze in der INDEX.HTML dort frameborder="0" border="0" framespacing="0" ein)
Dann gibt es noch ne Konstruktion mit I-Frame, aber das würde jetzt den Rahmen sprengen
Alles geht natürlich auch unter PHP.
Die Steuerung Deiner Page machste mit CSS und JS...fertisch

jumpy

kk, die Portalseite passt ja. Ich hätte die bestehende Navigationsleiste einfach mit 1 pixel-Bilder ersetzt. Nur eben beim Forum geht's nicht.

I-Frame klingt intressant, sowas hab ich schonmal wo gelesen *gg* ich google mal =)