Bisher hatte ich richtige Frames auf meiner Page verwendet. Doch als ich die Möglichkeiten von CSS erkannte und die Probleme richtiger Frames sah, habe ich mich entschieden meine Page voll auf CSS umzustellen!
Hierfür habe mich in das CSS-Praxis Buch eingearbeitet, allerdings hab ich vieles nicht richtig verstanden und bekomm viele Sachen einfach nicht richtig hin! (CSS ist halt neu für mich!) Vielleicht kann mir hier Jemand auf die Sprünge helfen???
Mein Ziel ist es ein 3 Spaltiges Frameset mit CSS nachzubasteln (Punkt 1), welches im Kopfbereich ein horizontales Flyoutmenü hat (Punkt 2)! Der Linke Bereich und der Inhaltsbereich soll Scrollbar sein!
============================================
Hier noch kurz vorab der LINK zur Testseite:
http://www.funk-electric.de/frame.html
Und die Links zu den restlichen Dateien:
[frame.css] : http://www.funk-electric.de/frame.css
[menu.css] : http://www.funk-electric.de/menu.css
[hover.js] : http://www.funk-electric.de/hover.js
============================================
=================
Punkt 1: (Frames)
=================
Hier die für die Frames verantwortliche CSS Datei:
[frames.css]:
- Code: Alles auswählen
html, body {
margin: 0;
padding: 0;
overflow: hidden;
}
#oben {
position: fixed;
width: 100%;
top: 0;
height: 139px;
overflow: auto;
background-color: #000000;
background-image: url(kopf.jpg);
}
#links {
position: fixed;
width: 20%;
top: 139px;
bottom: 0px;
left: 0;
overflow: auto;
background-image: url(navi.jpg);
color: #FF0000;
background-color: #000000;
}
#inhalt {
color: #FF0000;
position: fixed;
top: 139px;
bottom: 0px;
width: 80%;
left: 20%;
overflow: auto;
background-color: #000000;
}
Das funktioniert im Firefox einwandfrei
Allerdings komm ich nicht dahinter, wie ich die im CSS-Praxis Buch bei Listing 5.21 verwendeten Hacks, wie z.b. die 'expressions', zum lösen des Problems einsetzen kann!? Weiß mir hier jemand Rat???
=====================
Punkt 2: (Flyoutmenü)
=====================
In dem Kopfbereich meines Framesets würde ich jetzt gerne ein horizontales Flyoutmenü unterbringen!
Allerdings funktioniert hier der aus einem Beispiel (CSS-Praxis) verwendete Javascript, fürs nachprogrammieren der hover funktion im Internet explorer nicht! Oder sagen wir mal so, ich weiß nicht genau was ich abändern muß das es tut??! Kann mir dabei jemand weiterhelfen???
Hier mein neues horizontales Flyoutmenü:
[menu.css]:
- Code: Alles auswählen
#nav, #nav ul {
padding: 0;
margin: 0;
list-style: none;
}
#nav li {
display: block;
}
#nav a {
display: block;
width: 8em;
text-decoration: none;
color:#000000;
}
#nav a:hover {
background-color:#FFFF00;
color:#FF0000;
}
#nav li {
float: left;
width: 8em;
background-color:#FF0000;
}
#nav li ul {
position: absolute;
width: 10em;
left: -999em;
}
#nav li:hover ul, li.sfhover ul {
left: auto;
}
Ich komm hier einfach nicht weiter! Für Hilfe wäre ich sehr dankbar
MFG Funky_
