Regeln und nützliche Hinweise
Lexi Help
Die neuesten Themen
» Registrierung defekt
von cybercrash Gestern um 22:49

» [phpBB2] index_box.tpl & Avatare verstecken
von Dr.Keks Gestern um 22:40

» [phpBB2] Avatare für Gäste unsichtbar
von Dr.Keks Gestern um 22:37

» Admin Email Ändern
von Bigtuber Gestern um 17:05

» Sternzeichen Wassermann endet am falschen Datum / Fische beginnt zu früh
von VampirinJayna Gestern um 14:22

» [phpBB3] Smilies können nicht neu erstellt werden
von Coffy Gestern um 6:13

» [Mitteilung] ModernBB - Eine neue Foren-Version für Forumieren-Foren
von chamutv Di 28 März 2017 - 20:43

» [phpBB3] [phpBB3] Forum nicht sicher
von Bigtuber Di 28 März 2017 - 17:43

» Passwort vergessen
von Bigtuber Di 28 März 2017 - 14:58

» [#9357]-[phpBB2] Registrierung funktioniert nicht
von amti Di 28 März 2017 - 14:17

» [Sammelthread] Unangebrachte Werbung
von Marcel´s Schnatterbude Mo 27 März 2017 - 9:46

» Admin Passwort vergessen
von ABC-Man Mo 27 März 2017 - 9:01

» Kalender
von Bigtuber So 26 März 2017 - 18:04

» Gifs einfügen
von Bigtuber So 26 März 2017 - 14:58

» Warrior Cats - NordClans
von Eislicht So 26 März 2017 - 0:28

» Gründeraccount Passwort vergessen
von Eozaen Sa 25 März 2017 - 20:02

www.forumieren.de

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
avatar
Sue~
Neuling
Neuling

Beiträge : 35
Anmeldedatum : 22.08.12
keine
phpBB2

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!
avatar
#Frank
Admin a.D.
Admin a.D.

Männlich Beiträge : 34607
Hinweis : Admin a.D.
Anmeldedatum : 13.08.08
keine
Firefox phpBB2

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
avatar
Sue~
Neuling
Neuling

Beiträge : 35
Anmeldedatum : 22.08.12
keine
phpBB2

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!
avatar
#Frank
Admin a.D.
Admin a.D.

Männlich Beiträge : 34607
Hinweis : Admin a.D.
Anmeldedatum : 13.08.08
keine
Firefox phpBB2

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