Event List, lining up the content with the title and thumbnails.

[Jean]

Hi, Ive been messing with the css but cannot figure out how to line up the Title of the event with the details and the thumbnail. If I mess with the margins of the list-content it moves as a whole so the title and the details cannot be lined up.

I know it can be done as you can see here: http://events.8asians.com/events/
I’d like to achieve this look ultimately with the borders and everything. If anyone can help me it would be greatly appreciated.

My site is here: http://plalendar.com/events/upcoming/

[Jonah]

Hi Jean,

One thing I would suggest changing is the top margin on the .list-thumbnail class. You’ve got it set to 100px and that’s pushing the image way down. 20px looks a lot better. Other than that you just need to keep playing with things to get it right. You can do almost anything with CSS, you just need to know how to do it. Have you played around with positioning? You might try that too to get things positioned right. There are tons of articles online covering CSS positioning, here is one: http://css-tricks.com/absolute-positioning-inside-relative-positioning/

I hope that helps and good luck!

Regards,
Jonah

[Jean]

hmm okay i see but what im having trouble with is that the list-content-with-thumb div is one box and it moves both the titles/description and the details of the event. I just want to be able to move the Title/Descriptions.

Also How can I add borders after each events like this? http://events.8asians.com/events/

[Jonah]

Hi Jean,

If you want certain content outside of the list-content-with-thumb div, just put it into another container and then you can style that separately however you want.

You can view all the CSS/markup in the example site you linked to so maybe just look at that to see how they did it. If you’re using Firefox or Chrome just right click an element and select Inspect Element to view the markup and CSS.

To apply a bottom border to elements you just use: border-bottom: 1px solid #000; on whatever you want to apply the border to. I’m afraid anything else with this you’re on your own. Good luck!

– Jonah

[Author]

Posts