Hallo Leute,

ich bin neu dabei und sag schon mal vor ab danke. Ich muss gleich zu Anfang erst mal gestehen, dass ich zum ersten Mal seit 7-8 Jahren wieder versuche eine Homepage zu bauen. Dementsprechend greife ich noch auf veraltete Methoden wie Tabellen etc. zurück. Ich versuche allerdings soviel wie möglich mit modular und mit css zu bauen. Leider habe ich Zeitdruck und keine Zeit mich erst mal ein paar Wochen hin zu setzen und css vernünftig zu lernen, daher bediene ich mich vieler Codeschnipsel die ich mir dann zurechtbiege.

Ich arbeite in einer Baumschule und wer Leute aus der Branche kennt, weiß dass es der Branche im allgemeinen sehr schlecht geht. Unsere aktuelle Homepage (www.heinje.com) ist einfach nur peinlich, daher dachte ich mir schlimmer kann es nicht werden Leider ist kein Budget dafür vorgesehen, daher dachte ich mir ich mache das mal selbst. (work in Progress Lehei GmbH - Heinje & Hohnholz Baumschulen - Rhododendron)

Jetzt stehe ich allerdings vor einem Problem dass ich gerade nicht gelöst bekomme und hoffe auf einen Tip.

1.Problem:
Ich habe mir ein css Schnipsel für ein Menu mit Untermenus zurechtgebastelt und möchte über das Bild darunter einen Text legen. Wenn ich dies mache, verschwindet aber das Untermenu hinter dem Bild.

URL Problem: Lehei GmbH - Heinje & Hohnholz Baumschulen - Rhododendron

2.Problem:
Des Weiteren würde ich mir wünschen, dass der Obermenupunkt im onmouseover look bleibt wenn der Mauszeiger aufs untermenu wandert.

style css:

@charset "utf-8";
/* CSS Document */

* {
margin: 0px;
padding: 0px;
border: none;
}

html, body{
font: 100% Arial, Helvetica, sans-serif;
font-size:14px;
height:100%;
padding:0;
margin:0;
border:none;
table { border-collapse:collapse
}
}

input, textarea {
background-color :#F7F7F7;
border:solid 1px;
padding: 2px;
margin: 0px;
}

h1 {
font: 100% Arial, Helvetica, sans-serif;
font-size:18px;
margin-top: 0em;
margin-bottom: 0em;
margin-left: 0;
margin-right: 0;
font-weight: bold;
color:#a9074d;
}

h2 {
font: 100% Arial, Helvetica, sans-serif;
font-size:100%;
margin-top: 0em;
margin-bottom: 0em;
margin-left: 0;
margin-right: 0;
font-weight: bold;
color:#a9074d;
}



#header {
font: 100% Arial, Helvetica, sans-serif;
color:#a9074d;
padding:0;
margin:0;
border:none;
align:center;
}


#footer {
font: 100% Arial, Helvetica, sans-serif;
color:#FFF;
padding:0;
margin:0;
border:none;
font-size:12px;
font-weight:bold;
align:center;
}
#footer a:link,
#footer a:visited {
color:#FFF;
text-decoration: none;
}
#footer a:hover {
color:#FFF;
text-decoration:underline;
}

#contentsitemap {
font: 100% Arial, Helvetica, sans-serif;
color:#000;
align:center;
}
#contentsitemap a:link,
#contentsitemap a:visited {
color:#000;
text-decoration: none;
}

#contentsitemap a:hover {
color:#a9074d;
text-decoration:underline;
}

#content {
font: 100% Arial, Helvetica, sans-serif;
color:#000;
align:center;
}
#content a:link,
#content a:visited {
color:#a9074d;
text-decoration: none;
}
#content a:hover {
color:#a9074d;
text-decoration:underline;
}


<!--
#contentteam {
font: 85% Arial, Helvetica, sans-serif;
color:#000;
}
#contentteam a:link,
#contentteam a:visited {
color:#a9074d;
text-decoration: none;
}
#contentteam a:hover {
color:#a9074d;
text-decoration:underline;
}


#menu {
font-size:14px;
position:absolute;
height:30;
}
#menu ul {
list-style-type:none;
list-style-image:none;
margin:0px;
padding:0px;
}
#menu li.topmenu {
float:left;
}
.topmenu a {
float:left;
width:125px;
text-align:center;
}
.topmenu ul{
display:none;
}
.topmenu a{
padding:6px 0px;
border:0px;
border-collapse:collapse;
color:#a9074d;
font-weight:bold;
text-decoration:none;
margin:0;
}
.submenu a{
padding:7px 0px;
border:1px solid:#FFF;
border-collapse:collapse;
color:#a9074d;
font-weight:bold;
text-decoration:none;
margin:0;
}
.submenu a{
font-size:12px;
width:125px;
position:relative;
clear:both; /* special IE6 */
color:white;
background-color:#a9074d
}
#menu a:hover, .topmenu.on a {
color:white;
background-color:#a9074d !important;
}
.topmenu:hover ul {
display:block;
z-index:500;
}

.bildmittext {
width: 1000px;
position: relative;
border: 0px;
}

.bildmittext img {
display: block;
}
.bildmittext span {

position: absolute;
bottom: 0;
width: 100%;
color:#FFFFFF;
font-weight:bold;
font-size:60px;
font-color: hsla(0, 0%, 100%, 0.5);
position: absolute;
padding-bottom:0;
padding-right:20px;
width: 100%;
text-align: right;
line-height: 1,5em;
text-shadow: 1px 1px 1px black,
1px -1px 1px black,
-1px 1px 1px black,
-1px -1px 1px black;
opacity: 0.75;
}

Navi:

<div id="menu">
<ul>

<li class="topmenu">
<a href="index.php">Home</a>
</li>

<li class="topmenu">
<a href="unternehmen.php">Unternehmen</a>
</li>

<li class="topmenu">
<a href="produktion.php">Produktion</a>
<ul>
<li class="submenu"><a href="labor.php">Labor</a></li>
<li class="submenu"><a href="jungpflanzen.php">Jungpflanzen</a></li>
<li class="submenu"><a href="container.php">Containerfläche</a></li>
<li class="submenu"><a href="freiland.php">Freiland</a></li>
</ul>
</li>

<li class="topmenu">
<a href="sortiment.php">Sortiment</a>
<ul>
<li class="submenu"><a href="hybriden.php">Rhododendron Hybriden</a></li>
<li class="submenu"><a href="yakushimanum.php">Rhododendron yakushimanum</a></li>
<li class="submenu"><a href="zwergformen.php">Rhododendron Zwergformen</a></li>
<li class="submenu"><a href="azalea.php">Knap-Hill Azaleen</a></li>
<li class="submenu"><a href="kalmia.php">Kalmia</a></li>
<li class="submenu"><a href="syringa.php">Syringa</a></li>
<li class="submenu"><a href="pieris.php">Pieris</a></li>
</ul>
</li>

<li class="topmenu">
<a href="marketing.php">Marketing</a>
<ul>
<li class="submenu"><a href="">folgt</a></li>
</ul>
</li>

<li class="topmenu">
<a href="service">Service</a>
<ul>
<li class="submenu"><a href="service_galabau.php">Service für den Garten- und Landschaftsbau</a></li>
<li class="submenu"><a href="gestaltung.php">Gestaltungsideen mit Rhododendron</a></li>
<li class="submenu"><a href="pflege.php">Rhododendron pflanzen & Pflege</a></li>
</ul>

<li class="topmenu">
<a href="kontakt.php">Kontakt</a>
<ul>
<li class="submenu"><a href="kontakt.php">Kontaktformular</a></li>
<li class="submenu"><a href="anfahrt.php">Anfahrt</a></li>
<li class="submenu"><a href="team.php">unser Team</a></li>
</ul>

<li class="topmenu">
<a href="impressum.php">Impressum</a>
</li>

</ul>
</div>


Quelltext Problem Nr.1 (Untermenu verschwindet hinter Bild mit Text)

Beispiel URL: Lehei GmbH - Heinje & Hohnholz Baumschulen - Rhododendron

<div id="header" align="center">
<table width="1000" border="0" align="center" valign="top">
<tr>
<td height="118"><?php
include ("header.php");
?></div></td>
</tr>
<tr>
<td height="10"></td>
</tr>
<tr>
<td height="30" valign="top"><?php
include ("navi2.php");
?></td>
</tr>
<tr>
<td height="300" bgcolor="#a9074d" align="center" valign="center"><div class="bildmittext"><img src="IMG/header_unternehmen.jpg" width="998" height="298" /><span>Home</span></div></td>
</tr>
</table>

Zuerst einmal würde ich versuchen sauberer zu arbeiten und den Code so weit wie möglich valide halten:
https://validator.w3.org/check?verbo...m%2Findex2.php
W3C CSS Validator results for http://www.heinje1798.com/index2.php (CSS level 2.1)

Als Doctype ist heute eigentlich nur HTML5 zu empfehlen. Alle anderen sind veraltet und vor allem XHTML macht keinen Sinn.

Eine Tabelle als Layoutelement ist auch nicht mehr up-to-date und in deinem Fall auch einfach zu vermeiden.

Dann tendierst du zu häufig dazu Größenangaben zu verwenden. HTML soll sich an den Darstellungsbereich anpassen, daher sollte man Größenanagben vermeiden oder relative benutzen.

Bei dir kommt noch dazu. dass du diese Angaben extrem im HTML Code vermischst, was du auf keinen Fall machen soltest. Alles was zum Layout gehört, gehört in den CSS Code und nicht in ein HTML Attribut.

Das liegt auch an dem zuviel an CSS.

Ich frag mich wenn ich sowas sehe, immer wie so was entwickelt wird?
Du musst doch bemerkt haben, als das Untermenü plötzlich nicht mehr sichtbar war?
Und was du dann verändert hast?

Konkret sind die CSS Angaben der Klasse .bildmittetext komplett überflüssig, ich würde sogar sagen das ganze Element ist es.

Das liegt daran, dass die Maus aus dem Element verschwindet, wenn es auf das Unermenu geht.

Ich würde mir aber Gedanken machen, ob sowas wirklich nötig ist?

Es sieht nicht so aus, als ob die Seite jemals viel Inhalt haben wird und je mehr Menüpunkte um so weniger ist auf den einzelnen Seiten. Dann sind so zappelnde Seitenelemente weder schön noch unbedingt benutzfreundlich.

Technisch gesehen ist die alte Seite besser: https://validator.w3.org/check?verbo...FProdukte.html
Wobei dort viele Element absolut positioniert sind, was auch nicht empfehlenswert ist. Aber wenn ich mir den Inhalt anschaue wäre es schon ausreichend optisch ein paar Ausbesserungen zu machen und vielleicht etwas mehr Wert auf die Fotos zu legen, ihr verkauft ja auch was für's Auge.

Also wenn du wirklich wenig Zeit und Wissen hast, wäre ein Überarbeitung des alten Codes vermutlich Effektiver, als den komplett neu zu bauen.