Lexi Help
Partner
www.forumieren.com

CSS Rundungen der Ecken

Vorheriges Thema anzeigen Nächstes Thema anzeigen Nach unten

Erledigt CSS Rundungen der Ecken

Beitrag von Sue~ am Sa 5 Jan 2013 - 11:27

Hallo Liebe Community.

In einem Forum in dem ich zweite Administratorin bin, wurde ich um Hilfe mit CSS gebeten, da ich HTML und CSS Kenntnisse habe.- Die Administratorin gab mir einen Code und erklärte mir, dass etwas nicht funktionierte, und dass er für die Rundung der Ecken verantwortlich wäre. Ich probierte den CSS aus, und obwohl alle Ecken im Code den gleichen Radius haben, ist die rechte Ecke nicht gerundet.

Screenshot:


Der Code lautet wie folgt:
Code:
.bodyline{
border:1px solid #0000;
-webkit-border-radius:
60px;-webkit-border-top-right-radius: 7px;
-webkit-border-bottom-left-radius: 7px;
-moz-border-radius: 60px;
-moz-border-radius-topright: 7px;
-moz-border-radius-bottomleft: 7px;
border-radius: 60px;border-top-right-radius: 7px;border-bottom-left-radius: 7px;
border-style: dashed;
}

Auch wollte sie den Code auf dotted umändern, also dass es nicht mehr dashed ist, sondern dotted. Aber auch das funktionierte nicht- was aber auch daran liegen kann, dass ich einfach zu blöd bin, das zu machen, obwohl ich ja eigentlich Kenntnis besitze. Ich hoffe ihr könnt mir weiter helfen (:

Liebe Grüße
~Sue


Zuletzt von Sue~ am So 6 Jan 2013 - 11:44 bearbeitet, insgesamt 1 mal bearbeitet

Sue~
Neuling
Neuling

Beiträge : 35
Anmeldedatum : 22.08.12

Benutzerprofil anzeigen

Nach oben Nach unten

Erledigt Re: CSS Rundungen der Ecken

Beitrag von #Frank am Sa 5 Jan 2013 - 11:45

Wenn du dir den Code mal anschaust, wirst du sehen, das es hier zwei verschieden Radien gibt:
Code:
-webkit-border-radius: 60px;
-webkit-border-top-right-radius: 7px;
-webkit-border-bottom-left-radius: 7px;
-moz-border-radius: 60px;
-moz-border-radius-topright: 7px;
-moz-border-radius-bottomleft: 7px;
border-radius: 60px;
border-top-right-radius: 7px;
border-bottom-left-radius: 7px;
Hier ist einmal der gesamte Radius auf 60 PX definiert.
Weiter hin steht dort das oben Recht und unten Links der Radius 7PX betragen soll.
Wenn nun also überall der Radius 60 Px betragen soll, dann entferne alle Einträge, in denen hier 7 Px angegeben ist.

Edit:
Ich brauche mal den Link zum betroffenen Forum.
Habe ich schon: http://warrior-cats-animals.forumieren.com/

Edit2:
Weiterhin ist der Eintrag:
border-style: dashed;
so nicht erforderlich, da der Style des Rahmens in der ersten Zeile schon deviniert ist:
border:1px solid #0000;
Dort ist "solid" angegeben. Das musst du nur durch "dotted" ersetzen und die untere Zeile löschen.


Edit2:

So, um das noch mal zu erörtern und um es dir einfacher zu machen.
Du kannst den CSS auch so schreiben:
Code:
.bodyline {
    border: 2px dashed #000000;
    border-radius: 60px 7px 60px 7px;
  -webkit-border-radius: 60px 7px 60px 7px;
  -moz-border-radius: 60px 7px 60px 7px;
}
Du sparst dir so einige Zeilen Code.
Zur Erklärung der Radius Angaben:
60px 7px 60px 7px
Diese Angaben beziehen sich auf die Vier Ecken.
Hier mal Farblich:
60px 7px 60px 7px
Die obere Linke Ecke
Die obere Rechte Ecke
Die untere Linke Ecke
Die untere Rechte Ecke

Bei der Dashed Angabe solltest du aber mit den Radien Vorsichtig sein.
Hier wird der Strich in dem Radius als ein Strich dargestellt, was dann so aussieht:
Dashed:


Dotted:


Dashed oder Dotted in Verbindung mit solch großen Radien ist nicht von Vorteil.
Hier ist es dann besser Solid zu verwenden.



Keine Unaufgeforderten PN senden! Unsere Regeln Passwort vergessen ? Info's zu den Gründerdaten
Mein IPad schreibt die tollsten Wörter... Nicht wundern... Einfach geniessen...!

Meine Geduld wird geladen:

Fortschritt: 67%
Never change a running system on Friday!

#Frank
Admin a.D.
Admin a.D.

Männlich Beiträge : 34547
Hinweis : Admin außer Dienst
Anmeldedatum : 13.08.08
Firefox

Benutzerprofil anzeigen

Nach oben Nach unten

Erledigt Re: CSS Rundungen der Ecken

Beitrag von Sue~ am So 6 Jan 2013 - 11:44

Vielen Dank, hat geklappt (: ~Erledigt

Sue~
Neuling
Neuling

Beiträge : 35
Anmeldedatum : 22.08.12

Benutzerprofil anzeigen

Nach oben Nach unten

Erledigt Re: CSS Rundungen der Ecken

Beitrag von #Frank am So 6 Jan 2013 - 12:15

Schön. Ich hoffe das das ganze einigermaßen verständlich war.
Aber nun hast du alle vier ecken auf 60 PX eingestellt.
Ich fand, das der unterschied der einzelnen Ecken reizvoller aussah.

Aber das könnt ihr euch ja jetzt noch überlegen.

closed



Keine Unaufgeforderten PN senden! Unsere Regeln Passwort vergessen ? Info's zu den Gründerdaten
Mein IPad schreibt die tollsten Wörter... Nicht wundern... Einfach geniessen...!

Meine Geduld wird geladen:

Fortschritt: 67%
Never change a running system on Friday!

#Frank
Admin a.D.
Admin a.D.

Männlich Beiträge : 34547
Hinweis : Admin außer Dienst
Anmeldedatum : 13.08.08
Firefox

Benutzerprofil anzeigen

Nach oben Nach unten

Vorheriges Thema anzeigen Nächstes Thema anzeigen Nach oben


 
Befugnisse in diesem Forum
Sie können in diesem Forum nicht antworten