hintergrund für menü

Gelöschtes Mitglied 2559 · 2 August 2005

hintergrund fÃ¼r menÃ¼

hi
da ich keine ahnung von javascript habe wollte ich mal fragen wie ich es hin bekomme das bei diesem script das herausfahrende menÃ¼ einen hintergrund hat?
http://people.freenet.de/klein-ich/index.html

hier der quelltext:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>SV HES</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
body {font-family: arial, sans-serif, helvetica, geneva;}
</style>

<script type="text/javascript">
<!--
  function montre(id) {
	  if (document.getElementById) {
		  document.getElementById(id).style.display="block";
		} else if (document.all) {
		  document.all[id].style.display="block";
		} else if (document.layers) {
		  document.layers[id].display="block";
		} } 

 function cache(id) {
	  if (document.getElementById) {
		  document.getElementById(id).style.display="none";
		} else if (document.all) {
		  document.all[id].style.display="none";
		} else if (document.layers) {
		  document.layers[id].display="none";
		} } 

//-->
</script>
<style type="text/css">
<!--
body {margin: 10px; padding: 0; font: 14px Verdana, sans-serif;}

ul, li {
list-style-type: none;
margin: 0;
padding: 0;
}

div.menu {
position: absolute;
width: 600px;
top: 10px;
z-index: 3;
}
div.menu li {
float: left;
width: 120px;
}

div.menu a {
margin: 0 2px;
height: 20px;
display: block;
text-align: center;
font-weight: bold;
border: 0px solid gray;
text-decoration: none;
color: black;
background:images/buttonhg.jpg;
}

div.menu a:hover {
background:images/buttonhg.jpg;
border: 0px solid gray; 

}

#smenu1, #smenu2, #smenu3, #smenu4 {
display: none;
float: left;
width: 120px;
font-size: 12px;
}
#smenu1 a, #smenu2 a, #smenu3 a, #smenu4 a {
font-weight: normal;
border-top: 0 none;
}
.site {
position: absolute;
z-index: 1;
top : 70px;
left : 10px;
color: #000;
background-color:images/buttonhg.jpg;
padding: 5px;
border: 1px solid gray; 
}

.mentions {
position: absolute;
top : 300px;
left : 10px;
color: #000;
background-color:images/buttonhg.jpg;
}
a {text-decoration: none;
color: #222;
}

-->
</style>

</head>
<body bgcolor="#bbbbbb">
<p align="center">
<table width="760" border="0" cellpadding="0" cellspacing="0">
<tr valign="top">
<td width="760" colspan="6">[img]images/header.jpg[/img]</td>
</tr>
<tr valign="top">
<td width="138" style="background: url(images/zwhg.jpg) repeat-x; height: 29px;">

</td>
<td width="121" style="background: url(images/buttonhg.jpg) no-repeat; height: 29px;">
<p align="center" style="padding-top: 3px;">
<div class="menu">
</br>
</br>
</br>
</br>

<ul>[*][url=""]Die SV[/url]	<ul style="display: none;" id="smenu1" onmouseover="montre('smenu1');" onmouseout="cache('smenu1');">
	
[*][url=""]Steckbriefe[/url]
	[*][url=""]Ziele[/url]
	[*][url="index.html"]Startseite[/url]
	[/list]
[/list]
</div>
</p>
</td>
<td width="121" style="background: url(images/buttonhg.jpg) no-repeat; height: 29px;">
<p align="center" style="padding-top: 3px;">
<div class="menu">
</br>
</br>
</br>
</br>

<ul>[*][url=""]SpaÃŸ[/url]	<ul style="display: none;" id="smenu2" onmouseover="montre('smenu2');" onmouseout="cache('smenu2');">
	
[*][url="spiele.html"]Spiele[/url]
	[*][url=""]Forum[/url]
	[*][url=""]???[/url]
	[*][url=""]???[/url]
[/list]
[/list]
</p>
</td>
<td width="121" style="background: url(images/buttonhg.jpg) no-repeat; height: 29px;">
<p align="center" style="padding-top: 3px;">

<div class="menu">
</br>
</br>
</br>
</br>

<ul>[*][url=""]Sonstiges[/url]	<ul style="display: none;" id="smenu3" onmouseover="montre('smenu3');" onmouseout="cache('smenu3');">
	
[*][url="spiele.html"]Spiele[/url]
	[*][url=""]Fotoalbum[/url]
	[*][url=""]SV-Team Bereich[/url]
	[*][url=""]Downloads[/url]
        [*][url=""]Links[/url]
[/list]
[/list]

</p>
</td>
<td width="121" style="background: url(images/buttonhg.jpg) no-repeat; height: 29px;">
<p align="center" style="padding-top: 3px;">Link4</p>
</td>
<td width="138" style="background: url(images/zwhg.jpg) repeat-x; height: 29px;">

</td>
</tr>
<tr valign="top">
<td width="760" style="background: #993333 url(images/suchehg.jpg) no-repeat right; height: 28px;" colspan="6"> 

<p style ="text-align: right"> [url="suche.html"]Suchen[/url] </p>

</td>
</tr>
<tr valign="top">
<td width="760" style="background-color: #993333;" colspan="6">
<div style="margin: 10px; padding: 10px; background-color: #dddddd;">

</br>
</br>
</br>
</br>
</br>
</br>
</br>
</div>
</td>
</tr>
</table>
</p>
</body>
</html>

[/code]

Prophet · 2 August 2005

#smenu1, #smenu2, #smenu3, #smenu4 {
display: none;
float: left;
width: 120px;
font-size: 12px;
}

background-color / background-image einsetzten?

Gelöschtes Mitglied 2559 · 2 August 2005

da soll ein background-imang rein
images/buttonhg.jpg

Prophet · 2 August 2005

dann fÃ¼gedas doch einfachmit an dieser stelle ein...

Gelöschtes Mitglied 2559 · 2 August 2005

ja dachte das wÃ¤re eine frage was rein soll
klappt aber nicht ganz
background: ist doch der richtige befehl oder?

Philip · 2 August 2005

background-image:url(namedesbildes.jpg);

Gelöschtes Mitglied 2559 · 2 August 2005

geht immmer noch nicht :idea:

Philip · 2 August 2005

=-O poste nochmal den code plz

Gelöschtes Mitglied 2559 · 2 August 2005

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>SV HES</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
body {font-family: arial, sans-serif, helvetica, geneva;}
</style>

<script type="text/javascript">
<!--
  function montre(id) {
	  if (document.getElementById) {
		  document.getElementById(id).style.display="block";
		} else if (document.all) {
		  document.all[id].style.display="block";
		} else if (document.layers) {
		  document.layers[id].display="block";
		} } 

 function cache(id) {
	  if (document.getElementById) {
		  document.getElementById(id).style.display="none";
		} else if (document.all) {
		  document.all[id].style.display="none";
		} else if (document.layers) {
		  document.layers[id].display="none";
		} } 

//-->
</script>
<style type="text/css">
<!--
body {margin: 10px; padding: 0; font: 14px Verdana, sans-serif;}

ul, li {
list-style-type: none;
margin: 0;
padding: 0;
}

div.menu {
position: absolute;
width: 600px;
top: 10px;
z-index: 3;
}
div.menu li {
float: left;
width: 120px;
}

div.menu a {
margin: 0 2px;
height: 20px;
display: block;
text-align: center;
font-weight: bold;
border: 0px solid gray;
text-decoration: none;
color: black;
background:images/buttonhg.jpg;
}

div.menu a:hover {
background:images/buttonhg.jpg;
border: 0px solid gray; 
}

#smenu1, #smenu2, #smenu3, #smenu4 {
display: none;
float: left;
width: 120px;
font-size: 12px;
background-image:images/buttonhg.jpg;
}
#smenu1 a, #smenu2 a, #smenu3 a, #smenu4 a {
font-weight: normal;
border-top: 0 none;
}
.site {
position: absolute;
z-index: 1;
top : 70px;
left : 10px;
color: #000;
background-color:images/buttonhg.jpg;
padding: 5px;
border: 1px solid gray; 
}

.mentions {
position: absolute;
top : 300px;
left : 10px;
color: #000;
background-color:images/buttonhg.jpg;
}
a {text-decoration: none;
color: #222;
}

-->
</style>

</head>
<body bgcolor="#bbbbbb">
<p align="center">
<table width="760" border="0" cellpadding="0" cellspacing="0">
<tr valign="top">
<td width="760" colspan="6">[img]images/header.jpg[/img]</td>
</tr>
<tr valign="top">
<td width="138" style="background: url(images/zwhg.jpg) repeat-x; height: 29px;">

</td>
<td width="121" style="background: url(images/buttonhg.jpg) no-repeat; height: 29px;">
<p align="center" style="padding-top: 3px;">
<div class="menu">
</br>
</br>
</br>
</br>

<ul>[*][url=""]Die SV[/url]	<ul style="display: none;" id="smenu1" onmouseover="montre('smenu1');" onmouseout="cache('smenu1');">
	
[*][url=""]Steckbriefe[/url]
	[*][url=""]Ziele[/url]
	[*][url="index.html"]Startseite[/url]
	[/list]
[/list]
</div>
</p>
</td>
<td width="121" style="background: url(images/buttonhg.jpg) no-repeat; height: 29px;">
<p align="center" style="padding-top: 3px;">
<div class="menu">
</br>
</br>
</br>
</br>

<ul>[*][url=""]SpaÃŸ[/url]	<ul style="display: none;" id="smenu2" onmouseover="montre('smenu2');" onmouseout="cache('smenu2');">
	
[*][url="spiele.html"]Spiele[/url]
	[*][url=""]Forum[/url]
	[*][url=""]???[/url]
	[*][url=""]???[/url]
[/list]
[/list]
</p>
</td>
<td width="121" style="background: url(images/buttonhg.jpg) no-repeat; height: 29px;">
<p align="center" style="padding-top: 3px;">

<div class="menu">
</br>
</br>
</br>
</br>

<ul>[*][url=""]Sonstiges[/url]	<ul style="display: none;" id="smenu3" onmouseover="montre('smenu3');" onmouseout="cache('smenu3');">
	
[*][url="spiele.html"]Spiele[/url]
	[*][url=""]Fotoalbum[/url]
	[*][url=""]SV-Team Bereich[/url]
	[*][url=""]Downloads[/url]
        [*][url=""]Links[/url]
[/list]
[/list]

</p>
</td>
<td width="121" style="background: url(images/buttonhg.jpg) no-repeat; height: 29px;">
<p align="center" style="padding-top: 3px;">Link4</p>
</td>
<td width="138" style="background: url(images/zwhg.jpg) repeat-x; height: 29px;">

</td>
</tr>
<tr valign="top">
<td width="760" style="background: #993333 url(images/suchehg.jpg) no-repeat right; height: 28px;" colspan="6"> 

<p style ="text-align: right"> [url="suche.html"]Suchen[/url] </p>

</td>
</tr>
<tr valign="top">
<td width="760" style="background-color: #993333;" colspan="6">
<div style="margin: 10px; padding: 10px; background-color: #dddddd;">

</br>
</br>
</br>
</br>
</br>
</br>
</br>
</div>
</td>
</tr>
</table>
</p>
</body>
</html>

Philip · 2 August 2005

background:images/buttonhg.jpg;

neee, ich hab doch gesagt:

Code:

background-image:url(deibild.gif);

Gelöschtes Mitglied 2559 · 2 August 2005

oh
mist vertippt
wenn das bild im ordner "images" ist und die datei "buttonhg.jpg" heiÃŸt wie muss dei zeile dann aussehen kapier es grade nicht

CrackPod · 3 August 2005

background-image:url(images/buttonhg.jpg);

Gelöschtes Mitglied 2559 · 3 August 2005

ok jetzt klappt es wunderbar ;Jump

CrackPod · 3 August 2005

dann ist es recht

hintergrund für menü

Gelöschtes Mitglied 2559

Guest

Prophet

Super-Moderator

Gelöschtes Mitglied 2559

Guest

Prophet

Super-Moderator

Gelöschtes Mitglied 2559

Guest

Philip

Neues Mitglied

Gelöschtes Mitglied 2559

Guest

Philip

Neues Mitglied

Gelöschtes Mitglied 2559

Guest

Philip

Neues Mitglied

Gelöschtes Mitglied 2559

Guest

CrackPod

Neues Mitglied

Gelöschtes Mitglied 2559

Guest

CrackPod

Neues Mitglied

Neueste Beiträge