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

CSS - Galerieprobleme im IE

Mitglied: ooAlbert

ooAlbert (Level 1) - Jetzt verbinden

11.05.2010 um 18:38 Uhr, 3137 Aufrufe, 3 Kommentare

Hallo,

ich hab möchte ganz gern in einer Webseite eine kleine Galerie haben die nur mit CSS funktioniert. Nach einigem Suchen hab ich unteranderem das gefunden: http://www.dynamicdrive.com/style/cs...-image-viewer/

Ich muss dazusagen, das meine Thumbs in einem Block angeordnet sind, so das das Hover-bild über den anderen Thumbs liegen würde. Im FF3 funktioniert das auch alelws ganz gut aber im IE8 sind die Thumbs immer über dem Hover-Bild. Das Attribut "Z-Index" hat nichts bewirken können.

Das Hoverbild liegt nur dann über allen Ebenen, wenn man das Thumb im IE klickt.

Kann man das irgendwie umgehen oder muss für den IE irgendwas speziell angepasst werden?

mfg
Mitglied: mrtux
11.05.2010 um 19:12 Uhr
Hi !

Was Du benötigst ist eine so genannte Browserweiche. Vielleicht wäre es besser, wenn Du dich in das Thema CSS einarbeitest. Wie die unterschiedlichen Browser bei CSS reagieren und wo die Unterschiede genau liegen, kannst Du hier nachlesen. Auf dieser Seite gibt es auch Tutorials zu dem Thema, die (meiner Meinung nach) sehr hilfreich sind.

mrtux
Bitte warten ..
Mitglied: knut4linux
11.05.2010 um 20:17 Uhr
Mahlzeit,

ja, der IE8. Ich liebe Ihn. Ich habe auch schon so einige Probleme mit ihm gehabt. Aber egal. Was ich vermute:

- problem mit nem DIV Container
- im Style das " ; " nach einem parameter vergessen (mag der IE8 nicht)
- wie definierst du die Position des Hover-Bildes (fixe, relative, absolute...?)


Gruß, Knut
Bitte warten ..
Mitglied: ooAlbert
12.05.2010 um 12:38 Uhr
Hi,

ich kopier mal das CSS hierhin, das ist auch soweit noch das, was im vorherigen Link steht:

01.
  
02.
#galerie { 
03.
position:absolute; 
04.
top:155px; 
05.
left:300px; 
06.
width:425px; 
07.
height:290px; 
08.
09.
 
10.
.thumbnail{ 
11.
position: relative; 
12.
z-index: 1; 
13.
float:left; 
14.
15.
 
16.
.thumbnail:hover{ 
17.
background-color: transparent; 
18.
z-index: 50; 
19.
20.
 
21.
.thumbnail span{ /*CSS for enlarged image*/ 
22.
position: absolute; 
23.
background-color: lightyellow; 
24.
padding: 5px; 
25.
left: -1000px; 
26.
border: 1px dashed gray; 
27.
visibility: hidden; 
28.
color: black; 
29.
text-decoration: none; 
30.
31.
 
32.
.thumbnail span img{ /*CSS for enlarged image*/ 
33.
border-width: 0; 
34.
padding: 2px; 
35.
36.
 
37.
.thumbnail:hover span{ /*CSS for enlarged image on hover*/ 
38.
visibility: visible; 
39.
top: 0; 
40.
left: 60px; /*position where enlarged image should offset horizontally */ 
41.
}
Das HTML sieht so aus:
01.
	<div ID="galerie"> 
02.
		Text 
03.
		<a class="thumbnail" href="#thumb"> 
04.
			<img src="galerie/thumb/t1.jpg" border="0" /> 
05.
				<span> 
06.
					<img src="galerie/b1.jpg" /><br /> 
07.
						Text 1 
08.
				</span> 
09.
		</a> 
10.
		<a class="thumbnail" href="#thumb"> 
11.
			<img src="galerie/thumb/t2.jpg" border="0" /> 
12.
				<span> 
13.
					<img src="galerie/b2.jpg" /><br /> 
14.
						Text 1 
15.
				</span> 
16.
		</a> 
17.
	</div>
Die Bilder sind wie gesagt nebeneinander bis die Grenze des DIV erreicht wird und brechen dann auf die nächste Zeile um, das es letztendlich aussieht wie ein Bilder-Block

Ich hab grad mal in einer VM den IE7 probiert und da erscheint alles wie gewünscht,demnach scheint das wirklich ein IE8 Problem zu sein wobei ich nicht verstehe wieso, oder liegt das vielleicht an Windows7 64Bit?

mfg
Bitte warten ..
Ähnliche Inhalte
HTML

CSS 3 - "viewport" Kein gültiges CSS?

gelöst Frage von ukodusHTML2 Kommentare

Hey Leute, gerade hab ich den Code (@viewport { }) durch den CSS-Überprüfer ) durchgejagt und er entgegnete: "Einlese-Fehler ...

CSS

CSS Problem

gelöst Frage von michi1983CSS2 Kommentare

Hallo Admins, eventuell kann mir ja hier einer weiterhelfen, ich stehe offenbar auf der Leitung. Auf folgender Website (die ...

CSS

Hilfe bei CSS

gelöst Frage von emeriksCSS8 Kommentare

Hi, vorne weg: Bin in HTML und CSS nicht so die Leuchte. Ich will bloß ein paar Reports erstellen ...

CSS

CSS Verständnisproblem

gelöst Frage von 127944CSS14 Kommentare

Hallo liebe CSS-Gurus, ich habe diesen Code 1:1 übernommen. (ich versuche noch immer mich in CSS einzuarbeiten) Was kann ...

Neue Wissensbeiträge
Administrator.de Feedback
Update der Seite: Alles zentriert
Information von Frank vor 34 MinutenAdministrator.de Feedback4 Kommentare

Hallo User, die größte Änderung von Release 5.8 ist das Zentrieren der Webseite (auf großen Bildschirmen) und ein "Welcome"-Teaser ...

Humor (lol)

WhatsApp-Nachrichten endlich auch per Bluetooth versendbar

Information von BassFishFox vor 17 StundenHumor (lol)4 Kommentare

Genau darauf habe ich gewartet! ;-) Der beliebte Messaging-Dienst WhatsApp erhält eine praktische neue Funktion: Ab dem nächsten Update ...

Google Android

Googles "Android Enterprise Recommended" für Unternehmen

Information von kgborn vor 1 TagGoogle Android3 Kommentare

Hier eine Information, die für Administratoren und Verantwortliche in Unternehmen, die für die Beschaffung und das Rollout von Android-Geräten ...

Sicherheit

Intel gibt neue Spectre V2-Microcode-Updates frei (20.02.2018)

Information von kgborn vor 1 TagSicherheit

Intel hat zum 20. Februar 2018 weitere Microcode-Updates für OEMs freigegeben, um Systeme mit neueren Prozessoren gegen die Spectre ...

Heiß diskutierte Inhalte
Server-Hardware
Welche Rolle spielt Design bei Enterprise IT Hardware?
Frage von ApolloXServer-Hardware17 Kommentare

Ich arbeite für einen internationalen Elektronikhersteller in der Forschung und meine Aufgabe ist es, Feedback von Nutzern in Hinsicht ...

Windows Netzwerk
WSUS4 und Windows 10 Updates automatisch installieren
Frage von sammy65Windows Netzwerk15 Kommentare

Hallo miteinander, ich habe mit einen neuen WSUS Server aufgesetzt Server 2016 darauf einen aktuellen WSUS. Grund, wir stellen ...

Switche und Hubs
Cisco SG350X-48 AdminIP in anderes VLAN
Frage von lcer00Switche und Hubs14 Kommentare

Hallo zusammen, ich habe ein Problem mir einem Cisco SG350X-48 bei der Erstinstallation wurde eine IP 192.168.0.254 (Default VLAN ...

Speicherkarten
Vergessliche USB-Sticks?
Frage von hanheikSpeicherkarten14 Kommentare

Ich habe in den letzten Tagen 500 USB-Sticks mit Bilddateien bespielt. Obwohl ich die Dateien mit größter Sorgfalt kopiert ...