# Untermenü in Listenmenü blendet sich direkt wieder aus



## akdesign (19. November 2009)

Hallo,

ich habe mir ein reines CSS-Listenmenü erstellt.

Das Problem:
sobald ich mit der Mouse auf die Untermenüs möchte, blenden sich diese direkt wieder aus.

Das kommt wohl daher, dass ich eine line-height angegeben habe. Ich brauche die aber, da die Menüpunkte ja sonst aneinander kleben.

Hat jemand eine Lösung hierfür?

Hier der Link zur Ansicht:
http://kessler-creativdesign.de/neu/broschueren.html

und Codes:

```
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" 
    "http://www.w3.org/TR/html4/loose.dtd">
	
	
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<meta name="description" content="Andrea Keßler - freie Grafikdesignerin/Freelancer in Freiburg. Keßler.CreativDesign entwickelt und konzipiert Ihnen anspruchsvolles Design für alle klassischen Printmedien sowie für Webdesign.">
<meta name="Keywords" content="Andrea Keßler, Kessler, Kessler Design, Kessler Grafik Design, Grafik, Design, Designer, Grafikdesigner, Grafik-Design, Webdesign, Print, Layout, gestalten, Broschüren, Flyer, Poster, Verpackungen, Packaging, Verpackungsgestaltung, Werbung, Komposings, Kommunikation, Visitenkarten, Newsletter, Art Director, Freiburg, international, grenznah">
<meta name="revisit-after" content="7 days" >
<meta http-equiv="reply-to" content="a.kessler@kessler-creativdesign.de">
<meta name="author" content="Keßler.CreativDesign" >
<meta name="language" content="de">
<meta name="publisher" content="Keßler.CreativDesign">
<meta name="copyright" content="Keßler.CreativDesign">
<meta name="audience" content="Alle">
<meta name="robots" content="index,follow">
<meta http-equiv="imagetoolbar" content="false">
<meta name="author" content="Keßler.CreativDesign - Andrea Keßler">
<title>Ke&szlig;ler.CreativDesign &ndash; Grafik- und Webdesign</title>
<link href="broschueren.css" rel="stylesheet" type="text/css">
<link href="navi.css" rel="stylesheet" type="text/css">

<style type="text/css">
html, body {
height: 100%;
margin: 0px;
}

</style>

<script type="text/JavaScript">
<!--

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_showHideLayers() { //v6.0
  var i,p,v,obj,args=MM_showHideLayers.arguments;
  for (i=0; i<(args.length-2); i+=3) if ((obj=MM_findObj(args[i]))!=null) { v=args[i+2];
    if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v=='hide')?'hidden':v; }
    obj.visibility=v; }
}

function P7_Snap() { //v2.67 by PVII
 var g,x,y,ox,bx,oy,p,tx,a,b,k,d,da,e,el,tw,q0,xx,yy,w1,pa='px',args=P7_Snap.arguments;a=parseInt(a);
 if(document.layers||window.opera){pa='';}for(k=0;k<(args.length);k+=4){
 if((g=MM_findObj(args[k]))!=null){if((el=MM_findObj(args[k+1]))!=null){
 a=parseInt(args[k+2]);b=parseInt(args[k+3]);x=0;y=0;ox=0;oy=0;p="";tx=1;
 da="document.all['"+args[k]+"']";if(document.getElementById){
 d="document.getElementsByName('"+args[k]+"')[0]";if(!eval(d)){
 d="document.getElementById('"+args[k]+"')";if(!eval(d)){d=da;}}
 }else if(document.all){d=da;}if(document.all||document.getElementById){while(tx==1){
 p+=".offsetParent";if(eval(d+p)){x+=parseInt(eval(d+p+".offsetLeft"));y+=parseInt(eval(d+p+".offsetTop"));
 }else{tx=0;}}ox=parseInt(g.offsetLeft);oy=parseInt(g.offsetTop);tw=x+ox+y+oy;
 if(tw==0||(navigator.appVersion.indexOf("MSIE 4")>-1&&navigator.appVersion.indexOf("Mac")>-1)){
  ox=0;oy=0;if(g.style.left){x=parseInt(g.style.left);y=parseInt(g.style.top);}else{
  w1=parseInt(el.style.width);bx=(a<0)?-5-w1:-10;a=(Math.abs(a)<1000)?0:a;b=(Math.abs(b)<1000)?0:b;
  x=document.body.scrollLeft+event.clientX+bx;y=document.body.scrollTop+event.clientY;}}
 }else if(document.layers){x=g.x;y=g.y;q0=document.layers,dd="";for(var s=0;s<q0.length;s++){
  dd='document.'+q0[s].name;if(eval(dd+'.document.'+args[k])){x+=eval(dd+'.left');y+=eval(dd+'.top');
  break;}}}e=(document.layers)?el:el.style;xx=parseInt(x+ox+a),yy=parseInt(y+oy+b);
 if(navigator.appVersion.indexOf("MSIE 5")>-1 && navigator.appVersion.indexOf("Mac")>-1){
  xx+=parseInt(document.body.leftMargin);yy+=parseInt(document.body.topMargin);}
 e.left=xx+pa;e.top=yy+pa;}}}
}
//-->
</script>
</head>

<body bgcolor="#596774" onLoad="MM_showHideLayers('menu','','show','profil','','show','impressum','','show','Text','','show','linie_weiss','','show','Navi','','show');

P7_Snap('menueleiste','menu',20,0);P7_Snap('menueleiste','profil',325,0);P7_Snap('menueleiste','impressum',770,0);P7_Snap('content','Text',100,60);P7_Snap('content','linie_weiss',690,50);P7_Snap('content','Navi',710,60)" 
onResize="P7_Snap('menueleiste','menu',20,0);P7_Snap('menueleiste','profil',325,0);P7_Snap('menueleiste','impressum',770,0);P7_Snap('content','Text',1080,60);P7_Snap('content','linie_weiss',690,50);P7_Snap('content','Navi',710,60)">



<div id="menu">
<span class="menupunkt_aktiv">Broschüren</span>
&nbsp;<span class="linie">|</span>&nbsp;
<a href="webdesign.html" class="menupunkt">Webdesign</a>
&nbsp;<span class="linie">|</span>&nbsp;
<a href="packaging.html" class="menupunkt">Packaging</a>
&nbsp;<span class="linie">|</span>&nbsp;
<a href="anzeigen.html" class="menupunkt">Anzeigen</a>
&nbsp;<span class="linie">|</span>&nbsp;
<a href="profil.html" class="profil">Profil</a></div>


<div id="impressum">
<a href="mailto: a.kessler@kessler-creativdesign.de" class="menupunkt">Kontakt</a>&nbsp;&nbsp;<span class="linie">|</span>&nbsp;&nbsp;<a href="impressum.html" class="menupunkt">Impressum</a></span></div>

<div id="Text" class="text">Auch im "Online-Alltag" spielen Firmenbroschüren nach wir vor<br>eine ganz wichtige Rolle; das Gefühl von "etwas in der Hand haben" ist für viele ……….<br>Zudem lassen sich Webseiten nicht verschicken - bzw. landen ungelesen direkt im eMail-Papierkorb.<br>Sie kennen das sicherlich - oft rufen Interessenten an, die sich im Internet einen ersten Eindruck verschafft haben, und bitten Sie nun, Ihnen noch etwas zuzuschicken.<br>So dient die Webseite als Ergänzung zur Firmenbroschüre. Beides zusammen in Verbindung macht dann das optimale………aus.</div>

<div id="linie_weiss" style="width: 1px; height: 350px; background-color: #FFFFFF"></div>


<div id="Navi" class="navi">
	<ol>
		<li><span>Food</span>
			<ol>
				<li><a href="frischemarkt_baur.html">· Frischemärkte Baur</a></li>
                <li><a href="">· EDEKA Schmidt’s Märkte</a></li>
                <li><a href="">· Dieterle Restaurants</a></li>
				<li>&nbsp;</li>
			</ol>
		</li>
                      
		<li><span>Technik / Handwerk</span>
			<ol>
				<li><a href="">· Sto Farben und Putze</a></li>
                <li><a href="">· Zander Gruppe</a></li>
                <li><a href="">· Maschinenbau von Briel</a></li>
                <li><a href="">· Rietho Stanz- und Biegetechnik</a></li>
                <li><a href="">· Énergies & Ressources</a></li>
                <li><a href="">· Deprat</a></li>
			</ol>
		</li>
		
		<li><span><a href="" id="link" onMouseOver="this.id='linkover'" onMouseOut="this.id='link'">Lacanche Kochstationen</a></span></li>
		
		<li><span><a href="" id="link" onMouseOver="this.id='linkover'" onMouseOut="this.id='link'">Wurth Agrar</a></span></li>
		
		<li><span><a href="" id="link" onMouseOver="this.id='linkover'" onMouseOut="this.id='link'">epoMed Fixierungen</a></span></li>
		
		<li><span><a href="" id="link" onMouseOver="this.id='linkover'" onMouseOut="this.id='link'">Werkhaus Projektmanagement</a></span></li>
		
		<li><span><a href="" id="link" onMouseOver="this.id='linkover'" onMouseOut="this.id='link'">Groupama Versicherungen</a></span></li>
	</ol>
</div>






<tr>
<td align="center" valign="middle">
<tr>
	<table width="900" style="position:absolute; top:0px; left:0px; width:100%; height:100%;">
	<tr>
	  <td align="center" valign="middle"><table width="920" height="600" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td><img src="images/logo.gif" width="920" height="70" /></td>
  </tr>
  <tr>
    <td><img src="images/leiste_oben.gif" width="920" height="27"></td>
  </tr>
  <tr>
    <td><img src="images/content.jpg" name="content" width="920" height="448" id="content"></td>
  </tr>
  <tr>
    <td><img src="images/menueleiste.gif" name="menueleiste" width="920" height="27" id="menueleiste" /></td>
  </tr>
  <tr>
    <td><img src="images/unten.gif" width="920" height="28" border="0" /></td>
  </tr>
  </table>
 </td></tr></table>

</body>
</html>
```

und css:

```
/* CSS Document */


#Menu {
	position:absolute;
	width:120px;
	height:50px;
	z-index:1;
	visibility: hidden;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10pt;
	color: #ffffff;
	font-weight: bold;
	line-height: 31pt;
	
	
}

.menu_aktiv {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10pt;
	color: #8ea8d3;
	font-weight: bold;
}

#Quadrate {
	position:absolute;
	width:50px;
	height:50px;
	z-index:1;
	visibility: hidden;
}

#linie_weiss {
	position:absolute;
	visibility: hidden;
	z-index:15;
}

#linie_weiss_2 {
	position:absolute;
	visibility: hidden;
	height:1px;
	z-index:15;
}

#linie_weiss_3 {
	position:absolute;
	visibility: hidden;
	z-index:1;
}

#linie_weiss_4 {
	position:absolute;
	visibility: hidden;
	z-index:15;
}

#linie_weiss_5 {
	position:absolute;
	visibility: hidden;
	z-index:15;
}

#linie_weiss_6 {
	position:absolute;
	visibility: hidden;
	z-index:15;
}




a:visited { color:#ffffff;text-decoration:none; }
a:hover { color:#abc0db;cursor: pointer; }
a:active { color:#ffffff;text-decoration:none; }
```


Danke euch schonmal vorab für eure Hilfe.

Andrea


----------



## Maik (19. November 2009)

Hi,

das Problem kann ich bei mir nur im IE (7 + 8) und Opera registrieren.

CSS only vertical sliding menu funktioniert trotz line-height-Deklaration für die Links in ihnen tadellos.

Übrigens muß ein ID-Bezeichner (betrifft bei dir "*link*" und "*linkover*") im HTML-Dokumentbaum eindeutig sein, und darf darin nicht mehrmals vergeben werden.

Und anstelle des Scripts zum Tauschen dieser beiden ID-Bezeichner, hinter denen sich lediglich die Linkformatierung versteckt, kannst du die dafür vorgesehene :hover-Pseudoklasse nutzen.

mfg Maik


----------



## akdesign (19. November 2009)

OK, ich schau mir das Bsp. morgen mal an.

Auf die Schnelle würde ich aber fast behaupten, dass das Problem wieder auftaucht, sobald ich den background und den Rahmen wegnehme.

Aber wie gesagt, ich schau mir's morgen mal an.


----------



## Maik (19. November 2009)

akdesign hat gesagt.:


> Auf die Schnelle würde ich aber fast behaupten, dass das Problem wieder auftaucht, sobald ich den background und den Rahmen wegnehme.


Da hast du vorschnell geurteilt.

mfg Maik


----------



## akdesign (19. November 2009)

So, jetzt hab ich's auf die Schnelle mal getestet.

ERSTAUNLICH, wenn ich das Menü separat nehme, funktioniert es auch im IE, sobald ich es identisch in meine Seite einsetze, funktioniert es nicht mehr.

funktioniert:
http://kessler-creativdesign.de/vonBriel/untitled-1.html


funktioniert nicht:
http://kessler-creativdesign.de/vonBriel/chronik.html

Fragen über Fragen!!


----------



## Maik (19. November 2009)

Ich hab da, wie auch schon  in deinem letzten CSS-Thema Padding Problem in CSS Menü nur im IE, in dem es das selbe Problem mit dem verfrühten Einblenden der Submenüs gab, erneut deine eigenwillige Technik im Verdacht, mit der du  im HTML-Code alle Seitenbestandteile (Navigation, Content, usw.) außerhalb der Tabelle, die den Seitenhintergrund bildet, notierst,  und diese in der Schichtposition über ihr positionierst, anstatt sie, wie in der Praxis üblich, in den einzelnen <td>-Tabellenzellen einzubetten. 

Hierfür müssten halt die eingebundenen <img>-Grafikelemente als Hintergrundbilder für die Zellen definiert werden, damit darin Platz für das Menü, den Inhalt, usw. ist.

Zudem fehlt im Quellcode der äußeren Tabelle ihr öffnender <table>-Tag.

Aber eigentlich gilt, dass Tabellen in der Auszeichnungssprache HTML semantisch nicht als Gestaltungswerkzeug einer Website dienen, sondern um darin Daten in tabellarischer Form auszugeben.

In diesem Zusammenhang immer wieder empfehlenswert: Warum Layout mit Tabellen dumm ist: Probleme definiert, Lösungen angeboten

Da es im Original-Menü, wie auch in deiner erstgenannten Testseite problemlos funktioniert, untermauert dies meine Vermutung, dass, wie  im oben genannten Thread, auch hier die Ursache in deiner unorthodoxen Arbeitsmethode  liegt, mit der der eine oder andere Browser offensichtlich nicht klarkommt. Dagegen ist auch kein "CSS-Kraut" gewachsen.

Achja, dein eingangs gezeigtes Menü bereitet ebenfalls keine Probleme, wenn es vom übrigen Code isoliert ist.

Abschließend hab ich noch die Bitte an dich, den Ausdruck "f-u-n-zt"  in unserem Forum zu vermeiden, da er auf der Blacklist steht und vom Forensystem herausgefiltert wird, sodass in deinem Beitrag viermal ein einsames nichtssagendes "t" stehen geblieben war.

mfg Maik


----------



## akdesign (20. November 2009)

OK Maik, ich nehme mich mal Deiner Ratschläge an und werde zukünftig entsprechend "professioneller" arbeiten.

Bin ja lernwillig!

Danke auf alle Fälle für Deine "verständliche" Ausführung.

Für die Seite jetzt aktuell schaue ich mal, wie ich die Lösung hinbekomme.


----------



## akdesign (20. November 2009)

Hallo Maik,

in der Tat ist es so wie Du gesagt hast, jetzt, wo ich die div in die Tabelle direkt integriert habe und ein Hintergrundbild aus dem image gemacht habe, funktioniert das Menü tatsächlich.

Also daher für mich eine perfekte Lösung.

Nun habe ich noch eine Frage zur Positionierung der div. 
Ich habe die bisher immer per SnapLayer an den Bildern fixiert (da ich meine Seiten immer so anlege, dass sie komplett mitig ausgerichtet sind und bei Veränderung des Browserfensters mitgehen).
Geht das auch mit nem Hintergrundbild?

Also ich hab das Menü jetzt zwar an einem anderen Bild fixiert, was ja ohne Probleme geht.
Aber es würde mich halt interessieren, ob es auch mit eben einem Hintergrundbild geht.
Kann bei mir durchaus passieren, dass ich dann nur Hintergrundbilder drin habe.


----------



## Maik (20. November 2009)

Hi,

hast du mal einen Link zu dem Beispiel zur Hand?

Nicht, dass ich dich jetzt mißverstehe 

mfg Maik


----------



## akdesign (20. November 2009)

Hier der Link:

http://kessler-creativdesign.de/vonBriel/chronik.html

Und Code:

```
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
	
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="description" content="Wir sind spezialisiert auf anspruchsvolle Lohnfertigungsaufträge. Unser 30-jähriges Traditionsunternehmen besteht aus einem Team aus Meistern und Facharbeitern aus dem Zerspanungs-, Elektro- und Montagebereich.">
<meta name="Keywords" content="Maschinenbau, grenznah, Wilfried von Briel, mechanisch, Automotivsektor, CNC, Bearbeitung, Zerspanung, Elektro, Montage, Fertigung, Lohnmessung, Prototypen, Motorkomponenten, Maschinenkomponenten, Fahrwerkskomponenten, Turnkey-Ready, 3D-Messmaschinen, EMPB, Werkstätte, Fertigungszentren, bohren, fräsen, drehen, schleifen, Bodensee, Allensbach, Konstanz, DIN EN ISO, zertifiziert, Facharbeiter">
<meta name="robots" content="index,follow">
<meta name="revisit-after" content="7 days" >
<meta name="author" content="Keßler.CreativDesign" >
<meta name="language" content="de">
<meta name="publisher" content="Keßler.CreativDesign">
<meta name="copyright" content="Maschinenbau Wilfried von Briel GmbH & Co. Kg">
<meta name="audience" content="Alle">
<title>Maschinenbau – Wilfried von Briel</title>
<link href="menu.css" rel="stylesheet" type="text/css">
<link href="chronik.css" rel="stylesheet" type="text/css">
<link href="menu_kompetenzen.css" rel="stylesheet" type="text/css">

<style type="text/css">
html, body {
height: 100%;
margin: 0px;
}
</style>

<script type="text/JavaScript">
<!--


function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function P7_Snap() { //v2.67 by PVII
 var g,x,y,ox,bx,oy,p,tx,a,b,k,d,da,e,el,tw,q0,xx,yy,w1,pa='px',args=P7_Snap.arguments;a=parseInt(a);
 if(document.layers||window.opera){pa='';}for(k=0;k<(args.length);k+=4){
 if((g=MM_findObj(args[k]))!=null){if((el=MM_findObj(args[k+1]))!=null){
 a=parseInt(args[k+2]);b=parseInt(args[k+3]);x=0;y=0;ox=0;oy=0;p="";tx=1;
 da="document.all['"+args[k]+"']";if(document.getElementById){
 d="document.getElementsByName('"+args[k]+"')[0]";if(!eval(d)){
 d="document.getElementById('"+args[k]+"')";if(!eval(d)){d=da;}}
 }else if(document.all){d=da;}if(document.all||document.getElementById){while(tx==1){
 p+=".offsetParent";if(eval(d+p)){x+=parseInt(eval(d+p+".offsetLeft"));y+=parseInt(eval(d+p+".offsetTop"));
 }else{tx=0;}}ox=parseInt(g.offsetLeft);oy=parseInt(g.offsetTop);tw=x+ox+y+oy;
 if(tw==0||(navigator.appVersion.indexOf("MSIE 4")>-1&&navigator.appVersion.indexOf("Mac")>-1)){
  ox=0;oy=0;if(g.style.left){x=parseInt(g.style.left);y=parseInt(g.style.top);}else{
  w1=parseInt(el.style.width);bx=(a<0)?-5-w1:-10;a=(Math.abs(a)<1000)?0:a;b=(Math.abs(b)<1000)?0:b;
  x=document.body.scrollLeft+event.clientX+bx;y=document.body.scrollTop+event.clientY;}}
 }else if(document.layers){x=g.x;y=g.y;q0=document.layers,dd="";for(var s=0;s<q0.length;s++){
  dd='document.'+q0[s].name;if(eval(dd+'.document.'+args[k])){x+=eval(dd+'.left');y+=eval(dd+'.top');
  break;}}}e=(document.layers)?el:el.style;xx=parseInt(x+ox+a),yy=parseInt(y+oy+b);
 if(navigator.appVersion.indexOf("MSIE 5")>-1 && navigator.appVersion.indexOf("Mac")>-1){
  xx+=parseInt(document.body.leftMargin);yy+=parseInt(document.body.topMargin);}
 e.left=xx+pa;e.top=yy+pa;}}}
}

function MM_showHideLayers() { //v6.0
  var i,p,v,obj,args=MM_showHideLayers.arguments;
  for (i=0; i<(args.length-2); i+=3) if ((obj=MM_findObj(args[i]))!=null) { v=args[i+2];
    if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v=='hide')?'hidden':v; }
    obj.visibility=v; }
}

function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
</head>

<body bgcolor="#1e4568" onLoad=" MM_showHideLayers('Menu','','show','Quadrate','','show','linie_weiss','','show','linie_weiss_2','','show','linie_weiss_3','','show','linie_weiss_4','','show','linie_weiss_5','','show','linie_weiss_6','','show','Chronik','','show','Text','','show','Text_2','','show','Text_3','','show','Bild','','show');

P7_Snap('background','Menu',-110,80);P7_Snap('background','Quadrate',-13,90);P7_Snap('background','linie_weiss',-135,122);P7_Snap('background','linie_weiss_2',-135,162);P7_Snap('background','linie_weiss_3',-135,205);P7_Snap('background','linie_weiss_4',-135,245);P7_Snap('background','linie_weiss_5',-135,285);P7_Snap('background','linie_weiss_6',-135,325);P7_Snap('background','Chronik',65,40);P7_Snap('background','Text',68,125);P7_Snap('background','Text_2',350,170);P7_Snap('background','Bild',70,175);P7_Snap('background','Text_3',68,365);MM_preloadImages('images/quadrat_aktiv.png')" 

onResize="P7_Snap('background','Menu',-110,80);P7_Snap('background','Quadrate',-13,90);P7_Snap('background','linie_weiss',-135,122);P7_Snap('background','linie_weiss_2',-135,162);P7_Snap('background','linie_weiss_3',-135,205);P7_Snap('background','linie_weiss_4',-135,245);P7_Snap('background','linie_weiss_5',-135,285);P7_Snap('background','linie_weiss_6',-135,325);P7_Snap('background','Chronik',65,40);P7_Snap('background','Text',68,125);P7_Snap('background','Text_2',350,170);P7_Snap('background','Bild',70,175);P7_Snap('background','Text_3',68,365);MM_preloadImages('images/quadrat_aktiv.png');

MM_preloadImages('images/quadrat_aktiv.png')">




<div id="Chronik"><img src="images/text_chronik.png" alt="Chronik" width="100" height="30"></div>


<div class="text" id="Text"><span class="kapitalchen">I</span>m Jahr 2008 feierte unser Unternehmen das 30-jährige Jubiläum.</div>

<div class="text" id="Text_2">Ihren Anfang nahm die Geschichte der Firma<br>Wilfried von Briel Maschinenbau GmbH & Co.?KG<br>in einer kleinen, ca.?100 m² Werkstatt in Konstanz<br>als Einmannbetrieb.<br>Der Firmengründer Wilfried von Briel leitete<br>die Geschicke der Firma 29 Jahre, in denen er<br>auf dem langen und manchmal auch steinigen<br>Weg immer wieder neue Ideen entwickeln</div>


<div id="Bild"><img src="images/chronik_bild.jpg" alt="Halle" width="255" height="182"></div>


<div class="text" id="Text_3">und verwirklichen musste. So ist die Firma zu einem gefestigten und etablierten<br>Unternehmen mit beachtlicher Größe gewachsen.<p class="text_bold">Nur eines hat sich auch nach über 30 Jahren nicht verändert: der Wille besser zu werden.</div>


<table width="955" style="position:absolute; top:0px; left:0px; width:100%; height:100%;">
	<tr>
	  <td align="center" valign="middle"><table width="955" height="650" border="0" cellspacing="0" cellpadding="0">
  <tr>
            <td width="135" height="650" rowspan="2" background="images/menuleiste.gif">
			<div id="Menu">
<span class="menu_aktiv">Chronik</span><br>
<a href="unternehmen.html" onMouseOver="MM_swapImage('quadrat_rot_2','','images/quadrat_aktiv.png',1)" onMouseOut="MM_swapImgRestore()">Unternehmen</a>
<ol>
	<li><a id="link" onMouseOver=" MM_swapImage('quadrat_rot_3','','images/quadrat_aktiv.png',1)">Kompetenzen</a>
			<ol>
				<li><a href="">Montage</a></li>
                <li><a href="">Fertigung</a></li>
                <li><a href="">Lohnmessung</a></li>
			</ol>
	</li>
</ol>
<a href="unternehmen.html" onMouseOver="MM_swapImage('quadrat_rot_4','','images/quadrat_aktiv.png',1)" onMouseOut="MM_swapImgRestore()">Reparaturen</a><br>
<a href="unternehmen.html" onMouseOver="MM_swapImage('quadrat_rot_5','','images/quadrat_aktiv.png',1)" onMouseOut="MM_swapImgRestore()">Unser Werk</a><br>
<a href="unternehmen.html" onMouseOver="MM_swapImage('quadrat_rot_6','','images/quadrat_aktiv.png',1)" onMouseOut="MM_swapImgRestore()">Kontakt</a><br>
<a href="unternehmen.html" onMouseOver="MM_swapImage('quadrat_rot_7','','images/quadrat_aktiv.png',1)" onMouseOut="MM_swapImgRestore()">Impressum</a></div></td>
            <td><img src="images/headleiste.jpg" alt="Head" width="820" height="70"></td>
        </tr>
          <tr>
            <td><img src="images/background.jpg" alt="Background" name="background" width="820" height="580" id="background"></td>
  </tr>
  </table>
 </td></tr></table>
 
 <div id="Quadrate">
<img src="images/quadrat_aktiv.png" name="quadrat_rot" width="22" height="22" align="absmiddle" id="quadrat_rot"><p>
<img src="images/quadrat_rot.png" name="quadrat_rot_2" width="22" height="22" align="absmiddle" id="quadrat_rot_2"><p>
<img src="images/quadrat_rot.png" name="quadrat_rot_3" width="22" height="22" align="absmiddle" id="quadrat_rot_3"><p>
<img src="images/quadrat_rot.png" name="quadrat_rot_4" width="22" height="22" align="absmiddle" id="quadrat_rot_4"><p>
<img src="images/quadrat_rot.png" name="quadrat_rot_5" width="22" height="22" align="absmiddle" id="quadrat_rot_5"><p>
<img src="images/quadrat_rot.png" name="quadrat_rot_6" width="22" height="22" align="absmiddle" id="quadrat_rot_6"><p>
<img src="images/quadrat_rot.png" name="quadrat_rot_7" width="22" height="22" align="absmiddle" id="quadrat_rot_7"></div>

<div id="linie_weiss" style="width: 115px; height: 1px; background-color: #FFFFFF"></div>
<div id="linie_weiss_2" style="width: 115px; height: 1px; background-color: #FFFFFF"></div>
<div id="linie_weiss_3" style="width: 115px; height: 1px; background-color: #FFFFFF"></div>
<div id="linie_weiss_4" style="width: 115px; height: 1px; background-color: #FFFFFF"></div>
<div id="linie_weiss_5" style="width: 115px; height: 1px; background-color: #FFFFFF"></div>
<div id="linie_weiss_6" style="width: 115px; height: 1px; background-color: #FFFFFF"></div>



<!-- 4stats Tracker Code // begin -->
<script type="text/javascript" src="http://4stats.de/de/counter?id=49320&amp;cntr=hide"></script>
<noscript><a href="http://www.4stats.de/" target="_blank"><img src="http://4stats.de/de/stats?id=49320&amp;cntr=hide" border="0" alt="4stats Webseiten Statistik + Counter" /></a></noscript>
<!-- 4stats Tracker Code // end -->
</body>
</html>
```


Also ich hab mit P7_Snap die divs immer fixiert an den images; und jetzt eben die Frage, ob das auch irgendwie mit nem Hintergrundbild geht.


----------



## Maik (20. November 2009)

Naja, wenn du die übrigen "Seitenbereiche / -inhalte" ebenfalls in der Tabelle einbettest, ist das "Fixieren" der Blöcke doch überflüssig.

Oder hab ich dich jetzt doch mißverstanden?

mfg Maik


----------



## akdesign (20. November 2009)

Ach ja klar, Denkfehler. Blöd manchmal.

Jetzt taucht gerade noch ein weiteres Problem auf.

Ich habe ja neben den Menüpunkten die roten Kästchen; bisher zusammen in einer extra div angelegt.
Da sich aber beim Öffnen der Untermenüs unter Kompetenzen die Quadrätchen ab "Reparaturen" natürlich auch nach unten verschieben sollen, muss ich sie jetzt doch direkt zum Text anlegen.
Mein Problem ist nur, dass ich das Kästchen entweder vertical oder horizontal ausirchten kann, aber nicht beides.
Heisst: wenn es horizontal mitig ist, dann klebt es aber direkt am Wort.

Ich könnte natürlich pfuschen, und Leerzeichen dazwischen setzen, aber da die Menüpunkte unterschiedlich lang sind, werden die Kästchen nie 100%ig untereinander sitzen.

Hast Du eine Idee.


Hier kurz der aktuelle Link dazu:

http://kessler-creativdesign.de/vonBriel/chronik.html


----------



## Maik (20. November 2009)

Du kannst die Quadrate durch ein Hintergrundbild für die einzelnen Menüpunkte ersetzen, und dieses mittels background-position wie gewünscht ausrichten.

Und da die Trennlinien beim Aufklappen doch sicherlich auch nach unten wandern sollen, wäre hier anstelle dieser DIV-Blöcke border-bottom angesagt.

mfg Maik


----------



## akdesign (20. November 2009)

Das mit der Linie habe ich gerade schon gemacht. 

Das mit den Quadrätchen versuch ich später.
Melde mich dann bestimmt wieder.

Auf jeden Fall mal ein ganz dickes Dankeschön an Dich. Hast mir bis hierhin schon wahnsinnig geholfen.
D A N K E

Andrea


----------



## akdesign (20. November 2009)

So, dank Deiner Hilfe, Maik, hab ich's geschafft.

Nochmals vielen Dank und bestimmt auf bald.

http://kessler-creativdesign.de/vonBriel/chronik.html

Grüße
Andrea


----------



## Maik (20. November 2009)

Ich hatte bei den Quadraten zwar von Hintergrundbildern geredet, die die DIV-Blöcke im Markup gänzlich überflüssig machen, aber gut ...

Desweiteren solltest du darauf achten, dass ein ID-Bezeichner (bei dir "*Quadrate*") im (X)HTML-Dokumentbaum nur *einmal* vergeben werden darf.

Für diesen Fall der Mehrfach-Benennung ist der Klassenbezeichner vorgesehen.

mfg Maik


----------



## akdesign (20. November 2009)

OK, werde ich noch "optimieren"

Grüße
Andrea


----------



## akdesign (23. November 2009)

Hallo Maik,

ein Problem hab ich jetzt noch:
warum werden manche Menüpunkte nicht laut den CSS-Vorgaben angezeigt?
Allerdings im IE andere wie im FF (siehe Screenshots)

Und hier noch der CSS-Code:


```
/* CSS Document */

ol { /* Haupmenü */
        list-style:       none;
        padding:          0;
        margin:           0;
        width:            200px;
		
}



li a {
        color: #00FF33;
		text-decoration: none;

}


li a:hover { /* Untermenüpunkte beim Hover  */

		text-decoration: none;
		color:#c0cfe7;
}




li ol { /* Unterenüpunkte ausblenden */
        display: none;

		
}



li:hover ol { /* Unterenüpunkte einblenden */
        display:block;
			
}




.projekt_aktiv {
color: #990000;
}



#link { 
  color: #ffffff;
  text-decoration: none; 
  font-weight: bold;
  

} 

#linkover { 
  color: #ffffff;
  font-weight: bold;
  text-decoration: none;

} 

#link_inaktiv { 
  color: #5a6975;
  text-decoration: none; 
  font-weight: bold;
} 

#link_inaktivover { 
  color: #990000;
  font-weight: bold;
  text-decoration: none; 
}
```

##EDIT 1##

Habs gefunden:

hatte id="link" bei den anderen vergessen.

Grüße
Andrea

##EDIT 2##

Nein, das war's doch nicht, denn wenn ich den Menüpunkten ne class zuweise, funktioniert ja die Listen-CSS nicht mehr.

Also Problem ist, dass manche Menüpunkte ohne CSS - Zuweisung erscheinen.
Aber eben nur manche, und unterschiedlich in verschiedenen Browsern.


----------



## Maik (23. November 2009)

Hi,

in deinem Stylesheet *menu.css* fehlt dieser Regelmenge im Selektor die vorangestellte Pseudoklasse a:link für die Verweise zu noch nicht besuchten Seiten:

```
a:link, a:visited { color:#ffffff;text-decoration:none; }
```


Daher auch, je nach besuchten Seiten (geklickten Links) im Browser, die unvollständige bzw. browservoreingestellte Formatierung der übrigen Links.

mfg Maik


----------



## akdesign (23. November 2009)

Sobald ich das mache, werden auch meine Untermenüpunkte so angezeigt - also
a:link { color:#ffffff;text-decoration:none; }

statt vorher mit color: #8ea8d3

Die sollen aber eine andere Farbe haben wie die Hauptmenüpunkte


----------



## Maik (23. November 2009)

Jo, dann spezifiziere  auch die Selektoren der dazugehörigen Regeln im Stylesheet *menu_kompetenzen.css*  ;-)


```
#Menu ol li ol li a:link, #Menu ol li ol li a:visited { /* Menüpunkt mit Untermenüs */

                text-decoration: none;
                color: #8ea8d3;
}

#Menu ol li ol li a:hover { /* Untermenüpunkte beim Hover  */

                text-decoration: none;
                color:#c0cfe7;
}
```

mfg Maik


----------



## akdesign (23. November 2009)

Ahhh, jetzt ist es perfekt:
http://kessler-creativdesign.de/vonBriel/chronik.html

Das ist aber auch kompliziert.


Herzlichen Dank.

Einen schönen Abend noch.

Grüße
Andrea


----------



## Maik (23. November 2009)

akdesign hat gesagt.:


> Ahhh, jetzt ist es perfekt


"Perfekt" ist es, wenn zum einen dein Markup validiert, denn du rufst darin noch immer diverse ID-Bezeichner (*Quadrat, Quadrate, Quadrat_1*) mehrmals auf (weitere Fehler siehe http://validator.w3.org/check?uri=h...e&ss=1&group=0&user-agent=W3C_Validator/1.654), und wenn zum anderen das Wechseln der Quadratbilder beim Überfahren der Links anstelle von Javascript mit Hilfe von CSS umgesetzt wird, Stichwort: CSS-Rollover. 

Bedenke, JS kann im Browser des Seitenbesuchers aus Sicherheitsgründen /-beschränkungen, o.ä. deaktiviert sein, und dann war's das mit dem herrlichen Bildertausch.

Zudem wirst du positiv überrascht sein, wie sich dein HTML-Code dank der CSS-Technik verschlankt.

Stell dir dazu im Vergleich deine derzeitige "Menü-Konstruktion" bei einem umfangreicheren Webangebot vor, und wie sich der HTML-Code dadurch unnötig aufbläht.

mfg Maik


----------



## akdesign (24. November 2009)

Jetzt bist Du aber streng mit mir!

Aber ich bin ja dankbar für jeden hilfreichen Hinweis.

Aber was meinst Du mit:


> denn du rufst darin noch immer diverse ID-Bezeichner (Quadrat, Quadrate, Quadrat_1) mehrmals auf



Meinst Du damit, ich müsste jede div von jedem Quadrat anders bezeichnen? 
Also 7 verschiedene divs definieren?

Grüße
Andrea


----------



## akdesign (24. November 2009)

Jetzt hab ich nochmal ein ganz tolles Phänomen:

ich habe jetzt noch 

```
a:hover { color: #33FF00;text-decoration:none; }
```
hinterlegt.
Das funktioniert jetzt interessanterweise nicht bei allen Punkten
Wenn ich jetzt den href-Link z.B. bei Unternehmen auchr mit reparaturen.html hinterlege, funktionieren sie.

Und - im FF funktionieren andere Punkte nicht wie im IE.
(Bei Kompetenzen ist es gewollt)

Was soll denn das bitteschön für eine Logik sein

Siehe:
http://kessler-creativdesign.de/vonBriel/chronik.html


----------



## Maik (24. November 2009)

Ich weiß jetzt nicht, wo hier das Problem liegt, denn bei mir funktioniert die :hover-Pseudoklasse auch dann browserübergreifend,  wenn im href-Attribut kein URL zu einem Verweisziel angegeben ist:

```
<a href="#">...</a>
```


Und ja, jedes dieser DIVs müsste einen individuellen ID-Bezeichner erhalten.

Wenn du aber meinem Ratschlag folgst, den Grafiktausch mit CSS umzusetzen, entfallen diese DIVs im HTML-Code gänzlich.

mfg Maik


----------



## akdesign (24. November 2009)

Hey Maik,

ich bau jetzt gerade die Site nochmal komplett neu auf - schön nach Deinen Vorgaben.

Wie bekomm ich es jetzt hin, dass meine Site beim Verändern des Browserfensters immer "mittig" ist - horizontal wie auch vertikal, also dass sie nicht immer "oben" hängt?


```
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Untitled Document</title>
</head>

<style type="text/css">
table { border: 0;}

td { border: 0 }

</style>

<body bgcolor="#1e4568">
<div id="content">
<table border="0" cellpadding="0" cellspacing="0" width="955" align="center">
  <tbody><tr valign="top">
    <td rowspan="2"><img src="images/menuleiste.gif"></td>
    <td><img src="images/headleiste.jpg"></td>
  </tr>
  <tr>
    <td><img src="images/background.jpg"></td>
  </tr>
</table>
</div>

</body></html>
```


----------



## Maik (24. November 2009)

Schau mal hier: http://d-graff.de/fricca/center.html

Diese Variante hat gegenüber http://d-graff.de/selfhtml/center1.html den entscheidenden Vorteil, dass der obere und linke Bereich der Box nicht im Fenster verschwindet, wo sie nicht mehr zugänglich sind, wenn dieses kleiner skaliert wird, als die Box selber groß ist.

mfg Maik


----------



## akdesign (24. November 2009)

OK, hab ich hinbekommen.

Super danke.

Mach morgen den Rest fertig und würd gerne die Site nochmal Deinem Kennerblick dann unterziehen.
Ist das für Dich ok?

Möchte mich ja der "perfekten" Seite immer mehr annähern.


----------



## Maik (24. November 2009)

Kein Problem 

mfg Maik


----------



## akdesign (24. November 2009)

So, das Grundlayout hab ich mal:


```
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Untitled Document</title>

</head>

<style type="text/css">
table { border: 0; vertical-align:middle;}

td { border: 0 }

html, body {
		height:100%;
		margin: 0;
		padding:0;
		}
		
		
#container {
		margin:0 auto;
		position:relative; /* puts container in front of distance */
		height:650px;
		width:955px;
		clear:left;

		}
		
#distance { 
		width: 1px;		
		height:50%;
		margin-bottom:-325px; /* half of container's height */
		float:left;
		}
		
.text1  {
		color: #33FFCC}
		
.text2  {
		color: #000099}		

</style>

<body bgcolor="#1e4568">
	<div id="distance"></div>
	<div id="container">
<table border="0" cellpadding="0" cellspacing="0" width="955" align="center">
  <tbody>
    <td rowspan="2" width="135px" background="images/menuleiste.gif"><div class="text1">Content for  class "text1" Goes Here</div></td>
    <td><img src="images/headleiste.jpg"></td>
  </tr>
  <tr>
    <td background="images/background.jpg" width="820px" height="580px"><div class="text2">Content for  class "text1" Goes Here</div></td>
  </tr>
</table>
</div>

</body></html>
```



Und jetzt halt noch mein berühmtes Menü rein und Bilder und Text.

Ist das soweit schonmal ok, oder siehst Du da noch unnötige Sachen oder Fehler?


----------



## Maik (24. November 2009)

Die Tabelle kannst du  durch DIV-Blöcke ersetzen 

Und in den HTML-Atrributen width und height wird keine Einheit angegeben. Das Maß "px" gilt hier automatisch, wenn kein relatives Maß (%) deklariert ist.

mfg Maik


----------



## Maik (24. November 2009)

Maik hat gesagt.:


> Die Tabelle kannst du  durch DIV-Blöcke ersetzen


Das würde dann beispielsweise so lauten:

```
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Untitled Document</title>

<style type="text/css">
html, body {
                height:100%;
                margin: 0;
                padding:0;
                }
body {
                background:#1e4568;
                }

#container {
                margin:0 auto;
                position:relative; /* puts container in front of distance */
                height:650px;
                width:955px;
                clear:left;
                }

#distance {
                width: 1px;
                height:50%;
                margin-bottom:-325px; /* half of container's height */
                float:left;
                }

#leftCol {
                float:left;
                width:135px;
                height:550px;
                padding-top:100px;
                background:url(http://kessler-creativdesign.de/vonBriel/images/menuleiste.gif);
                }

#rightCol {
                float:right;
                width:820px;
                }

#header {
                height:70px;
                background:url(http://kessler-creativdesign.de/vonBriel/images/headleiste.jpg);
                }

#content {
                height:580px;
                background:url(http://kessler-creativdesign.de/vonBriel/images/background.jpg);
                }

.text1  {
                color: #33FFCC}

.text2  {
                color: #000099}

</style>
</head>

<body>

<div id="distance"></div>
<div id="container">
     <div id="leftCol">
          <div class="text1">Content for  class "text1" Goes Here</div>
     </div>
     <div id="rightCol">
          <div id="header"></div>
          <div id="content">
               <div class="text2">Content for  class "text1" Goes Here</div>
          </div>
     </div>
</div>

</body></html>
```



			
				http://validator.w3.org/check hat gesagt.:
			
		

> *This document was successfully checked as HTML 4.01 Transitional!*




mfg Maik


----------



## akdesign (24. November 2009)

Oh ja, in dieser Verschachtelung war ich sozusagen gerade verschachtelt.

Aber jetzt schauts ja super aus.

OK, dann bin ich jetzt mal "out of office" und pflege morgen noch den Rest ein.


Ich hoffe, Du bist dann zufrieden mit mir.

Und ich hab echt viel gelernt.


Ist es denn besser, generell nur noch auf divs zu bauen?


----------



## Maik (24. November 2009)

akdesign hat gesagt.:


> Ist es denn besser, generell nur noch auf divs zu bauen?


Tabellen haben  weiterhin dort semantisch ihre Daseinsberechtigung, wo Daten in tabellarischer Form ausgegeben werden sollen - ein (CSS-)Seitenlayout fällt aber nicht darunter.

mfg Maik


----------



## akdesign (25. November 2009)

Hallo Maik,

es tritt bei mir gerade wieder ein seltsames Phänomen - ähnlich wie ich schon die letzten Tage hatte - auf:

solange meine Links noch mit # definiert sind, ist alles super:
siehe Bild 1 und:
http://kessler-creativdesign.de/vonBriel/untitled-1.html

Definiere ich jetzt die Links genau, so verschwinden "teilweise" meine Quadrate, aber die Hovers erscheinen:
siehe Bild 2 und:
http://kessler-creativdesign.de/vonBriel/untitled-1a.html


Ich kapier's echt nicht!

Andrea


----------



## Maik (25. November 2009)

Wieso machst du dir eigentlich  selber das Leben so schwer?

Einmal definierst du das Hintergrundbild für die Überschrift 3.Ordnung, und dann wieder für die Links, damit der Hover-Effekt auch in den älteren IEs funktioniert.

Ich würde dies direkt ausschließlich für die Links umsetzen.

mfg Maik


----------



## akdesign (25. November 2009)

Versteh ich nicht.

Ich muss das Hintergrundbild doch für die Überschrift definieren:


```
/*--definiert die Blocküberschriften--*/
#menu h3 {
	font-size: 10pt;
	text-align: left;
	color: #ffffff;
	background-image:url(images/quadrat_rot.png); background-repeat: no-repeat; background-position: bottom right; 
	}

/*--definiert die Blocküberschriften im Hoverzustand--*/
#menu h3:hover {
	background-image:url(images/quadrat_aktiv.png); background-repeat: no-repeat; background-position: bottom right;
	cursor: pointer;
	}
```

und für die ohne Unterpunkte:

```
#menu a.direkt:link {
	font-size: 10pt;
	text-align: left;
	color: #ffffff;
	background-image:url(images/quadrat_rot.png); background-repeat: no-repeat; background-position: right center;
	}

/*--definiert einen Einzellink im Hoverzustand, wenn kein Drop-Down erforderlich--*/

#menu a.direkt:hover {
	color: #8ea8d3;
	background-image:url(images/quadrat_aktiv.png); background-repeat: no-repeat; background-position: right center;
	}
```


----------



## Maik (25. November 2009)

Müssen mußt du gar nichts, wenn du das Markup entsprechend änderst.

Netter Nebeneffekt: der CSS-Code wird dadurch wieder abgespeckt.

mfg Maik


----------



## akdesign (25. November 2009)

OK, wenn ich's also so definiere:


```
#menu ul {
	width: 120px; /*--Breite der Menüpunkte; bestimmt damit die Position der Quadrate--*/
	list-style-type: none;
	background-image:url(images/quadrat_rot.png); background-repeat: no-repeat; background-position: bottom right; 
	}
	
#menu ul:hover {
	width: 120px; /*--Breite der Menüpunkte; bestimmt damit die Position der Quadrate--*/
	list-style-type: none;
	background-image:url(images/quadrat_aktiv.png); background-repeat: no-repeat; background-position: bottom right; 
	}
```


dann:
1. verschwinden die Quadrate hinter dem Bild daneben; sollen aber drüber liegen

2. beim Mouseover auf Kompetenzen steht das Quadrat unten, klar ich habs mit bottom ausgerichtet, aber alles andere geht auch nicht, dass es zentriert bei Kompetenzen bleibt.

3. warum sind Chronik und Unternehmen im Hover-Status, also blaue Schrift statt weiß?

Zu betrachten hier:
http://kessler-creativdesign.de/vonBriel/untitled-1.html


----------



## Maik (25. November 2009)

Das <ul>-Element zeichnet  keinen Link aus, sondern eine Liste. Ich rede hier vom <a>-Element.

Oder hab ich es in meinem empfohlenen CSS-Tutorial etwa auf diese Weise umgesetzt?

mfg Maik


----------



## akdesign (25. November 2009)

OK, dann hab ich jetzt aber auch kästchen bei den Unterpunkten unter Kompetenzen, dafür nicht bei Kompetenzen.

Und das Problem, dass die ersten beiden Menüpunkte blau erscheinen, bleibt:

http://kessler-creativdesign.de/vonBriel/untitled-1.html


----------



## Maik (25. November 2009)

Und auch hier kannst doch eine Regel für die Links der zweiten Menüebene aufstellen, dass diese kein Hintergrundbild besitzen sollen.

Mitdenken ist hier schon erwünscht.

Bei mir erschint nur der erste Link "Chronik" in blauer Schrift.

mfg Maik


----------



## akdesign (25. November 2009)

> Bei mir erschint nur der erste Link "Chronik" in blauer Schrift.



und warum das?

Und im FF sinds nochmal andere Punkte, die dann blau sind (und zwar Kontakt)


----------



## Maik (25. November 2009)

Warum das? Ganz einfach, weil ich bislang nur diesen Link schon mal angeklickt habe, und dann halt diese Regel zum Zuge kommt:

```
#menu a {
	font-size: 10pt;
	font-weight: bold;
	line-height: 18pt;
	text-decoration: none;
	display: block;
	text-align: left;
	color: #8ea8d3; /* Schriftfarbe */
	background-image:url(images/quadrat_rot.png); background-repeat: no-repeat; background-position: bottom right; 

	}
```

Abhilfe, damit "bei dir" kein blauer Link mehr erscheint, dessen Verweisziel "du" bereits besucht hast, schafft dieser Selektor:

```
#menu a.direkt:link, #menu a.direkt:visited {
        font-size: 10pt;
        text-align: left;
        color: #ffffff;
        }
```


Ich empfehle dir, dich auch mal in die Materie einzulesen: :link, :visited, :focus, :hover, :active (Pseudoklassen für Verweise und andere Elemente), damit wir hier nicht täglich die fehlerhafte Schriftfarbenformatierung der Links auf's neue erörtern müssen.

Und die Lösung, damit die Links im Untermenü kein Hintergrundbild besitzen, lautet:

```
#menu ul ul a, #menu ul ul a:hover { background:none; }
```

mfg Maik


----------



## akdesign (25. November 2009)

> Ich empfehle dir, dich auch mal in die Materie einzulesen: :link, :visited, :focus, :hover, :active (Pseudoklassen für Verweise und andere Elemente), damit wir hier nicht täglich die fehlerhafte Schriftfarbenformatierung der Links auf's neue erörtern müssen.



Das ist mir schon klar. Ich hatte das zusätzlich einfach so definiert:

```
a:visited { color:#ffffff;text-decoration:none; }
a:active { color:#ffffff;text-decoration:none; }
```

was aber nicht gegriffen hat.

Aber jetzt ist klar.

Ich bitte um Nachsicht bei manchen Dingen.
Aber ich hab mir das alles selbst beigebracht bzw. eben durch solch tolle Foren und vor allem mit Hilfe von Leuten wie Dir.
Ich weiß, Du denkst bestimmt, oh nee, auch noch so ne verkappte Möchtegern...

Aber heutzutage muss ein Grafiker eben auch das können.

Ich bastel mal schön weiter.

Ach, da hab ich noch ein Problem.

Warum wird bei mir bei einem Textblock immer nur die erste Zeile eingerückt?
Hab alles versucht - mit margin, padding, text-indent……
Nix geht, immer nur die erste Zeile

Auszug Code:

```
<div id="rightCol">
          <div id="header"></div>
          <div id="background">
		 		 <div id="Chronik"><img src="images/text_chronik.png" alt="Chronik" width="100" height="30"></div>
				 <div id="Text1"><span class="kapitalchen">I</span>m Jahr 2008 feierte unser Unternehmen das 30-jährige Jubiläum.<br>
				   <span class="text_einger">Ihren Anfang nahm die Geschichte der Firma<br>Wilfried von Briel Maschinenbau GmbH & Co.?KG<br>in einer kleinen, ca.?100 m² Werkstatt in Konstanz<br>als Einmannbetrieb.<br>Der Firmengründer Wilfried von Briel leitete<br>die Geschicke der Firma 29 Jahre, in denen er<br>auf dem langen und manchmal auch steinigen<br>Weg immer wieder neue Ideen entwickeln</span></div>
          </div>
     </div>
```

und CSS

```
/* CSS Document */

#Chronik {
	width:100px;
	height:30px;
	padding-left: 65px;
	padding-top: 40px;
	z-index:1;
	visibility: visible;
}

#Text1 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10pt;
	color: #000000;
	font-weight: normal;
	line-height: 18pt;
	width:700px;
	height:30px;
	z-index:1;
	padding-left: 65px;
	padding-top: 50px;
}

#Bild {
	width:255px;
	height:182px;
	padding-left: 65px;
	padding-top: 20px;
	z-index:1;
	}



.text_einger {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10pt;
	color: #000000;
	font-weight: normal;
	line-height: 18pt;
	padding-left: 350px;
}

.text_bold {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10pt;
	color: #333333;
	font-weight: bold;
	line-height: 18pt;
}

.kapitalchen {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 15pt;
	color: #81132f;
	font-weight: normal;
	line-height: 20pt;
}
```


----------



## Maik (25. November 2009)

akdesign hat gesagt.:


> Ach, da hab ich noch ein Problem.
> 
> Warum wird bei mir bei einem Textblock immer nur die erste Zeile eingerückt?
> Hab alles versucht - mit margin, padding, text-indent……
> Nix geht, immer nur die erste Zeile


Du sprichst hiervon:

```
<span class="text_einger">...</span>
```

Das <span>-Element zählt zu den Inline-Elementen, die von sich aus keine Block-Level-Charakteristika besitzen - formatiere es daher mit display:block. 

mfg Maik


----------



## akdesign (25. November 2009)

Also so einfach ist das nicht mit dem :visited.

sobald ich :visited definiere, greift mein :hover nicht mehr.



```
#menu a.direkt:link {
	font-size: 10pt;
	text-align: left;
	color: #ffffff;

	}


#menu a.direkt:hover {
	color: #8ea8d3;
	}

#menu a.direkt:visited {
        font-size: 10pt;
        text-align: left;
        color: #ffffff;
        }
```


----------



## Maik (25. November 2009)

Erstens hab ich das in dieser fehlerhaften Form nicht vorgeschlagen, und zweitens solltest du auch meine Beiträge aufmerksam lesen, und die Ratschläge beherzigen, dann erübrigen sich diese Fragen:


Maik hat gesagt.:


> Ich empfehle dir, dich auch mal in die Materie einzulesen: :link, :visited, :focus, :hover, :active (Pseudoklassen für Verweise und andere Elemente), damit wir hier nicht täglich die fehlerhafte Schriftfarbenformatierung der Links auf's neue erörtern müssen.





			
				http://de.selfhtml.org/css/eigenschaften/pseudoformate.htm#link_visited_focus_hover_active hat gesagt.:
			
		

> *Beachten Sie:*
> 
> Um die meist gewünschte Darstellung dieser Pseudoklassen zu erreichen, müssen Sie bei der Notierung die Reihenfolge des Beispiels einhalten.


mfg Maik


----------



## akdesign (25. November 2009)

> Erstens hab ich das in dieser fehlerhaften Form nicht vorgeschlagen, und zweitens solltest du auch meine Beiträge aufmerksam lesen, und die Ratschläge beherzigen, dann erübrigen sich diese Fragen:


Asche über mein Haupt!!


Ich bin mir nicht sicher, ob ich das mit display:block richtig umgesetzt habe, oder wieder was doppelt und zu kompliziert gemacht habe.

```
.text_einger {
	display: block;
	margin-left: 270px;
	margin-top: 17px;
}
```

Aber insgesamt siehts doch jetzt schon vieeel besser aus.

Was meinst Du?


http://kessler-creativdesign.de/vonBriel/chronik.html


----------



## Maik (25. November 2009)

Für das "Umfliessen" gibt es die float-Eigenschaft 

Hier mal fix und vereinfacht mit Inline-Styles demonstriert:

```
<div style="width:500px;">
     <img src="http://kessler-creativdesign.de/vonBriel/images/chronik_bild.jpg" style="float:left;margin-right:10px;">
     <p>Ihren Anfang nahm die Geschichte der Firma Wilfried von Briel Maschinenbau GmbH & Co.KG in einer kleinen, ca.100 m² Werkstatt in Konstanz als Einmannbetrieb. Der Firmengründer Wilfried von Briel leitete die Geschicke der Firma 29 Jahre, in denen er auf dem langen und manchmal auch steinigen Weg immer wieder neue Ideen entwickeln und verwirklichen musste. So ist die Firma zu einem gefestigten und etablierten Unternehmen mit beachtlicher Größe gewachsen.</p>
</div>
```


mfg Maik


----------



## akdesign (25. November 2009)

OK, eine Frage noch:

warum funktioniert das <p> für einen Abstand hier nach "Jubiläum" und vor dem img nicht:


```
<div id="Text" style="width:600px;">
				<p><span class="kapitalchen">I</span>m Jahr 2008 feierte unser Unternehmen das 30-jährige Jubiläum.</p>
     			<img src="images/chronik_bild.jpg" style="float:left;margin-right:10px;">
     			<p>Ihren Anfang nahm die Geschichte der Firma<br>Wilfried von Briel Maschinenbau Gm
```


----------



## Maik (25. November 2009)

akdesign hat gesagt.:


> warum funktioniert das <p> für einen Abstand hier nach "Jubiläum" und vor dem img nicht:


Das <p>-Element zeichnet keinen "Abstand", sondern einen Textabsatz aus.

Und was funktioniert bei dir daran nicht?

Das Einrichten eines Abstandes mittels margin-bottom funktioniert bei mir wie geschmiert 


```
<div style="width:500px">
     <p style="margin-bottom:50px;"><span class="kapitalchen">I</span>m Jahr 2008 feierte unser Unternehmen das 30-jährige Jubiläum.</p>
     <img src="http://kessler-creativdesign.de/vonBriel/images/chronik_bild.jpg" style="float:left;margin-right:10px;">
     <p>Ihren Anfang nahm die Geschichte der Firma Wilfried von Briel Maschinenbau GmbH & Co.KG in einer kleinen, ca.100 m² Werkstatt in Konstanz als Einmannbetrieb. Der Firmengründer Wilfried von Briel leitete die Geschicke der Firma 29 Jahre, in denen er auf dem langen und manchmal auch steinigen Weg immer wieder neue Ideen entwickeln und verwirklichen musste. So ist die Firma zu einem gefestigten und etablierten Unternehmen mit beachtlicher Größe gewachsen.</p>
</div>
```


mfg Maik


----------



## akdesign (25. November 2009)

Ich dachte mir schon, dass das mit dem img dazwischen nicht funktioniert.

Super, dann hab ich ja jetzt die ziemlich perfekte Website!


Danke Dir nochmals recht herzlich und bestimmt auf bald.

Andrea


----------

