7 svar · 305 visningar · startad av luan
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
Något i stil med
<td onmouseover="this.style.background=#8899aa" onmouseout="this.style.background=#334455">Hej</td>
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?
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 ;)
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.
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!
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>
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.