[Erledigt] Unerwünschte Designverschiebung bei :hover

Steamy2010 · 20.07.2011, 12:27

Hallo @all,
ich habe eine Reihe von Bildern die bei
:hover vergrößert dargestellt werden.
Allerdings verschiebt sich praktisch auch dabei das
ganze restliche Design.

Hat jemand einen Denkanstoß für mich parat?

ChrisB · 20.07.2011, 12:29

Zitat:

Zitat von Steamy2010

Hat jemand einen Denkanstoß für mich parat?

Sorge dafür, dass das jeweilige Bild auf die Positionierung nachfolgender Inhalte keinen Einfluss mehr hat - beispielsweise, in dem du es absolut positionierst und damit aus dem Fluss nimmst.

Steamy2010 · 20.07.2011, 12:40

nun springen sie versetzt hin und her

hab ich hier vielleicht einen Fehler...

PHP-Code:

  .bilder     {padding:10px;

             height:200px;

             width:200px;

             

}

             

             

.bilder:hover {

               height:400px;

               width:400px;

               position:absolute;

}

ChrisB · 20.07.2011, 13:11

Zitat:

Zitat von Steamy2010

Hat jemand vielleicht doch noch einen anderen Tip?

- spezifischere Fragestellungen posten
- mit den Grundlagen des Layoutens per CSS auseinander setzen

Steamy2010 · 20.07.2011, 13:34

nun gut, leider hat sich an meiner bisherigen Fragestellung nichts verändert.
Dies ist mein CSS Ausschnitt.
Wäre jemand bereit sich diesen anzusehen und mir zu erklären,
warum sich alles bei :hover verschiebt.
Die position hab ich ja nun schon absolut gesetzt und doch somit
aus dem "Fluss" genommen.

PHP-Code:

  .bilder     {padding:10px;

             height:200px;

             width:200px;}                          

.bilder:hover {

               height:400px;

               width:400px;

               position:absolute;}

ChrisB · 20.07.2011, 13:39

Wenn du bei absoluter Positionierung keine „Koordinaten“ angibst, dann wird das Element nicht wirklich komplett aus dem Fluss genommen.

fab · 20.07.2011, 13:40

Hast du verstanden, was position:absolute bewirkt? Wenn ja, warum wendest du es dann erst bei hover an?

Noch ein Denkanstoß: um die 200x200 Pixel "stehen zu lassen", wäre ein Platzhalter oder Wrapper sinnvoll (nichts weiter als ein <div> um das Bild).

@ChrisB: Aus dem Fluss genommen ist es doch, es bleibt nur an der Stelle verankert. Und das ist vermutlich schon so gewollt.

Steamy2010 · 20.07.2011, 13:49

@fab
was meinst du mit "erst bei hover..."?

ChrisB · 20.07.2011, 13:52

Zitat:

Zitat von Steamy2010

was meinst du mit "erst bei hover..."?

Na in welcher Regel in deinem Stylesheet steht denn die Angabe position:absolute ...?

fab · 20.07.2011, 13:54

Du wendest position:absolute für .bilder:hover an und nicht bereits für .bilder. Vielleicht hast du dir dabei ja etwas gedacht, das dann aber nicht zuende gedacht. Oder du weißt gar nicht was du machst und probierst nur aus ohne z.B. mal auf selfhtml.org nachzuschlagen, was es bedeutet. So sind unsere Hinweise aber nicht gedacht

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Thema bewerten
Thema bewerten:

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
[Erledigt] Hover Navigation - Safari?	Extremefall	HTML, Usability und Barrierefreiheit	15	15.06.2011 08:09
Navileiste	saaja	HTML, Usability und Barrierefreiheit	11	07.12.2010 14:15
[Erledigt] Kein Hover auf Bildlinks	Der_Seb	HTML, Usability und Barrierefreiheit	32	06.11.2010 12:46
[Erledigt] dynamischen signatur zeigt fehler "grafik kann nicht angezeigt werden" an	steive	PHP Tipps 2009	33	12.11.2009 11:31
CSS Slide-Menu verändern	K3HLIM	JavaScript, Ajax und mehr	1	21.04.2009 21:10
[Erledigt] aktiven link im zustand von hover anzeigen?	litterauspirna	HTML, Usability und Barrierefreiheit	18	01.11.2008 13:29
Hover nicht nebeneinander	wers1	HTML, Usability und Barrierefreiheit	11	18.08.2008 07:23
CSS Hover	JanM	HTML, Usability und Barrierefreiheit	3	27.06.2006 21:13
[Erledigt] Bild mit clip:rect verkleinern und per hover wieder normal		HTML, Usability und Barrierefreiheit	3	21.12.2005 14:54
Unerwünschte Bots aussperren		Beitragsarchiv	5	29.11.2005 08:37
Hover Effekt für Textfelder?	Masteroi	HTML, Usability und Barrierefreiheit	3	27.07.2005 14:36
farbe von tabellenzeile verändern bei hover		HTML, Usability und Barrierefreiheit	4	04.07.2005 09:40
[CSS] Table und :hover ???		HTML, Usability und Barrierefreiheit	16	21.01.2005 15:17

20.07.2011, 12:27
Steamy2010 Erfahrener Benutzer Registriert seit: 19.05.2011 Beiträge: 134 PHP-Kenntnisse: Anfänger	[Erledigt] Unerwünschte Designverschiebung bei :hover Hallo @all, ich habe eine Reihe von Bildern die bei :hover vergrößert dargestellt werden. Allerdings verschiebt sich praktisch auch dabei das ganze restliche Design. Hat jemand einen Denkanstoß für mich parat? __________________ Im Vorfeld schon ein herzliches Dankeschön, an alle die mich hier unterstützen und sich durch meine "lange Leitung" nicht abschrecken lassen die Hoffnung beizubehalten das dieses Huhn auch bald ein Korn findet


Mister Ad PHP Code Flüsterer Registriert seit: 21.08.2005 Beiträge: 4682 PHP-Kenntnisse: Fortgeschritten

20.07.2011, 12:40
Steamy2010 Erfahrener Benutzer Registriert seit: 19.05.2011 Beiträge: 134 PHP-Kenntnisse: Anfänger	nun springen sie versetzt hin und her hab ich hier vielleicht einen Fehler... PHP-Code: `.bilder {padding:10px; height:200px; width:200px; } .bilder:hover { height:400px; width:400px; position:absolute; }` __________________ Im Vorfeld schon ein herzliches Dankeschön, an alle die mich hier unterstützen und sich durch meine "lange Leitung" nicht abschrecken lassen die Hoffnung beizubehalten das dieses Huhn auch bald ein Korn findet

20.07.2011, 13:34
Steamy2010 Erfahrener Benutzer Registriert seit: 19.05.2011 Beiträge: 134 PHP-Kenntnisse: Anfänger	nun gut, leider hat sich an meiner bisherigen Fragestellung nichts verändert. Dies ist mein CSS Ausschnitt. Wäre jemand bereit sich diesen anzusehen und mir zu erklären, warum sich alles bei :hover verschiebt. Die position hab ich ja nun schon absolut gesetzt und doch somit aus dem "Fluss" genommen. PHP-Code: `.bilder {padding:10px; height:200px; width:200px;} .bilder:hover { height:400px; width:400px; position:absolute;}` __________________ Im Vorfeld schon ein herzliches Dankeschön, an alle die mich hier unterstützen und sich durch meine "lange Leitung" nicht abschrecken lassen die Hoffnung beizubehalten das dieses Huhn auch bald ein Korn findet

20.07.2011, 13:39
ChrisB Moderator¹ Registriert seit: 28.03.2010 Beiträge: 7.470 PHP-Kenntnisse: Fortgeschritten	Wenn du bei absoluter Positionierung keine „Koordinaten“ angibst, dann wird das Element nicht wirklich komplett aus dem Fluss genommen. __________________ RGB is totally confusing - I mean, at least #C0FFEE should be brown, right?

20.07.2011, 13:40
fab Erfahrener Benutzer Registriert seit: 28.07.2010 Beiträge: 2.308 PHP-Kenntnisse: Fortgeschritten	Hast du verstanden, was position:absolute bewirkt? Wenn ja, warum wendest du es dann erst bei hover an? Noch ein Denkanstoß: um die 200x200 Pixel "stehen zu lassen", wäre ein Platzhalter oder Wrapper sinnvoll (nichts weiter als ein <div> um das Bild). @ChrisB: Aus dem Fluss genommen ist es doch, es bleibt nur an der Stelle verankert. Und das ist vermutlich schon so gewollt. __________________ PHP Blog + Library CSS Effects + Tools

20.07.2011, 13:49
Steamy2010 Erfahrener Benutzer Registriert seit: 19.05.2011 Beiträge: 134 PHP-Kenntnisse: Anfänger	@fab was meinst du mit "erst bei hover..."? __________________ Im Vorfeld schon ein herzliches Dankeschön, an alle die mich hier unterstützen und sich durch meine "lange Leitung" nicht abschrecken lassen die Hoffnung beizubehalten das dieses Huhn auch bald ein Korn findet

20.07.2011, 13:54
fab Erfahrener Benutzer Registriert seit: 28.07.2010 Beiträge: 2.308 PHP-Kenntnisse: Fortgeschritten	Du wendest position:absolute für .bilder:hover an und nicht bereits für .bilder. Vielleicht hast du dir dabei ja etwas gedacht, das dann aber nicht zuende gedacht. Oder du weißt gar nicht was du machst und probierst nur aus ohne z.B. mal auf selfhtml.org nachzuschlagen, was es bedeutet. So sind unsere Hinweise aber nicht gedacht __________________ PHP Blog + Library CSS Effects + Tools