Member Avatar for BenzZz

Hi,

I know most of the basics of html and css but I'm looking to learn more of the advanced areas.

I find that most sites and books just cover the css techniques individually and do not really show the standards of how to create a high quality graphical responsive website.

Does anyone know anywhere that actually discusses and shows good standards of css styling?

Overall areas that confuse me are how images are used for buttons and only sections of graphics are clickable. Also, in the case of those high graphics websites in terms of backgrounds, is it most likely the case that it is one large image with clickable areas as buttons or many images?

Apologies if some parts of this is unclear.

  • 3 Contributors
  • 2 Replies
  • 348 Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by TimCadieux

Dani AI

Generated

Good starting points from this thread: ' pointer to CSS Zen Garden and 's menu/button collections are excellent for studying separation of content and presentation. For production-quality, modern responsive sites the pattern is consistent: semantic HTML + mobile-first CSS + fluid layout (Flexbox/Grid) + responsive images + accessible controls. Keep visuals as presentation, not baked into content.

For images-as-buttons and “only parts clickable”: prefer real interactive elements (semantic <a> or <button>) layered over graphics, or use inline SVG so separate regions can be links. Image maps (<map>/<area>) exist for geometric hotspots but are brittle for responsive layouts and require coordinate updates when scaling. Use them only for simple, static cases. (developer.mozilla.org)

Avoid slicing one huge artwork into clickable pieces. A more maintainable approach is to place separate interactive elements over a background (positioned absolutely inside a relatively positioned container), or give each button its own optimized asset (SVG or raster) and style with CSS. Example overlay pattern:

<div class="hero" style="position:relative; background-image:url('hero.jpg');">
  <a href="/signup" class="hero-cta" style="position:absolute; left:60%; top:40%;">Sign up</a>
</div>

Hero/background images should use CSS background sizing (for art-directed fills) and responsive image techniques (srcset/sizes or <picture>) for content images so devices get appropriately sized files. Also include width/height to avoid layout shift and use loading="lazy" when appropriate. (developer.mozilla.org)

Performance and accessibility are decisive: optimize and compress image assets, prefer SVG for icons when appropriate, make touch targets large enough and not hover-only, and use semantic controls (<button>, proper alt text, ARIA only when necessary) so keyboard and assistive tech work out of the box. These practices combined deliver high-quality, maintainable responsive sites. (developer.mozilla.org)

Recommended Answers

All 2 Replies

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.