HTML5 semantics and w3css

[pawalan]

Hi folks,

it's my first post here and while I have been learning a lot from w3schools in the past (compliments!!), I am just about to familiarize myself with w3.css.

For a start, I choose the architects template as basis for a project portfolio as joiner and just started to replace pictures etc. from the original template with my own stuff.

However, I would like to use the HTML5 semantic layout (header, footer, aside...) as much as possible and the w3css tutorial also states that it's possible because the w3-* classes can be applied to whichever HTML element.

So I tried to rewrite the images with top-left captions in the project section of the template into <figure> + <figcaption> elements, as semantically this is exactly what happens on the page. However doing so, the figure-element has much bigger margins/paddings as before, thus breatking the multicolumn-layout - please see https://portfolio.sven-goettner.de - the 4 pics with green background are created using my new semantic markup, while the 4 pics below with the red background are the original <div>-only code from the template. The difference is obvious...

I tried various combinations of which original <div>-tag to change into the respective semantic counterparts, but none was able to produce the original looks.

Could you please redirect me to a resource where I can learn how to fix this or tell me straight away what I am doing wrong?

Thank you very much for your support!

[pawalan]

Hi all,

28 views but no reply? Is there anything wrong with the post? Or just nobody has the same issue?

I would be happy to have some kind of feedback…

All the best, Sven 

[Funce]

Hi there,

I must've missed this when I cleared out my unreads, sorry about that.

w3.css applies base styling to semantic elements such as figure. In this example, the figure element has the base style of:

figure {
    margin: 1em 40px;
}

Using the inbuilt element inspector in most browsers reveals what styling is being applied.
You'll need to find a way to override this margin, probably with a custom class.