Meny

7 svar · 305 visningar · startad av luan 15 sep. 2003

luanMedlem sedan apr. 200337 inlägg

Frågan15 sep. 2003 06:47#1

Hej,
Jag arbetar just nu med: http://w1.876.telia.com/~u87635679/Golf/. Jag har gjort en ganska enkel meny. Någon här som vet hur man gör en meny där, när man håller musen över en text så bildas en färgad ruta runt hela texten? Måste man använda bilder i menyn då eller går det att göra med vanlig text?

Hoppas ni förstår frågan. Kanske fel forum till och med?

Mvh
Ludde

Engine^Medlem sedan dec. 20003 887 inlägg

15 sep. 2003 06:58#2

Något i stil med

<td onmouseover="this.style.background=#8899aa" onmouseout="this.style.background=#334455">Hej</td>

luanMedlem sedan apr. 200337 inlägg

15 sep. 2003 07:20#3

Kanske, men jag testa det nu i min kod på sidan och det fungerade inte. Vet du kanske hur man skriver det så att man kan använda det i css?

jarvkloMedlem sedan juli 20013 378 inlägg

15 sep. 2003 07:35#4

Om du använder "rollover"-tekniken i http://www.webforum.nu/showthread.php?s=&threadid=83647&forumid=12 så kan du välja att ändra border med CSS istället för background-image som exemplet där gör ;)

bossseMedlem sedan juni 2003771 inlägg

15 sep. 2003 13:55#5

Tja, man kan väl göra på detta lilla vis kanske!
Var det nåt sånt du menade?

Lägg in detta sist i din css-deklaration

.a1:link 
{ a cursor: pointer; text-decoration: none; overflow:auto;}

.a1:hover
{ a cursor: pointer; background-color:yellow; color:blue;
text-decoration: none; border-top: 1px solid red; 
border-right: 1px solid red; border-bottom: 1px solid red;
border-left: 1px solid red; overflow:auto;
}

Lägg sedan detta direkt före din DIV-tagg längst ner på sidan

<A HREF=# class=A1>

Lägg detta direkt efter din DIV-tagg

</A>

Då får du en färgad ruta när pekaren är över den, en annan textfärg och en vanlig textmarkör, samt en scroll om texten ej ryms i rutan.

luanMedlem sedan apr. 200337 inlägg

15 sep. 2003 15:54#6

Precis vad jag menade! Tack så mycket för hjälpen bossse!

Du kan nu se resultatet på http://w1.876.telia.com/~u87635679/Golf/

Tack än en gång!

bossseMedlem sedan juni 2003771 inlägg

15 sep. 2003 16:16#7

Jag ser att du förstår detta med css o klasser.

Det var egentligen så här jag menade att man kunde göra
Har lagt till mer text i rutan för att få en scroll.
För bara musmarkören över textmassan.
Du ser säkert själv hur du vill ha det.
Här kommer hela koden.

<html> 
<head> 
<title>Waxholms Golfklubb ::: Junior ::: Startsidan</title> 
<base href="http://w1.876.telia.com/~u87635679/Golf/"> 
</head> 

<style type="text/css"> 
body { 
    margin-top: 130px; 
    text-align: center; 
    font-family: Verdana, sans-serif; 
    font-size: 12px; 
    color:black; 
    background: url('bak.gif') #d3963e; 
} 

table { 
    border-spacing: 0; 
    padding: 0; 
} 

td { 
    font-family: Verdana, sans-serif; 
    font-size: 10px 
} 

.button { 
    font-family: Verdana, sans-serif; 
    font-size:12px; 
    font-weight:bold; 
    color:white 
} 

h3 { 
    font-family: Verdana, sans-serif; 
    font-size: 18px; 
    margin: 3px 0; 
} 

h4 { 
    font-family: Verdana, sans-serif; 
    font-size: 16px; 
    margin: 3px 0; 
} 

h5 { 
    font-family: Verdana, sans-serif; 
    font-size: 14px; 
    margin: 3px 0; 
} 

ul { 
    margin: 3px 0; 
} 

a { 
    color: black; 
    text-decoration: underline 
} 

body { scrollbar-base-color: #CC9900; scrollbar-track-color: #FF9900; scrollbar-arrow-color: #FF9900;}

a:link { text-decoration: none; color: #000000}
a:visited { text-decoration: none; color: #000000}
a:active { text-decoration: none; color: #000000}
a:hover { text-decoration: underline}

.a1:link 
{ a cursor: pointer; text-decoration: none; overflow:auto;}
.a1:hover 
{ a cursor: pointer; background-color:#FF9900; color:black;
text-decoration: none; border-top: 0px solid black; 
border-right: 0px solid red; border-bottom: 0px solid red;
border-left: 0px solid red; overflow:auto;
}

.a2:link 
{ a cursor: pointer; text-decoration: none; overflow:auto;}
.a2:hover 
{ a cursor: pointer; background-color:yellow; color:blue;
text-decoration: none; overflow:auto;

</style> 
<body bgcolor="#C2C287" text="#000000" id="all" leftmargin="10" topmargin="10" marginwidth="10" marginheight="10" link="#660000" vlink="#660000" alink="#660000"> 

<table style="margin: 0 auto; border: 0 none;" cellspacing="0"> 
    <tr> 
        <td> 
            <img src="golfy.gif"> 
        </td> 
        <td> 
            <table style="width: 500px; border: 2px solid #fff;" cellspacing="0"> 
                <tr> 
                    <td style="background-image: url('bak1.jpg'); height: 147px;"></td> 
                </tr> 
                <tr> 
                    <td style="text-align: center; font-weight: bold; background-color: #e2ad61; border-top: 2px solid #fff; border-bottom: 2px solid #fff; padding: 5px"> 
                         <img src="pil.jpg"> <a href="index.html" class=A1>Start</a> <img src="pil.jpg">
                        <a href="nyheter.html" class=A1>Nyheter</a> <img src="pil.jpg">
                        <a href="tavlingar.html" class=A1>Tävlingar</a> <img src="pil.jpg">
                        <a href="traningar.html" class=A1>Träningar</a> <img src="pil.jpg">
                        <a href="lager.html" class=A1>Läger</a> <img src="pil.jpg">
                        <a href="lankar.html" class=A1>Länkar</a> <img src="pil.jpg">
                        <a href="bildarkiv.html" class=A1>Bildarkiv</a> <img src="pil.jpg">
                        <a href="kommitten.html" class=A1>Kommittén</a> <img src="pil.jpg">

                      
                    </td> 
                </tr> 
                <tr> 
                    <td style="height: 200px; color: #735121; background-color: #e2ad61; vertical-align: top;"> 
<a href=# class=a2>                        
<div style="height: 190px; padding: 15px 5px; overflow: auto"> 
                        <b>Välkommen till Juniorernas sida!</b><br><br> 
                        Juniorkommittén planerar och genomför träningar, läger och tävlingar för knattar och juniorer samt verkar för spelutveckling och regelkunskap. <br><br> 
                        Har du synpunkter eller förslag på hur den här hemsidan kan förbättras? Vänligen kontakta Ludvig Andén (mailadress hittar du under kontakt). <br><br> 
                        Du kan använda menyn ovan för att ta dig till de olika sektionerna på sidan. 
			Juniorkommittén planerar och genomför träningar, läger och tävlingar för knattar och juniorer samt verkar för spelutveckling och regelkunskap. <br><br> 
                        Har du synpunkter eller förslag på hur den här hemsidan kan förbättras? Vänligen kontakta Ludvig Andén (mailadress hittar du under kontakt). <br><br> 
                        Du kan använda menyn ovan för att ta dig till de olika sektionerna på sidan. 

                       
                        </div> 
                </A>    
		</td> 
                </tr> 
            </table> 
        </td> 
    </tr> 
</table> 

</body> 
</html>

luanMedlem sedan apr. 200337 inlägg

15 sep. 2003 17:08#8

Tack. Lite "grön" på det här med css och hemsidor över huvudtaget. Försöker lära mig allteftersom Men min teknik fungerade ändå ;). Tack för att du hjälpte mig igen.