Need help with styling semantic markup

[jhoweaa]

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.

[DogsGhost]

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

[Kushal Jayswal]

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

[Paulie_D]

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

[wolfcry911]

This is two year old post…

[Paulie_D]

>This is two year old post…

Oops…hadn’t noticed.

[Author]

Posts