Das Forum der Foren
Willkommen im offiziellen Supportforum von Forumieren!

Um alle Vorteile unseres Forums zu nutzen, melden Sie sich bitte an. Wenn Sie bereits Mitglied sind loggen Sie sich ein.


Erstellen Sie ein kostenloses Forum wie dieses hier.
Regeln und nützliche Hinweise
Lexi Help
Die neuesten Themen
» Signal für Chat
von inde Gestern um 23:43

» [phpBB2] "Ihre Sitzung ist abgelaufen".
von inde Gestern um 23:41

» [ModernBB] Weiterleitung zur Startseite
von inde Gestern um 19:57

» [phpBB2] Saol Eile : Welt der Mythen
von Sunshinex33 Gestern um 3:12

» [ModernBB] Transparenz der Tabelle
von deafgopro Di 25 Apr 2017 - 15:47

» [ModernBB] Avatar - Profil auf die linke Seite
von deafgopro Mo 24 Apr 2017 - 21:52

» Benachrichtigungen
von inde Mo 24 Apr 2017 - 18:59

» [ModernBB] Profil Informationen im Forum - Farbe nicht veränderbar
von inde Mo 24 Apr 2017 - 15:54

» [#9712] Gründerwechsel nach Inaktivität des Gründers
von Bigtuber Mo 24 Apr 2017 - 14:09

» Sailor Moon Forum SMF
von Rika So 23 Apr 2017 - 12:09

» Natur und Wildlife Forum
von Stephan68 Sa 22 Apr 2017 - 19:44

» Gründerwechsel nach Inaktivität des Gründers
von Checvx Sa 22 Apr 2017 - 1:25

» Update der Facebook-Verbindung
von inde Fr 21 Apr 2017 - 18:07

» SPAM
von inde Fr 21 Apr 2017 - 17:53

» [phpBB2] Style zerschießt sich
von Bigtuber Fr 21 Apr 2017 - 1:56

» [Invision] Neues Thema - Antworten verschieben
von inde Do 20 Apr 2017 - 21:05

www.forumieren.de

[CSS] Hover-Button // Navbar

Vorheriges Thema anzeigen Nächstes Thema anzeigen Nach unten

[CSS] Hover-Button // Navbar

Beitrag von Ju am 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?

Ju
Neuling
Neuling

Männlich Beiträge : 16
Anmeldedatum : 24.09.08

Benutzerprofil anzeigen

Nach oben Nach unten

Re: [CSS] Hover-Button // Navbar

Beitrag von Ju am 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.

Ju
Neuling
Neuling

Männlich Beiträge : 16
Anmeldedatum : 24.09.08

Benutzerprofil anzeigen

Nach oben Nach unten

Re: [CSS] Hover-Button // Navbar

Beitrag von jumpy am Mi 1 Okt 2008 - 19:34

Du kannst NICHT auf das SYSTEM zugreifen!

jumpy
avatar
jumpy
Premium User
Premium User

Männlich Beiträge : 516
Hinweis : NRW - Dortmund / Pretoria ZA. (Zuidafrika).
Anmeldedatum : 27.11.07
phpBB3

Benutzerprofil anzeigen

Nach oben Nach unten

Re: [CSS] Hover-Button // Navbar

Beitrag von Ju am 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?

Ju
Neuling
Neuling

Männlich Beiträge : 16
Anmeldedatum : 24.09.08

Benutzerprofil anzeigen

Nach oben Nach unten

Re: [CSS] Hover-Button // Navbar

Beitrag von jumpy am 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
avatar
jumpy
Premium User
Premium User

Männlich Beiträge : 516
Hinweis : NRW - Dortmund / Pretoria ZA. (Zuidafrika).
Anmeldedatum : 27.11.07
phpBB3

Benutzerprofil anzeigen

Nach oben Nach unten

Re: [CSS] Hover-Button // Navbar

Beitrag von Ju am 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>

Ju
Neuling
Neuling

Männlich Beiträge : 16
Anmeldedatum : 24.09.08

Benutzerprofil anzeigen

Nach oben Nach unten

Re: [CSS] Hover-Button // Navbar

Beitrag von Zuckerpuppe am Do 2 Okt 2008 - 13:08

meinst du auf der Startseite das Multiforum?

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

Weiblich Beiträge : 19541
Anmeldedatum : 24.04.08
keine
phpBB3

Benutzerprofil anzeigen

Nach oben Nach unten

Re: [CSS] Hover-Button // Navbar

Beitrag von Ju am Do 2 Okt 2008 - 13:29

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



Hab das schnell mal mit Paint gebastelt =)

Ju
Neuling
Neuling

Männlich Beiträge : 16
Anmeldedatum : 24.09.08

Benutzerprofil anzeigen

Nach oben Nach unten

Re: [CSS] Hover-Button // Navbar

Beitrag von jumpy am 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
avatar
jumpy
Premium User
Premium User

Männlich Beiträge : 516
Hinweis : NRW - Dortmund / Pretoria ZA. (Zuidafrika).
Anmeldedatum : 27.11.07
phpBB3

Benutzerprofil anzeigen

Nach oben Nach unten

Re: [CSS] Hover-Button // Navbar

Beitrag von Ju am 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.

Ju
Neuling
Neuling

Männlich Beiträge : 16
Anmeldedatum : 24.09.08

Benutzerprofil anzeigen

Nach oben Nach unten

Re: [CSS] Hover-Button // Navbar

Beitrag von jumpy am 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" >
avatar
jumpy
Premium User
Premium User

Männlich Beiträge : 516
Hinweis : NRW - Dortmund / Pretoria ZA. (Zuidafrika).
Anmeldedatum : 27.11.07
phpBB3

Benutzerprofil anzeigen

Nach oben Nach unten

Re: [CSS] Hover-Button // Navbar

Beitrag von Ju am 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.

Ju
Neuling
Neuling

Männlich Beiträge : 16
Anmeldedatum : 24.09.08

Benutzerprofil anzeigen

Nach oben Nach unten

Re: [CSS] Hover-Button // Navbar

Beitrag von jumpy am 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)
avatar
jumpy
Premium User
Premium User

Männlich Beiträge : 516
Hinweis : NRW - Dortmund / Pretoria ZA. (Zuidafrika).
Anmeldedatum : 27.11.07
phpBB3

Benutzerprofil anzeigen

Nach oben Nach unten

Re: [CSS] Hover-Button // Navbar

Beitrag von Ju am 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 =)

Ju
Neuling
Neuling

Männlich Beiträge : 16
Anmeldedatum : 24.09.08

Benutzerprofil anzeigen

Nach oben Nach unten

Vorheriges Thema anzeigen Nächstes Thema anzeigen Nach oben


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