Sponsor-Board.de
CSS Hilfe

+- Sponsor-Board.de (https://www.sponsor-board.de)
+-- Forum: Community (/forumdisplay.php?fid=56)
+--- Forum: Hilfe (/forumdisplay.php?fid=102)
+---- Forum: Scripting (/forumdisplay.php?fid=108)
+---- Thema: CSS Hilfe (/showthread.php?tid=26306)


CSS Hilfe - Luca - 29.05.2012 13:29

Ich bin gerade dabei mein erstes Design zu coden (Wirklich Komplett, wBB zählt da nich) und verzweifle an folgendem Problem:

Code:
a.menuelement:hover {
    padding-top: 13px;
    padding-right: 5px;
    padding-left: 5px;
    height: 36px;
    background-image: url(img/element.png);
    background-repeat: repeat-x;
    background-position: center;
    -webkit-border-radius: 20px !important;
    -moz-border-radius: 20px !important;
    border-radius: 20px !important;
}


Das ist der Code den ich benutze, die Ecken sollen abgerundet sein aber es sieht so aus: [attachment=842]

//EDIT Fehler gefunden, aber er rundet mir nun die Seiten ab und nicht die Ecken


RE: CSS Hilfe - Luca - 29.05.2012 13:50

Der Hintergrund soll flexibel sein


RE: CSS Hilfe - Torbinho - 29.05.2012 14:18

Willst du die Ecken abgerundet haben oder komplett rund, so das es ein Kreis wird?

Wieso hat denn dein Button ein Hintergrundbild? Soll das etwa abgerundet werden?
Dann wird es wohl daran liegen. Du solltest dem ganzen eine Hintergrundfarbe geben und kein Bild, dann sollte es gehen.

Und an ccoding: Bilder benötigen viel mehr Performance als normaler Code. Deshalb gibt es ja nun seit CSS3 diese Möglichkeit.

P.S.

statt
padding-top: 13px;
padding-right: 5px;
padding-left: 5px;

kannst du auch einfach
padding: 13px 5px 0 5px

schreiben


RE: CSS Hilfe - Luca - 29.05.2012 14:57

Also:

Es sollen nur die einzelnen Ecken abgerundet werden. Das Eine Farbe reicht nicht da das ja ein Verlauf plus Schatten ist. Er braucht ein Hintergrundbild weil das der hover Effekt sein soll. Und ich habe gelesen dass es auch mit bild geht.

Und danke für den Tipp mit dem Padding, aber ich habe es so gemacht dass ich immer sofort weis welcher Wert für was steht.


RE: CSS Hilfe - Torbinho - 29.05.2012 15:40

Weißt du doch auch so ? Padding: oben rechts unten links wie im Uhrzeigersinn Wink

Dann google doch einfach mal, bin mir sicher, dass du viele Lösungen finden wirst.

Kann mir aber auch vorstellen, dass du den Repeat wegmachen solltest, oder es mal ohne Padding versuchen.


RE: CSS Hilfe - Luca - 29.05.2012 15:43

Beides ist leider nötig Mad

Habs schon probiert