Menu, farver og udseende

http://www.viewsource.dk/
og hvis det ikke var fordi den er lukket så
www.mwa.dk

http://users.cybercity.dk/~nmb1805/html_kursus/js-samling/topnavbar/dropdown.html

Jeg takker for de to link,
mit spørgsmål er ret konkret.
I \"mur-menuen\" er disse farver:
#330000

#ff0000

#ffffff

#c00000

#333333

#c0c0c0

#ffff00

Men hvilke muligheder er der for at lave om på menuen. Jeg har forsøgt med nogen andre farver, men resultatet har ikke været \"smukt\" :)

du skal også ændre i det her:

.menu        {border-style:solid;border-width:2;color:#ffffff;border-bottom-color:330000; cursor:hand; font-size:12; font-family:verdana;
            border-right-color:330000;border-top-color:ff0000;border-left-color:ff0000;font-weight:bold;background-color:c00000}
.menu1        {border-style:solid;border-width:2;color:#000000;border-bottom-color:333333; cursor:default; font-size:12; font-family:verdana;
            border-right-color:333333;border-top-color:ffffff;border-left-color:ffffff;font-weight:bold;background-color:c0c0c0}
</style>


til det du nu vil have !

// Muk anus

mukanus >  Du har måske fat i \"den røde tråd\" :)
Jeg kan ikke helt gennemskue de to funktioner.

Ka jeg få en forklaring på hvilken opgave
.menu  &  .menu1    har ?

F.eks. står der: border-style:solid;border-width:2;color:#ffffff;border-bottom-color:330000

Der er en farve med # foran og så den som kun hedder 330000
Åbenbart er der ikke brug for # i forbindelse med 330000.  Og så ku man jo spørge, hvorfor det ?

En del browsere har det jo med at prøve at fortolke de oplysninger de får, og prøve at få noget fornuftigt ud af det, uanset hvad der burde stå.

Andre steder er det en option, at man kan angive med flere forskellige notationer.

Så derfor, vil du sikkert rigtig ofte opleve, at disse notationer er blandet sammen, fordi, der klippet og klistret fra mange forskellige steder (og af mange forskellige personer) til det, som aktuelt er smidt ind i en side.

Anbefalingen lyder helt klart: Brug konsekvent samme notation hele vejen igennem en entitet, om det så er noget CSS som ovenfor, men også i Javascript og HTML, det sikrer dig den størst mulige forståelse på tværs af browsere og styresystemer.

Konkret vil jeg anbefale, at du eksplicit fortæller browseren, at det er hex RGB-farver ved at sætte # foran din farve-kode.

hth
jes

Jeg har nok lavet en fejl eller to i mit style sheet. Der skal stå et # foran farvetripletten, men de fleste browsere forstår det også hvis man glemmer den.
I style sheet\'et skriver jeg hvilke farver der skal bruges i tabellen, når ingen af \"knapperne\" er trykket, i scriptet fortæller jeg så hvad der skal ske når man trykker en \"knap\". Det går mest ud på at ændre farverne i borders, så det ser ud som om det går indad. Du kan prøve dig frem med forskellige farver, dem ændrer du dels i style-sheet\'et, dels i scriptet. Hvis du hellere vil have en grøn baggrund, kunne det se sådan her ud:
<style type=\"text/css\">
.menu        {border-style:solid;border-width:2;color:#ffffff;border-bottom-color:003300;

cursor:hand; font-size:12; font-family:verdana;
           

border-right-color:003300;border-top-color:00ff00;border-left-color:00ff00;font-weight:bold;backg

round-color:00c000}
.menu1        {border-style:solid;border-width:2;color:#000000;border-bottom-color:333333;

cursor:default; font-size:12; font-family:verdana;
           

border-right-color:333333;border-top-color:ffffff;border-left-color:ffffff;font-weight:bold;backg

round-color:c0c0c0}
</style>
<script type=\"text/javascript\">
function skift(el) {
    find_klikket();
    el.style.borderBottomColor = \'#00ff00\';
    el.style.borderRightColor = \'#00ff00\';
    el.style.borderTopColor = \'#003300\';
    el.style.borderLeftColor = \'#003300\';
    el.parentElement.children(0).style.backgroundColor = \'#ffff00\';
    el.parentElement.children(0).style.borderBottomColor = \'#00ff00\';
    el.parentElement.children(0).style.borderRightColor = \'#00ff00\';
    el.parentElement.children(0).style.borderTopColor = \'#003300\';
    el.parentElement.children(0).style.borderLeftColor = \'#003300\';
}
function uskift(el) {
    el.parentElement.children(0).style.backgroundColor = \'\';
    el.style.borderBottomColor = \'\';
    el.style.borderRightColor = \'\';
    el.style.borderTopColor = \'\';
    el.style.borderLeftColor = \'\';
    el.parentElement.children(0).style.borderBottomColor = \'\';
    el.parentElement.children(0).style.borderRightColor = \'\';
    el.parentElement.children(0).style.borderTopColor = \'\';
    el.parentElement.children(0).style.borderLeftColor = \'\';
}
</script>
</head>
<body>
... og så tabellen

Tak til ras2000
Når man kommer ind på siden er den øverste knap nede. Hvad skal man lave om hvis man ikke vil ha at nogen knap skal være nede når man kommer ind på siden ?
Og - er det muligt at lave menuen om, så dybden i knapperne ikke blir så stor ?
Håber du forstår, eller skal jeg \"uddybe\" ?

Den måde jeg har lavet det på, er at scriptet \"trykker\" på den første knap når sidne åbnes. Det kan du se på det felt der er trykket, jeg har givet det en id=\"klikket\". Den fjerner du, og fjerner linien i <body> der hedder onload=\"skift(document.all.klikket)\"
Dybden er styret af tykkelsen af border i tabellen. Det kan du skifte i style sheet\'et alle steder hvor der står border-width:2. Der kan du jo passende ændre det til border-width:1. Ellers er der et væld af muligheder, du kan droppe det gule felt ved siden af, du kan få knapperne til at gå ned når du kører musen henover, osv.

Igen tak til ras2000
Jeg har forsøgt med dit forslag til grøn baggrund og får en fejlmelding. Jeg har måske lavet en fejl.
Gider du se på koden ?


<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.0 Transitional//EN\">
<!-- saved from url=(0047)http://www.mur-tag.dk/producenter/dmuk/menu.htm -->
<HTML><HEAD><TITLE>menu</TITLE>
<META http-equiv=Content-Type content=\"text/html; charset=windows-1252\">

<style type=\"text/css\">
.menu        {border-style:solid;border-width:2;color:#ffffff;border-bottom-color:003300;

cursor:hand; font-size:12; font-family:verdana;
           

border-right-color:003300;border-top-color:00ff00;border-left-color:00ff00;font-weight:bold;backg

round-color:00c000}
.menu1        {border-style:solid;border-width:2;color:#000000;border-bottom-color:333333;

cursor:default; font-size:12; font-family:verdana;
           

border-right-color:333333;border-top-color:ffffff;border-left-color:ffffff;font-weight:bold;backg

round-color:c0c0c0}
</style>
<script type=\"text/javascript\">
function skift(el) {
    find_klikket();
    el.style.borderBottomColor = \'#00ff00\';
    el.style.borderRightColor = \'#00ff00\';
    el.style.borderTopColor = \'#003300\';
    el.style.borderLeftColor = \'#003300\';
    el.parentElement.children(0).style.backgroundColor = \'#ffff00\';
    el.parentElement.children(0).style.borderBottomColor = \'#00ff00\';
    el.parentElement.children(0).style.borderRightColor = \'#00ff00\';
    el.parentElement.children(0).style.borderTopColor = \'#003300\';
    el.parentElement.children(0).style.borderLeftColor = \'#003300\';
}
function uskift(el) {
    el.parentElement.children(0).style.backgroundColor = \'\';
    el.style.borderBottomColor = \'\';
    el.style.borderRightColor = \'\';
    el.style.borderTopColor = \'\';
    el.style.borderLeftColor = \'\';
    el.parentElement.children(0).style.borderBottomColor = \'\';
    el.parentElement.children(0).style.borderRightColor = \'\';
    el.parentElement.children(0).style.borderTopColor = \'\';
    el.parentElement.children(0).style.borderLeftColor = \'\';
}
</script>



<META content=\"Microsoft FrontPage 4.0\" name=GENERATOR>
<base target=\"indhold\">
</HEAD>
<BODY bgProperties=fixed background=dmoekbaggrund.jpg topMargin=1
onload=\"skift(document.all.klikket), parent.indhold.location.href=\'beskrivelse.htm\'\">
<TABLE borderColor=#000000 cellSpacing=0 cellPadding=4 width=200 border=1>
  <TBODY>
  <TR>
    <TD class=menu1 width=10>&nbsp;</TD>
    <TD class=menu1 align=middle width=190>Generelt</TD></TR>
  <TR>
    <TD class=menu width=10>&nbsp;</TD>
    <TD class=menu id=klikket
    onclick=\"skift(this), top.indhold.location.href=\'beskrivelse.htm\'\" noWrap
    align=middle width=190>Generel beskrivelse</TD></TR>
  <TR>
    <TD class=menu width=10>&nbsp;</TD>
    <TD class=menu
    onclick=\"skift(this), top.indhold.location.href=\'1.htm\'\"
    noWrap align=middle width=190>Vedtægter</TD></TR></TBODY></TABLE><BR>
<TABLE borderColor=#000000 cellSpacing=0 cellPadding=4 width=200 border=1>
  <TBODY>
  <TR>
    <TD class=menu1 width=10>&nbsp;</TD>
    <TD class=menu1 noWrap align=middle width=190>Dansk Murstenskontrol</TD></TR>
  <TR>
    <TD class=menu width=10>&nbsp;</TD>
    <TD class=menu
    onclick=\"skift(this), top.indhold.location.href=\'2.htm\'\"
    noWrap align=middle width=190>Medlemsliste</TD></TR>
  <TR>
    <TD class=menu width=10>&nbsp;</TD>
    <TD class=menu
    onclick=\"skift(this), top.indhold.location.href=\'3.htm\'\" noWrap
    align=middle width=190>Tekniske bestemmelser</TD></TR>
  <TR>
    <TD class=menu width=10>&nbsp;</TD>
    <TD class=menu
    onclick=\"skift(this), top.indhold.location.href=\'4.htm\'\" noWrap
    align=middle width=190>Bilag til TB</TD></TR></TBODY></TABLE><BR>
<TABLE borderColor=#000000 cellSpacing=0 cellPadding=4 width=200 border=1>
  <TBODY>
  <TR>
    <TD class=menu1 width=10>&nbsp;</TD>
    <TD class=menu1 align=middle width=190>Deklarationsordning for producenter
      af præfabrikerede murværkselementer</TD></TR>
  <TR>
    <TD class=menu width=10>&nbsp;</TD>
    <TD class=menu
    onclick=\"skift(this), top.indhold.location.href=\'5.htm\'\"
    noWrap align=middle width=190>Medlemsliste</TD></TR>
  <TR>
    <TD class=menu width=10>&nbsp;</TD>
    <TD class=menu
    onclick=\"skift(this), top.indhold.location.href=\'6.htm\'\" noWrap
    align=middle width=190>Tekniske bestemmelser</TD></TR>
  <TR>
    <TD class=menu width=10>&nbsp;</TD>
    <TD class=menu
    onclick=\"skift(this), top.indhold.location.href=\'7.htm\'\"
    noWrap align=middle width=190>Bilag til TB</TD></TR></TBODY></TABLE><BR></BODY></HTML>

Her er den rettede kode:
<HTML><HEAD><TITLE>menu</TITLE>
<style type=\"text/css\">
.menu        {border-style:solid;border-width:2;color:#ffffff;border-bottom-color:003300; cursor:hand; font-size:12; font-family:verdana; border-right-color:003300;border-top-color:00ff00;border-left-color:00ff00;font-weight:bold;background-color:00c000}
.menu1        {border-style:solid;border-width:2;color:#000000;border-bottom-color:333333; cursor:default; font-size:12; font-family:verdana; border-right-color:333333;border-top-color:ffffff;border-left-color:ffffff;font-weight:bold;backgound-color:c0c0c0}
</style>
<script type=\"text/javascript\">
function skift(el) {
    find_klikket();
    el.style.borderBottomColor = \'#00ff00\';
    el.style.borderRightColor = \'#00ff00\';
    el.style.borderTopColor = \'#003300\';
    el.style.borderLeftColor = \'#003300\';
    el.parentElement.children(0).style.backgroundColor = \'#ffff00\';
    el.parentElement.children(0).style.borderBottomColor = \'#00ff00\';
    el.parentElement.children(0).style.borderRightColor = \'#00ff00\';
    el.parentElement.children(0).style.borderTopColor = \'#003300\';
    el.parentElement.children(0).style.borderLeftColor = \'#003300\';
}
function uskift(el) {
    el.parentElement.children(0).style.backgroundColor = \'\';
    el.style.borderBottomColor = \'\';
    el.style.borderRightColor = \'\';
    el.style.borderTopColor = \'\';
    el.style.borderLeftColor = \'\';
    el.parentElement.children(0).style.borderBottomColor = \'\';
    el.parentElement.children(0).style.borderRightColor = \'\';
    el.parentElement.children(0).style.borderTopColor = \'\';
    el.parentElement.children(0).style.borderLeftColor = \'\';
}
function find_klikket() {
    for (i=0; i < document.all.length; i ++) {
        if (document.all(i).tagName == \'TD\' && document.all(i).style.borderBottomColor == \'#ff0000\') {
            uskift(document.all(i));
        }
    }
}
</script>
<base target=\"indhold\">
</HEAD>
<BODY bgProperties=fixed background=dmoekbaggrund.jpg topMargin=1>
<TABLE borderColor=#000000 cellSpacing=0 cellPadding=4 width=200 border=1>
  <TBODY>
  <TR>
    <TD class=menu1 width=10>&nbsp;</TD>
    <TD class=menu1 align=middle width=190>Generelt</TD></TR>
  <TR>
    <TD class=menu width=10>&nbsp;</TD>
    <TD class=menu
    onclick=\"skift(this), top.indhold.location.href=\'beskrivelse.htm\'\" noWrap
    align=middle width=190>Generel beskrivelse</TD></TR>
  <TR>
    <TD class=menu width=10>&nbsp;</TD>
    <TD class=menu
    onclick=\"skift(this), top.indhold.location.href=\'1.htm\'\"
    noWrap align=middle width=190>Vedtægter</TD></TR></TBODY></TABLE><BR>
<TABLE borderColor=#000000 cellSpacing=0 cellPadding=4 width=200 border=1>
  <TBODY>
  <TR>
    <TD class=menu1 width=10>&nbsp;</TD>
    <TD class=menu1 noWrap align=middle width=190>Dansk Murstenskontrol</TD></TR>
  <TR>
    <TD class=menu width=10>&nbsp;</TD>
    <TD class=menu
    onclick=\"skift(this), top.indhold.location.href=\'2.htm\'\"
    noWrap align=middle width=190>Medlemsliste</TD></TR>
  <TR>
    <TD class=menu width=10>&nbsp;</TD>
    <TD class=menu
    onclick=\"skift(this), top.indhold.location.href=\'3.htm\'\" noWrap
    align=middle width=190>Tekniske bestemmelser</TD></TR>
  <TR>
    <TD class=menu width=10>&nbsp;</TD>
    <TD class=menu
    onclick=\"skift(this), top.indhold.location.href=\'4.htm\'\" noWrap
    align=middle width=190>Bilag til TB</TD></TR></TBODY></TABLE><BR>
<TABLE borderColor=#000000 cellSpacing=0 cellPadding=4 width=200 border=1>
  <TBODY>
  <TR>
    <TD class=menu1 width=10>&nbsp;</TD>
    <TD class=menu1 align=middle width=190>Deklarationsordning for producenter
      af præfabrikerede murværkselementer</TD></TR>
  <TR>
    <TD class=menu width=10>&nbsp;</TD>
    <TD class=menu
    onclick=\"skift(this), top.indhold.location.href=\'5.htm\'\"
    noWrap align=middle width=190>Medlemsliste</TD></TR>
  <TR>
    <TD class=menu width=10>&nbsp;</TD>
    <TD class=menu
    onclick=\"skift(this), top.indhold.location.href=\'6.htm\'\" noWrap
    align=middle width=190>Tekniske bestemmelser</TD></TR>
  <TR>
    <TD class=menu width=10>&nbsp;</TD>
    <TD class=menu
    onclick=\"skift(this), top.indhold.location.href=\'7.htm\'\"
    noWrap align=middle width=190>Bilag til TB</TD></TR></TBODY></TABLE><BR></BODY></HTML>
Jeg havde glemt at gi dig en function med, findklikket(), det var den ene fejl. Den anden var at den prøvede at læse en side ind i en frame, der ikke var der.
Når du skal til at bruge den, skal du skifte en pokkers masse links. Ved hvert felt står der:
onclick=\"skift(this), top.indhold.location.href=\'7.htm\'\" i forskellige variationer. Det gør at baggrunden skiftes(skift(this)), og indholdssidens indhold skiftes (top.indhold.location.href=...)
Når du skal bruge den, kan du enten lave menuen i en frame som jeg har gjort, eller også ændre koden der til document.location.href=\'den side du vil linke til.htm\'.
Håber det hjælper.

ras2000 >
Nu fik jeg den at \"funke\", men der er lige en ting som jeg ku tænke mig en kommentar på. Det er i forbindelse med bagrundsbilledet. Skal der være et baggrundsbillede, eller kan man bare slette.
Tænker f.eks. her på:
<BODY bgProperties=fixed background=dmoekbaggrund.jpg topMargin=1>
Hvad vil du anbefale, - slette eller rette/lave om :)

Det har intet at skulle sige. Ændre, slette, lave om, som du har lyst.