Top-Themen

Aktuelle Themen (A bis Z)

Administrator.de FeedbackApache ServerAppleAssemblerAudioAusbildungAuslandBackupBasicBatch & ShellBenchmarksBibliotheken & ToolkitsBlogsCloud-DiensteClusterCMSCPU, RAM, MainboardsCSSC und C++DatenbankenDatenschutzDebianDigitiales FernsehenDNSDrucker und ScannerDSL, VDSLE-BooksE-BusinessE-MailEntwicklungErkennung und -AbwehrExchange ServerFestplatten, SSD, RaidFirewallFlatratesGoogle AndroidGrafikGrafikkarten & MonitoreGroupwareHardwareHosting & HousingHTMLHumor (lol)Hyper-VIconsIDE & EditorenInformationsdiensteInstallationInstant MessagingInternetInternet DomäneniOSISDN & AnaloganschlüsseiTunesJavaJavaScriptKiXtartKVMLAN, WAN, WirelessLinuxLinux DesktopLinux NetzwerkLinux ToolsLinux UserverwaltungLizenzierungMac OS XMicrosoftMicrosoft OfficeMikroTik RouterOSMonitoringMultimediaMultimedia & ZubehörNetzwerkeNetzwerkgrundlagenNetzwerkmanagementNetzwerkprotokolleNotebook & ZubehörNovell NetwareOff TopicOpenOffice, LibreOfficeOutlook & MailPapierkorbPascal und DelphiPeripheriegerätePerlPHPPythonRechtliche FragenRedHat, CentOS, FedoraRouter & RoutingSambaSAN, NAS, DASSchriftartenSchulung & TrainingSEOServerServer-HardwareSicherheitSicherheits-ToolsSicherheitsgrundlagenSolarisSonstige SystemeSoziale NetzwerkeSpeicherkartenStudentenjobs & PraktikumSuche ProjektpartnerSuseSwitche und HubsTipps & TricksTK-Netze & GeräteUbuntuUMTS, EDGE & GPRSUtilitiesVB for ApplicationsVerschlüsselung & ZertifikateVideo & StreamingViren und TrojanerVirtualisierungVisual StudioVmwareVoice over IPWebbrowserWebentwicklungWeiterbildungWindows 7Windows 8Windows 10Windows InstallationWindows MobileWindows NetzwerkWindows ServerWindows SystemdateienWindows ToolsWindows UpdateWindows UserverwaltungWindows VistaWindows XPXenserverXMLZusammenarbeit
GELÖST

HTML bzw. CSS Mouseover-Menü verschiebt sich bei Firefox-Google Chrome - bei IE alles OK

Frage Entwicklung CSS

Mitglied: thaddaeus93

thaddaeus93 (Level 1) - Jetzt verbinden

17.08.2014, aktualisiert 21:44 Uhr, 3147 Aufrufe, 3 Kommentare

Hallo Zusammen,

ich bin gerade dabei eine kleine Homepage für unseren Ort zu erstellen.

Leider habe ich ein Problem mit dem Mouse-Over-Menü. Wenn ich mit der Maus über die zweite Zelle ("Der Ort") fahre, verschiebt sich im Google Chrome bzw. Firefox das komplette Menü, irgendwie in zwei Zeilen:

Mouseover im Menü:
3b7a00f8437f2d54036e1d3c3bbbc049 - Klicke auf das Bild, um es zu vergrößern

Bei der zweiten oder dritten Zelle dann das:
bd4b408daf3341b8eca75acac4de1678 - Klicke auf das Bild, um es zu vergrößern

Im Internet Explorer ist das ganze ok (getestet mit Version 11).

Ich hoffe des Rätsels-Lösung ist nicht weit


index.html:

01.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
02.
<html xmlns="http://www.w3.org/1999/xhtml"> 
03.
 
04.
<head> 
05.
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" /> 
06.
<title></title> 
07.
<link href="style.css" type="text/css" rel="stylesheet" /> 
08.
</head> 
09.
 
10.
<body> 
11.
<table width="70%" align="center" cellpadding="5" cellspacing="0" border="0"> 
12.
<tr><td rowspan="2" style="background-color: #FFFFFF;"><img src="logo_wur.jpg" alt="Ortxy.net" /></td><td width="50%"></td><td style="background-color: #365F91;">&nbsp;<img src="zoom-2.ico" alt="Suche" />&nbsp;&nbsp;<input style="font-family: 'Open Sans Condensed Light'; font-size: 10pt; width: 180px;" value="&nbsp;Suche" type="text" name="search" />&nbsp;</td></tr> 
13.
<tr><td><!-- LEER --></td><td></td><td height="90%"><br /><br /></td></tr> 
14.
</table> 
15.
<br /> 
16.
<table class="table_blau" width="70%" align="center" cellpadding="10" cellspacing="0"> 
17.
<tr> 
18.
<td></td> 
19.
<td onmouseover="this.className='table_blau_cell_hover';" onmouseout="this.className='table_blau_cell';" onclick="window.location.href = 'index.php';">Aktuelles/News</td> 
20.
<td onmouseover="this.className='table_blau_cell_hover';" onmouseout="this.className='table_blau_cell';" onclick="window.location.href = 'index.php';">Der Ort</td> 
21.
<td onmouseover="this.className='table_blau_cell_hover';" onmouseout="this.className='table_blau_cell';" onclick="window.location.href = 'index.php';">Freiwillige Feuerwehr</td> 
22.
<td onmouseover="this.className='table_blau_cell_hover';" onmouseout="this.className='table_blau_cell';" onclick="window.location.href = 'index.php';">Dorfverschönerungsverein</td> 
23.
<td></td> 
24.
 
25.
</tr> 
26.
</table> 
27.
<br /> 
28.
<table class="table_conent" cellpadding="10" cellspacing="0" align="center" width="70%"> 
29.
<tr><td>Test124dsfksdlfj<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /></td></tr> 
30.
</table> 
31.
 
32.
<!-- Beginn Footer --> 
33.
<br /> 
34.
<table class="table_footer" width="70%" align="center" cellpadding="7" cellspacing="0"> 
35.
<tr><td>&copy; 2014 Ortxy.net</td><td width="60%"></td> 
36.
<td onmouseover="this.className='table_footer_cell_hover';" onmouseout="this.className='table_footer_cell';" onclick="window.location.href = 'index.php';">Sitemap</td> 
37.
<td onmouseover="this.className='table_footer_cell_hover';" onmouseout="this.className='table_footer_cell';" onclick="window.location.href = 'index.php';">Impressum</td> 
38.
<td onmouseover="this.className='table_footer_cell_hover';" onmouseout="this.className='table_footer_cell';" onclick="window.location.href = 'index.php';">Datenschutz</td> 
39.
<td width="1%"></td></tr> 
40.
</table> 
41.
<br /> 
42.
<!-- ENDE --> 
43.
 
44.
 
45.
</body> 
46.
 
47.
</html>
style.css
01.
body{ 
02.
	margin: 0px; 
03.
	background-image:url('frontpicture_full.jpg'); 
04.
	background-repeat: no-repeat; 
05.
	background-size: 100%; 
06.
	background-attachment: fixed; 
07.
08.
.table_conent 
09.
10.
 
11.
	background-image: url('70proz.png'); 
12.
	 
13.
14.
.table_blau 
15.
16.
	background-color: #365F91; 
17.
	color: #FFFFFF; 
18.
	font-family: "Open Sans Condensed"; 
19.
	font-size: 13pt; 
20.
	text-align: center; 
21.
22.
.table_blau_cell 
23.
24.
	background-color: #365F91; 
25.
	color: #FFFFFF; 
26.
	font-family: "Open Sans Condensed"; 
27.
	font-size: 13pt; 
28.
	text-align: center; 
29.
	display: block; 
30.
31.
.table_blau_cell_hover 
32.
33.
	background-color: #ffffff; 
34.
	color: #365F91; 
35.
	font-family: "Open Sans Condensed"; 
36.
	font-size: 13pt; 
37.
	text-align: center; 
38.
	cursor: pointer; 
39.
40.
.table_footer 
41.
42.
	background-color: #365F91; 
43.
	color: #FFFFFF; 
44.
	font-family: "Open Sans Condensed Light"; 
45.
	font-size: 11pt; 
46.
	text-align:center; 
47.
48.
.table_footer_cell 
49.
50.
	background-color: #365F91; 
51.
	color: #FFFFFF; 
52.
	font-family: "Open Sans Condensed Light"; 
53.
	font-size: 11pt; 
54.
	text-align:center; 
55.
56.
.table_footer_cell_hover 
57.
58.
	background-color: #ffffff; 
59.
	color: #365F91; 
60.
	font-family: "Open Sans Condensed Light"; 
61.
	font-size: 11pt; 
62.
	cursor: pointer; 
63.
	text-align:center; 
64.
65.
 
66.
 
67.
 
68.
 
69.
.link 
70.
71.
	text-decoration: none; 
72.
	color: inherit; 
73.
74.
 
Mitglied: Arano
LÖSUNG 17.08.2014, aktualisiert um 21:44 Uhr
Hallo thaddaeus.

Ich könnte und würde dir jetzt viel lieber 100 andere Dinge empfehlen aber... jeder muss mal klein anfangen
Aber die Tabellen so zum Designen zu verwenden ist mittlerweile schon lange überholt und auch den MousOver-Effekt per Javascript umzusetzen tut absolut nicht not.
Wegen beiden, schau dir unbeding CSS css4you an !

Wie auch immer. Wg. deines Problems kann ich nur vermuten, habe z.Z. nur mein Tablet und kann es deshalb nicht ausprobieren.
Kurz vermute ich das es an den CSS-Klassen unterschieden liegt !
Schaut dir mal die beiden Klassen table_blau_cell und table_blau_cell_hover an.
Dadurch das du die eine Klasse bei einem MouseOver komplett durch eine andere ersetzt, haben die Eigenschaften der Ersten keine Wirkung mehr.
Beim MouseOver geht also das display:block verloren und sorg so für eine andere Darstellung.
Daher würde ich jetzt eher vermuten das FF und GC sich richtig verhalten und der IE es anders macht.


Schönen Sonntag noch
~Arano
*=HTML und CSS sind keine Programmiersprachen sondern beschreiben die Bedeutung und das Aussehen von Elementen ...oder so ähnlich
Bitte warten ..
Mitglied: thaddaeus93
17.08.2014 um 21:47 Uhr
Hallo Arano,

vielen Dank für die schnelle Antwort

Ich habe jetzt den "Fehler" gefunden - es war das display:block. Nachdem ich die Zeile im CSS-File entfernt hatte, gab es den "Fehler" nicht mehr. Im Firefox und Google Chrome eine saubere Darstellung.

Aber du hast natürlich recht, das sollte nicht mehr mit Javascript gehen - geht glaube ich auch mit CSS direkt.

Auch noch schönen Sonntag!
Bitte warten ..
Mitglied: d4shoerncheN
19.08.2014 um 08:54 Uhr
Guten Morgen,

auch ich würde dir empfehlen auf diese "alte" Programmierung zu verzichten. Investiere dort lieber Zeit in die etwas moderneren Vorgehensweisen. Mit Tabellen werdet Ihr auf Dauer keine Freude haben und auch die Suchmaschinen sehen sowas nicht unbedingt gerne.

Schau dir am besten einfach die Grundlagen von HTML5 und CSS3 an, da die meisten Funktionen mittlerweile von allen Browser gekannt werden. Du wirst sehen, dass dadurch die Umsetzung auch viel einfacher ist.

Grundsätzlich setz deine Bereiche in <div>-Container und erstelle deine Navigation als <ul>.

Gruß
Toni
Bitte warten ..
Ähnliche Inhalte
JavaScript
Google Chrome Erweiterungen für Firefox portieren, ist das möglich?
Frage von D1Ck3nJavaScript1 Kommentar

Guten Tag, ich habe letztens eine nette Chrome Erweiterung gefunden, die ich gerne auch im Firefox nutzen würde. Leider ...

CSS
CSS: Menü ein- und ausblenden
gelöst Frage von honeybeeCSS6 Kommentare

Hallo, ich erstelle gerade ein Navigationsmenü mit CSS. Leider kann ich das Untermenü nicht ein- und ausblenden. Habe ich ...

Webbrowser
Google Chrome lädt Google Dienste nicht
Frage von r3volutionxxxWebbrowser3 Kommentare

Hallo Ich habe ein kleines Problem Zuhause benutze ich Google Chrome, wobei die Google Dienste nicht richtig funktionieren. OS: ...

Internet
Google Chrome - Access Denied
Frage von Grave111Internet4 Kommentare

Hallo zusammen, ich hätte mal eine Frage bezüglich dem Chrome Browser. Ich möchte auf ein WebIf eines Gerätes bei ...

Neue Wissensbeiträge
Windows 10

Windows 10 Hello-Anmeldung per Foto ausgehebelt

Tipp von kgborn vor 3 StundenWindows 10

Windows Hello ist eine Funktion, um sich per Fingerabdruck-, Gesichts- oder Iriserkennung bei Windows 10-Geräten anzumelden (siehe), setzt aber ...

Perl

Perl hat heute Geburtstag: 30 Jahre Perl: Lange Gesichter zum Geburtstag

Information von Penny.Cilin vor 11 StundenPerl2 Kommentare

Hallo, auch wenn es wenige wissen und noch weniger Leute es nutzen. Perl hat heute Geburtstag. 30 Jahre Perl ...

Sicherheit

Blackberry stirbt - Keine Updates für Priv mehr

Tipp von certifiedit.net vor 12 StundenSicherheit1 Kommentar

Blackberry wird zu einer 08/15 Firma und geht wohl mehr und mehr den Weg, den HTC schon ging. Von ...

Windows 10

Autsch: Microsoft bündelt Windows 10 mit unsicherer Passwort-Manager-App

Tipp von kgborn vor 2 TagenWindows 1012 Kommentare

Unter Microsofts Windows 10 haben Endbenutzer keine Kontrolle mehr, was Microsoft an Apps auf dem Betriebssystem installiert (die Windows ...

Heiß diskutierte Inhalte
Windows Server
SCCM 2016: PXE Boot des Clients schlägt fehl
Frage von gabeBUWindows Server23 Kommentare

Hallo Zusammen Ich habe eine Testumgebung erstellt um über SCCM 2016 einen virtuellen Client aufzusetzen. Folgende Maschinen habe ich ...

Netzwerkgrundlagen
Belibiges Teilnetz einer Subnetzmaske rausfinden?
gelöst Frage von CenuzeNetzwerkgrundlagen19 Kommentare

Wundervollen Gutentag, mittlerweile kann ich Subnetting so einigermaßen, aber ein Problem habe ich noch. Netzwerkadresse und Boradcast errechnen ist ...

LAN, WAN, Wireless
WLAN Reichweite erhöhen mit neuer Antenne
gelöst Frage von gdconsultLAN, WAN, Wireless12 Kommentare

Hallo, ich besitze einen TL-WN722N USB-WLAN Dongle mit einer richtigen Antenne. Ich frage mich jetzt ob man die Reichweite ...

Exchange Server
Exchange empfängt Emails - Kann aber keine Senden
gelöst Frage von niklasschaeferExchange Server11 Kommentare

Hallo, ich stehe gerade bei mir zuhause vor folgender Problemstellung. Gegeben sind 2x Hyper-V Host mit Windows Server 2016 ...