Entwicklung und Betrieb von Websites, allgemeine Programmierung

[(Mini-)Guide] Boxen mit CSS

#845071 von Fiffyen
22.10.2011, 15:02
Strong_Kobayashi hat geschrieben:Du bist nun berechtigt den Guide zu veröffentlichen.

So, da mich jetzt einige Leute auf das Inhaltsverzeichnis meines Servicecenters angesprochen haben, möchte ich nun hier den Style-BBCode und ein paar Styles näher erklären:

Einleitung

Mit dem Style-BBCode kannst du, wenn die Formatierungsmöglichkeiten (cibc, cibhc, border, citabs, label, bgcolor, hintergrund-b, width, monospace, color, ...) nicht mehr ausreichen, dein Dokument mit der Sprache CSS (fast) ganz frei gestalten. Dafür musst du dich aber mit CSS auskennen.

Regelungen

So, ich möchte hier noch auf ein paar Regelungen bezüglich dieses Guides hinweisen:
  1. Fragen zu CSS, BBCodes und Verständnisfragen werden hier im Thread gestellt.
  2. Verbesserungsvorschläge sowie Fehler können mir mit einem aussagekräftigen Titel per PN zugeschickt werden.

Hinweis: Ich beziehe mich hier bewusst hauptsächlich auf die Navigation bzw. das Inhaltsverzeichnis. Natürlich zeige ich auch andere Beispiele.


Einführung in CSS

So, vorher gebe ich euch noch eine kleine Einführung in CSS. Jedenfalls in die so genannten Eigenschaften, die wir hier verwenden werden.


Hinweis: Eigenschaften werden immer durch ein Semikolon [ ; ] getrennt. Solltest du dies vergessen, könnte es sein, dass am Ende der Style nicht richtig angezeigt wird.


border . - . Der Border (de.: Rahmen/Rand, Grenze) die meist dunklere Umrandung des Kastens. Diese setzt sich aus 3 Angaben zusammen: der Rahmendicke, der Rahmentyp und der Rahmenfarbe. Standartmäßig in dieser Reihenfolge.

Bei der Rahmendicke kannst du jeden numerischen Wert wählen (Protzentangaben funktionieren nicht). Ich würde hier eine Pixelangabe unter 10px empfehlen.
Der Rahmentyp gibt an, wie der Rahmen aussehen soll. Ob er z.B. durchgezogen, gepunktet oder gestrichelt sein soll. Das kann man wählen wie man möchte, allerdings empfehle ich bei den Inhaltsverzeichnissen einen durchgezogenen Rahmen.
AngabeBedeutungBeispielbild
noneunsichtbarer Rahmen-
hiddenunsichtbarer Rahmen-
soliddurchgezogener Rahmenhttp://topdan.de/files/pokefans/rahmen-solid.png
dashedgestrichelter Rahmenhttp://topdan.de/files/pokefans/rahmen-dashed.png
dottedgepunkteter Rahmenhttp://topdan.de/files/pokefans/rahmen-dotted.png
doubledoppelt durchgezogener Rahmenhttp://topdan.de/files/pokefans/rahmen-double.png
inset3D-Rahmenhttp://topdan.de/files/pokefans/rahmen-inset.png
outset3D-Rahmenhttp://topdan.de/files/pokefans/rahmen-outset.png
ridge3D-Rahmenhttp://topdan.de/files/pokefans/rahmen-ridge.png
groove3D-Rahmenhttp://topdan.de/files/pokefans/rahmen-groove.png


So, zur besseren Übersicht, hier noch ein kleines Praxisbeispiel: http://de.selfhtml.org/css/eigenschaften/anzeige/border_style.htm.

Die Rahmenfarbe setzt sich aus einer Raute und einem Sechsstelligen Hex-Wert zusammen. Das zusammen zeigt die Farbe an. Alle Hexwerte die es gibt, kannst du mit einem Colorpicker herausfinden.

! Beachte, dass die Rahmenbreite mit zur Gesamtbeite der Box gerechnet wird! Hast du eine 200px breite Box, ist sie mit Rahmen 202px breit.


background-color . - . Diese Eigenschaft bestimmt wieder mithilfe eines Hex-Wertes die Hintergrundfarbe. Kleiner Tipp: Wenn du eine helle Farbe benutzt, dann nimm eine dunkle Schriftart, benutzt du aber eine dunkle Hintergrundfarbe, nimm eine hellere Schriftart. Die gesuchte Farbe, kannst du mit einem [url=#links-colorpicker]Colorpicker[/url] herausfinden.

padding . - . Diese Eigenschaft setzt du ein, wenn du nicht möchtest, dass dein Text direkt am Rand "klebt". Das ist der sogenannte Innenabstand. Dieser rechnet sich ebenfalls mit zu der Boxbreite dazu.

float . - . float ist eigendlich die wichtigste Eigenschaft für das Inhaltsverzeichnis. Sie stellt den Textumfluss ein. Das heißt, die Box steht nicht über dem Text sondern wahlweise links oder rechts daneben. Die wird vom Text umflossen. Hier gibt es zwei Richtungen, einmal kann das Element (die Box) links (float: left) umflossen werden, oder rechts (float: right).

width . - . Mit width könnt ihr die Breite eurer box mit einem numerischen Wert angeben.

So, dass muss erstmal an CSS reichen. Wenn ihr fragen dazu habt, könnt ihr sie gerne hier im Thread stellen. PN's zu diesem Thema werden ignoriert, es sei denn, sie enthalten sinnvolle Verbesserungsvorschläge.

Praxisbeispiel

Okay, nun, nachdem wir das wichtigste geklärt hätten, fängt nun der Teil an, wo wir zur Sache kommen. Ich zeige euch wie ihr Schritt für Schritt eurer eigenes Inhaltsverzeichnis aufbaut.

Schritt 1:
Als erstes schreibt ihr den Style-BBCode in das Eingabefeld:
Code: Alles auswählen[style={CSS}]{TEXT}[/style]

{CSS} und {TEXT} sind in diesem Fall Platzhalter für euren CSS-Code und den Text.

Schritt 2:
Dann ersetzt ihr {CSS} durch border: 1px solid #000000;. Das müsste dann einen schwarzen, 1 Pixel starken Rand ergeben, stimmts?
Code: Alles auswählen[style=border: 1px solid #000000;]{TEXT}[/style]

Als Praxisbeispiel müsste es dann so etwas ergeben:
{TEXT}


Schritt 3:
Natürlich sieht es fad aus, wenn der Text so am Rand klebt... also helfen wir mit padding: 5px; ein bisschen nach. Schreibe diese Eigenschaft hinter die Rahmenangabe (auch hinter das Semikolon [ ; ]).
Code: Alles auswählen[style=border: 1px solid #000000; padding: 5px;]{TEXT}[/style]

So sieht es gleich viel besser aus:
{TEXT}


Schritt 4:
Damit die Box nicht nur durch den Rahmen vom Text unterscheidbar ist, sollten wir auch noch eine schöne Hintergrundfarbe mit background-color: #73E273; mit ins Spiel bringen.
Code: Alles auswählen[style=border: 1px solid #000000; padding: 5px; background-color: #73E273;]{TEXT}[/style]

Und? Man kann sie doch wesentlich besser vom Normalen Inhalt unterscheiden als vorher.
{TEXT}


Schritt 5:
Eine Sache fehlt jetzt aber noch. Der Textumfluss! Damit die Box nich so langweilig mitten im Text hängt, "floaten" wir sie jetzt mit float: right;. Dann wird sie links vom Text umflossen:
Code: Alles auswählen[style=border: 1px solid #000000; padding: 5px; background-color: #73E273; float: right;]{TEXT}[/style]

{TEXT}
So, jetzt kann hier beliebig viel Text stehen, und die Box bleit rechts unberührt hängen.

Schritt 6 (Freiwillig):
Wenn ihr eine Box haben wollt, die immer eine feste Breite hat, dann könnt ihr diesen Schritt noch mitnehmen. Setzt einfach width: 200px; (Die Angabe 200px kann variieren) hinter die float-Eigenschaft und schon ist eure Box 212px breit.
Code: Alles auswählen[style=border: 1px solid #000000; padding: 5px; background-color: #73E273; float: right; width: 200px;]{TEXT}[/style]

{TEXT}
Fertig ;)

Weitere Beispiele

Hier liste ich ein paar Styles auf, welche ihr für eure Tauschbasare, Pokémon Hacks oder Guides verwenden könnt.

Style 1: Eine Simple Contentbox
So, als erstes findet ihr hier eine ganz einfache Box, wo ihr euren Text reinschreiben könnt (Hinweis von The Libertine):
Code: Alles auswählen[style=border: 1px solid #828282; padding: 12px; background-color: #D3D3D3; width: 700px;]{INHALT}[/style]

{INHALT}


Style 2: Eine Überschrift
Eine andere Überschrift, welche mal ein bisschen anders aussieht, als die Standarts von Pokefans.
Code: Alles auswählen[style=border-bottom: 2px solid #98635C; color: #98635C; font-size: 150%;]{INHALT}[/style]

{INHALT}


Style 3: Eine Box mit runden Ecken
Das hier kannst du eventuell auch als Inhaltsverzeichnis oder Contentbox nehmen... du misst nur den width und float Wert anpassen.
Code: Alles auswählen[style=width: 200px; padding: 5px; background-color: rgb(255, 255, 255); margin: 2px 0px 2px 2px; border: 1px solid #cccccc; position: relative; -moz-border-radius: 8px;]Box mit 8px runden Ecken[/style]

Box mit 8px runden Ecken


Mehr gibts erstmal nicht, wenn ihr noch eine Idee habt, dann schickt sie mit per PN und ich versuche sie umzusetzen. Wenn ihr selbst ein Style gemacht habt, dann könnt ihr ihn mir auch schicken, und ich veröffentliche ihn hier.

FAQ

Hier stelle ich Fragen rein die Häufig hier gestellt werden. Bevor ihr hier eine Frage stellt, schaut nochmal hier nach:

„Es wird nichts angezeigt.“
- Kontrolliere die Semikola. Ist wirklich hinter jetder Eigenschaft ein Semikolon?


Nachteile/Einschränkungen ~ FAQ

Um die Webseite vor unerwünschten "CSS-Hacks" zu schützen, hat The Libertine ein paar Einschränkungen mit eingebaut. Das ist unteranderem:
  • die Positionierung es Elements ist strikt festgelegt,
  • die Verwendung von Hintergrundbildern wurde deaktiviert

Ich bin im Moment nicht sonderlich gut, über die Verbote informiert. Ich werde mich aber bei passender Gelegenheit mal schlau machen.

Links

Tools


Dieser Colorpicker zeigt alle Farben in RGB-Farbstufen und Hexdezimalen-Werten an. Wirklich ein sehr gutes Tool.

Verweise

CSS Eigenschaften

Sonsiges:
Zuletzt geändert von Fiffyen am 01.11.2011, 20:31, insgesamt 2-mal geändert.
-0
+1

Werbung

Registriere dich kostenlos und beteilige dich aktiv in diesem Forum, um diese Werbung auszublenden.

Re: [(Mini-)Guide] Boxen mit C...

#845324 von SpineRiDeR
23.10.2011, 20:05
gj! :up:
So etwas hab ich hier nämlich vermisst!
Zwar kannte ich schon einiges daraus (hauptsächlich indem ich einfach andere Style-Codes zitiert und sie mir näher angeschaut hab :P), aber das ist mal wieder eine sehr ausführliche Sammlung, die denk ich vielen weiterhelfen wird ;)
-0
+0

Re: [(Mini-)Guide] Boxen mit C...

#845406 von Fiffyen
24.10.2011, 16:24
Vielen Dank für deine Meinung. Hast du noch Verbesserungsvorschläge oder Erweiterungen, was ich noch hinzufügen könnte?
-0
+0

Re: [(Mini-)Guide] Boxen mit C...

#845409 von SpineRiDeR
24.10.2011, 16:34
Da ich mich selbst nicht so gut damit auskenne weiß ich auch nichts was da fehlen könnte ;)
Grad ist mir nur ein kleiner Tippfehler beim Durchlesen aufgefallen, aber sicherlich nichts weltbewegendes...
  • die Positionierung es Elements ist strikt festgelegt,
-0
+0

Re: [(Mini-)Guide] Boxen mit C...

#845412 von Fiffyen
24.10.2011, 16:40
Danke dir. Der Fehler wurde ausgebessert. Naja, muss ich halt auf weitere Fragen bezüglich dieses Themas warten ^^.
-0
+0

Re: [(Mini-)Guide] Boxen mit C...

#846785 von SpineRiDeR
31.10.2011, 13:15
Gibt es auch die Möglichkeit Bilder bzw allgemein Grafiken als Hintergrund zu benutzen?
-0
+0

Re: [(Mini-)Guide] Boxen mit C...

#846787 von Birne94
31.10.2011, 13:18
Es gibt die Möglichkeit über das background-image-Attribut, jedoch verstößt dies u.a. gegen die Signaturregeln auf Pokefans. Außerdem gab es vor einiger Zeit verschiedene Vorfälle bezüglich dieses Einbindens, weshalb das besagte Attribut hier deaktiviert wurde.
Code: Alles auswählenbackground-image: none !important
=> Es wird immer kein Bild angezeigt.
-0
+0

Re: [(Mini-)Guide] Boxen mit C...

#846792 von SpineRiDeR
31.10.2011, 13:36
Es wär auch nicht für die Sig gewesen.. mh Shit, schade ich hätte grad ne gute Verwendung dafür gehabt :/
-0
+0

Re: [(Mini-)Guide] Boxen mit C...

#846990 von Fiffyen
01.11.2011, 15:06
Anmerkung

Seit ich diesen Guide veröffentlicht habe, bekomme ich per PN Dinge geschickt wie "Ich verstehe das nicht!" oder "da komm ich nicht zurecht mit". Deswegen möchte ich hier jetzt mal etwas loswerden: Jegliche PN's wo keine genaueren Details wie, was ihr an diesem Guide nicht versteht und bei welchen Abschnitten ich noch etwas dazuschreiben oder definieren (genauer ins Detail gehen) kann, werde ich diese PN's ignorieren!


Ich bin auch schon darüber gestolpert... ich wollte eigendliche meinen Tauschbasar mit nem Hintergrunddesign verschöner. Das hatt dann leider auch nicht geklappt. Soll ich das noch mit dazu schreiben?
SpineRiDeR hat geschrieben:Es wär auch nicht für die Sig gewesen.. mh Shit, schade ich hätte grad ne gute Verwendung dafür gehabt :/
-0
+0

Re: [(Mini-)Guide] Boxen mit C...

#847078 von SpineRiDeR
01.11.2011, 19:00
Kannst du der Vollständigkeit halber machen, dann aber auf jeden Fall mit Verweis darauf, dass es hier auf PF nicht möglich ist.

Btw sollten alle die Fragen zum Thema haben diese auch hier stellen. Dann können auch alle mithelfen und es wird nicht nur eine Person belastet...
-0
+0

Re: [(Mini-)Guide] Boxen mit C...

#847114 von Fiffyen
01.11.2011, 20:37
So, ich habe jetzt die entsprechenden Regelungen zu meinem Beitrag hinzugefügt. Für die Einschränkungen des BBCodes habe ich allerdings schon einen Absatz: Nachteile/Einschränkungen ~ FAQ. Dieser ist mir gerad ins Auge gesprungen, als ich in der Navigation die Regelungen eingefügt habe.

@SpineRiDeR: Dort findest du auch die Einschränkung des Hintergrunds wieder. ;)
-0
+0

Re: [(Mini-)Guide] Boxen mit C...

#893902 von SpineRiDeR
25.04.2012, 16:54
Gibt es eine Möglichkeit bei der float-Eigenschaft, den Textumfluss beidseitig zu machen? Sodass quasi die Box in der Mitte steht und der Text links und rechts vorbeifließt (bzw hätte ich nichtmal einen Text drumrum). Wenn ich die Align-Eigenschaft um die Box auf "center" setze wird auch der komplette Text innerhalb der Box zentriert, was eigentlich nicht mein Ziel ist..
-0
+0

Re: [(Mini-)Guide] Boxen mit C...

#893954 von Rumo
25.04.2012, 19:52
Mit float nicht, aber über margin (bestimmt den "Außenabstand" einer Box) geht das:
Eine Box in der Mitte:
Code: Alles auswählen[style=margin:auto; width:50%;]Eine Box in der Mitte[/style]
-0
+0

Re: [(Mini-)Guide] Boxen mit C...

#893975 von SpineRiDeR
25.04.2012, 21:20
Ahh, perfekt, genau so wollte ich das haben =)
-0
+0

Wer ist online?

Mitglieder in diesem Forum: 0 Mitglieder und 1 Gast