Member Avatar for varoluscu_prens

Hi There;
I have designed a web site. There are buttons at the top of the web site, similar with daniweb.com has "Hardware&Software" , "Software Development" ,"Web development" and so on. But my web site looks perfect in my computer, however, positions of buttons corrupted in different computer that have different resolution settings.I've made visual settings in CSS and I've gave left, right position values in pixels. How can I overcome that problem?

Thanks in advance.

  • 2 Contributors
  • 1 Reply
  • 221 Views
  • 7 Hours Discussion Span
  • Latest Post Latest Post by almostbob

Dani AI

Generated

— the layout break comes from positioning header buttons with fixed pixel offsets or absolute positioning: that takes elements out of the normal flow so their placement depends on viewport size, font scaling and device DPI/zoom. is correct to push relative sizing; below are practical, modern fixes that keep a top nav stable across resolutions.

Use a centered container plus a flow-based nav instead of left/right pixel offsets. Example (flexbox is simple and robust):

.container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 1rem;
  box-sizing: border-box;
}

.header-nav {
  display: flex;
  justify-content: center;   /* center the buttons */
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;           /* allows wrapping on narrow screens */
}

.header-nav a {
  display: inline-block;
  padding: 0.5rem 1rem;
  text-decoration: none;
}

Also include a responsive viewport meta in your head:

<meta name="viewport" content="width=device-width, initial-scale=1">

Quick troubleshooting checklist: confirm <!DOCTYPE html> (no quirks mode); remove position:absolute / left/right pixel offsets from nav items; add box-sizing: border-box sitewide; test in browser DevTools using different viewport widths and zoom levels; use flex-wrap or a media query to change layout below a breakpoint. For older browsers that lack flex gap, use small horizontal margins on the links as a fallback.

Notes and cautions: pixels are fine for thin borders, icons or pixel-perfect images, but prefer rem, %, or vw for layout so things scale when the user changes root font size or when the viewport varies. rem is often preferable to em for predictable sizing because it references the root font-size. Following these steps (relative units + flow layout + a centered max-width container) will keep your buttons aligned on different resolutions and zoom levels while staying accessible.

Member Avatar for almostbob

pixels are not a layout tool, the size of a pixel is dependant on screen resolution
current best practice is to use em or % as dimensions for layout, these are scalar quantities that automatically adjust to window size screen resolution and user preference
a page laid out (example) as

body { width:100%; margin:1%; padding:1%;}
.menu { width:98%; margin:auto; padding:1%;}

always looks the same

added benefits of scalar dimensions;
content remains onscreen in partscreen windows, without horizontal scroll bars (Which absolutely P__ off users), on a large range of devices from phones(200px screen) to my laptop, plugged into a wall projector (3072px screen),,
and text auto adjusts to visual impairment font settings, making the site disability friendly

Edited by almostbob because: n/a
commented: Thank you almostbob. +1
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.