Heute gibt es ein komplizierteres Tutorial, wobei ich euch schon jetzt sagen kann: Es ist nicht so schwer wie es aussieht und wenn ihr alles Schritt für Schritt nachmacht, ist liegt Wahrscheinlichkeit, dass ihr Erfolg habt, bei neunundachtzigkommaperiodesiebenprozent!
1. Zunächst brauchen wir Chrome. Ich kann euch diesen Browser nur empfehlen, er ist für mich nicht nur die schnellste, sondern auch er beste zum Programmieren. Und für dieses Tutorial brauchen wir diesen Browser.
2. Ist der Browser installiert? Dann öffnet euren Blog, rechtsklickt euren Post-Footer (vorausgesetzt ihr habt keine Rechtklicksperre, ansonsten könnt ihr die ja kurz entfernen) und drückt auf "Element untersuchen".
3. Jetzt öffnet sich das Dev Tool von Chrome, also erschreckt euch nicht. Und keine Sorge, egal was ihr im Dev Tool macht, nur ihr seht das ganze und durch einfaches neuladen werden alle Änderungen gelöscht.
Zur groben Aufteilung: links wird der HTML-Code dargestellt. Dieser lässt sich aufklappen, um "tiefer" in den Code einzublicken. Rechts ist der dazugehörige CSS-Code - je nach dem, welchen HTML-Code ihr links ausgewählt habt, erscheint dazu rechts das CSS. Oben wird eure Seite angezeigt. Geht ihr im HTML-Code mit der Maus über die Zeilen, werden verschiedene Bereiche oben eingefärbt. Daran erkennt ihr, welcher HTML-Code für welche Sache zuständig ist.
Die Dev Tools sind dafür da, um bestimmte Teile einer Seite näher zu untersuchen, aber auch um Änderungen im Code vorzunehmen, die man im Fenster gleich sehen kann, aber ohne dass der richtige Code verändert wird.
Jetzt fährt ihr mit der Maus langsam über den Code, bis oben ein gesamter Post inklusive Postfooter und Posttitel markiert ist. Klickt diesen Teil des Codes an.
4. Rechts werden nun andere CSS-Codes angezeigt. Sucht unter "Matching CSS Rules" nach einem margin oder padding, denn die beiden Werte bestimmen die Abstände zwischen einzelnen Elementen.
Klickt die Werte an und spielt mit ihnen herum, indem ihr die Zahlen ändert. (Entweder durch eingeben, oder ihr markiert einzelne Zahlen und drückt mit den Pfeiltasten.) Im Fenster oben ändert sich parallel zu euren Änderungen alles mit, sodass ihr sehen könnt, was ihr eigentlich da macht.
Allgemein zu Margin und Padding kann man vieles erzählen, dazu mache ich aber lieber ein eigenes Tutorial, da das viel zu viel wäre - wer nicht warten kann, darf sich folgendes anschauen: 1 2 3
Hier ein kleines Beispiel, wie sich Änderungen im Dev Tool auswirken können:
5. Wisst ihr welche Werte ihr verändern wollt? Dann öffnet euren HTML-Editor und sucht nach der Überschrift, die über eurem Margin/Padding steht. In meinem Fall ist das .post
Ändert eure Werte ab. Und schon seid ihr fertig.
Mit den Dev Tools könnt ihr individuelle Probleme auf euren Blog ermitteln und verändern. Das beste an den Tools: Ihr könnt so oft ausprobieren, wie ihr wollt, es ändert sich erst dann, sobald ihr es im HTML-Editor geändert habt!
Oh super, das Tool kannte ich schon, aber wusste nicht wirklich, was es mir bringen soll ;)
AntwortenLöschenIch kann grad nicht nachschauen, weil ich nicht daheim bin, aber mit Opera und Firefox geht das auch!
AntwortenLöschenWer also nicht gleich einen neuen Browser nutzen will, kann es auch bei den genannten beiden ausprobieren.
Bin mir nur grad nicht sicher, ob ich mir dafür ein Addon runterladen musste.
(ich persönlich mag Chrome halt nicht so :P )
Für Firefox gibt es das auch, musst du aber nochmal extra als Addon installieren - sieht auch etwas anders aus und ist nicht so mein Fall :D
LöschenJa für Firefox braucht man ein Addon, geht damit aber genauso gut.
AntwortenLöschenDas Ganze nennt sich dann Web Developer.
Lustig, ich benutze das Tool auch öfters, habe aber noch nie festgestellt, dass man da was ändern kann :D Danke für den Hinweis :)
AntwortenLöschenwie kann man die Änderungen denn speichern?
AntwortenLöschenLiebe Grüße, Saphira :*
Bei mir funktioniert es einfach nicht, da hinter magrin sowieso keine zahlen stehen und ich hab es schon mit Zahlem; versucht bringt nix :D
AntwortenLöschenBei mir finde ich beim html weder margin noch padding:( HILFE!
AntwortenLöschenNein es ist alles gut, hat sich erledigt:) Trotzdem danke für die Antwort:)!
Löschen<3
Bei mir tauchen leider die CCS Rules nicht mal auf :( Woran könnte das liegen?
AntwortenLöschenHallo meine Lieben,
AntwortenLöscheniKann mir bitte mal jemand sagen, wie ich einen Abstand zwischen zwei Post bringe?
Das genauere Problem ist, dass wenn meine Mitbloggerin und ich am selben Tag ein Post verfasse, die komischerweise ineinader gehen ohne jeglichen Abstand. Liebe Mira ich habe dein tutorial versucht aber leider tut sich nicht, kannst du mir vielleich helfen?
Hier der Link zum Blog: http://seelen-staub.blogspot.de/search/label/Blog
Danke schon im voraus!
Alles Liebe, Ally
Die Dokumentation eines Prozesses beinhaltet in der Regel einen begrenzten Zugriff auf Daten. Und je mehr Teilnehmer in den Prozess, desto mehr Fehler und Schwierigkeiten treten in der Regel auf. Deshalb habe ich mich schon vor langer Zeit entschieden und ein Programm gekauft, das das Passwort aus dem MS Office und Excel wiederherstellt http://www.passwordlastic.de/word-passwort-knacken . Nachdem ich 4 Jahre in der Umgebung von Textern verbracht habe, habe ich erkannt, wie wertvoll diese Software ist.
AntwortenLöschen