Menüproblem mit freier Skalierbarkeit

Status
Nicht offen für weitere Antworten.

cssrookie23

Grünschnabel
Hallo,

erneut wende ich mich an die Community, da bei meinem aktuellen Versuch ein frei skalierbares CSS-Design zu realisieren ein Problem aufgetreten ist:

Wie unter
http://www.test.reserve-hoentrop.de
zu ersehen werden beim Zoomen die Hintergrundbilder der jeweiligen Menüpunkte aufgrund der repeat-Eigenschaft nicht vergrößert, sondern wiederholt. Da der Header eine Bilddatei ist und somit vergößert wird, passt das adaptierte Design des Mnüs nicht mehr zum Header. Das Menü ist als Tabelle gestaltet. Versuche, Bilder in die Tabelle zu laden, scheiterten bisher an hässlichen Rändern, die um die Bilder angezeigt wurden und meiner Unfähigkeit die hover-Eigenschaft korrekt darzustellen.

Hat jemand eine Lösung, wie man sauber die Menüpunkte direkt als Bilder laden kann (inkl. hover-Eigenschaft)?

Hier die HTML- und Stylesheet-Codes:

HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>

<title> Beerwerth.NET </title>

<meta name="Generator" content="Alleycode HTML Editor">
<meta name="Description" content="Homepage of Florian Beerwerth">
<meta name="Keywords" content="Florian, Beewerth, Bochum">

<link rel="stylesheet" href="css/style.css" type="text/css">
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">

</head>

<body>

	<div id="container">
	
		<div id="header">
			<img src="http://www.tutorials.de/forum/images/header3.png" alt="header" width="100%"/>
		</div>
		
		<div id="menu">
		
			<table    class="menu2" width="100%"  border="0" cellpadding="0" cellspacing="0">
				<tr>
					<td width="20%" class="menu211" style="background-image:url(images/menu5_1_2.png);background-repeat:repeat;"><a href="index.html" onfocus="this.blur()">Home</a></td>
					<td width="20%" style="border-left:solid 0.05em #C6C6C6;background-image:url(images/menu5_2_2.png);background-repeat:repeat;" class="menu22"><a href="menu2.html"  onfocus="this.blur()">Menü2</a></td>
               <td width="20%" style="border-left:solid 0.05em #C6C6C6;background-image:url(images/menu5_3_2.png);background-repeat:repeat;" class="menu23"><a href="menu3.html"  onfocus="this.blur()">Menü3</a></td>
               <td width="20%" style="border-left:solid 0.05em #C6C6C6;background-image:url(images/menu5_4_2.png);background-repeat:repeat;" class="menu24"><a href="menu4.html"  onfocus="this.blur()">Menü4</a></td>
               <td width="20%" style="border-left:solid 0.05em #C6C6C6;background-image:url(images/menu5_5_2.png);background-repeat:repeat;" class="menu25"><a href="contact.php" onfocus="this.blur()">Kontakt</a></td>
				</tr>
			</table>
			
		</div>
		
		<div id="content">
		testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext
		</div>
	
	</div>

</body>
</html>

Code:
body
	{
		margin: 0;
		padding: 0;
		border: none;
		font: 12pt Arial;
		text-align: center;
		background-color: #FFFFFF;
	}
	
a:link
	{
		text-decoration: none;
	}
	
	
#container
	{
		width: 50em;
		height: 35em;
		margin: 0.5em auto;
		background-color: #AAC31B;
		border:  solid 0.05em #C6C6C6;
		position: relative;
	}
	
	
#header
	{
		margin: 0;
		padding: 0;
		top: 0;
		position: relative;
		border-bottom: solid 0.16em #AAC31B;
	}


#menu
	{
		width: 100%;
		padding: 0;
		margin: 0;
		border-top: solid 1em #28651F;
		position: relative;
		top: 0;
	}
	
	
	.menu2 a, .menu2 a:visited , .menu2 a:active
	{
		color: #AAC31B;
		display: block;
		text-decoration: none;
		font-family: verdana, sans-serif;
		font-size: 1.1em;
		font-weight: bold;
		padding-left: 0;
		padding-bottom: 0;
		padding-top:0;
		margin-left: 0;
		margin-right: 0;
		border-top: solid 0.05em #C6C6C6;
		border-bottom: solid 0.05em #C6C6C6;
		line-height: 1.5em;
		text-align: center;
	}
	
	.menu21 a:hover
	{
		color: #28651F;
		text-decoration: none ;
		background-image: url(../images/menu5_1_2a.png);
		background-repeat: repeat;
	}
	
		.menu22 a:hover
	{
		color: #28651F;
		text-decoration:none ;
		background-image: url(../images/menu5_2_2a.png);
		background-repeat: repeat;
	}
	
		.menu23 a:hover
	{
		color: #28651F;
		text-decoration:none ;
		background-image: url(../images/menu5_3_2a.png);
		background-repeat:repeat;
	}
	
		.menu24 a:hover
	{
		color: #28651F; text-decoration:none ;
		background-image: url(../images/menu5_4_2a.png);
		background-repeat: repeat;
	}
	
		.menu25 a:hover
	{
		color: #28651F;
		text-decoration:none ;
		background-image: url(../images/menu5_5_2a.png);
		background-repeat: repeat;
	}
	
	.menu211 a:hover, .menu211 a
	{
		color: #28651F;
		text-decoration:none ;
		background-image: url(../images/menu5_1_2a.png);
		background-repeat: repeat;
	}
	
		.menu222 a:hover, .menu222 a
	{
		color: #28651F;
		text-decoration: none ;
		background-image: url(../images/menu5_2_2a.png);
		background-repeat: repeat;
	}
	
		.menu233 a:hover, .menu233 a
	{
		color: #28651F;
		text-decoration:none ;
		background-image: url(../images/menu5_3_2a.png);
		background-repeat: repeat;
	}
	
		.menu244 a:hover, .menu244 a
	{
		color: #28651F;
		text-decoration: none ;
		background-image: url(../images/menu5_4_2a.png);
		background-repeat: repeat;
	}
	
		.menu255 a:hover, .menu255 a
	{
		color: #28651F;
		text-decoration: none ;
		background-image: url(../images/menu5_5_2a.png);
		background-repeat: repeat;
	}
	

#content
	{
		position: relative;
		text-align: left;
		overflow: auto;
		overflow-x: hidden;
		background-color: #c7f1b9;
		padding: 1em;
	}

Für Anregungen und Hilfe wäre ich sehr dankbar.
 
Zuletzt bearbeitet:
Hi,

das Problem hierbei ist, dass sich Hintergrundbilder grundsätzlich (noch) nicht skalieren lassen.
 
Hi Maik,

darum habe ich ja versucht, die Menü-Bilder direkt in die Tabellenzellen zu laden. Dabei wurden immer Ränder um die Bilder angezeigt, da ich sie als Link eingebunden hatte. Die hover-Eigenschaft habe ich gar nicht realisieren können. Hast Du eine Idee, wie ich auf diesem Wege die Skalierbarkeit des Menüs realisieren kann?
 
Die Bilder müssten als Grafikelemente (<img>) mit relativen Breiten- und Höhenangaben in den Links eingebettet werden.
 
Status
Nicht offen für weitere Antworten.
Zurück