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

Überlappende A-Container mit CSS

Frage Entwicklung CSS

Mitglied: ChrFriedel

ChrFriedel (Level 1) - Jetzt verbinden

12.12.2012, aktualisiert 17:09 Uhr, 3929 Aufrufe, 4 Kommentare

Hallo zusammen,

Ich arbeite aktuell an einer kleinen Webseite und bin auf ein Problem gestossen das ich nicht gelöst bekomme. Ich habe das ganze mal auf ein essentielles Bsp heruntergebrochen das ich hier am Ende einfüge.

Erreichen würde ich in diesem Bsp sehr gern das die "Google-Boxen" bei einem MouseOver größer werden aber dabei nicht die umliegenden Boxen verschieben sondern überlagern. Alles was ich zum Thema überlagern gefunden habe läuft aber immer auf eine absolute Positionierung hinaus die mir nichts nützt da sich die Boxen dynamisch an die Seitenbreite anpassen und beim Vergrößern an ihrer aktuellen Stelle vergrößert werden sollen.

Wenn ich was vergessen habe bitte einfach fragen. Ansonsten erstmal vielen Dank fürs durchlesen und drüber nachdenken.

Grüße

Hier nun das Beispiel:

01.
 
02.
<html> 
03.
	<head> 
04.
 
05.
		<style> 
06.
		 
07.
		 
08.
#SP-Wrapper{ 
09.
	 
10.
	padding:20px; 
11.
	 
12.
	min-height:650px; 
13.
	width:100%; 
14.
 
15.
	border:1px solid blue; 
16.
	margin-bottom:0px; 
17.
	 
18.
19.
 
20.
 
21.
#sp-left{ 
22.
 
23.
	margin-top:150px; 
24.
	width:30%; 
25.
	float:left;	 
26.
	border:1px solid red; 
27.
	 
28.
	font-size:10px; 
29.
	 
30.
31.
 
32.
#sp-right{ 
33.
 
34.
	margin-top:150px; 
35.
	width:30%; 
36.
	float:right; 
37.
	border:1px solid green; 
38.
				 
39.
40.
 
41.
.sp-middle{ 
42.
 
43.
	display:block; 
44.
	margin-right:10%; 
45.
	margin-left:10%; 
46.
	margin-top:1%; 
47.
	 
48.
	border:1px solid black; 
49.
	 
50.
	height:129px; 
51.
			 
52.
53.
 
54.
.Box { 
55.
 
56.
	background:white; 
57.
	color:black; 
58.
	 
59.
	margin:1%; 
60.
	float:left; 
61.
	opacity:0.75; 
62.
	padding-top:15%; 
63.
	 
64.
	text-decoration:none; 
65.
	text-align:center; 
66.
	font-family:arial; 
67.
	 
68.
	font-weight:bold; 
69.
	 
70.
	display:inline; 
71.
	 
72.
	border:1px solid silver; 
73.
			 
74.
75.
 
76.
.Box:hover{ 
77.
 
78.
	opacity:1; 
79.
	color:orange !important; 
80.
	border:1px solid orange; 
81.
					 
82.
83.
 
84.
 
85.
.Small{ 
86.
 
87.
	width:20%; 
88.
		 
89.
90.
 
91.
.Small:hover{ 
92.
 
93.
	z-index:100; 
94.
	width:30%; 
95.
	padding-top:20%; 
96.
	margin-left:0; 
97.
	margin-right:0; 
98.
		 
99.
100.
 
101.
.Great{ 
102.
 
103.
	width:42%; 
104.
	 
105.
106.
 
107.
		 
108.
		</style> 
109.
 
110.
	</head> 
111.
	<body> 
112.
 
113.
	<div id="SP-Wrapper"> 
114.
		<div id="sp-left"> 
115.
			<a class="Small Box" href="http://www.google.de/">Google</a> 
116.
			<a class="Great Box" href="http://www.google.de/">Google</a> 
117.
			<a class="Small Box" href="http://www.google.de/">Google</a> 
118.
			<a class="Great Box" href="http://www.google.de/">Google</a> 
119.
			<a class="Small Box" href="http://www.google.de/">Google</a> 
120.
			<a class="Small Box" href="http://www.google.de/">Google</a> 
121.
			<a class="Small Box" href="http://www.google.de/">Google</a> 
122.
			<a class="Small Box" href="http://www.google.de/">Google</a> 
123.
			<a class="Great Box" href="http://www.google.de/">Google</a> 
124.
		</div> 
125.
		<div id="sp-right"> 
126.
			<a class="Small Box" href="http://www.google.de/">Google</a> 
127.
			<a class="Great Box" href="http://www.google.de/">Google</a> 
128.
			<a class="Small Box" href="http://www.google.de/">Google</a> 
129.
			<a class="Great Box" href="http://www.google.de/">Google</a> 
130.
			<a class="Small Box" href="http://www.google.de/">Google</a> 
131.
			<a class="Small Box" href="http://www.google.de/">Google</a> 
132.
			<a class="Small Box" href="http://www.google.de/">Google</a> 
133.
			<a class="Small Box" href="http://www.google.de/">Google</a> 
134.
			<a class="Great Box" href="http://www.google.de/">Google</a> 
135.
		</div> 
136.
		<div class="sp-middle"></div> 
137.
		</div> 
138.
	 
139.
	</body> 
140.
</html> 
141.
 

Edit:
P.S. Mir ist klar das "Great" eigentlich falsch ist. Aber es sind wie auch bei Small 5 Buchstaben und somit bleibt der Code besser lesbar ;)

Mitglied: Claclaq
12.12.2012, aktualisiert um 19:42 Uhr
Hallo ChrFriedel

Mit position und zur Überlagerung mit z-index arbeiten, da führt wohl kein Weg vorbei mit CSS.

Gruss
Cq
Bitte warten ..
Mitglied: bytecounter
12.12.2012 um 21:02 Uhr
Hallo,

da schließ ich mich Claqlaq an, das geht nur mit position und z-index. Diesen ggf. mit in den hover nehmen.

vg
Bitte warten ..
Mitglied: ChrFriedel
13.12.2012, aktualisiert um 09:58 Uhr
Vielen Dank für die Antworten!

Mmmh... aber damit könnte ich doch dann meinen Wunsch nicht umsetzen oder verstehe ich es gerade nur nicht. Dadurch das die Container eine dynamische Größe je nach Seitenbreite einnehmen und sich außerdem nicht immer an der exakt gleichen Stelle befinden bin ich doch machtlos was das ermitteln der Koordinaten für position betrifft.

Dabei hab ich mir das so einfach vorgestellt... bleib an deiner Stelle, werde größer und ignoriere alles um dich herum indem du dich drüber legst... klingt doch einfach ;)
Bitte warten ..
Mitglied: ChrFriedel
13.12.2012 um 14:24 Uhr
So nun habe ich doch noch eine Lösung gefunden die zwar nicht ganz so schön ist aber dennoch gut funktioniert. Gelöst habe ich es mit einem weiteren DIV unterhalb des A-Elementes welcher vorerst unsichtbar ist und nur beim MouseOver einer Box angezeigt wird. Sieht insgesamt folgendermaßen aus falls es noch jemand braucht:

01.
<html> 
02.
	<head> 
03.
 
04.
		<style> 
05.
		 
06.
		 
07.
#SP-Wrapper{ 
08.
	 
09.
	padding:20px; 
10.
	 
11.
	min-height:650px; 
12.
	width:100%; 
13.
 
14.
	border:1px solid blue; 
15.
	margin-bottom:0px; 
16.
		 
17.
18.
 
19.
 
20.
#sp-left{ 
21.
 
22.
	margin-top:150px; 
23.
	width:30%; 
24.
	float:left;	 
25.
	border:1px solid red; 
26.
	 
27.
	font-size:10px; 
28.
	 
29.
	position:relative; 
30.
	 
31.
32.
 
33.
#sp-right{ 
34.
 
35.
	margin-top:150px; 
36.
	width:30%; 
37.
	float:right; 
38.
	border:1px solid green; 
39.
	font-size:10px; 
40.
	 
41.
	position:relative; 
42.
				 
43.
44.
 
45.
.sp-middle{ 
46.
 
47.
	display:block; 
48.
	margin-right:10%; 
49.
	margin-left:10%; 
50.
	margin-top:1%; 
51.
	 
52.
	border:1px solid black; 
53.
	 
54.
	height:129px; 
55.
			 
56.
57.
 
58.
.Box { 
59.
 
60.
	background:white; 
61.
	color:black; 
62.
	 
63.
	margin:1%; 
64.
	float:left; 
65.
	opacity:0.75; 
66.
	padding-top:15%; 
67.
	 
68.
	text-decoration:none; 
69.
	text-align:center; 
70.
	font-family:arial; 
71.
	 
72.
	font-weight:bold; 
73.
	 
74.
	display:inline; 
75.
	 
76.
	border:1px solid silver; 
77.
				 
78.
79.
 
80.
.Box:hover{ 
81.
 
82.
	opacity:1; 
83.
	color:orange !important; 
84.
	border:1px solid orange; 
85.
	 
86.
						 
87.
88.
 
89.
 
90.
.Small{ 
91.
 
92.
	width:20%; 
93.
	z-index:5; 
94.
			 
95.
96.
 
97.
.Small:hover > .HideMeFirst{ 
98.
 
99.
	z-index:101; 
100.
	display:block; 
101.
	position:absolute; 
102.
					 
103.
104.
 
105.
.Great{ 
106.
 
107.
	width:42%; 
108.
	 
109.
110.
 
111.
.HideMeFirst{ 
112.
	display:none; 
113.
	width:40%; 
114.
	border:1px solid red; 
115.
	margin-top:-20%; 
116.
	padding-top:30%; 
117.
	background-color:white; 
118.
119.
 
120.
 
121.
		 
122.
		</style> 
123.
 
124.
	</head> 
125.
	<body> 
126.
 
127.
	<div id="SP-Wrapper"> 
128.
		<div id="sp-left"> 
129.
			<a class="Small Box" href="http://www.google.de/">Google1<div class="hideMeFirst">Google</div></a> 
130.
			<a class="Great Box" href="http://www.google.de/">Google2<div class="hideMeFirst">Google</div></a> 
131.
			<a class="Small Box" href="http://www.google.de/">Google3<div class="hideMeFirst">Google</div></a> 
132.
			<a class="Great Box" href="http://www.google.de/">Google4<div class="hideMeFirst">Google</div></a> 
133.
			<a class="Small Box" href="http://www.google.de/">Google5<div class="hideMeFirst">Google</div></a> 
134.
			<a class="Small Box" href="http://www.google.de/">Google6<div class="hideMeFirst">Google</div></a> 
135.
			<a class="Small Box" href="http://www.google.de/">Google7<div class="hideMeFirst">Google</div></a> 
136.
			<a class="Small Box" href="http://www.google.de/">Google8<div class="hideMeFirst">Google</div></a> 
137.
			<a class="Great Box" href="http://www.google.de/">Google9<div class="hideMeFirst">Google</div></a> 
138.
		</div> 
139.
		<div id="sp-right"> 
140.
			<a class="Small Box" href="http://www.google.de/">Google<div class="hideMeFirst">Google</div></a> 
141.
			<a class="Great Box" href="http://www.google.de/">Google<div class="hideMeFirst">Google</div></a> 
142.
			<a class="Small Box" href="http://www.google.de/">Google<div class="hideMeFirst">Google</div></a> 
143.
			<a class="Great Box" href="http://www.google.de/">Google<div class="hideMeFirst">Google</div></a> 
144.
			<a class="Small Box" href="http://www.google.de/">Google<div class="hideMeFirst">Google</div></a> 
145.
			<a class="Small Box" href="http://www.google.de/">Google<div class="hideMeFirst">Google</div></a> 
146.
			<a class="Small Box" href="http://www.google.de/">Google<div class="hideMeFirst">Google</div></a> 
147.
			<a class="Small Box" href="http://www.google.de/">Google<div class="hideMeFirst">Google</div></a> 
148.
			<a class="Great Box" href="http://www.google.de/">Google<div class="hideMeFirst">Google</div></a> 
149.
		</div> 
150.
		<div class="sp-middle"></div> 
151.
		</div> 
152.
	 
153.
	</body> 
154.
</html>
Bitte warten ..
Ähnliche Inhalte
Windows Server
SQL Server 2008 überlappender E A Vorgang, Fehler ID 997
gelöst Frage von Tim--xWindows Server4 Kommentare

Hallo, bin neue in diesem Forum, ich betreue in unserer Firma die IT. Auf einem SBS 2011 soll eine ...

Entwicklung
Video Lightbox - Position Video container ändern (CSS - JS codes)
Frage von kesartEntwicklung

Hallo Ich entschuldige mich im Voraus für die Rechtschreiben Fehler aber ich bin Engländer wohne aber in Deutschland! FRAGE ...

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 ...

Neue Wissensbeiträge
Apple

IOS 11.2.1 stopft HomeKit-Remote-Lücke

Tipp von BassFishFox vor 17 StundenApple

Das Update für iPhone, iPad und Apple TV soll die Fernsteuerung von Smart-Home-Geräten wieder in vollem Umfang ermöglichen. Apple ...

Windows 10

Windows 10 v1709 EN murkst bei den Regionseinstellungen

Tipp von DerWoWusste vor 22 StundenWindows 10

Dieser kurze Tipp richtet sich an den kleinen Personenkreis, der Win10 v1709 EN-US frisch installiert und dabei die englische ...

Webbrowser

Kein Ton bei Firefox Quantum über RDP

Tipp von Moddry vor 22 StundenWebbrowser

Hallo Kollegen! Hatte das Problem, dass der neue Firefox bei mir auf der Kiste keinen Ton hat, wenn ich ...

Internet

EU-DSGVO: WHOIS soll weniger Informationen liefern

Information von sabines vor 1 TagInternet4 Kommentare

Wegen der europäische Datenschutzgrundverordnung stehen die Prozesse um die Registrierung von Domains auf dem Prüfstand. Sollte die Forderungen umgesetzt ...

Heiß diskutierte Inhalte
Windows Server
RODC kann nicht aus Domäne entfernt werden
Frage von NilsvLehnWindows Server18 Kommentare

HAllo, ich arbeite in einem Universitätsnetzwerk mit 3 Standorten. Die Standorte haben alle ein ESXi Cluster und auf diesen ...

Hardware
Links klick bei Maus funktioniert nicht
gelöst Frage von Pablu23Hardware16 Kommentare

Hallo erstmal. Ich habe ein Problem mit meiner relativ alten maus jedoch denke ich nicht das es an der ...

Windows XP
Windows XP Aktivieren geht nicht
Frage von tetikmiroWindows XP13 Kommentare

Hallo Ich habe einen Windows XP mit einen vCenter Converter umgezogen auf eine ESXI. Soweit funktioniert dies auch ohne ...

Netzwerkmanagement
Mehrere Netzwerkadapter in einem PC zu einem Switch zusammenfügen
gelöst Frage von prodriveNetzwerkmanagement12 Kommentare

Hallo zusammen Vorweg, ich konnte schon einige IT-Probleme mit Hilfe dieses Forums lösen. Wirklich klasse hier! Doch für das ...