Member Avatar for flynismo

Hi everyone,

I'm building my first website and have a question...probably a very simple one, but please bear with me, I'm a noob.

I made an image in Photoshop, and I like the way it turned out, but I have a problem...
the image is of a woman, and next to her I have a box that I want to use to contain a few drop down menus. My problem is, I can't figure out how to insert the drop down menus into the image.

I want to insert the menus in the whitespace underneath the blue header in the box.

In addition to Photoshop, I have several other programs if they are necessary; have Dreamweaver, Illustrator and Flash (all are the CS3 versions, if that matters).

Thanks for any help!

  • 3 Contributors
  • 5 Replies
  • 257 Views
  • 1 Month Discussion Span
  • Latest Post Latest Post by Patrick_Walsh

Dani AI

Generated

Good progress from — using the Photoshop artwork as a background was the right instinct. The cleanest, most maintainable way is to treat the art as a CSS background on a semantic container (a div) and place standard HTML dropdowns on top. That keeps interactive controls accessible and avoids using tables for page layout (tables are for tabular data). (developer.mozilla.org)

Practical pattern (keeps design and controls separate; tweak positions with the browser inspector):

<div class="box">
  <select class="menu">...</select>
  <select class="menu">...</select>
</div>

<style>
.box {
  width: 420px;
  height: 200px;
  background: url('box-image.png') no-repeat left top;
  background-size: contain; /* or px values if fixed */
  position: relative;
}
.box .menu {
  position: absolute;
  left: 30px;
  top: 110px;
  width: 180px;
}
</style>

Positioned children are placed relative to the ancestor that has position: relative, which makes precise overlaying straightforward. Use the browser’s dev tools to nudge top/left live until the placement is exact. (developer.mozilla.org)

A few modern notes tied to ’s slicing suggestion: slicing tools (Fireworks/ImageReady) were useful historically to auto-generate HTML/CSS, but Fireworks is no longer actively developed; Photoshop still supports exporting slices via “Save for Web (Legacy)” if that workflow is required. For flexible, future‑proof layouts prefer percent-based positioning, CSS Grid/Flexbox, and media queries so the UI adapts to different screens. Remember background images are decorative (screen readers won’t announce them) — keep essential content as real HTML. ()

Troubleshooting checklist: remove default margins/padding, set box-sizing: border-box, confirm the container dimensions match the exported image, and use dev tools to test different viewport sizes. For long-term maintainability, consider rebuilding the box visuals in CSS (rounded corners, gradients, fonts) instead of locking copy into a bitmap.

Recommended Answers

All 5 Replies

Member Avatar for flynismo

Okay, I figured out that if I use the image as the table background, instead of inserting it directly into the table, I can place the menus wherever I need to.

Now, is there an easy way of aligning the menus into the box? I'm trying to do it through trial and error, but I just threw everything out of whack...so if anyone happens to check out the site, pardon the mess, lol...

Member Avatar for flynismo

bump;

still can't get it aligned properly

Member Avatar for HI2Japan

Within your CS3 do you have Fireworks? If so (and Image Ready does this too) you can slice up an image and put in drop down menus and it will create all the code (dropdown menus via java script and table cells) with everything perfectly aligned. It might be a lot easier then manually trying to do it.

Member Avatar for flynismo

Within your CS3 do you have Fireworks? If so (and Image Ready does this too) you can slice up an image and put in drop down menus and it will create all the code (dropdown menus via java script and table cells) with everything perfectly aligned. It might be a lot easier then manually trying to do it.

Awesome, thank you very much!

Member Avatar for Patrick_Walsh

Thanks for sharing useful information.

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.