Problem mit Hexagons und Text

[Dari971]

Hey, ich habe gerade angefangen, mir eine eigene Website zu bauen.

Mein Problem ist nun folgendes, ich habe 6 Hexagons: http://imgur.com/Y4zRhjZ

Ich wuerde jetzt gerne etwas in jedes Hexagon schreiben, aber dann passiert das: http://imgur.com/RRa6kL7 Ich habe leider keine Ahnung, wie dies zu stande kommt, dass der Text, das Hexagon so verschiebt.

Sollte dies dann geloest sein, wuerde ich gerne, wenn man mit dem Hover ueber das Hexagon geht, dass es die Farbe aendert. Ich habe es mit .hexagon:hover{ color:red;} versucht. Klappt nicht. Opacity:0; jedoch klappt.

Beste Gruesse

[Gunnar Bittersmann]

@@Dari971

Mein Problem ist nun folgendes, ich habe 6 Hexagons: http://imgur.com/Y4zRhjZ

Ich wuerde jetzt gerne etwas in jedes Hexagon schreiben, aber dann passiert das: http://imgur.com/RRa6kL7 Ich habe leider keine Ahnung, wie dies zu stande kommt, dass der Text, das Hexagon so verschiebt.

Anhand der Bilder lässt sich eindeutig sagen: Du machst etwas falsch.

Sollte dies dann geloest sein

Für die Problemlösung bedarf es einer Problembeschreibung. Die Tips für Fragende sollten dir dabei helfen.

wuerde ich gerne, wenn man mit dem Hover ueber das Hexagon geht, dass es die Farbe aendert. Ich habe es mit .hexagon:hover{ color:red;} versucht.

Welche Farbe soll sich denn ändern: die Vordergrundfarbe oder die Hintergrundfarbe?

LLAP 🖖

[Dari971]

Gut. Dann beschreibe ich es nochmal so detallierte wie meoglich. Ich habe 6 einzelne Hexgagone und sie dann so positioniert. Den Code habe ich von ihr: http://csshexagon.com/ Anschliessend habe ich sie durch die Aenderung der Margin positioniert. Wenn ich jetzt - z. B. <div class="hexagon">test</div> - einen Text hinzufuege, verschiebt sich das Ganze. Wieso klappt das nicht genauso wie bei Buttons? Ich habe das Gefuhel der Text und das Hexagon werden als 2 Elemente aufgefasst, wenn mich nicht alles taeuscht.

Die Farbe des Hexagons sollte sich von dem hellblau ins rot aendern, wenn ich mit dem Cursor drueber gehe. Gehe ich mit dem Cursor runter, sollte das Hexagon wieder hellblau sein.

[Gunnar Bittersmann]

@@Dari971

Den Code habe ich von ihr: http://csshexagon.com/

Da hat sie einen Fehler gemacht: nicht eingeplant, dass das div auch Textinhalt haben kann.

Für .hexagon::before, .hexagon::after muss zusätzlich noch left: 0 angegeben werden: CodePen.

LLAP 🖖

[Matthias Apsel]

Hallo Dari971,

Ich habe das Gefuhel der Text und das Hexagon werden als 2 Elemente aufgefasst, wenn mich nicht alles taeuscht.

Ja. Das Hexagon besteht aus einem Rechteck und zwei Dreiecken, letztere realisiert durch die Pseudoelemente ::before bzw. ::after.

Das Pseudolelement ::after (unteres Dreieck) wird nach dem Inhalt gesetzt und verschiebt sich in Abhängigkeit vom Inhalt. Abhilfe schafft das Hinzufügen von left: 0; für die Pseudoelemente.

.hexagon::before,
.hexagon::after {
  content: "";
  position: absolute;
  width: 0;
  left: 0;
  border-left: 150px solid transparent;
  border-right: 150px solid transparent;
}

Die Farbe des Hexagons sollte sich von dem hellblau ins rot aendern, wenn ich mit dem Cursor drueber gehe. Gehe ich mit dem Cursor runter, sollte das Hexagon wieder hellblau sein.

Also die Hintergrundfarbe background-color.

Bis demnächst
Matthias

[Dari971]

Super. Vielen Dank. Das hat funktioniert. Kannst du mir noch erkaleren, wieso gerade left:0 abhilfe schafft. Da stehe ich gerade auf dem Ast...

Zum Cursor richtig. Aber die Farbe meines Hexagon aendert sich nicht, wenn ich mit dem Cursor ruebergehe. Edit: Die Farbe des Textes aendert sich, wenn ich mit dem Cursor ruebergehe.

[Rolf b]

left:0 schafft zusammen mit position:absolute Abhilfe. Ohne eine Positionsangabe hebt position:absolute das Element nur aus dem Elementfluss heraus, belässt es aber an seiner natürlichen Position. Mit left:0 zwingst Du es nach links.

[Dari971]

Super, Danke Rolf!

Nun, ich habe es jetzt geschafft die Farbe zu aendern.

Aber nun habe ich ein neues Problem: Da das Hexagon aus 3 Elementen besteht (Rechteck, 2xDreieck), aendert sich nur die Farbe des Rechteckes, wenn ich mit dem Cursor rueber gehe.

Gibt es eine Moeglichkeit, dass das ganze vom Cursor als ein Element erkannt wird und sich von allen die Farbe in Rot aendert oder dass ich die Dreieck mit dem Rechteck verbine; im sinne, wenn Rechteck rot wird, dann werden Dreiecke auch rot ?

Und warum wird es bei opacity:0; alles unsichtbar, wenn ich mit dem Cursor ruebergehe, aber bei background-color:red; wird nur das Rechteck rot?

[Rolf b]

.hexagon:hover:before {   border-bottom: 86.60px solid red; }
.hexagon:hover:after { border-top: 86.60px solid red; }

[Dari971]

Herzlichsten Dank Rolf. Px sind aber 28.87 ;)

Ich hatte nur die Farbe eingegeben ohne dass 28.87px solid. Das war wohl der Fehler.

[Gunnar Bittersmann]

@@Dari971

Ich hatte nur die Farbe eingegeben ohne dass 28.87px solid. Das war wohl der Fehler.

Nein. Der Fehler war, an der Stelle die Sammeleigenschaften border-top/border-bottom zu verwenden.

LLAP 🖖

[Dari971]

die hatte ich verwendet. sehe gerade war ein ganz anderer Fehler: hab anstelle .hexagon:hover:before .hexagon:before:hover geschrieben...

Ich bedanke mich nochmal herzlichst fuer die schnellen und hilfreichen Antworten. Ich werde mich sicher die Tage nochmal mit mehr Fragen melden ;)

[Gunnar Bittersmann]

@@Rolf b

.hexagon:hover:before {   border-bottom: 86.60px solid red; }
.hexagon:hover:after { border-top: 86.60px solid red; }

Nein. DRY geht anders. Es ist lediglich die Farbe zu ändern, nicht alles:

.hexagon:hover::before
{
	border-bottom-color: red;
}

.hexagon:hover::after
{
	border-top-color: red;
}

LLAP 🖖

[Rolf b]

DRY fällt bei mir heute aus. Hier in Köln regnet es.

Wichtiger finde ich aber deinen Hinweis auf ::before stat :before. Noch verstehen die Brauser beides, aber :before ist CCS2 und wird vermutlich irgendwann missbilligt werden. Besser gar nicht erst zeigen.

Rolf

[Gunnar Bittersmann]

@@Dari971

Ich habe 6 einzelne Hexgagone und sie dann so positioniert. Den Code habe ich von ihr: http://csshexagon.com/

Die bessere Variante, eine sechseckige Box zu erzeugen, bietet clip-path. Dann ist der Hover-Effekt auch nur dort, wo wirklich Sechseck ist, nicht auf dem umgebenden Rechteck.

Funktioniert mit polygon() in Chrome, Safari, Firefox Developer Edition. Im Firefox muss dazu das Flag layout.css.clip-path-shapes.enabled gesetzt sein; das wird voraussichtlich demnächst in Version 53 für alle freigeschaltet.

Beispiel

Mit SVG-ClipPath geht’s auch. Im Firefox auch heute schon.

LLAP 🖖

[Gunnar Bittersmann]

@@Gunnar Bittersmann

Die bessere Variante, eine sechseckige Box zu erzeugen, bietet clip-path. Dann ist der Hover-Effekt auch nur dort, wo wirklich Sechseck ist, nicht auf dem umgebenden Rechteck.

Das kann man auch anders haben: Man setzt das Sechseck aus drei gleichgroßen Rechtecken zusammen, die übereinanderliegen und um jeweils 60° um den Mittelpunkt gedreht sind.

Das eine Rechteck ist die ursprüngliche Box, die beiden anderen sind Pseudoelemente.

So sieht’s aus.

LLAP 🖖

[Tabellenkalk]

Hallo,

ich habe 6 Hexagons: http://imgur.com/Y4zRhjZ

offensichtlich hast du keine 6 Hexagone.

dass der Text, das Hexagon so verschiebt.

Es wirkt so, als ob du mehrere Objekte hast, die zusammen in bestimmten Situationen wie ein Hexagon aussehen. Das aber vermutlich sechsmal.

Gruß
Kalk

[Dari971]

Richtig, ich habe 6 Hexagone, da ich jedem Hexagon anschliessend noch einen Link hinzufuegen wollte.

Jedoch verstehe ich immer noch nicht, warum die sich so verschieben, wenn ich einen Text hinzufuege...