Erste Schritte mit eigenen CSS-ID/Klasse - Box-Shadow seltsame Darstellung

Hallo zusammen,

ich experementiere gerade in Contao mit selbst erstellten CSS-IDs und deren Implementierung herum. Bei einem Beispiel von der Seite HTML-Seminar mit Box Shadow klappt es jedoch nicht so ganz bei meinem kleinen Test -> Link wird der Schatten nur ganz dünn in der oberen linken und in der unteren rechten Ecke angezeigt. Meine Frage ist jetzt woran das liegt bzw wie ich den Schatten schön verlaufend dargestellt bekomme?

Gruß WWSelec

Das ist wegen

PHP-Code:

---

overflow:hidden; 


---

auf allen

PHP-Code:

---

.block 


---

Elementen. Damit du den box-shadow siehst, musst du bspw.

PHP-Code:

---

#projekte {
    overflow:visible;
} 


---

machen.

Zitat:

---

Zitat von Spooky

... Damit du den box-shadow siehst, musst du bspw. #projekte {
overflow:visible;
}[/php]machen.

---

Nö. ;) overflow:visible lediglich zu diesem Zweck, brächte hier bloß unerwünschte Nebeneffekte. Wenn der Platz nicht da ist, sorgt man besser für den Platz. Aber nicht an der falschen Stelle ...

Code:

---

Falsch
#main .inside {
  margin-left: 1.5em;
  margin-right: 1.5em;
}

---

Code:

---

Richtig
#Hinweis {
  margin: 20px;
}

---

Sein Problem ist, dass der box-shadow auf #Hinweis nicht sichtbar ist, weil das umliegende Element, in diesem Fall der Artikel #projekte von Haus aus auch die block Klasse trägt. Um den box-shadow sichtbar zu machen, kann man nun einfach das

PHP-Code:

---

overflow:hidden; 


---

der block Klasse aufheben, eben bspw. mit

PHP-Code:

---

#projekte {
    overflow:visible;
} 


---

Probleme handelt man sich damit ein, wenn man das Contao CSS Grid an dieser Stelle verwendet, ansonsten ist es egal.

Mit

PHP-Code:

---

#Hinweis {
    margin:20px;
} 


---

Wird der box-shadow natürlich auch sichtbar, verkleinert aber logischerweise die #Hinweis box.

Ob bzw. was er nun möchte, ist natürlich nur ihm überlassen.

Zitat:

---

Zitat von Spooky

Sein Problem ist, dass der box-shadow auf #Hinweis nicht sichtbar ist, weil das umliegende Element, in diesem Fall der Artikel #projekte von Haus aus auch die block Klasse trägt. ...

---

Logisch, das ist sein Problem. Na sicher, bei .block overflow:visible nutze ich sogar recht häufig. Unter anderem will ich in meinen Layouts möglichst keine meterlang leeren Randspalten, sondern dass sie unterhalb des Contents von der Hauptspalte umflossen werden. So gut es eben geht. Wir wissen ja, wie bescheiden es sonst aussähe, wenn der Viewport gerade noch breit genug ist, Randspalte(n) anzuzeigen, aber dummerweise leer.

Theoretisch alles klar, sind uns einig. Auch was die Nachteile von Grids angeht.

Doch egal nun wie, mit Firebug kurz bei #projekte die overflow-Eigenschaft überschreiben, zeigt ja nunmal diverse krasse Nebeneffekte zugunsten nur eines winzigen popligen Haupteffekts. Selbstverständlich soll das schattierte Element entsprechend kleiner werden und eben nur dies für eine individuelle Eigenschaft formatiert werden (und meinetwegen gleichartige Elemente), nicht der umgebende Container. Ich mal ja auch nicht Deutschland anders an, bloß weil ich meine Gartenlaube oder Laubenpieperkolonie anders anstreichen will. :eek: :)

Zitat:

---

Zitat von soweit_ok

Doch egal nun wie, mit Firebug kurz bei #projekte die overflow-Eigenschaft überschreiben, zeigt ja nunmal diverse krasse Nebeneffekte zugunsten nur eines winzigen popligen Haupteffekts.

---

Wenn du nur

PHP-Code:

---

#projekte {
    overflow:visible;
} 


---

einträgst, gibt es keine Nebeneffekt (beim aktuellen Stand der Website). Ich glaube was du statt dessen getestet hast ist

PHP-Code:

---

.block {
    overflow:hidden;
} 


---

ganz zu entfernen. Das wiederum hätte gravierende Nebeneffekte.

Zitat:

---

Zitat von Spooky

Ich glaube was du statt dessen getestet hast ist .block {
overflow:hidden;
} ganz zu entfernen. Das wiederum hätte gravierende Nebeneffekte.

---

Wenn auch nicht zu deaktivieren, sondern nur den Wert zu überschreiben ... doch Du hast recht, sorry.

Ich weiß natürlich, dass man nicht die ganze .block Klasse überschreiben darf, sondern nur die Eigenschaft des Einzelelements. Huuuh wie peinlich, erwischt, nicht richtig aufgepasst. :p :D

Habe Spooky's Tipp einmal angewendet, funktioniert.

CSS ist noch ein bisschen meine Baustelle, aber wie sagt man immer so schön, "Wir arbeiten dran" :D