Navigations Problem

Status
Nicht offen für weitere Antworten.
S

SvenSchmidt

Grünschnabel
Hallo zusammen
Habe eine begrenze Ahnung von HTML und fast keine Ahnung von CSS
Trotzdem habe ich eine Navigation erstellt die ich in mein Photoshop generierte Homepage einfügen möchte.

Das Problem ist das die Navigation unter das Bild gefügt wird, ich möchte aber das es darüber ist, so würde es auch keine verschiebungen in den TDs geben.
Ich habe es mit einer absoluten Position versucht im CSS was auch funktioniert hat, leider wurde dieser Erfolg wieder vernichtet da ich merkte das es auf die Monitorgrösse drauf ankommt wo di Navigation steht. Bitte helft mir...

Gruss SvenSchmidt

Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<HEAD>
<TITLE>Lernende von MDC Max Daetwyler AG</TITLE>

<style type="text/css">

.qmmc .qmdivider{display:block;font-size:1px;border-width:0px;border-style:solid;position:relative;z-index:1;}
.qmmc .qmdividery{float:left;width:0px;}
.qmmc .qmtitle{display:block;cursor:default;white-space:nowrap;position:relative;z-index:1;}
.qmclear {font-size:1px;height:0px;width:0px;clear:left;line-height:0px;display:block;float:none !important;}
.qmmc {position:relative;zoom:1;z-index:10;}
.qmmc a, .qmmc li {
	float:left;
	display:block;
	white-space:nowrap;
	position:relative;
	z-index:1;}
.qmmc div a, .qmmc ul a, .qmmc ul li {float:none;}
.qmsh div a {float:left;}
.qmmc div{visibility:hidden;position:absolute;}
.qmmc .qmcbox{cursor:default;display:block;position:relative;z-index:1;}
.qmmc .qmcbox a{display:inline;}
.qmmc .qmcbox div{float:none;position:static;visibility:inherit;left:auto;}
.qmmc li {z-index:auto;}
.qmmc ul {left:-10000px;position:absolute;z-index:10;}
.qmmc, .qmmc ul {list-style:none;padding:0px;margin:0px;}
.qmmc li a {float:none}
.qmmc li:hover>ul{left:auto;}#qm0 li {float:none;}#qm0 li:hover>ul{top:0px;left:100%;}


	/*"""""""" (MAIN) Container""""""""*/	
	#qm0	
	{	
		

		width:130px;
		padding:40px 10px;
		margin:0px;
		background-color:rgb(218,219,220);
		background-image:url(qmimages/gradient_17.gif);
		border-width:1px;
		border-style:solid;
		border-color:rgb(0,0,0);
	}


	/*"""""""" (MAIN) Items""""""""*/	
	#qm0 a	
	{	
		padding:3px 20px 3px 3px;
		margin:0px 0px 2px;
		background-color:transparent;
		color:rgb(3,3,3);
		font-family:Verdana;
		font-size:11px;
		text-decoration:none;
		border-width:0px 0px 1px;
		border-style:solid;
		border-color:#fbfbfb;
	}


	/*"""""""" (MAIN) Hover State""""""""*/	
	#qm0 a:hover	
	{	
		color:rgb(237,124,35);
		border-color:rgb(237,124,35);
	}


	/*"""""""" (MAIN) Active State""""""""*/	
	body #qm0 .qmactive, body #qm0 .qmactive:hover	
	{	
		color:#ffffff;
		border-color:rgb(237,124,35);
	}


	/*"""""""" (SUB) Container""""""""*/	
	#qm0 div, #qm0 ul	
	{	
		padding:10px;
		background-color:rgb(218,219,220);
		border-width:1px;
		border-style:solid;
		border-color:rgb(0,0,0);
	}


	/*"""""""" (SUB) Items""""""""*/	
	#qm0 div a, #qm0 ul a	
	{	
		padding:3px 20px 3px 5px;
		color:rgb(0,0,0);
		border-width:0px;
		border-color:rgb(237,124,35);
	}


	/*"""""""" (SUB) Hover State""""""""*/	
	#qm0 div a:hover	
	{	
		color:rgb(237,124,35);
		text-decoration:underline;
	}


	/*"""""""" (SUB) Active State""""""""*/	
	body #qm0 div .qmactive, body #qm0 div .qmactive:hover	
	{	
		color:rgb(237,124,35);
		text-decoration:underline;
	}


	/*"""""""" Individual Titles""""""""*/	
	#qm0 .qmtitle	
	{	
		margin:2px 5px 5px;
		color:#f6f6f6;
		font-family:Arial;
		font-size:11px;
		font-weight:bold;
	}


	/*"""""""" Individual Horizontal Dividers""""""""*/	
	#qm0 .qmdividerx	
	{	
		border-top-width:1px;
		margin:4px 5px;
		border-color:#aaaaaa;
	}


	/*"""""""" Custom Rule""""""""*/	
	ul#qm0 li .qmparent	
	{	
		background-image:url(qmimages/arrow_12.gif);
		background-repeat:no-repeat;
		background-position:97% 50%;
	}


	/*"""""""" Custom Rule""""""""*/	
	ul#qm0 li:hover > a.qmparent	
	{	
		background-image:url(qmimages/arrow_13.gif);
	}


</style>

<style type="text/css">.qmfv{visibility:visible !important;}
.qmfh{visibility:hidden !important;}
</style>

<script type="text/javascript">qmad=new Object();qmad.bvis="";qmad.bhide="";</script>

	<!-- Add-On Settings -->
	<script type="text/JavaScript">

		
		var a = qmad.qm0 = new Object();

		// Item Bullets Add On
		a.ibullets_apply_to = "parent";
		a.ibullets_main_image = "qmimages/arrow_12.gif";
		a.ibullets_main_image_active = "qmimages/arrow_13.gif";
		a.ibullets_main_image_width = 6;
		a.ibullets_main_image_height = 8;
		a.ibullets_main_position_x = -6;
		a.ibullets_main_position_y = -3;
		a.ibullets_main_align_x = "right";
		a.ibullets_main_align_y = "middle";
		a.ibullets_sub_image = "qmimages/arrow_12.gif";
		a.ibullets_sub_image_active = "qmimages/arrow_13.gif";
		a.ibullets_sub_image_width = 6;
		a.ibullets_sub_image_height = 8;
		a.ibullets_sub_position_x = -12;
		a.ibullets_sub_position_y = -2;
		a.ibullets_sub_align_x = "right";
		a.ibullets_sub_align_y = "middle";

	</script>

</HEAD>

<body>
<div align="center">

<!-- ImageReady Slices (Homepage.psd) -->
<TABLE WIDTH=1024 BORDER=1 CELLPADDING=0 CELLSPACING=0>
	<TR>
		<TD COLSPAN=5>
			<IMG SRC="Bilder/Homepage_01.gif" WIDTH=1024 HEIGHT=111 ALT=""></TD>
		<TD>
			<IMG SRC="Bilder/spacer.gif" WIDTH=1 HEIGHT=111 ALT=""></TD>
	</TR>
	<TR>
		<TD COLSPAN=5>
			<IMG SRC="Bilder/Homepage_02.gif" WIDTH=1024 HEIGHT=12 ALT=""></TD>
		<TD>
			<IMG SRC="Bilder/spacer.gif" WIDTH=1 HEIGHT=12 ALT=""></TD>
	</TR>
	<TR>
		<TD COLSPAN=5>
			<IMG SRC="Bilder/Homepage_03.gif" WIDTH=1024 HEIGHT=45 ALT=""></TD>
		<TD>
			<IMG SRC="Bilder/spacer.gif" WIDTH=1 HEIGHT=45 ALT=""></TD>
	</TR>
	<TR>
		<TD COLSPAN=3>
			<IMG SRC="Bilder/Homepage_04.gif" WIDTH=239 HEIGHT=4 ALT=""></TD>
		<TD ROWSPAN=3>
			<IMG SRC="Bilder/Homepage_05.gif" WIDTH=761 HEIGHT=578 ALT=""></TD>
		<TD ROWSPAN=4>
			<IMG SRC="Bilder/Homepage_06.gif" WIDTH=24 HEIGHT=600 ALT=""></TD>
		<TD>
			<IMG SRC="Bilder/spacer.gif" WIDTH=1 HEIGHT=4 ALT=""></TD>
	</TR>
	<TR>
		<TD ROWSPAN=3>
			<IMG SRC="Bilder/Homepage_07.gif" WIDTH=4 HEIGHT=596 ALT=""></TD>
		<TD>
			<IMG SRC="Bilder/Homepage_08.gif" WIDTH=224 HEIGHT=567 ALT="">
			
			<ul id="qm0" class="qmmc">
				<li><a class="qmparent" href="javascript:void(0)">Home</a>
			<ul>
				<li><a href="javascript:void(0)">Leitfaden</a></li>
				<li><a href="javascript:void(0)">Schnupperlehre</a></li>
			</ul>
			  </li>

				<li><a class="qmparent" href="javascript:void(0)">Max Daetwyler</a>

			<ul>
				<li><a href="javascript:void(0)">Beschreibung</a></li>
				<li><a href="javascript:void(0)">Produkte</a></li>
				<li><a href="javascript:void(0)">Daetwyler Picture</a></li>
				<li><a href="javascript:void(0)">Geografische Lage</a></li>
			</ul>
			  </li>

				<li><a class="qmparent" href="javascript:void(0)">Berufe</a>

			<ul>
				<li><a href="www.google.ch">Polymechaniker/in</a>
				</li>
				<li><a href="javascript:void(0)">Informatiker/in</a></li>
				<li><a href="javascript:void(0)">Automatiker/in</a></li>
				<li><a href="javascript:void(0)">Elektroniker/in</a></li>
				<li><a href="javascript:void(0)">Konstrukteur/in</a></li>
				<li><a href="javascript:void(0)">Kauffrau/Kaufmann</a></li>
				<li><a href="javascript:void(0)">Maschinenbaupraktiker/in</a></li>
				<li><a href="javascript:void(0)">Logistiker/in</a></li>
				<li><a href="javascript:void(0)">Kunststofftechnologe/in</a></li>
				<li><a href="javascript:void(0)">Mechapraktiker/in</a></li>
			</ul>
				</li>

				<li><a href="javascript:void(0)">Links</a></li>
				<li><a href="javascript:void(0)">Kontakt</a></li>
				<li class="qmclear">&nbsp;
				</li>
			</ul>
			
<!-- Create Menu Settings: (Menu ID, Is Vertical, Show Timer, Hide Timer, On Click ('all', 'main' or 'lev2'), Right to Left, Horizontal Subs, Flush Left, Flush Top) -->
<script type="text/javascript">qm_create(0,true,0,500,false,false,false,false,false);</script>

		</TD>
		<TD ROWSPAN=3>
			<IMG SRC="Bilder/Homepage_09.gif" WIDTH=11 HEIGHT=596 ALT=""></TD>
		<TD>
			<IMG SRC="Bilder/spacer.gif" WIDTH=1 HEIGHT=567 ALT=""></TD>
	</TR>
	<TR>
		<TD ROWSPAN=2>
			<IMG SRC="Bilder/Homepage_10.gif" WIDTH=224 HEIGHT=29 ALT=""></TD>
		<TD>
			<IMG SRC="Bilder/spacer.gif" WIDTH=1 HEIGHT=7 ALT=""></TD>
	</TR>
	<TR>
		<TD>
			<IMG SRC="Bilder/Homepage_11.gif" WIDTH=761 HEIGHT=22 ALT=""></TD>
		<TD>
			<IMG SRC="Bilder/spacer.gif" WIDTH=1 HEIGHT=22 ALT=""></TD>
	</TR>
</TABLE>

</div>
</BODY>
</HTML>
 
Hi und herzlich Willkommen auf tutorials.de :)

Wenn ich jetzt alles richtig verstanden habe, darfst du die Grafik nicht als img-Element einbinden, sondern musst sie stattdessen als Hintergrundbild für die Tabellenzelle definieren:

Code: 
<td style="width:224px;height:567px;background:url(Bilder/Homepage_08.gif);"> <!-- Hier folgt die Navigation --> </td>
 
Hat super geklappt...Danke

Wollte gerade noch fragen ob jemand eine Idee hat wie ich diese Homepage Firefox und Opera tauglich machen kann! Komischerweise funktioniert es im IE7 perfekt aucht wenn er den Ruf hat schlechter zu Rendern=)

Bei Opera und Firefox verzieht es die ganze Homepage...

Nochmals vielen Danke für den 1. Tipp...war absolut Klasse

Gruss SvenSchmidt
 
Kann man die Seite online betrachten, denn ohne die eingebundenen Grafiken lässt sich nicht nachvollziehen, an welcher Stelle das Layout in den genannten Browsern verzogen wird.
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück