Grow your CSS skills. Land your dream job.

Need help with styling semantic markup

  • # April 12, 2011 at 6:34 pm

    I’ve been tasked with defining some HTML/CSS which will be used to both produce a PDF (via Prince XML) and a web page. I’ve been given a design that I’m supposed to replicate as best as I can. I’m trying to do this with HTML 5 and CSS 3. I’ve come across a section of the report that I can format correctly if I use divs/spans and tables, but I’d like to try and keep the markup clean of formatting elements and use CSS for the layout as much as possible. I’m hoping that someone here can help me out or point me to articles/examples that might help.

    If I were doing this with XML, I would have a collection of elements something like this:


    Some Issue Name
    4
    21%
    blah blah blah

    In the report, I need to produce a heading which displays the issue name, the quantile (using a graphic based on the value), and the weighting score. The header would be displayed in a box with a particular background color. Underneath this header is the issue text. An additional complication is that the ‘weighting’ information contains the additional text of ‘Key Weighting’. The numeric value is displayed on top with the text appearing directly under the number.

    In the past, I would have done something like this:










    Some Issue Name





    21%
    Key Weighting


    I could set my background colors and images as I want and then display the text below this table in a paragraph tag. However, this isn’t very semantic and I would like to be able to accomplish the same layout using semantic markup and CSS 3.

    My current approach is to define each issue using HTML 5 elements something like this:




    Some Issue Name


    4


    21



    blah blah blah



    I can sort of get this to layout the way I want by floating the H2 and the p elements inside of the header, but I’m not sure how to add the ‘Key Weighting’ text and, more importantly, how to get it to sit underneath the value held in the ‘weighting’ paragraph. I’ve thought about doing something like this:


    21Key Weighting


    which would get me the text, but I still don’t know how to get it formatted the way I would like.

    As I said earlier, I could do this with a table and be done with it, but I’m trying to extend my knowledge and abilities with CSS beyond the simple stuff that I already know how to do. I’m still relatively new to using CSS so perhaps I’m just completely overlooking something.

    Anyway, I’m just looking for a little push in the right direction.

    Thanks.

    # April 12, 2011 at 7:16 pm

    Honestly, it kind of sounds like you want to jump in the deep end when you don’t know how to swim.
    http://www.google.com/search?q=html5

    http://www.google.com/search?q=css

    # March 28, 2013 at 2:12 am

    As I understand, it’s **better use of available TAGs with the content**.

    # March 28, 2013 at 7:00 am

    Numbers could be played with but: http://codepen.io/anon/pen/dFmnf

    # March 28, 2013 at 8:12 am

    This is two year old post…

    # March 28, 2013 at 8:20 am

    >This is two year old post…

    Oops…hadn’t noticed.

Viewing 6 posts - 1 through 6 (of 6 total)

The topic ‘Need help with styling semantic markup’ is closed to new replies.

*May or may not contain any actual "CSS" or "Tricks".