Notifikationer

Markér alle som læst Log ud

betz Nybegynder

26. maj 2007 - 16:42 Der er 13 kommentarer og
1 løsning

Hjælp til .css kode [dropdown menu]

hej Eksperten.

Ville høre om der ikke var en som kunne hjælpe mig med at lave en css. kode med disse ting:

td height="20"
td width="120"
placering - Center
bgcolor - #587055
onmouseover - #95BD8F
onmouseout - #587055
tekstfarve out - #95BD8F
tekstfarve on - #587055

Det skal bruges til en dropdown menu.

100 point for hjælp ;)

På forhånd tak. __ Betz

Synes godt om

w13 Novice

26. maj 2007 - 18:33 #1

Prøv lige at smide din kode her..

Ligger din dropdown i en td, som er den du gerne vil indstille height og width på? Og så skal dropdown være centreret med baggrundsfarven #587055? Hvad mener du med tekstfarve out/on?

Synes godt om

w13 Novice

26. maj 2007 - 18:39 #2

Synes godt om

betz Nybegynder

26. maj 2007 - 18:56 #3

Hej w13 ;)

Menuen skal være lige som der her:
http://delikatesser.frac.dk/index2.php

bare hvor Temaer laver en dropdown med Grill, Salater, Desserter. når man køre pilen over.

men det tror jeg godt jeg selv kan finde ud af at lave.

Det eneste jeg søger er css koden.

ang. tekstfarve on/out, så mener jeg at når pilen køres over den tabel som teksten er im, vises on. Og når pilen er uden for tabellen vises out ;)

håber du forstår.

HVM. Betz

Synes godt om

betz Nybegynder

26. maj 2007 - 19:02 #4

altså sådan her:

http://delikatesser.frac.dk/eksperten.php

Synes godt om

w13 Novice

26. maj 2007 - 19:35 #5

Ah, sådan en menu.. Sorry, kan jeg nok ikke lige hjælpe dig med.

Synes godt om

betz Nybegynder

26. maj 2007 - 19:43 #6

Fair nok, ellers tak for hjælpen.

Synes godt om

w13 Novice

26. maj 2007 - 20:21 #7

Nå, det kunne jeg så godt alligevel. :)
Koden blev lidt rodet, men prøv lige at se på, om du ikke kan finde ud af den:
-----------------------------------------
<html>
<head>

<style type="text/css">
.menuitem {
float: left;
width: 120px;
height: 20px;
text-align: center;
background-color: #587055;
}
.submenuitem {
display: none;
position: absolute;
width: 120px;
text-align: center;
background-color: #587055;
}
</style>

</head>
<body>

<div class="submenuitem" id="Velkommen" onmouseover="HoldSubMenu(this);" onmouseout="HideSubMenu('velkommen');">
EHjd<br>
hjdhjfh<br>
sjdsjkljda</div>

<div class="submenuitem" id="Temaer" onmouseover="HoldSubMenu(this);" onmouseout="HideSubMenu('temaer');">
hjdhjfh<br>
sjdsjkljda</div>

<div class="submenuitem" id="Produkter" onmouseover="HoldSubMenu(this);" onmouseout="HideSubMenu(this.id);">
sjdsjkljda</div>

<div class="submenuitem" id="Online butik" onmouseover="HoldSubMenu(this);" onmouseout="HideSubMenu(this.id);">
sjdsjkljda</div>

<div class="submenuitem" id="Kontakt" onmouseover="HoldSubMenu(this);" onmouseout="HideSubMenu(this.id);">
sjdsjkljda</div>

<div title="Velkommen" class="menuitem" onmouseover="ShowSubMenu(this,this.title);MenuBackground(this);" onmouseout="HideSubMenu(this.title);MenuRemoveBackground(this);">
Velkommen</div>
<div title="Temaer" class="menuitem" onmouseover="ShowSubMenu(this,this.title);MenuBackground(this);" onmouseout="HideSubMenu(this.title);MenuRemoveBackground(this);">
Temaer</div>
<div title="Produkter" class="menuitem" onmouseover="ShowSubMenu(this,this.title);MenuBackground(this);" onmouseout="HideSubMenu(this.title);MenuRemoveBackground(this);">
Produkter</div>
<div title="Online butik" class="menuitem" onmouseover="ShowSubMenu(this,this.title);MenuBackground(this);" onmouseout="HideSubMenu(this.title);MenuRemoveBackground(this);">
Online butik</div>
<div title="Kontakt" class="menuitem" onmouseover="ShowSubMenu(this,this.title);MenuBackground(this);" onmouseout="HideSubMenu(this.title);MenuRemoveBackground(this);">
Kontakt</div>

<script language="JavaScript" type="text/JavaScript">
function MenuBackground(element) {
element.style.backgroundColor='#95bd8f';
}

function MenuRemoveBackground(element) {
element.style.backgroundColor='#587055';
}

function ShowSubMenu(element,id) {
document.getElementById(id).style.top=element.offsetTop+element.offsetHeight+'px';
document.getElementById(id).style.left=element.offsetLeft+'px';
document.getElementById(id).style.display='block';
}

function HoldSubMenu(element) {
element.style.display='block';
}

function HideSubMenu(id) {
document.getElementById(id).style.display='none';
}
</script>

</body>
</html>

Synes godt om

betz Nybegynder

26. maj 2007 - 20:49 #8

Arhh perfekt. :D

kan du finde ud af at gøre sådan at onmouseover/onmouseout også virker på undermenuerne?

menuen:
Velkommen
Temaer
- Grill
- Salater
- Desserter
Produkter
Online Shop
Kontakt

Mange tak.

Synes godt om

betz Nybegynder

26. maj 2007 - 21:05 #9

Der er desvære en fejl, med placeringen på de tabeller med undermenuerne, som du kan se i dette link:

http://delikatesser.frac.dk/index3.php

Ville du kunne finde ud af at rette det?

MVH Betz.

Synes godt om

w13 Novice

26. maj 2007 - 21:20 #10

jeg har rettet et par fejl i din kode, så prøv lige at erstatte alt med følgende:
-------------------------------------
<html>
<head>
<title></title>
<style type="text/css">
.menuitem {
float: left;
width: 20%;
height: 15px;
text-align: center;
background-color: #587055;
}
.submenuitem {
display: none;
position: absolute;
width: 120px;
text-align: center;
background-color: #587055;
}
</style>

<link rel="stylesheet" href="style/css2.css" type="text/css">
<link rel="stylesheet" href="style/screen.css" type="text/css" media="screen">
<link rel="stylesheet" href="style/print.css" type="text/css" media="print">
</head>
<body>

<div align="center">
<table border="0" width="600" cellspacing="0" cellpadding="0" style="border-left-width: 0px; border-right-width: 0px; border-top-width: 0px">
<tr>
<td style="border-style: none; border-width: medium"> </td>
</tr>
<tr>
<td style="border-style: none; border-width: medium">
<table border="0" width="600" cellspacing="0" cellpadding="0">
<tr>
<td width="375" rowspan="2">
<div class="billede"><a href="/index.php">
<font color="#95BD8F">
<img border="0" src="image/logo2.gif" width="400" height="100"></font></a></td>
<td width="225" valign="top" align="right">
<font color="#83A25B" style="font-size: 8pt" face="Verdana">
<a href="mailto:kontakt@kaerhus.dk"><font color="#95BD8F">
<span style="text-decoration: none">Kontakt
<img border="0" src="image/kontakt_icon2.gif" align="top" width="15" height="12"></span></font></a></font><font color="#95BD8F" style="font-size: 8pt" face="Verdana"> </font>
<font color="#83A25B" style="font-size: 8pt" face="Verdana">
<a href="java script:window:print();"><font color="#95BD8F">
<span style="text-decoration: none">Print
<img border="0" src="image/print_icon2.gif" align="top" width="13" height="12">
</span></font>
</a></font></td>
</tr>
<tr>
<td width="225" valign="bottom" align="right">
<font color="#95BD8F" style="font-size: 8pt" face="Verdana">+45 00
00 00 00<br>
</font>
<font color="#83A25B" style="font-size: 8pt" face="Verdana">
<a href="mailto:kontakt@kaerhus.dk">
<font color="#95BD8F">
<span style="text-decoration: none">kontakt@kaerhus.dk</span></font></a></font><font color="#95BD8F"><br>
<font size="1">  </font></font></td>
</tr>
</table>
</td>
</tr>
<tr>
<td bgcolor="#95BD8F" height="5" style="border-style: none; border-width: medium" ></td>
</tr>
<tr>
<td height="20" style="border-style: none; border-width: medium">
<p align="center"><font color="#95BD8F"><font color="#FFFFFF">

<div class="submenuitem" id="Velkommen" onmouseover="HoldSubMenu(this);" onmouseout="HideSubMenu('velkommen');">
EHjd<br>
hjdhjfh<br>
sjdsjkljda</div>

<div class="submenuitem" id="Temaer" onmouseover="HoldSubMenu(this);" onmouseout="HideSubMenu('temaer');">
hjdhjfh<br>
sjdsjkljda</div>

<div class="submenuitem" id="Produkter" onmouseover="HoldSubMenu(this);" onmouseout="HideSubMenu(this.id);">
sjdsjkljda</div>

<div class="submenuitem" id="Online butik" onmouseover="HoldSubMenu(this);" onmouseout="HideSubMenu(this.id);">
sjdsjkljda</div>

<div class="submenuitem" id="Kontakt" onmouseover="HoldSubMenu(this);" onmouseout="HideSubMenu(this.id);">
<a href="ss">sjdsjkljda</a></div>

<div title="Velkommen" class="menuitem" onmouseover="ShowSubMenu(this,this.title);MenuBackground(this);" onmouseout="HideSubMenu(this.title);MenuRemoveBackground(this);">
Velkommen</div>
<div title="Temaer" class="menuitem" onmouseover="ShowSubMenu(this,this.title);MenuBackground(this);" onmouseout="HideSubMenu(this.title);MenuRemoveBackground(this);">
Temaer</div>
<div title="Produkter" class="menuitem" onmouseover="ShowSubMenu(this,this.title);MenuBackground(this);" onmouseout="HideSubMenu(this.title);MenuRemoveBackground(this);">
Produkter</div>
<div title="Online butik" class="menuitem" onmouseover="ShowSubMenu(this,this.title);MenuBackground(this);" onmouseout="HideSubMenu(this.title);MenuRemoveBackground(this);">
Online butik</div>
<div title="Kontakt" class="menuitem" onmouseover="ShowSubMenu(this,this.title);MenuBackground(this);" onmouseout="HideSubMenu(this.title);MenuRemoveBackground(this);">
Kontakt</div>

<script language="JavaScript" type="text/JavaScript">
function MenuBackground(element) {
element.style.backgroundColor='#95bd8f';
}

function MenuRemoveBackground(element) {
element.style.backgroundColor='#587055';
}

function ShowSubMenu(element,id) {
document.getElementById(id).style.top=element.offsetTop+element.offsetHeight+'px';
document.getElementById(id).style.left=element.offsetLeft+'px';
document.getElementById(id).style.display='block';
}

function HoldSubMenu(element) {
element.style.display='block';
}

function HideSubMenu(id) {
document.getElementById(id).style.display='none';
}
</script>

</font></td>
</tr>
<tr>
<td bgcolor="#95BD8F" height="5" style="border-style: none; border-width: medium" ></td>
</tr>
<tr>
<td style="border-style: none; border-width: medium" valign="top">
<table border="0" width="100%" cellspacing="0" cellpadding="0">
<tr>
<td> </td>
</tr>
<tr>
<td>
<font color="#95BD8F">
<link rel="stylesheet" type="text/css" href="style/shader.css">
<script language="javascript" type="text/javascript" src="style/shader.js"></script>

<table border="0" width="100%" cellspacing="0" cellpadding="0">
<tr>
<td width="769" valign="top"><font size="2"><b>Velkommen Hos Kaerhus Delikatesser</b> </font> <br>
<br>
Hos Kaerhus Delikatesser er vores mål at forkæle Dem med udsøgte
smagsoplevelser.<br>
Vores sortiment er sammensat af spændende gourmet produkter fra især Italien,
Frankrig og Spanien.<br>
Mange af produkterne er lokale egns specialiteter fra de pågældende lande, og er
derfor ikke noget man normalt finder herhjemme.<br>
<br>
Vi er gerne behjælpelige med gaveidéer, og firmagave løsninger. <br>
Alle Delikatesser er af topkvalitet, derfor yder vi 14 dages fuld retur-
/fortrydelsesret på alle uåbnede varer.<br>
Vi leverer i hele Danmark via Post Danmark. Leveringstid ca. 1-3 hverdage.<br>
Alle ordre på over 150 kr. sendes fragtfrit i hele Danmark.</td>
<td valign="top"><div class="shadeHolder">
<p align="center">
<img class="shadeIMG" src="http://kaerhus-delikatesser.dk/oscommerce_st/catalog/images/polenta-majsmel-500gr.gif"></td>
</tr>
</table> 
</font>
</td>
</tr>
<tr>
<td> </td>
</tr>
</table>
</td>
</tr>
<tr>
<td bgcolor="#95BD8F" height="5" style="border-top-style: none; border-top-width: medium"></td>
</tr>
</table>
</div>
<div align="center">
<table border="0" cellspacing="0" cellpadding="0" width="600" height="45" style="filter:alpha(opacity=35);-moz-opacity:0.35;opacity:0.35;" onMouseover="this.filters.alpha.opacity=100;" onMouseout="this.filters.alpha.opacity=35;">
<tr>
<td width="600" height="45" valign="middle">
<p align="center"><font face="Verdana"><font size="1">
<font color="#95BD8F">Copyright © 2002 </font>
<a target="_blank" href="http://www.oscommerce.com">
<font color="#95BD8F"><span style="TEXT-DECORATION: none">osCommerce</span></font></a><font color="#95BD8F"><br>
Powered by </font></font>
<a target="_blank" href="http://www.oscommerce.com">
<font color="#95BD8F" size="1"><span style="TEXT-DECORATION: none">
osCommerce</span></font></a></font></td>
</tr>
</table>
</div>

</body>
</html>

Synes godt om

w13 Novice

26. maj 2007 - 21:33 #11

Og min del af koden er med underundermenuer i hvert fald: =)
-------------------------------------
<style type="text/css">
.menuitem {
float: left;
width: 120px;
height: 20px;
text-align: center;
background-color: #587055;
}
.submenuitem {
display: none;
position: absolute;
width: 120px;
height: 20px;
text-align: center;
background-color: #587055;
}
.subsubmenuitem {
float: left;
width: 120px;
height: 20px;
text-align: center;
background-color: #587055;
}
</style>

<div class="submenuitem" id="Velkommen" onmouseover="HoldSubMenu(this);" onmouseout="HideSubMenu(this.id);">
EHjd<br>
hjdhjfh<br>
sjdsjkljda</div>
<div class="submenuitem" id="Temaer" onmouseover="HoldSubMenu(this);" onmouseout="HideSubMenu(this.id);">
<div class="subsubmenuitem" title="Grill" onmouseover="ShowSubSubMenu(this,this.title);MenuBackground(this);" onmouseout="HideSubMenu(this.title);MenuRemoveBackground(this);">Grill</div>
<div class="subsubmenuitem" title="Salater" onmouseover="ShowSubSubMenu(this,this.title);MenuBackground(this);" onmouseout="HideSubMenu(this.title);MenuRemoveBackground(this);">Salater</div>
<div class="subsubmenuitem" title="Desserter" onmouseover="ShowSubSubMenu(this,this.title);MenuBackground(this);" onmouseout="HideSubMenu(this.title);MenuRemoveBackground(this);">Desserter</div>
<div class="submenuitem" id="Grill" onmouseover="HoldSubMenu(this);MenuBackground(this);" onmouseout="HideSubMenu(this.id);">1</div>
<div class="submenuitem" id="Salater" onmouseover="HoldSubMenu(this);MenuBackground(this);" onmouseout="HideSubMenu(this.id);">2</div>
<div class="submenuitem" id="Desserter" onmouseover="HoldSubMenu(this);MenuBackground(this);" onmouseout="HideSubMenu(this.id);">3</div>
</div>
<div class="submenuitem" id="Produkter" onmouseover="HoldSubMenu(this);" onmouseout="HideSubMenu(this.id);">
sjdsjkljda</div>
<div class="submenuitem" id="Online butik" onmouseover="HoldSubMenu(this);" onmouseout="HideSubMenu(this.id);">
sjdsjkljda</div>
<div class="submenuitem" id="Kontakt" onmouseover="HoldSubMenu(this);" onmouseout="HideSubMenu(this.id);">
sjdsjkljda</div>

<div title="Velkommen" class="menuitem" onmouseover="ShowSubMenu(this,this.title);MenuBackground(this);" onmouseout="HideSubMenu(this.title);MenuRemoveBackground(this);">
Velkommen</div>
<div title="Temaer" class="menuitem" onmouseover="ShowSubMenu(this,this.title);MenuBackground(this);" onmouseout="HideSubMenu(this.title);MenuRemoveBackground(this);">
Temaer</div>
<div title="Produkter" class="menuitem" onmouseover="ShowSubMenu(this,this.title);MenuBackground(this);" onmouseout="HideSubMenu(this.title);MenuRemoveBackground(this);">
Produkter</div>
<div title="Online butik" class="menuitem" onmouseover="ShowSubMenu(this,this.title);MenuBackground(this);" onmouseout="HideSubMenu(this.title);MenuRemoveBackground(this);">
Online butik</div>
<div title="Kontakt" class="menuitem" onmouseover="ShowSubMenu(this,this.title);MenuBackground(this);" onmouseout="HideSubMenu(this.title);MenuRemoveBackground(this);">
Kontakt</div>

<script language="JavaScript" type="text/JavaScript">
function MenuBackground(element) {
element.style.backgroundColor='#95bd8f';
}

function MenuRemoveBackground(element) {
element.style.backgroundColor='#587055';
}

function ShowSubMenu(element,id) {
document.getElementById(id).style.top=element.offsetTop+element.offsetHeight+'px';
document.getElementById(id).style.left=element.offsetLeft+'px';
document.getElementById(id).style.display='block';
}

function ShowSubSubMenu(element,id) {
document.getElementById(id).style.top=element.offsetTop+element.offsetHeight+'px';
document.getElementById(id).style.left=element.offsetLeft+120+'px';
document.getElementById(id).style.display='block';
}

function HoldSubMenu(element) {
element.style.display='block';
}

function HideSubMenu(id) {
document.getElementById(id).style.display='none';
}
</script>

Synes godt om

betz Nybegynder

12. juni 2007 - 01:04 #12

mange tak ;) .. smid et svar, så skal du nok få point.

Synes godt om

w13 Novice

12. juni 2007 - 12:33 #13

Svar her :)

Synes godt om

w13 Novice

16. juni 2007 - 21:36 #14

Og tak for point

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