CSS koder for nav menu

<ole>

Det giver ikke rigtig mening. En CSS-kode er skræddersyet til den HTML-kode, den skal virke på. Hvordan ser din HTML ud?

/mvh
</bole>

Fik heller ikke forklaret det helt klart - menu knapperne skal være i toppen af hjemmesiden - ingen header og html koderne ser sådan ud

<nav>
<ul>
<li> <a href="index.html">Forsiden</a></li>
<li> <a href="side1.html">Optimering</a></li>
<li> <a href="side2.html">Ydelser</a></li>
<li> <a href="side3.html">Nyheder</a></li>
<li> <a href="side4.html">Kontakt</a></li>
</ul>

</nav>

Jamen så skal du bare give dine LI elementer display:inline-block. Så lægger de sig ved siden af hinanden, som om de var inline elementer

ok tak men hvordan skrives css koderne

Du ved tydeligvis, der er noget, som hedder CSS, så mon ikke, du selv kunne komme med et bud? Prøv selv at komme med et bud - så tager vi den derfra  =)

Jeg har de her koder men de virker ikke som de skal - fejl på. F.eks bliver teksten blå


nav {
    width: 960px;
    height: 30px;
    margin-top: 0px;
    background-color: white;
       
}

nav ul {
    list-style: none;

}

nav li {
float: left;


}   

nav li a:link, nav li a:visited {

font-weight: bold;
font-size: 1.1em;
padding-left: 50px;
padding-right: 50px;
text-decoration: none;
display: block;

}

Det skyldes, at default farven for links er blå. Du kan sætte en anden farve under CSS'en for links:

I stedet for at float'e dine LI-elementer vil jeg anbefale dig at give dem display:inline-block. Det gør, at de udadtil opfører sig som inline elementer - mens de indadtil opfører sig som block elementer.

Float er beregnet til at lave tekstomløb omkring f.eks. et billede, hvilket den er rigtig god til. Til gengæld er den ikke egnet til at lægge block elementer ved siden af hinanden. Float'ede elementer er ikke del af sidens naturlige flow og fylder derfor ikke noget. Det er man så efterfølgende nødt til at 'hacke' sig ud af med clear.

Prøv dette:




Bemærk, at LI elementerne ikke må have mellemrum eller linjeskift imellem sig, da de jo nu opfører sig som inline elementer. Derfor den lidt sjove opstilling  =)

Tak for det Ole

Selvtak. Jeg samler ikke point, så du lægger bare selv et svar og accepterer det, så tråden lukkes. God Jul  *<|:o)

god jul

Hej Ole og andre,

Nu vil jeg høre jer. Hvad gør jeg hvis, at jeg vil have, at når du trykker på et menu punkt så bliver det understreget. Og jeg ønsker også, at når siden åbnes så er forsiden understreget i menu punktet.

Hvordan klarer man den?

Understregningen af menupunktet, når du kommer til siden, sættes af et serverscript - udfra hvilken side, der vises.

Understregning af linket i det øjeblik brugeren klikker kan du lave noget i stil med:


Husk i øvrigt, at din kode kun giver mening i allernyeste browsere. nav elementet eksisterer kun i HTML5, så browsere, der bare er et år eller to gamle, forstår ikke koden  =)

Hej Ole,

Jeg har sat koderne i mit css men de virker ikke i nogen af browser - kan du sige hvad jeg gør galt?

Nej, prøv at lægge et link til siden

Hej Ole,

Det ligger for tiden ikke ude på en side - men dette her er koderne. Håber du kan klare problemet.



html {font-size:14px;
font-family: Helvetica,arial,sans-serif
}

a {text-decoration: underline; }


body {
width:960px;
margin-left: auto;
margin-right: auto;
}

/*header {

width:960px;
height: 100px;
background-color:white;*/

}

nav {
    width: 960px;
    height: 30px;
    margin-top: 0px;
    background-color: white;
       
}

nav ul {
    list-style: none;

}

nav li {
display:inline-block;
}   

nav a:active {
    text-decoration: underline;
}


nav li a:link, nav li a:visited {
font-weight: bold;
font-size: 1.3em;
padding-left: 0px;
padding-right: 50px;
text-decoration: none;
display: block;
color: #000;
}



article {
    font-size:16px;
    font-family: Helvetica,arial,sans-serif;
    padding: 35px;
    width: 960px;
    min-height: 600px;
    background-color:white;

    }

    footer {
    /*clear:both;*/
    font-size: 1.20em;
    padding: 35px;
    width: 960px;
    height: 50px;
    background-color: white;
}

Jeg skal naturligvis også se HTML-koden, som CSS'en skal virke på

ok undskyld Ole

<!DOCTYPE html>
<html>



<head>
<meta charset="UTF-8">
<meta http-equiv="Content-Language" content="DA" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />


<link rel="stylesheet" type="text/css" href="style1.css">
<link rel="stylesheet"  media="only screen and (min-width:50px) and (max-width:480px)" href="small_screen.css">
</head>

<body>

<header></header>


<nav>
<ul>
<li> <a href="index.html">Forsiden</a></li>
<li> <a href="side1.html">Firma</a></li>
<li> <a href="side2.html">Ydelser</a></li>
<li> <a href="side3.html">Nyheder</a></li>
<li> <a href="side4.html">Kontakt</a></li>
</ul>
</nav>

Med et halvt HTML-dokument og uden forklaring på, hvad der ikke virker, må du nøjes med et sidste gæt: Denne giver ikke mening og har formodentlig ingen virkning:


Du kan læse om, hvordan media bruges her

Hej Ole,

Det, der ikke virker, er css koden

nav a:active {
    text-decoration: underline;
}

Alt andet virker - bl.a ved dine gode råd. Derfor burde html koderne for menuen være nok - ikke.

Kan det være rækkefølgen af

nav a:active {
    text-decoration: underline;
}

der er forkert?

"Det, der ikke virker, er css koden" >> Nej, det ved du ikke positivt vide. Det kunne ligeså godt være din HTML-kode, der forhindrer, CSS'en i at virke. Derudover siger du intet om, hvad der sker - hvad der ikke sker - eller hvad du havde forventet  *o)

Ja, du skal lægge a:active som sidste direktiv for A elementer. Desuden skal du gøre den ligeså specifik som de andre:

Det virkede - tak for det.

Hej igen Ole & Co,

Det er et problem for det jeg ønsker er en permanent understregning på det menu punkt som man er på. Nu understreger den når man klikker på menu punktet men stopper med understregningen, når man er kommet ind på menu punktet.

Kan denne kode måske bruges

#navbar li.on a {display:block;
                text-decoration: none;}

Det løser man ikke med HTML/CSS/JavaScript, men med serverscript. Du sætter blot en passende klasse på det aktive link på baggrund af den aktuelle side

ok har du et forslag til hvordan det kan se ud?

Nej, det kan jeg ikke vide noget om. Det kommer anpå, hvordan din backend er opbygget

Den er opbygget ved hjælp af html sider og en css style sheet side

Jeg kender ikke opbygningen i detaljer, så jeg kan ikke komme det nærmere

Hvis du fik web adr. ville du så kunne komme med et bud?

Jeg vil godt give dig et beløb for det