Peter Klein
Erfahrenes Mitglied
Hallo
Ich bin dabei für nen Bekannten sämtliche Fehler aus dem Quellcode seiner Seite zu entfernen/auszubessern und sie zu erweitern da er sich nicht so gut auskennt.
Ein kleines Problem habe ich gerade wo ich den Fehler nicht finde. Ich habe ein Flyout Menu geschrieben und dort klappt auch alles soweit ausser wenn ich von der ersten Ebene in die zweite wechseln möchte, geht es nur wenn man die Maus sehr fix rüberzieht.
Wäre klasse wenn mir jemand nen Denkanstoß geben könnte.
Optimierung für alle Browser werd ich erst im Anschluss durchführen.
Der Quelltext:
Und die CSS:
Peter
Ich bin dabei für nen Bekannten sämtliche Fehler aus dem Quellcode seiner Seite zu entfernen/auszubessern und sie zu erweitern da er sich nicht so gut auskennt.
Ein kleines Problem habe ich gerade wo ich den Fehler nicht finde. Ich habe ein Flyout Menu geschrieben und dort klappt auch alles soweit ausser wenn ich von der ersten Ebene in die zweite wechseln möchte, geht es nur wenn man die Maus sehr fix rüberzieht.
Wäre klasse wenn mir jemand nen Denkanstoß geben könnte.
Optimierung für alle Browser werd ich erst im Anschluss durchführen.
Der Quelltext:
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>muster_1_gal</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="mainstyle.css" />
</head>
<body>
<div id="wrap">
<div id="header">
<h1>Rottweiler vom Wachberg</h1>
</div><!--Ende header-->
<ul id="topnav">
<li class=""><a href="#">Startseite</a></li>
<li class=""><a href="#">Über uns</a></li>
<li class=""><a href="#">Rasse</a></li>
<li class=""><a href="#">Herkunft</a></li>
<li class=""><a href="#">Links</a></li>
<li class=""><a href="#">Kontakt</a></li>
<li class=""><a href="#">Impressum</a></li>
</ul>
<div id="linke_seite">
<ul id="left_nav">
<li class="navlink"><a href="">Zwingeranlage</a></li>
<li class="navlink"><a href="">Zuchttiere >></a>
<ul>
<li><a href="#">Hexe</a></li>
<li><a href="#">Dorle</a></li>
<li><a href="#">Ebby</a></li>
</ul>
</li>
<li class="navlink"><a href="">Verkauf</a></li>
<li class="navlink"><a href="">Ahnentafeln</a></li>
<li class="navlink"><a href="">Galerie</a></li>
<li class="navlink"><a href="">Planung/Welpen</a></li>
<li class="navlink"><a href="">Nachwuchs</a></li>
</ul>
<h4>Kontaktdaten</h4>
<p class="email">g.wilkniss@t-online.de</p>
<p>Tel. 039484/747161</p>
<p>Mob. 0152/06631178</p>
<p>Fax. 039484/747162</p>
</div><!--Ende linke_seite-->
<div id="inhalt">
<p>Vor Über 20 Jahren eroberte der Rottweiler
unser Herz! Seitdem sind wir begeisterte Züchter. Wir achten ganz besonders auf
Schönheit und Leistung. Der Zwinger vom Wachberg blickt auf viele erfolgreiche
Teilnahmen an zahlreichen Wettkämpfen und Austellungen zurück. Alle unsere
Hunde sind sozial geprägt.</p>
<p>Auf unserer Website erfahren Sie mehr<a href="ueber_uns.html"> über uns</a> , können sich einen kleinen Einblick über
unsere <a href="zuchttiere.html">Zuchttiere </a>und unseren <a href="nachwuchs.html">Nachwuchs</a> verschaffen.
Etwas zum Schmunzeln werden Sie in unserer <a href="welpen.html"> Welpengalerie</a>
entdecken.</p>
<p>Sollten Sie überdies noch Fragen haben, finden Sie<a href="kontakt.html"> hier </a> ein
praktisches Kontaktformular zum Versenden einer Nachricht an uns. Alternativ können Sie uns
telefonisch unter 039484/747161 und mobil 0152/06631178 Uhr erreichen. </p>
<p>Viel Spaß beim Stöbern und Ausprobieren.</p>
<br />
<h5>Bis bald bei uns,
dem "Zwinger vom Wachberg" .</h5>
</div><!--Ende inhalt-->
<div id="footer">
bla bla bla
</div><!--Ende footer-->
</div><!-- Ende wrap-->
</body>
</html>Und die CSS:
Code:
* {
margin: 0;
padding: 0;
list-style-type: none;
}
body {
background: url(bg.gif) repeat-x #242423;
}
h1 {
display: none;
}
h4 {
color: #db6307;
margin: 10px 0 0 20px;
font-weight: normal;
}
h5 {
font-size: 110%;
}
#wrap {
background: #181819;
width: 970px;
margin: 0 auto;
border-right: 1px solid #db6307;
border-left: 1px solid #db6307;
clear: both;
}
#header {
background: url(logo.jpg) no-repeat;
height: 250px;
width: 970px;
}
/*Navigation horizontal*/
#topnav {
text-align: center;
background: url(pro_four0.gif) repeat-x;
width: 870px;
height: 35px;
padding: 0 0 0 100px;
font-family: Arial, sans-serif;
font-size: 80%;
clear: both;
}
#topnav li {
height: 35px;
font-weight: bold;
float: left;
}
#topnav li a {
display: block;
text-decoration: none;
color: #393838;
height: 27px;
padding: 8px 22px 0 22px;
}
#topnav li a:hover {
background: url(pro_four_neu.gif) repeat-x;
display: block;
text-decoration: none;color: #393838;
height: 25px;
padding: 6px 20px 0 20px;
border: 2px solid #d32f2f;
}
/*Linke Spalte*/
#linke_seite {
width: 250px;
float: left;
margin: 90px 0 0 0;
}
#linke_seite p {
margin: 10px 0 10px 20px;
color: #abaa89;
}
/*Navigation vertikal*/
#left_nav {
color: #393838;
width: 155px;
text-align: center;
font-family: Arial, sans-serif;
font-size: 80%;
margin: 10px 0 20px 20px;
}
#left_nav li {
position: relative;
background: url(pro_four0.gif) repeat-x;
height: 35px;
margin: 5px 0 0 0;
font-weight: bold;
}
#left_nav li a {
display: block;
text-decoration: none;
color: #393838;
height: 29px;
padding: 8px 0 0 0;
}
#left_nav li a:hover {
display: block;
background: url(pro_four_neu.gif) repeat-x;
text-decoration: none;
border: 2px solid #d32f2f;
color: #393838;
height: 25px;
padding: 6px 0 0 0;
}
#left_nav li ul {
position: absolute;
display: none;
width: 150px;
}
#left_nav li:hover ul {
display: block;
left: 160px;
top: -5px;
width: 150px;
}
#left_nav li ul li {
display: block;
}
/*Inhaltsbereich*/
#inhalt {
margin: 100px 0 0 250px;
width: 550px;
padding: 0 100px 20px 50px;
color: #abaa89;
font-size: 100%;
font-family: Georgia, serif;
font-weight: normal;
}
#inhalt a {
color: #db6307;
}
#inhalt p {
margin: 15px 0 ;
}
#footer {
width: 970px;
background: #db6307;
margin: 30px 0 0 0;
padding-top: 3px;
padding-bottom: 3px;
text-align: center;
clear: both;
}
/*KLASSEN*/
.email {
margin: 10px 0 0 20px;
color: #abaa89;
font-weight: bold;
}
