Flyoutmenü im Kopfbereich eines via CSS erstelltem Framesets

Flyoutmenü im Kopfbereich eines via CSS erstelltem Framesets

Beitragvon funky_ » 05.09.2006, 14:01

Hi @all!

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 :-) aber im Internetexplorer tauchen Fehler auf :-( !
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_
funky_
neu hier
 
Beiträge: 6
Registriert: 04.09.2006, 19:16

Beitragvon Laus » 11.09.2006, 03:54

Hallo

Zum Frameset:Auf dieser Seite findest du Layouts die in allen Browsern funktionieren. Auch Das hier könnte für dich interessant sein.
Ein Flyout Menü das in allen Browsern funktioniert zu schreiben ist keine leichte Sache. Da ist es meist besser auf fertige Losungen zurück zu greifen. Schau mal Hier und Hier das dürfte deine Probleme beseitigen
Lachen ist kein schlechter Anfang und bei weitem das beste Ende.
(Oscar Wilde)
Benutzeravatar
Laus
Moderator
 
Beiträge: 1229
Registriert: 25.02.2006, 00:30
Wohnort: Furth im Wald


Moderatoren: Laus, Moderatoren

Ähnliche Beiträge zu "Flyoutmenü im Kopfbereich eines via CSS erstelltem Framesets"

Zurück zu: CSS für Fortgeschrittene

Wer ist online?

Mitglieder in diesem Forum: 0 Mitglieder und 2 Gäste