Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS CSS Challange

  • This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #36072

    Hey Guys,

    So i am developing a blog and there is going to be an unordered list of categories that will be dynamic, so they will be of varying word lengths. Here is a screenshot of the design, i am looking for a suggestion on how i can get the dotted lines on each side of the category names using CSS.

    https://skitch.com/exsite/g2f6c/teg-finalsitedesign.psd-100-career-fashion-finance-fitness-lifestyle-travel-rgb-8

    #94473
    jamygolden
    Member

    Say the <li> background is an image for now – One long line of dots. Then have the word wrapped in a span, with a white background + padding. That would give a similar effect to that.

  • Career
  • Note: The span background /may/ cut the some of the dots in half if they are larger than 1px. That’s unavoidable though. A similar problem was posed in the recent CSS Off.

    #94474

    Thanks Jimmy. I was thinking something along those lines but was trying to avoid the dots being cut off.

    Also was thinking that it could be achieved with :before and :after psudo classes but not sure if that would be any different when it comes to the final result.

    Do you have a link to the similar problem in the CSS Off?

    #94475
    jamygolden
    Member

    The section titles have the squares starting right after the titles without being cut off each time. http://www.unmatchedstyle.com/cssoff/signup.php

    We’ll see what everyone did to solve that problem when the top entries are linked to ( that should be in about 2 – 4 weeks.

Viewing 4 posts - 1 through 4 (of 4 total)
  • The forum ‘CSS’ is closed to new topics and replies.