Problem mit "runden Ecken"
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
abrundung
balken
bild
dank
frage
gleichen hintergrundfarbe
grafik
grafiker
hintergrund
hintergrundbild
liegen
machen
mittelteil
problem
rechte rand
rundung
streifen
teil
test
voll transparente grafik
-
ho ;)
Ich spiele mich gerade mit dem Design einer Homepage. Zu Testzwecken habe ich das ganze in drei Teile geteilt (links, rechts & Mitte). Das hat auch wunderbar geklappt. Diese drei Teile sollten nun alle einen Kopfbereich haben, und zwar eine abgerundete Leiste. (Ein Freund hat mir die Grafiken gemacht, da ich das absolut nicht drauf habe XD)
Es handelt sich um PNG Grafiken - Die Mitte des Kopfes ist nur ein Balken, links und rechts der Kopfleiste sind jeweils abgerundete Flächen.
Nun ist ein Problem entstanden, mit dem ich überhaupt nicht gerechnet hatte:
Obwohl die Grafiken grundsätzlich gut aussehen, ist der Teil, der transparent sein sollte, hellgelb gefärbt, und ich habe kA. woran das liegt, und wie ich das Problem lösen kann :/
Am besten ihr schaut euch das selber an:
http://sincer.lima-city.de/test-rundung/
(Der Lima-Space scheint gerade etwas angeschlagen zu sein - es dauert ein wenig, bis alle Grafiken geladen sind ^^ - sind aber nur ca. 3kb)
Eig. sollte der Durchsichtige Teil der Rundungen ja in der jeweiligen Farbe zu sehen sein, die dem Hintergrund des übergeordneten Divs entspricht - also rot, blau, und grün (aber auf keinen Fall hellgelb XD)
Ich habe den Verdacht, dass es an den Grafiken selbst liegen könnte, aber was habe ich (bzw. mein Grafiker XD) falsch gemacht. Oder liegt es doch am Code?!
lg && thx im voraus :)
Sincer -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
Mich würd sowas auch interessieren.
Der Hintergrund ist ja eigt weiß auf dem Bild, aber er wird gelb.
Wie kriegt man ihn nur so hin, dass er die Hintergrundfarbe annimmt.
Hab iwas mit Folien oder Ebenen gehört, aber ich kenn mich da leider nicht aus.
-
ho ;)
Der Hintergrund ist nicht weiß, sondern transparent...
Deswegen ist das Bild auch im PNG Format.
lg
Sincer -
Das Problem liegt zum einen daran, dass das Hintergrundbild der Überschrift über die ganze Breite verläuft und somit auch hinter diesen Abrundungen rechts und links verläuft. Zudem scheint es so zu sein, dass das PNG nicht vollständig transparent ist, sondern nur teilweise. Gruß
-
Da musst du nen Grafiker fragen, wie gesagt, ich kenne mich damit kaum aus :D
Ich frage mich nur, was da bei meinem Anwendungsbeispiel falsch gelaufen ist...
lg
Sincer -
Das Problem liegt zum einen daran, dass das Hintergrundbild der Überschrift über die ganze Breite verläuft und somit auch hinter diesen Abrundungen rechts und links verläuft.
Ok, ist klar, dass habe ich mir schon gedacht,...
Dh. ich müsste einfach einen Mittelteil-Div zulegen, der dann diese Mittlere Grafik beinhaltet. Dann würde das ganze richtig angezeigt werden.
Allerdings löst das mein Problem nicht, denn wenn es so wäre, müsste ja jetzt nicht einmal diese abrundung zu sehen sein, sondern nur der Streifen-balken. Dh. es muss an etwas anderem liegen.
Zudem scheint es so zu sein, dass das PNG nicht vollständig transparent ist, sondern nur teilweise. Gruß
Wie meinst du das?
Es soll ja nur der nicht unsichtbare Teil transparent sein. Oder verstehe ich da etwas falsch?
lg
Sincer -
sincer schrieb:
Allerdings löst das mein Problem nicht, denn wenn es so wäre, müsste ja jetzt nicht einmal diese abrundung zu sehen sein, sondern nur der Streifen-balken. Dh. es muss an etwas anderem liegen.
Doch;) Also bei deiner Seite sieht man den Hintergrund, der auch hinter den Abrundungen liegt durchschimmern. Dass dieser etwas blasser ist als man ihn gewöhnt ist liegt daran, dass das PNG nicht komplett transparent ist, sondern etwas weiß beinhaltet!
Mit viel Hin und Her hab ich eine mögliche Lösung gefunden, die ich aber selbst nicht sehr zufriedenstellend finde. Ich bin mir nicht mal sicher ob das noch W3C gemäß ist geschweige denn für alle Browser anwendbar.
http://werktags.lima-city.de/test/test.html
Somit is immerhin die Größe variabel (in FF getestet). Jedoch auch nicht sehr schön umgesetzt. Es wäre schön, wenn man das mit den CSS Pseudoelementen :before und :after irgenwie hinbekommen könnte. Da müsste aber mal jemand ran, der sich etwas mehr mit solchen Sachen auskennt. Ich habs zumindest nicht hinbekommen.
Das mit dem nicht ganz transparenten Teil sieht man hier aber deutlicht, das rot schimmert durch.
Gruß
-
ho ;)
Danke für deine Bemühungen, aber wenn ich das richtig verstehe, hat das Bild einen Fehler. Denn das sollte 100% transparent - ohne weiß - sein!
Dh. das durchschimmernde rot sollte genauso rot wie der restliche Hintergrund sein. (Und nicht, wie in deinem Beispiel, heller, weil ja noch ein weiß in der Grafik vorhanden ist.
Also habe ich das richtig verstanden:
Wenn ich dem Mittelteil ein eigenes Div zuweise, sodass der linke und rechte Rand nicht mit der gleichen Hintergrundfarbe "überschrieben" wird, und eine voll-transparente Grafik für die Rundungen einsetze, passt alles?
thx Werktags ;)
Sincer -
sincer schrieb:
Also habe ich das richtig verstanden:
Wenn ich dem Mittelteil ein eigenes Div zuweise, sodass der linke und rechte Rand nicht mit der gleichen Hintergrundfarbe 'überschrieben' wird, und eine voll-transparente Grafik für die Rundungen einsetze, passt alles?
Ja, so sollte es funktionieren. -
Danke ;)
Sobald ich die neuen Bilddateien habe, sollte es problemlos funktionieren :D
Thx
Sincer -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
