Teammitglieder online
Support-Box
Neue Beiträge seit dem letzten Besuch.
Textbausteine des MODERATIONSTOOL
AB > PFAD > GENERATOR
FORUM > PFAD > GENERATOR
Unterstützung Lösungs-Probleme
Auffällige
User
Der Runde
Tisch
HÄUFIG GESTELLTE FRAGEN
Regeln und nützliche Hinweise
Neueste Themen
» kann man noch Blogs hier erstellen?
von Joost Gestern um 18:40

» Einstellen der Profilfelder funktioniert nicht
von Skouliki Di 26 März 2024 - 12:54

» Gründer-E-Mail-Adresse ändern
von Skouliki Mo 25 März 2024 - 13:48

» PN's werden nicht mehr rot eingefärbt
von Skouliki Fr 22 März 2024 - 7:44

» Forum löschen, Probleme mit Gründeraccount
von Skouliki Do 21 März 2024 - 9:04

»  Missbrauchsmeldung "Sexueller Inhalt" war (wieder) Werbung/Spam/Scam
von Skouliki Do 21 März 2024 - 9:03

» [phpBB3] Suchfunktion ohne Funktion
von Skouliki Mi 20 März 2024 - 8:41

» Neuer User kann sich anmelden.
von Skouliki Mi 20 März 2024 - 8:38

» Zugangsdaten vergessen/verloren
von Joost Sa 16 März 2024 - 21:07

» Schwierigkeiten mit BBCode
von Skouliki Fr 15 März 2024 - 11:51

» Entdeckt die neue Option Servimg Premium
von Joost Mi 6 März 2024 - 19:50

» Neues YAMAHA XT660-Forum
von gnadenlos Fr 1 März 2024 - 7:33

» Forum nur noch für Eingeloggte sichtbar?
von Skouliki Di 27 Feb 2024 - 7:53

» [phpBB3] Eine Frage zum Forum selbst.
von Skouliki Di 27 Feb 2024 - 7:52

» Beiträge verschwinden
von Skouliki Do 22 Feb 2024 - 7:47

» [Tutorial - alle Versionen] (De)aktiviert die Anzeige von Signaturen aus Eurem Profil
von Eto Do 15 Feb 2024 - 22:17

» Datenback-Dump?
von Skouliki Mo 12 Feb 2024 - 22:02

» Einloggen nicht mehr möglich [erbitte schnelle Rückmeldung!]
von Skouliki Mo 12 Feb 2024 - 8:15

[CSS] Hover-Button // Navbar

3 verfasser

Vorheriges Thema anzeigen Nächstes Thema anzeigen Nach unten

[CSS] Hover-Button // Navbar Empty [CSS] Hover-Button // Navbar

Beitrag von Ju Di 30 Sep 2008 - 14:08

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?
avatar
Ju
Lehrling
Lehrling

Männlich Beiträge : 16
Anmeldedatum : 24.09.08

Nach oben Nach unten

[CSS] Hover-Button // Navbar Empty Re: [CSS] Hover-Button // Navbar

Beitrag von Ju Mi 1 Okt 2008 - 10:10

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.
avatar
Ju
Lehrling
Lehrling

Männlich Beiträge : 16
Anmeldedatum : 24.09.08

Nach oben Nach unten

[CSS] Hover-Button // Navbar Empty Re: [CSS] Hover-Button // Navbar

Beitrag von jumpy Mi 1 Okt 2008 - 19:34

Du kannst NICHT auf das SYSTEM zugreifen!

jumpy
jumpy
jumpy
König
König

Männlich Beiträge : 516
Anmeldedatum : 27.11.07
phpBB3

Nach oben Nach unten

[CSS] Hover-Button // Navbar Empty Re: [CSS] Hover-Button // Navbar

Beitrag von Ju Mi 1 Okt 2008 - 21:36

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?
avatar
Ju
Lehrling
Lehrling

Männlich Beiträge : 16
Anmeldedatum : 24.09.08

Nach oben Nach unten

[CSS] Hover-Button // Navbar Empty Re: [CSS] Hover-Button // Navbar

Beitrag von jumpy Do 2 Okt 2008 - 12:19

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 Smile
Ansonsten, beschäftige Dich intensiver mit PHP/JS/CSS und Visual C/Basic und bastel was neues *smile*.

LG.
Jumpy
jumpy
jumpy
König
König

Männlich Beiträge : 516
Anmeldedatum : 27.11.07
phpBB3

Nach oben Nach unten

[CSS] Hover-Button // Navbar Empty Re: [CSS] Hover-Button // Navbar

Beitrag von Ju Do 2 Okt 2008 - 12:53

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 Wink


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>
avatar
Ju
Lehrling
Lehrling

Männlich Beiträge : 16
Anmeldedatum : 24.09.08

Nach oben Nach unten

[CSS] Hover-Button // Navbar Empty Re: [CSS] Hover-Button // Navbar

Beitrag von Zuckerpuppe Do 2 Okt 2008 - 13:08

meinst du auf der Startseite das Multiforum?

die Anleitung dazu findest du hier Smile
Zuckerpuppe
Zuckerpuppe
Admin a.D.
Admin a.D.

Weiblich Beiträge : 19539
Anmeldedatum : 24.04.08
keine
phpBB3

Nach oben Nach unten

[CSS] Hover-Button // Navbar Empty Re: [CSS] Hover-Button // Navbar

Beitrag von Ju Do 2 Okt 2008 - 13:29

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

[CSS] Hover-Button // Navbar Unbenanntpd2.th

Hab das schnell mal mit Paint gebastelt =)
avatar
Ju
Lehrling
Lehrling

Männlich Beiträge : 16
Anmeldedatum : 24.09.08

Nach oben Nach unten

[CSS] Hover-Button // Navbar Empty Re: [CSS] Hover-Button // Navbar

Beitrag von jumpy Do 2 Okt 2008 - 13:49

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 Smile
Ah...
zur Buttongrafik, Grösse der Buttons 120/25
Angabe im CSS 118/22

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

Jumpy
jumpy
jumpy
König
König

Männlich Beiträge : 516
Anmeldedatum : 27.11.07
phpBB3

Nach oben Nach unten

[CSS] Hover-Button // Navbar Empty Re: [CSS] Hover-Button // Navbar

Beitrag von Ju Do 2 Okt 2008 - 15:58

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.
avatar
Ju
Lehrling
Lehrling

Männlich Beiträge : 16
Anmeldedatum : 24.09.08

Nach oben Nach unten

[CSS] Hover-Button // Navbar Empty Re: [CSS] Hover-Button // Navbar

Beitrag von jumpy Do 2 Okt 2008 - 18:39

Hier noch ein TiPP / Tutorial:
CSS TUT

In den Modulen kannst Du mit Tabellen arbeiten, kein Problem Smile

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 Smile

Jumpy

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

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

Männlich Beiträge : 516
Anmeldedatum : 27.11.07
phpBB3

Nach oben Nach unten

[CSS] Hover-Button // Navbar Empty Re: [CSS] Hover-Button // Navbar

Beitrag von Ju Fr 3 Okt 2008 - 17:32

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.
avatar
Ju
Lehrling
Lehrling

Männlich Beiträge : 16
Anmeldedatum : 24.09.08

Nach oben Nach unten

[CSS] Hover-Button // Navbar Empty Re: [CSS] Hover-Button // Navbar

Beitrag von jumpy Fr 3 Okt 2008 - 18:15

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 Smile
Alles geht natürlich auch unter PHP.
Die Steuerung Deiner Page machste mit CSS und JS...fertisch Smile

jumpy


Zuletzt von *Henry am Fr 3 Okt 2008 - 20:43 bearbeitet; insgesamt 1-mal bearbeitet (Grund : Regelwidrige Formatierung entfernt)
jumpy
jumpy
König
König

Männlich Beiträge : 516
Anmeldedatum : 27.11.07
phpBB3

Nach oben Nach unten

[CSS] Hover-Button // Navbar Empty Re: [CSS] Hover-Button // Navbar

Beitrag von Ju Fr 3 Okt 2008 - 21:45

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 =)
avatar
Ju
Lehrling
Lehrling

Männlich Beiträge : 16
Anmeldedatum : 24.09.08

Nach oben Nach unten

Vorheriges Thema anzeigen Nächstes Thema anzeigen Nach oben

- Ähnliche Themen

 
Befugnisse in diesem Forum
Sie können in diesem Forum nicht antworten