HOME | DD
GinkgoWerkstatt — .:Common Mistakes
Published: 2010-12-03 20:50:34 +0000 UTC; Views: 8495; Favourites: 168; Downloads: 0
Redirect to original
Description
To be honest, i have no idea if this is really helpful for anyone. Made this back in January (as you can see in the screenshots) and it made sense for me... somehow.Didn't really checked the content once again and there was no one proof reading it, so if there are strange things and lots of grammar/spelling mistakes you know why
Let me know, if it is helpful!
---
My tutorials/guidelines 
CSS Guideline [link] Old vs Gruze Journals [link] Ungruze your Journals [link] How to add image paths [link] How to add a gallery CSS [link] How to make a journal layout [link] ABC of dA CSS Part I [link] ABC of dA CSS Part II [link] How to add CSS to Groups [link] How to create a new Stylish Script [link] More can be found here: [link]
Related content
Comments: 61
Good to know that it is useful
Haha yeah i know what you mean. If you ever need help, feel free to note me!
👍: 0 ⏩: 1
Thanks for the offer of help
I think it is very likely I will need it
👍: 0 ⏩: 0
It is helpful in general I think. I am very happy to know I shouldn't use positioning and floats. 
👍: 0 ⏩: 1
You can use it, but usually you can get the same result - unless it gets very compley - without using then and it will cause less errors then
👍: 0 ⏩: 1
While practicing I noticed that I can get what I want without using them. For now my wishes are not very complicated.
👍: 0 ⏩: 1
If later I need help can I ask you?
👍: 0 ⏩: 1
Haha, thank you too!
👍: 0 ⏩: 0
I am trying to learn a bit more about making journal layouts and the like. And while I do not understand all of this just yet, I did find that just looking at this with what little I know about html and nothing about css that it still made a lot of sense.
I am sure it will be even more helpful in the future.
👍: 0 ⏩: 1
Oh, that's good to know. I often babble right away, so knowing that it sounds helpful or makes sense is really great
👍: 0 ⏩: 0
This is tonnes helpful! I learnt something I was going to look up from this so that was handy.
👍: 0 ⏩: 1
It is helpful, thanks. It definitely reminds me how often I code backwards... top to bottom, like I read a journal. Who invented that CSS should read from bottom to top? What is the logic in that? So basically, in order for everything to tier correctly, I should put all my .gr, .gr-top, .gr-box, .gr-body backwards from how I normally do so they are on the bottom of my style sheet.
This guide would have been helpful earlier on two counts, that and the float vs position. I'm using float more and trying to use elements that are already positioned closer to where I want them to end up. I was just coding, where my h2 element wasn't coming up the color I had set the entire journal to, and I was curious why. I just popped the color code in and didn't think twice. Same with the entire .gr-top, each were the default colors.
I'm sure my style sheets are a headache for anyone else to read. I'll have to try to train myself to keep them more organized. I often style it as I think of an element, which isn't necessarily the right order to go... I really eed to rework all my old stuffs, they're more of an embarassment now.
As always, thanks for your useful tips!
👍: 0 ⏩: 1
It's not an invention, but CSS always takes the last definition in a class or the code and overwrites them. For example if you have this:
.class{
border: 1px solid #fff;
color: #000;
border: 3px solid #f00;}
The border will always will have the settings of the last bit. Because it overwrites the prior definition. Often people add several properties to one class and wonder, why nothing happens the way they want it. But if you tell them, that the bottom is more important than the top they actually realize, what was wrong before.
And no, you shouldn't do it all backwards lol. It's difficult to explain, but the more general stuff like the classes you mentioned should be at the top, because if you define other things later they will be overwritten.
It's when you define the a-tags. If you place maybe .text a{...} at the top and use a definition for the general a at the bottom it can happen, that the general thing will overwrite your specific link-definitions.
If you take a look at my CSS, i always keep the CSS structured as the journal is.
.gr-box
.gr-top
.gr-body
.text
.bottom
And in between i place classes that are general at the top and specific at the bottom. If you do it that way - or keep any other structure- it will also easier for you to spot bugs or find elements quicker.
I'm sure my first style sheets have been pure chaos as well. It's all part of the learning process
My pleasure!
👍: 0 ⏩: 1
And, note to self, do not code on sleep deprivation....
👍: 0 ⏩: 1
I'm very far to reach this step of the "coding" but for the small i understand....... the more simple the better!
Anyway at this time i really prefer let someone create an "autocoding" software just with the awesome "convert" button !
👍: 0 ⏩: 1
The simple the better always fits to any kind of code
👍: 0 ⏩: 0
Thank you very much for this tutorial, it was a good read and I'll keep your tips in mind when I code my next journal skin 
👍: 0 ⏩: 1
AMAZINGLY HELPFUL!Would you mind if i was to feature this in a future journal?
👍: 0 ⏩: 1
👍: 0 ⏩: 1
An informational and well written guideline. I have problems to regard the right hierarchy of classes (your example with the red and green font color hit it for me).
I'm not sure (I barely dare to say it), but you mentioned the CSS code is interpreted from bottom to top. In my opinion it's exactly the opposite (top to bottom).
Right?
👍: 0 ⏩: 1
Ich mach mal auf deutsch, weils einfacher zu erklären ist
Was das Letzte angeht, kommt drauf an wie man das interpretiert und prinzipiell sind wir beide richtig. Ich habs damals so gelernt und habe auch festgestellt, dass Leute damit besser klar kommen, wenn man sagt, dass es von unten nach oben gelesen wird.
Natürlich fängt der Browser oben, geht alles nach unten durch und nimmt immer die letzten Werte. Wenn du aber anfängst jemanden zu erklären, dass Werte überschrieben werden, abhängig von der Struktur usw sind die meisten schon verwirrt. Wenn du aber sagst, dass der unterste Wert (wenn man meinetwegen zweimal nen Rand definiert) genommen wird, verstehen die meisten das gleich auf Anhieb.
Ich hab nämlich schon oft Code gesehen, mit eben jenen Rand-Definitionen, wo sich Leute dann gewundert haben, dass nichts funktioniert wie es soll.
👍: 0 ⏩: 1
Ja, ich verstehe was du meinst.
Gerade bei den kombinierten Selektoren habe ich auch Nachholbedarf. Ist mir schon manches mal passiert, dass ich eine Klasse geändert habe, und nachher keinen Effekt erkennen konnte.
Manches ist einfacher wenn man es so anwendet wie du es oben beschrieben hast (Beispiel: 'div p a').
Und du hast Recht: wir haben beide Recht.
👍: 0 ⏩: 1
Kenn ich einiges von. Gerade wenn man anfängt CSS zu lernen, schreibt man einfach drauf los ohne die Zusammenhänge zu kennen und wundert sich letztendlich warum was anderes bei rauskommt. Und man braucht halt immer mehr zusätzlich, um die "Fehler" zu beheben.
Haha ja
👍: 0 ⏩: 0
You musta put some effort into writing this, it's awesome 
👍: 0 ⏩: 1
I dunno, it's nearly a year ago when i did this, i just put together everything today
And it's just annoying me, when i always see code full of !important or float/position
👍: 0 ⏩: 1
I'm actually guilty of using !important on everything because I'm used to skinning where you generally need to use it lol
👍: 0 ⏩: 1
But you have a good excuse, so it is ok
👍: 0 ⏩: 0
I'm amazed by your knowledge of CSS T___T i know nothing.
👍: 0 ⏩: 1
It's a matter of time and learning
I got to know the basic when i attended an art school and over the years i learned more and more stuff about it
👍: 0 ⏩: 1
| Next =>