zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Hovermenue ohne nachladen

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 15.04.2010, 10:00
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 15.04.2010
Ort: Frankfurt
Beiträge: 25
kmarcusb befindet sich auf einem aufstrebenden Ast
Standard 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;
}
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 15.04.2010, 21:00
#
XHTMLforum-Kenner
 
Registriert seit: 30.06.2005
Ort: Hamburg
Beiträge: 2.092
IChao ist ein sehr geschätzer MenschIChao ist ein sehr geschätzer MenschIChao ist ein sehr geschätzer MenschIChao ist ein sehr geschätzer Mensch
Standard

lies mal bei little boxes etwas über den Stoff, den du anwendest.

Code:
a.menuerechts a:hover {}
ist ein Selektor, der kein Element bei dir anwählt (1.), und auch nicht anwählen könnte (2.).

1: Du hast kein Link in einem Link
2: Dies ist die Quizfrage: warum nicht?
__________________
Ingo Chao

Buch: Fortgeschrittene CSS-Techniken
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 15.04.2010, 22:28
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 15.04.2010
Ort: Frankfurt
Beiträge: 25
kmarcusb befindet sich auf einem aufstrebenden Ast
Standard

Okay, okay, okay.. habe den Fehler gefunden.

War ein Denkfehler von mir. Danke für die Hilfe.
Mit Zitat antworten
  #4 (permalink)  
Alt 20.04.2010, 00:56
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 15.04.2010
Ort: Frankfurt
Beiträge: 25
kmarcusb befindet sich auf einem aufstrebenden Ast
Standard

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> &nbsp;&nbsp;&nbsp;<a href="#">Anfahrt</a> &nbsp;&nbsp;&nbsp;<a href="#">Kontakt</a> &nbsp;&nbsp;&nbsp;<a href="#">Impressum</a> &nbsp; &nbsp; &nbsp; &nbsp;</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>&copy; 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)
Mit Zitat antworten
  #5 (permalink)  
Alt 21.04.2010, 00:03
#
XHTMLforum-Kenner
 
Registriert seit: 30.06.2005
Ort: Hamburg
Beiträge: 2.092
IChao ist ein sehr geschätzer MenschIChao ist ein sehr geschätzer MenschIChao ist ein sehr geschätzer MenschIChao ist ein sehr geschätzer Mensch
Standard

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.
__________________
Ingo Chao

Buch: Fortgeschrittene CSS-Techniken
Mit Zitat antworten
  #6 (permalink)  
Alt 21.04.2010, 11:46
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 15.04.2010
Ort: Frankfurt
Beiträge: 25
kmarcusb befindet sich auf einem aufstrebenden Ast
Standard

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
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ä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


Alle Zeitangaben in WEZ +2. Es ist jetzt 17:04 Uhr.