Lexi Help
Die neuesten Themen
» Themen fixieren
von inde Heute um 13:50

» [Update] Neues Theme der mobilen Version V2
von inde Heute um 13:34

» Mein altes Forum zurückbekommen
von Bigtuber Gestern um 19:18

» Begriff : "merken"
von Ray Gestern um 12:14

» [PunBB] Umzug eines funktionierenden Forums von PunBB auf phpBB?
von inde Gestern um 11:07

» Servamp Forum
von Raine Kamiya Mo 26 Sep 2016 - 22:47

» [phpBB2] Probleme mit der "Postprofil" Anzeige
von Dr.Keks Mo 26 Sep 2016 - 20:56

» Private Nachrichten
von inde Mo 26 Sep 2016 - 10:05

» Wie kann man erkennen, welche Forenversion ein anderes Forum hat?
von inde So 25 Sep 2016 - 22:24

» Ad Ware im Forum?
von inde So 25 Sep 2016 - 20:38

» [Sammelthread] Unangebrachte Werbung
von inde Fr 23 Sep 2016 - 9:00

» [phpBB2] Gruppen in der Wer is Online Anzeige "trennen"
von TheRollyJoger Mi 21 Sep 2016 - 10:49

» Yaruma - Fantasy-RPG Forum
von Alketa Di 20 Sep 2016 - 21:34

» [phpBB3] Links automatisch kursiv
von inde Di 20 Sep 2016 - 17:37

» [Invision] Kompletter Css-Codebaum gesucht !
von inde Di 20 Sep 2016 - 13:12

» Filmforum "Dark Movie Dreams"
von Ray Di 20 Sep 2016 - 11:56

Partner
free forum

[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

Nutzerprofil 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

Nutzerprofil 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

jumpy
Premium-User
Premium-User

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

Nutzerprofil 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

Nutzerprofil 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

jumpy
Premium-User
Premium-User

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

Nutzerprofil 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

Nutzerprofil 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

Zuckerpuppe
Admin a.D.
Admin a.D.

Weiblich Beiträge : 19541
Anmeldedatum : 24.04.08

Nutzerprofil 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

Nutzerprofil 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

jumpy
Premium-User
Premium-User

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

Nutzerprofil 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

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

jumpy
Premium-User
Premium-User

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

Nutzerprofil 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

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

jumpy
Premium-User
Premium-User

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

Nutzerprofil 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

Nutzerprofil anzeigen

Nach oben Nach unten

Vorheriges Thema anzeigen Nächstes Thema anzeigen Nach oben


 
Forenbefugnisse:
Sie können in diesem Forum nicht antworten