Søg
Avatar billede grafik-anders Seniormester
24. maj 2008 - 12:17 Der er 10 kommentarer og
1 løsning

Hvordan får jeg denne menu til at se rigtig ud?

Hej eksperter

Hvordan laver jeg en CSS, som kan få denne her menu til at se ordentlig ud?

Jeg vil gerne have at den hvide pil skifter til den røde pil, ved roll-over, men hvordan skal min CSS se ud?

De bedste hilsner
Anders


http://www.andersborg.com/test01.htm
Avatar billede notes2c Nybegynder
24. maj 2008 - 12:51 #1
Det kan du gøre sådan...

Har også fjernet noget kode som jeg mente var overflødig.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html><!-- InstanceBegin template="/Templates/test.dwt" codeOutsideHTMLIsLocked="false" -->
<head>
<base href="http://www.andersborg.com/">
<!-- InstanceBeginEditable name="doctitle" -->
<title>Untitled Document</title>
<!-- InstanceEndEditable --><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_reloadPage(init) {  //reloads the window if Nav4 resized
  if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
    document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
  else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
//-->
</script>
<!-- InstanceBeginEditable name="head" --><!-- InstanceEndEditable -->
<style type="text/css">
a {
color:#CCC;
font-size:10px;
font-weight:bold;
text-decoration:none;
}
a:hover {
color:#DD0000;
}
.Normal {
border:0px none;
color:#969696;
font-family:Verdana,Arial,Helvetica,sans-serif;
font-size:10px;
text-decoration:none;
}
.white {
color:#FFFFFF;
font-size:9px;
text-decoration:none;
}
a.white-link {
border:0px none;
color:#FFFFFF;
font-family:Verdana,Arial,Helvetica,sans-serif;
font-size:9px;
text-decoration:none;
text-transform:uppercase;
background: url('arrow_01.gif') no-repeat;
padding-left: 12px;
}
a.white-link:hover {
color:#DD0000;
background: url('arrow(red)_01.gif') no-repeat;
}
.checkbox {
border:1px solid #969696;
}
.greybutton {
background-color:#969696;
border:1px solid #969696;
color:#FFFFFF;
font-family:Verdana,Helvetica;
font-size:10px;
line-height:12px;
width:200px;
}
.button {
background-color:#FFFFFF;
border:1px solid #969696;
color:#969696;
font-family:Verdana,Helvetica;
font-size:10px;
line-height:12px;
width:215px;
}
.button2 {
background-color:#FFFFFF;
border:1px solid #969696;
color:#969696;
font-family:Verdana,Helvetica;
font-size:10px;
line-height:12px;
width:223px;
}
.button3 {
background-color:#FFFFFF;
border:1px solid #969696;
color:#969696;
font-family:Verdana,Helvetica;
font-size:10px;
line-height:12px;
width:446px;
}
.button4 {
background-color:#FFFFFF;
border:1px solid #969696;
color:#969696;
font-family:Verdana,Helvetica;
font-size:10px;
line-height:12px;
width:345px;
}
.button4 {
background-color:#FFFFFF;
border:1px solid #969696;
color:#969696;
font-family:Verdana,Helvetica;
font-size:10px;
line-height:12px;
width:345px;
}
body {
font-family:Verdana,Arial,Helvetica,sans-serif;
font-size:10px;
text-decoration:none;
}
</style>
</head>

<body>
<div id="Layer1" style="position:absolute; left:147px; top:16px; width:397px; height:302px; z-index:1"><!-- InstanceBeginEditable name="EditRegion1" -->test01<!-- InstanceEndEditable --></div>
<table width="120" height="192" border="0" cellpadding="0" cellspacing="0" bgcolor="#969696">
  <tr>
    <td height="192" align="center" valign="top"><table width="109" height="96"  border="0" align="center" cellpadding="0" cellspacing="1">
        <tr>
          <td width="107" height="13" align="left"><a href="test01.htm">test01</a></td>
        </tr>
        <tr>
          <td height="12" align="left"><div align="left"></div></td>
        </tr>
        <tr>
          <td height="12" align="left" class="white"><div align="left">Search:</div></td>
        </tr>
        <tr>
          <td height="13" align="left"><a href="test02.htm" class="white-link">test02</a></td>
        </tr>
        <tr>
          <td height="13" align="left"><a href="test03.htm" class="white-link">test03</a></td>
        </tr>
        <tr>
          <td height="13" align="left"><a href="test04.htm" class="white-link">test04</a></td>
        </tr>
        <tr>
          <td height="12" align="left"><div align="left"><img src="arrow(red)_01.gif" width="11" height="11"></div></td>
        </tr>
    </table></td>
  </tr>
</table>
</body>
<!-- InstanceEnd --></html>
Avatar billede grafik-anders Seniormester
24. maj 2008 - 13:42 #2
Den sidder lige i skabet!!

TAK!
Avatar billede grafik-anders Seniormester
28. maj 2008 - 19:38 #3
hmm,,, jeg har nu forsøgt at bruge det, - har godt nok ikke helt brugt det direkte.
Det jeg har lavet virker fint i IE7 og i Firefox, men den hvide tekst forsvinder i ældre versioner af IE.

Kan det fikses? (på andre måder end at upgrade til IE)?

http://www.betaler.dk/sider/login.php

/Anders
Avatar billede notes2c Nybegynder
28. maj 2008 - 22:50 #4
Nu har jeg ikke lige IE6 til rådighed... Men hvilken hvid tekst forsvinder...
Avatar billede grafik-anders Seniormester
29. maj 2008 - 00:10 #5
Den på knappen, som jeg har lavet med CSS.

De gamle knapper er lavet som grafiske elementer.
Avatar billede notes2c Nybegynder
29. maj 2008 - 09:05 #6
Underligt, har prøvet med en IE6 og oplever ikke det som du beskriver. Eller også kan jeg ikke lige se hvor det er teksten forsvinder.
Avatar billede grafik-anders Seniormester
29. maj 2008 - 17:31 #7
Her er et lidt dårligt screen-print, men man kan kan se, at der ikke er nogen tekst ud for de nederste pile på knapperne.

http://www.firstdisplay.com/fejl.htm
Avatar billede notes2c Nybegynder
29. maj 2008 - 17:45 #8
Jeg kan godt se at teksten er væk hos dig men det er den ikke hos mig. Ej heller i IE6. Så måske har du et cache problem. Har du prøvet at clear'er din internet cache
Avatar billede grafik-anders Seniormester
30. maj 2008 - 23:13 #9
hmm,,, vi har nu fundet frem til, at det må have noget med 'visied' at gøre, men jeg kan ikke gennemskue det. Ved at lave en visied, er teksten kommet frem igen, men nu vil den ikke skifte mere? Hvordan skal den se ud? :

a {
color:#CCC;
font-size:10px;
font-weight:bold;
text-decoration:none;
}
a:link {
color:#969696;
}
a:hover {
color:#DD0000;
}
a:visited {
color:#969696;
}

.Normal {
border:0px none;
color:#969696;
font-family:Verdana,Arial,Helvetica,sans-serif;
font-size:10px;
text-decoration:none;
}
.normal-link {
border:0px none;
color:#969696;
font-family:Verdana,Arial,Helvetica,sans-serif;
font-size:10px;
text-decoration:none;
text-transform:uppercase;
}
.normal-link:hover {
border:0px none;
color:#DD0000;
font-family:Verdana,Arial,Helvetica,sans-serif;
font-size:10px;
text-decoration:none;
text-transform:uppercase;
}
.Normal-upper {
border:0px none;
color:#969696;
font-family:Verdana,Arial,Helvetica,sans-serif;
font-size:10px;
text-decoration:none;
text-transform:uppercase;
}
.white {
color:#FFFFFF;
font-size:9px;
text-decoration:none;
}
a.white-link {
border:0px none;
color:#FFFFFF;
font-family:Verdana,Arial,Helvetica,sans-serif;
font-size:9px;
text-decoration:none;
text-transform:uppercase;
background: url('images/arrow.gif') no-repeat;
padding-left: 12px;
}
a.white-link:hover {
color:#DD0000;
background: url('images/arrow.gif(red)') no-repeat;
}
a.white-link:visited {
color:#FFFFFF;
background: url('images/arrow.gif') no-repeat;
}

?
Avatar billede mclemens Nybegynder
31. maj 2008 - 00:22 #10
Ret color defineringen under a.white-link:visited {
- så teksten skifter farve når siden har været besøgt.
(eksempel ... color:#ff0000; )
Avatar billede roenving Novice
31. maj 2008 - 13:05 #11
Der er kun _een_ rigtig rækkefølge af pseudo-selektorerne:

a
a:link
a:visited
a:hover
a:active

-- forklaringen er, at css læses oppefra og ned, og den sidste gyldige ting af en bestemt property vil derfor overskrive en forudgående, sættes f.eks. visited sidst, vil :hover og :active ikke virke på visited links !-)

-- ergo vil du i ovenstående kode disable :hover- og :active-farverne !o]
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Webudvikling kurser
Vi tilbyder markedets bedste kurser inden for webudvikling
Se alle Webudvikling kurser

Flere spørgsmål fra HTML kategorien

Titel Indlæg Oprettet Seneste aktivitet
Hjælp med HTML og CSS Af Nojsa i HTML 18 10/09/202515:07 17/09/202515:11
CSS 2 x firkanter + tekst på samme linje Af nemlig i HTML 3 19/03/202522:16 20/03/202513:04
Se og ændre html på en webside Af magger i HTML 4 11/03/202513:55 12/03/202506:56
Få input felt, der er med fed skrift og formatteres på linje Af KurtG i HTML 5 02/03/202520:05 04/03/202515:40
Variabler som ikke virker Af Frits Jensen i HTML 3 30/10/202409:37 01/01/202515:27
Se alle spørgsmål i kategorien Opret spørgsmål

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Opret Log ind

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten
Seneste spørgsmål Seneste aktivitet
I dag 09:50 Mobilpay svindel Af nu_igen i Andre onlineløsninger
22/0120:51 Knap til ipad Af FinnLauridsen i Excel
21/0113:53 Icloud mail via Outlook Af lbc i E-mail programmer
21/0108:32 USB NØGLE gratis Af nu_igen i Andet hardware
20/0121:11 Hvordan får jeg reCAPTCHA på min hjemmeside? Af Strawberry i PHP
White papers
Flere white papers »