So jetzt habe ich alles so gemacht wie ihr es beschrieben habt ich hab nen DocType drin (müsste auch der richtige sein).
Ich hab kein div head mehr eine überschrift mit <h1> gemacht wie ihr es die ganze zeit sagt, doch das Problem mit dem a:hover ist nicht gelöst und es funktioniert auch durch eure Änderungen noch nicht.
Des weiteren ist jetzt natürlich noch dazu gekommen, da ich keinen div head mehr habe und es als <h1> abgelegt habe erscheint mein dotted border nicht mehr.
Desweiteren ist jetzt im IE der fall wenn die seite geladen wird wird sie angezeigt und sobald ich über eines der beiden menüs fahre verschiebt sich die seite (sie springt von der mitte etwas weiter nach links).
Ich hab kein div head mehr eine überschrift mit <h1> gemacht wie ihr es die ganze zeit sagt, doch das Problem mit dem a:hover ist nicht gelöst und es funktioniert auch durch eure Änderungen noch nicht.
Des weiteren ist jetzt natürlich noch dazu gekommen, da ich keinen div head mehr habe und es als <h1> abgelegt habe erscheint mein dotted border nicht mehr.
Desweiteren ist jetzt im IE der fall wenn die seite geladen wird wird sie angezeigt und sobald ich über eines der beiden menüs fahre verschiebt sich die seite (sie springt von der mitte etwas weiter nach links).
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1250">
<title>Drexler-Immobilien.com
</title>
<script type="text/javascript" src="js/sfHover.js"></script>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div class="container">
<h1>Der Weg ins Eigenheim ist meist nicht so schwer wie man denkt! Mit uns erreichen Sie es auf alle Fälle unkomplizierter.</h1>
<ul id="nav"><li>
<a href="angebot.html">Unser Angebot</a></li> <li>
<a href="#">Dienstleistung</a>
<ul> <li>
<a href="#">Verkauf</a></li> <li>
<a href="#">Vermietung</a></li>
</ul></li> <li>
<a href="#">Nebenkosten</a></li> <li>
<a href="gutschein.html">Gutschein</a></li>
</ul>
<div id="angebot">
<table cellpadding="0" cellspacing="0">
<tr>
<td width="100%" colspan="2"><img src="bilder/img1_01.gif" width="800"></td>
</tr>
<tr>
<td rowspan="4">
<img src="bilder/img1_02.gif" width="553"alt=""></td>
<td id="bildver">
<a href="http://www.drexler-immobilien.com" target="_blank"></a></td>
</tr>
<tr> <td>
<a href="http://www.drexler-immobilien.com" target="_blank">
<img src="bilder/img1_04.gif" width="245" alt="Wohnungen"></a></td>
</tr>
<tr> <td>
<a href="http://www.drexler-immobilien.com" target="_blank">
<img src="bilder/img1_05.gif" width="245" alt="Gewerbe"></a></td>
</tr>
<tr> <td>
<a href="http://www.drexler-immobilien.com" target="_blank">
<img src="bilder/img1_06.gif" width="245" alt="Grundstueck"></a></td>
</tr>
</table>
</div>
<ul id="down"><li>
<a href="kontakt.html">Kontakt</a> </li> <li>
<a href="impressum.html">Impressum</a> </li> <li>
<a href="index.html">Startseite</a></li>
</ul>
<div class="footer">
<p>©
<a href="http://www.drexler-immobilien.com">http://www.drexler-immobilien.com</a>
</p>
</div>
</div>
</body>
</html>
Code:
body {
color: #000000;
font-family: verdana, arial;
font-size: 12px;
padding-left: 10%;
}
.container {
width: 80%;
background-color: #FFFFFF;
text-align: left;
}
.h1 {
font-size: 15px;
border: 1px dotted #000000;
}
/*START: Topmenue Formatierung*/
#nav {
/* all lists */
border-left: 1px dotted #000000;
border-right: 1px dotted #000000;
border-bottom: 1px dotted #000000;
height: 15px;
padding: 0px;
margin: 0px;
list-style: none;
}
#nav ul {
height: 15px;
padding: 0px;
margin: 0px;
list-style: none;
}
#nav a {
display: block;
width: 120px;
color: #000000;
text-decoration: none;
}
#nav a:hover {
text-decoration: none;
background-color: #FF9900;
}
#nav li {
/* all list items */
float: left;
width: 120px;
/* width needed or else Opera goes nuts */
}
#nav li ul {
/* second-level lists */
position: absolute;
width: 120px;
left: -300px;
/* using left instead of display to hide menus because display: none isn't read by screen readers */
}
#nav li:hover ul, #nav li.sfhover ul {
/* lists nested under hovered list items */
left: auto;
}
/*ENDE: Topmenue Formatierung*/
/*START: Mainbereich (Normal)*/
.main {
border-left: 1px dotted #000000;
border-right: 1px dotted #000000;
clear: left;
}
.main img {
width: 100%;
}
/*ENDE: Mainbereich (Normal)*/
/*START: Mainbereich (Impressum)*/
.impressum {
border: 1px dotted #000000;
font: 20px arial;
}
/*ENDE: Mainbereich (Impressum)*/
/*START: Mainbereich (Angebotseite)*/
#angebot {
border-left: 1px dotted #000000;
border-right: 1px dotted #000000;
}
#angebot img {
border: 0px;
}
#bildver a {
display: block;
background-image: url(bilder/img1_03.gif);
height: 90px;
width: 245px;
}
#bildver a:hover {
background-image: url(bilder/img1_03_silver.gif);
}
/*ENDE: Mainbereich (Angebotseite)*/
/*START: Downmenue*/
#down {
/* all lists */
border: 1px dotted #000000;
text-align: right;
padding: 0px;
margin: 0px;
list-style: none;
height: 13px;
}
#down ul {
text-align: right;
padding: 0px;
margin: 0px;
list-style: none;
height: 13px;
}
#down a {
display: block;
width: 120px;
color: #000000;
text-decoration: none;
}
#down a:hover {
text-decoration: none;
background-color: #FF9900;
}
#down li {
float: right;
width: 120px;
}
#down li:hover ul, #down li.sfhover ul {
/* lists nested under hovered list items */
left: auto;
}
/*ENDE: Downmenue*/
/*START: Fusszeile Formatierung*/
.footer {
color: #000000;
font: 9px arial;
text-align: center;
clear: right;
}
.footer a {
text-decoration: none;
color: #000000;
}
.footer a:hover {
text-decoration: underline;
background-color: #FFFFFF;
}
/*ENDE: Fusszeile Formatierung*/