Notifikationer

Markér alle som læst Log ud

Slettet bruger

02. juni 2009 - 20:44 Der er 6 kommentarer og
1 løsning

Boks ved mouseover

Tjaah, den minder lidt om min tidligere tråd.
Men denne gang vil jeg gerne have en anden farve "Boks" når musen køres over linket.
altså når man køre musen over f.eks. "forside" er den en mørkere farve i menuen højde og ca tekstens bredde.

Jeg håber i forstår min tanke :D

Tak på forhånd.

Synes godt om

mclemens Nybegynder

02. juni 2009 - 21:15 #1

css:
a.forside {background:#f00;}
a.forside:hover {background:#ff0;}

Tilføj evt. efter behov:
text-decoration:none;
display:block;
width:?px;
height:?px;
line-height:?px;
m.v.

html:
<a class="forside" href="forside.html">Forsiden</a>

Synes godt om

Slettet bruger

02. juni 2009 - 21:47 #2

tak jeg prøve det imorgen :D
og håber da det virker :D

Synes godt om

Slettet bruger

04. juni 2009 - 17:01 #3

Kan ikke få det til at virke. så hvis i vil hjælpe er HELE min kode her:
bare ret det der er nødvendigt.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
/* body */
body {
margin: 0px;
background-color: #494949;
}
/*<----------Slut på body---------->*/
/* top */
#top {
height: 30px;
margin: 0 auto;
background-image: url("images/top.png");
border-bottom: 1px #262626 solid;
}
/*<----------Slut på top---------->*/
/* header */
#header {
margin: 0 auto;
height: 130px;
background-image: url("images/header.png");
}
/*<----------Slut på header---------->*/
/* menu */
#menu {
margin: 0 auto;
height: 30px;
background-image: url("images/menu.png");
border-top: 1px #262626 solid;
border-bottom: 1px #262626 solid;
}
#menu a {
margin-left: 10px;
color: #CCCCCC;
font-size: 16px;
font: Verdana;
line-height: 28px;
text-decoration: none;
padding-left: 25px;
}
#menu a:hover {
text-decoration: none;
}
/*<----------Slut på menu---------->*/
/* content */
#content {
height: auto;
margin: px;
background-color: #494949;
}
#content p {
font-size: 15px;
font: Arial;
color: #aaaaaa;
margin-left: 100px;
margin-right: 100px;
margin-top: 30px;
margin-bottom: 30px;
}
/*<----------Slut på content---------->*/
/* footer */
#footer {
height: 150px;
margin: 0px;
}
#footer p {
color: aaaaaa;
font: verdana;
font-size: 11px;
line-height: 30px;
text-align: center;
font-weight: bold;
}
/*<----------Slut på footer---------->*/
/* ekstra */
.logo {
margin-left: 175px;
height: 130px;
width:260px;
}
.bundlinks {
font: verdana;
color: aaaaaa;
font-size: 12px;
line-height: 10px;
text-align: center;
font-weight: bold;
}
/*<----------Slut på ekstra---------->*/
</style>
</head>

<body>
<div id="top">
</div>
<div id="header">
<img src="images/logo.png" class="logo" />
</div>
<div id="menu">
<a href="#">Forside</a>
<a href="#">Downloads</a>
<a href="#">Gæstebog</a>
<a href="#">Kontakt</a>
</div>
<div id="content">
</div>
<div id="footer"></div>
</div>
</body>
</html>

Synes godt om

mclemens Nybegynder

04. juni 2009 - 19:47 #4

Der manglede height:30px;, display:block, width:?px - samt
da det er en horisontal menu en float:left (eller right).
Og så har jeg lige sat lidt på #menu a:hover til at teste med.

#menu a {
margin-left: 10px;
color: #CCCCCC;
font-size: 16px;
font: Verdana;
line-height: 28px;
text-decoration: none;
padding-left: 25px;
height:30px;
display:block;
float:left;
width:120px;
}

#menu a:hover {
background:#000;
color:#fff;
font-weight:bold;
}

Synes godt om

Slettet bruger

04. juni 2009 - 21:23 #5

Tak nu kommer de frem. men boksene er længere i den ene side en den anden

Synes godt om

mclemens Nybegynder

04. juni 2009 - 23:44 #6

Måske skal du fjerne padding-left: 25px;
-eller tilføje padding right også, evt. med minimering af width
og en text-align:center; på for at centrere texten i boxen.

f.eks.:

#menu a {
margin-left: 10px;
color: #CCCCCC;
font-size: 16px;
font: Verdana;
line-height: 28px;
text-decoration: none;
height:30px;
display:block;
float:left;
width:120px;
text-align:center;
}

Synes godt om

Slettet bruger

21. juni 2009 - 20:07 #7

tak.

Synes godt om

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.

Følg dette spørgsmål

Opret Preview

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.

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten

Seneste artiklerRSS