Der folgende Beitrag wurde am 02. 06. 2011, 15:13 Uhr von noidem veröffentlicht.
Hiho,
Ich sitz schon seit einer Stunde vor einem Problem, welches sich nicht lösen lässt und ich auch nichts gefunden habe über Google.
Mein Problem ist eigentlich ganz Simpel, ich habe auf einer Webpräsenz ein DIV angelegt. In diesem DIV möchte ich nun abgerundete Ecken haben.
Jetzt habe ich 3 Bilder.
Den linken Teil mit den zwei abgerundeten Ecken links
Den mittleren Teil, der repeatet wird
Den rechten Teil, mit den zwei abgerundeten Ecken rechts
Nun möchte ich gerne den linken Teil anzeigen lassen, dann den mittleren Teil für eine bestimmte Länge repeaten, dann am schluss den rechten Teil anzeigen lassen.
Im CSS sieht es momentan so aus:
background-image: url("img/left.png"), url("img/center.png"), url("img/right.png");
background-repeat: no-repeat, repeat-x, no-repeat;
background-position: left, center, right;
width: 200px;
Das linke Bild wird mir auch angezeigt. Ebenso das mittlere, welches repeatet wird. Allerdings wird das endlos repeatet, ohne dass am Schluss das rechte Bild folgt.
Gibt es hierfür irgendwie Abhilfe?
Alternativ könnte ich einfach die ganze Box als ein Bild einfügen. Dachte aber, so wäre es platzsparender und "eleganter" gelöst.
Der folgende Beitrag wurde am 02. 06. 2011, 15:53 Uhr von Take veröffentlicht.
Moin,
> Ich sitz schon seit einer Stunde vor einem Problem, welches sich nicht lösen lässt und ich auch nichts gefunden habe über Google.
>
> Mein Problem ist eigentlich ganz Simpel, ich habe auf einer Webpräsenz ein DIV angelegt. In diesem DIV möchte ich nun abgerundete Ecken haben.
border-radius ist dein Freund.
> Jetzt habe ich 3 Bilder.
Ihh, abgerundete Ecken mit Bildern... :D
> Den linken Teil mit den zwei abgerundeten Ecken links
> Den mittleren Teil, der repeatet wird
> Den rechten Teil, mit den zwei abgerundeten Ecken rechts
> Nun möchte ich gerne den linken Teil anzeigen lassen, dann den mittleren Teil für eine bestimmte Länge repeaten, dann am schluss den rechten Teil anzeigen lassen.
Schau dir mal diesen Artikel an, wenns unbedingt Bilder sein sollen...
> Im CSS sieht es momentan so aus:
>
> background-image: url("img/left.png"), url("img/center.png"), url("img/right.png");
> background-repeat: no-repeat, repeat-x, no-repeat;
> background-position: left, center, right;
> width: 200px;
Wenn du schon CSS3 nimmst (multiple Backgrounds _sind_ CSS3) kannst du doch auch border-radius nehmen, oder?
Gruß,
Take
Der folgende Beitrag wurde am 02. 06. 2011, 16:05 Uhr von noidem veröffentlicht.
> Wenn du schon CSS3 nimmst (multiple Backgrounds _sind_ CSS3) kannst du doch auch border-radius nehmen, oder?
>
> Gruß,
> Take
Vielen Dank schonmal! Bin noch recht neu und kannte das mit Border-Radius noch nicht. Dachte es wäre am einfachsten, dies mit 3 Bildern zu lösen. Bin natürlich für sämtliche Lösungsvorschläge offen.
Das Problem ist, dass ich links und rechts einen kleinen schwarzen Schatten habe zum übergang zum Inhalt. Dies lässt sich soweit ich weiss nicht mit CSS machen?
Der folgende Beitrag wurde am 02. 06. 2011, 17:26 Uhr von Take veröffentlicht.
Moin,
> Das Problem ist, dass ich links und rechts einen kleinen schwarzen Schatten habe zum übergang zum Inhalt. Dies lässt sich soweit ich weiss nicht mit CSS machen?
box-shadow - CSS3 rules :D
Musst dann halt damit leben, dass IE < 9 keinen Schatten mit CSS können, aber müssen Webseiten überall gleich aussehen? Das gilt besonders für dIEses Browserimitat aus Redmond :D
Gruß,
Take
© 1998-2013 SELFHTMLImpressumSoftware: Classic Forum 3.4