Lesson 8 ~ Styling asks
What? I'm still alive?
Yeah, yeah. I've just been quite busy with other stuff. Plus I've already covered most things so I didn't really know what to talk about anymore.
Either way, I got this request:
So I figured, I'll do a tutorial on how to style answer posts!
First things first: you'll need a general idea of what you want them to look like.
You can't really start coding something without at least knowing a little bit what you want them to look like. I'll go over two examples with you that will end up looking like these:
Number one:
Number two:
We'll first have a look at what variables we can use. I refer again to this page.
So we have pretty basic: the question, the answer, the asker, and a few different sizes of asker icons.
Example one
We'll first lay out the basic html, very simple, like this:
Which looks like
Secondly we'll take a look at what divs we'll need. The asker is different from the question, and we'll need a wrapper for asker and question. Then we'll need one for the whole post. So to start, we'll make three divs.
I want everything to be centered, the asker to be uppercase and have some letter spacing, and the wrapper to have a double border.
With this fairly simple code, it already looks very similar to what we wanted to achieve:
All we need is a little padding to the wrapper and the asker:
And we're done! The resulting post looks like
Which is exactly what we wanted. So far so good!
The second example
The second one is a bit more complicated than the first. We'll now need separate divs for asker, image and question.
Without any styling done, it looks like
Which is frankly not really close to what we want. A bunch of stuff needs to happen, first of all, I want the asker to be uppercase and the question to have a background color. We'll give it some padding as well, to make it look somewhat nicer.
Which gives us
Which is already somewhat closer. Now we need to mess around with margins a bit to get what we want. The image needs to move to the right, and so does the asker. The question itself needs to move too, but the background doesn't, so there we don't use a margin, but a left padding. Since the image is 48 px wide, and we're gonna move it 15px to the right, we'll move the rest about 70 px.
(I also made the padding on the question a bit larger because it looks nicer. Sometimes you just have to guess a bit and see what looks better)
Which now gives us
So now all we need to do is move the asker up. Because all the divs are positioned relative, all the rest will move up too. To do that, we need a negative top margin of around 35px.
So, our final code is this:
Which makes the ask as we wanted,
There you go! As usual, feel free to send me questions, suggestions for tutorials, and don't forget to give me some attention by liking this post if it was helpful :)
Happy html'ing!
← previous lesson | next lesson →
