Jump to content

HTML5 semantics and w3css

Recommended Posts

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!

Link to post
Share on other sites

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.

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Create New...