Lexi Help
Die neuesten Themen
» Mein altes Forum zurückbekommen
von Bigtuber Gestern um 22:59

» Impressum
von #Frank Mi 28 Sep 2016 - 23:45

» [phpBB2] Im Beitrag Bild und Text nebeneinander anzeigen
von #Frank Mi 28 Sep 2016 - 23:43

» [phpBB2] Unicode Emojis im Forum
von Mariacher J.E. Mi 28 Sep 2016 - 22:07

» Themen-Icons
von Bigtuber Mi 28 Sep 2016 - 20:46

» [phpBB2] Schriftfarbe in der Expressantwort
von Bigtuber Mi 28 Sep 2016 - 20:09

» Themen fixieren
von inde Mi 28 Sep 2016 - 20:05

» [Update] Neues Theme der mobilen Version V2
von inde Mi 28 Sep 2016 - 13:34

» Begriff : "merken"
von Ray Di 27 Sep 2016 - 12:14

» [PunBB] Umzug eines funktionierenden Forums von PunBB auf phpBB?
von inde Di 27 Sep 2016 - 11:07

» Servamp Forum
von Raine Kamiya Mo 26 Sep 2016 - 22:47

» [phpBB2] Probleme mit der "Postprofil" Anzeige
von Dr.Keks Mo 26 Sep 2016 - 20:56

» Private Nachrichten
von inde Mo 26 Sep 2016 - 10:05

» Wie kann man erkennen, welche Forenversion ein anderes Forum hat?
von inde So 25 Sep 2016 - 22:24

» Ad Ware im Forum?
von inde So 25 Sep 2016 - 20:38

» [Sammelthread] Unangebrachte Werbung
von inde Fr 23 Sep 2016 - 9:00

Partner
free forum

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

Nutzerprofil 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
Administrator
Administrator

Männlich Beiträge : 34502
Hinweis : Never change a running system on Friday!
Anmeldedatum : 13.08.08
Firefox

Nutzerprofil 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

Nutzerprofil 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
Administrator
Administrator

Männlich Beiträge : 34502
Hinweis : Never change a running system on Friday!
Anmeldedatum : 13.08.08
Firefox

Nutzerprofil anzeigen

Nach oben Nach unten

Vorheriges Thema anzeigen Nächstes Thema anzeigen Nach oben


 
Forenbefugnisse:
Sie können in diesem Forum nicht antworten