Untermenü in Listenmenü blendet sich direkt wieder aus

akdesign · 24. November 2009

So, das Grundlayout hab ich mal:

HTML:

<!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:

HTML:

<!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:

Code:

/*--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:

Code:

#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:

Code:

#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

Untermenü in Listenmenü blendet sich direkt wieder aus

akdesign

Erfahrenes Mitglied

Maik

Maik

akdesign

Erfahrenes Mitglied

Maik

akdesign

Erfahrenes Mitglied

Anhänge

Maik

akdesign

Erfahrenes Mitglied

Maik

akdesign

Erfahrenes Mitglied

Neue Beiträge