• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Text über Grafik und Grafik ist der Link

B

Bigpackv2

Neues Mitglied
Hallo.

Habe per Z-Index einmal ne liste mit Grafiken als Link und darüber ne Liste mit Text, will die Grafiken ja nu als Link benutzen das geht aber nicht mehr bzw kaum noch nur ein kleines Bisschen weil der Text fast immer genauso lang ist wie die Grafik.

Wie kann ich es erreichen dass der text SO ist, dass ich praktisch durch ihn hindurch auf den Link (Also die Grafik) klicken kann?

MfG, Bigpackv2
 
warum einfach wenns auch umständlich geht?

mach dir statt der bilder mit z-index doch einfach input type="submit" buttons denen du per css dann die bilder als hintergründe zuweist und die entsprechenden abmessungen
 
Ich hatte ja zuerst CSS und Hintergrundgrafiken nur da wusste ich nicht wie ich das mache mit aktiven und inaktiven Buttons, denn der momentan ausgewählte soll hervorgehoben werden.

Wie stelle ich das an ?

Also mit CSS

MfG, Bigpackv2
 
Hmmm das sagt mir nicht viel jetzt...

Ich habe da schon nen active drin..

Könnte ich net einfach zwei Klassen definieren Aktiv/Inaktiv und die jeweils mit ner anderen Hintergrundgrafik versehen, und dann per active-tag oder active-id den momentan ausgewählten Menüpunkt zur Klasse Aktiv zählen? So in der Art?

Oder geht das auch komplett ohne die Klassen, nur über nen Tag?

Hier is mal der Code des Menüs:
Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

        <head>
                <title></title>
                <style type="text/css">

                * {
                padding: 0;
                margin: 0;
                }

                #navlist
                {
                margin-left: 0;
                padding-left: 0;
                list-style: none;
                }

                #navlist li
                {
                padding-left: 0px;
                margin-bottom: 0px;
                background-image: url();
                background-repeat: no-repeat;
                background-position: 0px 0px
                }

                #navlist_2 li 
               {
               line-height: 50px;
               margin-left:20px;
               list-style: none;
               }

                </style>
        </head>

        <body text="#000000" bgcolor="#FFFFFF" link="#FF0000" alink="#FF0000" vlink="#FF0000">
        
                <div id="navcontainer">
                        <ul id="navlist">
                                <li id="active"><a href="" id="current"><img src="./Button_Aktiv.png" border="0" align="left"></a></li>
                                <li><a href=""><img src="./Button_Inaktiv.png" border="0" align="left"></a></li>
                                <li><a href=""><img src="./Button_Inaktiv.png" border="0" align="left"></a></li>
                                <li><a href=""><img src="./Button_Inaktiv.png" border="0" align="left"></a></li>
                                <li><a href=""><img src="./Button_Inaktiv.png" border="0" align="left"></a></li>
                                <li><a href=""><img src="./Button_Inaktiv.png" border="0" align="left"></a></li>
                                <li><a href=""><img src="./Button_Inaktiv.png" border="0" align="left"></a></li>
                                <li><a href=""><img src="./Button_Inaktiv.png" border="0" align="left"></a></li>
                                <li><a href=""><img src="./Button_Inaktiv.png" border="0" align="left"></a></li>
                                <li><a href=""><img src="./Button_Inaktiv.png" border="0" align="left"></a></li>
                                <li><a href=""><img src="./Button_Inaktiv.png" border="0" align="left"></a></li>
                                <li><a href=""><img src="./Button_Inaktiv.png" border="0" align="left"></a></li>
                                <li><a href=""><img src="./Button_Inaktiv.png" border="0" align="left"></a></li>
                                <li><a href=""><img src="./Button_Inaktiv.png" border="0" align="left"></a></li>
                                <li><a href=""><img src="./Button_Inaktiv.png" border="0" align="left"></a></li>
                                <li><a href=""><img src="./Button_Inaktiv.png" border="0" align="left"></a></li>
                                <li><a href=""><img src="./Button_Inaktiv.png" border="0" align="left"></a></li>
                                <li><a href=""><img src="./Button_Inaktiv.png" border="0" align="left"></a></li>
                         </ul>
                  </div>

Naja ich hab da echt grad NULL Durchblick... is bestimmt total easy und ich komm bloss nich drauf grad... naja die nächsten paar Tage heissts eh erstmal Vektorgrafiken entwerfen... Vill kann mir ja Jemand sagen wie ich das anstelle mit aktiv/inaktiv....


MfG, Bigpackv2
 
So sollte es gehen.
Getestet hab ich es mit der psoidoklasse "hover".
damit ging es.
active sollte also ebenfalls funktionieren.

Code: 
.navlist{
list-style:none;
margin:0;
padding:0;
width:150px;
background-color:yellow;
}
.navlink{
width:150px;
border:0;
background-immage:url("bild1.jpg");
}
.navlink:active{
width:150px;
border:0;
background-immage:url("bild2.jpg");
}

Code: 
<ul class="navlist">
<li><input type="button" class="navlink" href="link.htm" value="Link1"></li>
<li><input type="button" class="navlink" href="link.htm" value="Link2"></li>
<li><input type="button" class="navlink" href="link.htm" value="Link2"></li>
</ul>

ansonsten bestünde auch noch die möglichkeit, den link auf das li-element zu legen, statt auf den text...
also so in etwa
Code: 
<a href="..."><li class="navlink">Link 1</li></a>
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben