Member Avatar for npatel0317

I want that Navagation bar design through my page across instead of that small graphic and auto adjust deepening on monitor size.

Please shout out some ideas.

  • 2 Contributors
  • 2 Replies
  • 112 Views
  • 19 Hours Discussion Span
  • Latest Post Latest Post by npatel0317

Dani AI

Generated

A few practical, modern options to make the navigation bar stretch across the page and adapt to different screen widths. The quick table-based fix mentioned by will force a row to span the viewport, but a CSS-based approach is more robust, accessible, and easier to maintain long term—especially once multiple viewport sizes and high-DPI screens are considered. wanted the look of that small graphic to run across the full width while the site auto-adjusts; the patterns below address that directly.

A common, reliable pattern is to keep a full-width outer bar for the background graphic and an inner centered wrapper for the content. If the original artwork is a repeating center piece, slice it into three parts (left cap, repeatable center, right cap) and let the center repeat horizontally. For scalable crisp graphics, replace raster slices with an SVG or recreate the effect with CSS gradients. Use a flexible layout for the items (flexbox or inline-block with wrapping) so links redistribute naturally as width changes.

Example CSS patterns (minimal):

nav.sitebar {
  width: 100%;
  background: url('/images/nav-center.png') repeat-x left top;
}
nav .wrap {
  max-width: 980px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
nav a { display: inline-block; padding: 10px 14px; }

Notes and troubleshooting: avoid putting navigation text inside images (keeps links accessible and SEO-friendly); watch for repeating seams—use properly aligned slices or SVG; provide high-DPI assets or use vector art for retina; set a proper doctype to prevent quirks-mode layout; test on narrow screens to confirm wrapping and focus states. For a site created around 2007, progressive enhancement is a safe path: use CSS where supported but keep HTML-nav structure intact as a fallback.

Recommended Answers

All 2 Replies

Member Avatar for katarey

Hi There,

well you can make table width="100%" instead of width="501" to make table flexible, I have Attached the code with this reply

hope this will helpful for you

regards
Rahul

HMenu.zip (23.33 KB)
Member Avatar for npatel0317

Hi There,

well you can make table width="100%" instead of width="501" to make table flexible, I have Attached the code with this reply

hope this will helpful for you

regards
Rahul

hmm Rahul India we same nationality :D i'll check this code out when i get home thanks a lot for your help.

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.