Jump to content

pawalan

Members
 View Profile  See their activity

  • Posts

    2

  • Joined

  • Last visited

 Content Type 

Posts posted by pawalan

    HTML5 semantics and w3css

    in CSS

    Posted

    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!

×
×
  • Create New...