|
|||
Hovermenue ohne nachladen
Moin zusammen,
ich versuche mich gerade an einem neuen Projekt das noch nicht online gehostet ist (habe einfach noch nicht die Zugangsdaten erhalten). Entsprechend kann ich die Daten derzeit nur lokal ablegen und nicht online zur Verfügung stellen. Mein Problemchen. Ich versuche ein drei spaltiges Menü (drei Div´s) innerhalb eines Div-Container aufzubauen. Soweit ist das ja auch erst mal kein Problem. Wo ich jetzt absolut hänge und nicht mehr weiterkomme ist beim hovern. Ich würde die Lösung ohne nachladen bevorzugen und habe entsprechend eine Grafik mit beiden zuständen (nebeneinander) angelegt. Wenn ich es richtig verstanden habe dann muss hier mit background-position entsprechend gearbeitet werden (normaler Zustand top & left) (hover bottom&right). Es klappt aber einfach irgendwie nicht. Beim drüberziehen mit der Maus passiert leider gar nichts. Code und CSS sind soweit valide. Habt ihr einen Tipp für mich??? Gruß und Danke Marcus HTML-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>Untitled Document</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <link href="main2.css" rel="stylesheet" type="text/css" /> </head> <body> <center> <!-- haupt-frame --> <div class="frame"> <!-- haupt-frame ende --> <!-- header --> <div id="headerlinks"></div> <div class="head"><img src="../test/grafiken/logo_transparent_150h.png" alt="Logo" align="left" /><img src="../test/grafiken/haus_200.jpg" alt="haus" align="right" /></div> <!-- header ende --> <!-- menue --> <div class="menue"> <a class="menuerechts" href="#"></a> <a class="menuelinks" href="#"></a> <a class="menuemitte" href="#"></a> </div> <!-- menue ende --> <!-- center --> <div class="center">test test</div> <!-- center ende --> <!-- footer --> <div class="footer"></div> <!-- footer ende --> </div> <!-- ende alles --> </center> </body> </html> Code:
body { font-family:Verdana, Arial, Helvetica, sans-serif; font-size: 12px; font-style: normal; font-weight: normal; color: #000000; background-color:#d8d9db; background-repeat: no-repeat; white-space: normal; padding: 2px; } .frame { padding:5px; width:968px; height:1000px; background-color:#FFFFCC; } #headerlinks { width:180px; height:150px; background-color:#fda457; float:left; } .head { width:100%; height:150px; background-color:#fda457; margin-left:0px; } .menue { float:left; width:240px; height:800px; } a.menuerechts { float:right; margin:0; padding:0; display:block; background:url(../test/grafiken/menue_rechts_gross.png); background-position:top; background-position:left; background-repeat:no-repeat; height:800px; width:80px; } a.menuerechts a:hover { float:right; margin:0; padding:0; display:block; background:url(../test/grafiken/menue_rechts_gross.png); background-position:bottom; background-position:right; background-repeat:no-repeat; height:800px; width:80px; } .menuelinks{ float:left; display:block; background-image:url(../test/grafiken/menue_links_gross.png); background-position:top; background-position:left; background-repeat:no-repeat; height:800px; width:80px; } .menuelinks a:hover{ float:left; display:block; background-image:url(../test/grafiken/menue_links_gross.png); background-position:bottom; background-position:right; background-repeat:no-repeat; height:800px; width:80px; } .menuemitte{ display:block; background:url(../test/grafiken/menue_mitte_gross.png); background-position:top; background-position:left; background-repeat:no-repeat; width:80px; height:800px; } .menuemitte a:hover{ display:block; background:url(../test/grafiken/menue_mitte_gross.png); background-position:bottom; background-position:right; background-repeat:no-repeat; height:800px; width:80px; } .center { margin-left:240px; width:718px; height:792px; padding:4px; background-color:#FFFFFF; text-align:left; } .footer { clear:both; width:100%; height:50px; position:relative; background-color:#fda457; } |
Sponsored Links |
|
|||
lies mal bei little boxes etwas über den Stoff, den du anwendest.
Code:
a.menuerechts a:hover {} 1: Du hast kein Link in einem Link 2: Dies ist die Quizfrage: warum nicht? |
Sponsored Links |
|
|||
Ich mache den Thread noch mal auf, weil ich noch ein neues "Problemchen" habe und hier keine Lösung dazu gefunden habe.
overflow:auto Wird in diesem Fall im IE8 konkret dargstellt. Im FF leider nicht. Ich habe soweit mit der Breite der DIV-Container schon "gespielt", eine Lösung habe ich noch nicht gefunden. Hat jemand einen Tipp für mich. Ohne overflow wird alles richtig dargestellt. Besuchbar ist das ganze unter: Untitled Document HTML-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>Untitled Document</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <link href="main2.css" rel="stylesheet" type="text/css" /> <style type="text/css"> <!-- .style1 { font-size: 9; font-weight: bold; } --> </style> </head> <body> <center> <!-- haupt-frame --> <div class="frame"> <!-- haupt-frame ende --> <!-- header --> <div class="head"> <p class="headmenue"><a href="#">Team</a> <a href="#">Anfahrt</a> <a href="#">Kontakt</a> <a href="#">Impressum</a> </p> </div> <!-- header ende --> <!-- menue --> <div class="menue"> <a class="menuerechts" href="hoerstoerungen.htm"></a> <a class="menuelinks" href="#"></a> <a class="menuemitte" href="#"></a> </div> <!-- menue ende --> <!-- center --> <div class="center"> <div class="spalteoben">Systemische Hörtherapie für Kinder</div> <div class="spalterechts">Es gibt vielerlei Gründe und Ursachen, warum ein Kind die beschriebene Entwicklung nicht vollständig und kontinuierlich durchlaufen kann. Neben Erkrankungen der Ohren durch häufige Mittelohrentzündungen bis hin zur Schwerhörigkeit gibt es auch viele psycho-soziale Umstände, die ein Kind in der Entwicklung so stark beeinflussen und behindern können, dass eine normale und gesunde Hörreifung nicht möglich ist. <p></p> <img src="../test/grafiken/haus_200.jpg" style="float:left; margin-right:5px; padding-top:5px;" alt="Text?" />Die Systemische Hörtherapie gibt dem Kind die Möglichkeit, Hörerfahrung und damit Hörreifung nachzuholen und wichtige Entwicklungsschritte nachzuvollziehen. Während der Hörtherapie werden die Kinder von uns betreut und dürfen während des Hörens spielen, malen, puzzeln und basteln. Da die Systemische Hörtherapie eine entwicklungsorientierte Therapie ist, hat es sich als notwendig erwiesen, dass die Hörtherapie gemeinsam mit der Mutter durchgeführt wird. Die Mutter entspannt bei einem eigenen Therapieprogramm. Die Hörtherapie löst in den meisten Fällen Verhaltensänderungen des Kindes aus, insbesondere kann kurzzeitig auch eine mehr oder weniger starke Regressionsphase eintreten. Diese Veränderungen im Kind sollten auch für die Mutter aufgrund eigener Erfahrung mit der Therapie wahrnehmbar sein, so dass sie sich auf diese Phasen besser einstellen kann. Die begleitende Behandlung der Mutter ist kostenfrei</div> <div class="spaltelinks">»Kinder entwickeln sich in lebendiger Kommunikation mit ihrer Umwelt. Das Hören hat dabei eine ganz besondere Bedeutung. Schon im vorgeburtlichen Leben erlebt der Fötus Melodie und Rhythmus der mütterlichen Körpergeräusche. Die Stimme der Mutter tritt mit Klang und Rhythmus in den Vordergrund. Sie weckt Aufmerksamkeit und Interesse. Sie sensibilisiert für Sprache und weckt die Lust auf menschliche Kommunikation. So erwerben Kinder ein Fundament für frühe Interaktion und frühes Lernen. Neugeborene können Sprachlaute aus einer Vielzahl anderer Geräusche ausdifferenzieren. Sie erkennen die Mutter an deren Stimme und finden so Halt und Orientierung in einer neuen und in vielerlei Hinsicht fremden Welt. Es entsteht ein sprachlichklanglicher Dialog als tragendes Element der frühen Mutter-Kind-Beziehung. Die Kinder entdecken die Kraft ihrer Stimme und lernen, sich stimmlich-klanglich und später auch sprachlich mitzuteilen. In den folgenden Jahren entwickeln Kinder eine gute und differenzierte Hörwahrnehmung. Dies ist die wesentliche Grundlage zur Selbstregulation, Aufmerksamkeit, Sprachentwicklung und Lernen. Die Systemische Hörtherapie orientiert sich in ihrem Vorgehen an dieser natürlichen Entwicklung.«<h6>© Friedrich Huchting, 11/2004</h6></div> </div> <!-- center ende --> <!-- footer --> <div class="footer"></div> <!-- footer ende --> </div> <!-- ende alles --> </center> </body> </html> Code:
body { font-family:Verdana, Arial, Helvetica, sans-serif; font-size: 14px; font-style: normal; font-weight: normal; color: #000000; background-color:#d8d9db; background-repeat: no-repeat; white-space: normal; padding: 2px; } .kursiv { font-family:Verdana, Arial, Helvetica, sans-serif; font-size:13px; font-style:italic; color: #000; } .frame { padding:5px; width:968px; height:785px; background-color:#FFFFCC; } .head { width:958px; height:150px; background-color:#fda457; margin-left:-1px; margin-bottom:0px; border-right:9px solid #df9d34; border-top:5px solid #df9d34; } .headmenue { margin-top:120px; text-align:right; width:958px; height:20px; padding-top:3px; background-color:#ec9346; font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#FFFFFF; } .headmenue a { font-family:Verdana, Arial, Helvetica, sans-serif; color:#FFFFFF; font-size:12px; text-decoration:none; } .headmenue a:hover { text-decoration:underline; color:#FFFFFF; } .menue { float:left; width:240px; height:600px; } a.menuerechts { float:right; margin:0; padding:0; display:block; background-image:url(../test/grafiken/menue_rechts_gross.png); border-bottom:5px solid #df9d34; background-position:top; background-position:left; background-repeat:no-repeat; height:598px; width:80px; } a.menuerechts:hover { float:right; margin:0; padding:0; display:block; background-image:url(../test/grafiken/menue_rechts_gross.png); background-position:bottom; background-position:right; background-repeat:no-repeat; border-bottom:5px solid #df9d34; height:598px; width:80px; } a.menuelinks{ float:left; display:block; background-image:url(../test/grafiken/menue_links_gross.png); background-position:top; background-position:left; background-repeat:no-repeat; border-bottom:5px solid #df9d34; height:598px; width:80px; } a.menuelinks:hover{ float:left; display:block; background-image:url(../test/grafiken/menue_links_gross.png); background-position:bottom; background-position:right; background-repeat:no-repeat; border-bottom:5px solid #df9d34; height:598px; width:80px; } a.menuemitte{ display:block; background:url(../test/grafiken/menue_mitte_gross.png); background-position:top; background-position:left; background-repeat:no-repeat; width:80px; border-bottom:5px solid #df9d34; height:598px; } .menuemitte:hover{ display:block; background:url(../test/grafiken/menue_mitte_gross.png); background-position:bottom; background-position:right; background-repeat:no-repeat; border-bottom:5px solid #df9d34; height:598px; width:80px; } .center { margin-left:240px; margin-bottom:5px; margin-right:5px; width:704px; height:590px; border-right:9px solid #df9d34; border-bottom:5px solid #df9d34; padding-left:10px; padding-bottom:4px; padding-right:4px; padding-top:4px; background-color:#FFFFCC; background-image:url(../grafiken/kind_klein.png); background-repeat:no-repeat; background-position:center; text-align:left; overflow:auto; overflow-x:hidden; } .spalteoben { font-family:Verdana, Arial, Helvetica, sans-serif; font-size:18px; font-weight:bold; width:694px; height:25px; text-align:left; padding-bottom:10px; padding-top:8px; } .spalterechts { float:right; margin:0; padding:0; display:block; height:540px; width:330px; padding-left:5px; } .spaltelinks { float:left; display:block; height:540px; width:330px; } .spalteunten { font-family:Verdana, Arial, Helvetica, sans-serif; font-size:10px; font-style:italic; float:right; text-align:right; height:12px; padding-bottom:3px; padding-right:6px; width:345px; } .footer { clear:both; width:100%; height:20px; position:relative; background-color:#fda457; } Geändert von kmarcusb (20.04.2010 um 10:10 Uhr) |
|
|||
Das ist unklar spezifiziert, was da neben dem Float passiert bei dem Container mit dem overflow und dem margin. Muss man mit leben.
Du solltest auf overflow:auto verzichten, zwei scrollbars sehen ohnehin peinlich aus. Verzichte auf alle fixen height-Angaben in den Containern, und lass die Seite nach unten so fließen, wie sie will. Die gleichhohe Spalten-Illusion erhältst du mit Faux Columns. Und nimm endlich den <center> weg. |
|
|||
Hallo Ingo,
danke für Deinen Hinweis. Ich habe es zwischenzeitlich sogar doch noch hinbekommen. Der .center musste doch noch von der Größe angepasst werden. Jetzt klappt es. Allerdings hast Du mit dem Rat, bezüglich der zwei Scrollbalken, sicherlich recht. Ich muss nur mal schauen wie ich das mit den Menübalken links hinbekomme. Hier habe ich ja, wie Du siehst, größere Grafiken genutzt. Die Balken sollten, aus optischen Gründen, unten abschließen, und das halt mit dem Hoover-Effekt. Oder, ich mache das Ganze weniger hoch, so dass es unter 1024x768 PX als minimal Auflösung ohne Balken auskommt. Einen Tod muss man sterben...?? Der <center> kommt noch weg Danke und Gruß Marcus |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
CSS nachladen on demand | kampfgnom | Javascript & Ajax | 5 | 13.05.2009 22:55 |
[AJAX] Styles mit dem IE nachladen | Calamari | Javascript & Ajax | 18 | 04.01.2009 13:17 |
Content nachladen statt mit PHP | kochi_rulez | Javascript & Ajax | 3 | 10.11.2008 20:14 |
Seite nachladen | Xizzed | Javascript & Ajax | 5 | 04.02.2008 22:32 |
Schriften vom Server nachladen | gs | CSS | 1 | 16.11.2005 21:19 |