Entrar | Registrar | FAQ
Anonymous

Navigation mit Hover Effekt (Bild und Text Kombination)

+ Postar uma resposta

11 Mensagens 1, 2


Navigation mit Hover Effekt (Bild und Text Kombination)

por lorem ipsum » Ter Jun 12, 2012 7:34 am

Da ich nun einen Scherbenhaufen habe frage ich mal um Hilfe an.

Die Buttons bei der Sidebar welche der Navigation dienen sollen
sind Grafiken (7x identisch).Der Text zur Grafik soll anschliessend
im Link generiert werden (auf der Grafik).
Die Grafik für den Hover Effekt ist wie alle Grafiken .png mit Transparenz.
Die sidebar hat ein background-image.

Nach dem ich den Button zerteilt und platziert hatte musste ich feststellen
dass ich über css den hover effekt nicht hinbekomme.
Also setze ich nun den ganzen Button ein und versuche den Text darüber
zu setzen.

Nun finde ich aber weder genaue Beschreibungen noch ähnliches das mir
weiterhelfen könnte. Unmöglich kann es nicht sein :)

Aktuell was noch als ansetz vorhanden ist.

Código: Selecionar tudo
#sidebar {
   float: left;
   width: 249px;
   height: 727px;
   margin: 0;
   padding-top: 64px;
   background: url(../images/navbg.png) no-repeat;
   }
.but {
   float: left;
   width: 249px;
   height: 57px;
   margin: 0 0 11px 0;
   background-image: url(../images/abut.png) no-repeat;
   }


Im html war es
im <nav> positioniert als <a href>


Wäre dankbar wenn mir jemand das Licht zeigen könnte.
Avatar de usuário

lorem ipsum

  • Mensagens: 2
  • Data de registro: Ter Jun 12, 2012 7:11 am

Re: Navigation mit Hover Effekt (Bild und Text Kombination)

por XainPro » Ter Jun 12, 2012 10:12 am

könnten Sie bitte teilen Sie das Bild als auch
Avatar de usuário

XainPro

  • Mensagens: 3933
  • Data de registro: Sex Fev 17, 2012 8:10 pm

Re: Navigation mit Hover Effekt (Bild und Text Kombination)

por lorem ipsum » Ter Jun 12, 2012 11:36 am

ja der ansatz passt da der mittlere teil des bildes mit repeat-x über die breite gespannt ist.

hab es wieder angepasst auf den ursprünglichen zustand

Código: Selecionar tudo
#sidebar {
   float: left;
   width: 249px;
   height: 727px;
   margin: 0;
   padding-top: 64px;
   background: url(../images/navbg.png) no-repeat;
   }
.butl:hover {
   float: left;
   width: 14px;
   height: 57px;
   margin: 0 0 11px 0;
   background-image: url(../images/abutl.png) no-repeat;
   }
.butm:hover {
   float: left;
   width: 219px;
   height: 57px;
   margin: 0 0 11px 0;
   background-image: url(../images/abutm.png) repeat-x;
   }   
.butr:hover {
   float: left;
   width: 16px;
   height: 57px;
   margin: 0 0 11px 0;
   background-image: url(../images/abutr.png) no-repeat;
   }

*********************

<nav id="sidebar">
      <a href="#"><img class="butl" src="images/abutl.png"/><img class="butm" src="images/abutm.png"/><img class="butr" src="images/abutr.png"/></a>
      <a href="#"><img class="butl" src="images/abutl.png"/><img class="butm" src="images/abutm.png"/><img class="butr" src="images/abutr.png"/></a>
      <a href="#"><img class="butl" src="images/abutl.png"/><img class="butm" src="images/abutm.png"/><img class="butr" src="images/abutr.png"/></a>
      <a href="#"><img class="butl" src="images/abutl.png"/><img class="butm" src="images/abutm.png"/><img class="butr" src="images/abutr.png"/></a>
      <a href="#"><img class="butl" src="images/abutl.png"/><img class="butm" src="images/abutm.png"/><img class="butr" src="images/abutr.png"/></a>
      <a href="#"><img class="butl" src="images/abutl.png"/><img class="butm" src="images/abutm.png"/><img class="butr" src="images/abutr.png"/></a>
      <a href="#"><img class="butl" src="images/abutl.png"/><img class="butm" src="images/abutm.png"/><img class="butr" src="images/abutr.png"/></a>
   </nav>   


Wie passe ich den text nun ein in den link so dass er immer lesbar ist?
Der Hover muss nun ebenso die drei grafiken + text enthalten
Avatar de usuário

lorem ipsum

  • Mensagens: 2
  • Data de registro: Ter Jun 12, 2012 7:11 am

Re: Navigation mit Hover Effekt (Bild und Text Kombination)

por SigmaAlphaPi » Seg Jun 25, 2012 12:58 pm

Hi,

das :hover greift ausschließlich, wenn das Element mit der Maus "überfahren" wird. Wenn hier drei Elemente (Klassen) betrachtet werden, weil es der linke, mittlere und rechte Teil des Buttons ist, dann greift das :hover wahrscheinlich nur in der Mitte, weil dort wohl der Linktext stehen wird.

Wenn die Buttons immer die gleiche Breite haben, dann einfach eine ganze Button-Grafik generieren und dann den kompletten Button (Hintergrundgrafik) per CSS bei einem Hover austauschen.

Ich hoffe, ich habe es richtig verstanden und werde verstanden.
Avatar de usuário

SigmaAlphaPi

  • Mensagens: 2
  • Data de registro: Qua Set 28, 2011 9:22 am

Re: Navigation mit Hover Effekt (Bild und Text Kombination)

por MAMAD » Seg Abr 17, 2017 12:46 pm

I have the same problem
سایت تخفیف
https://www.tipbazar.ir
Avatar de usuário

MAMAD

  • Mensagens: 3
  • Data de registro: Seg Abr 17, 2017 12:40 pm

Re: Navigation mit Hover Effekt (Bild und Text Kombination)

por fita » Sáb Dez 22, 2018 10:57 am

Amazing stuff with lots of information. Waiting for more like this.
Blue Prism Training in Chennai | DevOps Training in Chennai
Avatar de usuário

fita

  • Mensagens: 4
  • Data de registro: Seg Dez 17, 2018 10:02 am

Classes

por Anbarasan » Qua Jan 30, 2019 11:29 am

Reading your blog left me with some useful info and this was an awesome blog. Also, have a look @ Spoken English Classes in Chennai | English Speaking Classes in Mumbai
Avatar de usuário

Anbarasan

  • Mensagens: 1
  • Data de registro: Qua Jan 30, 2019 11:27 am

Re: Navigation mit Hover Effekt (Bild und Text Kombination)

por priyamohan » Qua Jan 30, 2019 12:12 pm

Thank for sharing this post.Keep Doing.
DevOps Certification in Chennai | DevOps Training in Chennai
Avatar de usuário

priyamohan

  • Mensagens: 1
  • Data de registro: Qua Jan 30, 2019 12:05 pm

Re: Navigation mit Hover Effekt (Bild und Text Kombination)

por saranya » Qua Abr 10, 2019 7:39 am

Your good knowledge and kindness in playing with all the pieces were very useful. I don’t know what I would have done if I had not encountered such a step like this.
AWS Training in chennai
Avatar de usuário

saranya

  • Mensagens: 2
  • Data de registro: Qua Abr 10, 2019 7:37 am

Re: Navigation mit Hover Effekt (Bild und Text Kombination)

por saranya » Qua Abr 10, 2019 7:50 am

Good Post! Thank you so much for sharing this pretty post, it was so good to read and useful to improve my knowledge as updated one, keep blogging.

Java Training in chennai
Avatar de usuário

saranya

  • Mensagens: 2
  • Data de registro: Qua Abr 10, 2019 7:37 am


+ Postar uma resposta

1, 2