Avatar billede 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.
Avatar billede 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>
Avatar billede Slettet bruger
02. juni 2009 - 21:47 #2
tak jeg prøve det imorgen :D
og håber da det virker :D
Avatar billede 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>
Avatar billede 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;
}
Avatar billede 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
Avatar billede 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;
}
Avatar billede Slettet bruger
21. juni 2009 - 20:07 #7
tak.
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
Vi tilbyder markedets bedste kurser inden for webudvikling

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