Member Avatar for wonderland

Hi,

I have a horizontal submenu using unordered list and 4 images. You can see it

I want to have some text above this image (section 1 , section 2 , etc)

If I add this text everything goes wrong with this menu, you can see that

what should I do to fix this ? I've considered adding image with text , but I would like to also use a mouse over effect on this text.

THank you :)

  • 3 Contributors
  • 4 Replies
  • 202 Views
  • 1 Week Discussion Span
  • Latest Post Latest Post by wonderland

Dani AI

Generated

As discovered, adding inline text pushes the flow and breaks a horizontal image menu because the browser treats that text as regular content. Building each menu item as a block-level link with the image as the visual layer and the label positioned absolutely keeps the text editable while preserving the original dimensions and hover behavior. This follows the general direction and suggested but gives a concrete, layout-safe pattern.

HTML + CSS (one simple pattern — image element + absolutely positioned label):

<ul class="hmenu">
  <li>
    <a class="menu-link" href="/section1">
      <img src="images/section1.png" alt="">
      <span class="label">Section 1</span>
    </a>
  </li>
  <!-- repeat items -->
</ul>
.hmenu{list-style:none;margin:0;padding:0;overflow:hidden;}
.hmenu li{float:left;margin-right:10px;}
.menu-link{display:block;position:relative;width:140px;height:90px;text-decoration:none;}
.menu-link img{display:block;width:100%;height:100%;}
.menu-link .label{position:absolute;left:0;right:0;top:8px;text-align:center;color:#fff;
                   background:rgba(0,0,0,0.35);padding:3px 6px;white-space:nowrap;}
.menu-link:hover .label{background:rgba(0,0,0,0.6);}

Key notes and troubleshooting:

  • Make the link a block (not inline). That prevents added text from increasing line-height or shifting sibling items.
  • Use absolute positioning for the label so it does not affect layout size. Centering can be adjusted with top or transform: translateY(-50%).
  • For hover rollovers without JS, use CSS sprites or change background-position on a block-level element; using <img> means hover swaps need alternative (CSS background or small JS swap).
  • Accessibility: keep meaningful text in the DOM (screen readers and SEO). If the image is decorative, use alt="" and let the visible label supply the accessible name; otherwise provide a descriptive alt.
  • Reset the <ul> padding/margins and clear/contain floats (overflow:hidden or a clearfix) to avoid collapsing the container.

This pattern keeps labels editable, preserves hover effects, and avoids the layout break that happens when text is added inline.

Recommended Answers

All 4 Replies

Member Avatar for hericles

I take it you want the text to be over the image and larger. You can add the text to the image and still use roll overs if you want. Or you can use the background0image property of the div to have your text in a div and the image as its background.

Hope that helps,
Hericles

Member Avatar for wonderland

Is it possible to do this without text being part of image ? So that each time I want to change that text I don't have to re-upload whole image /.

Member Avatar for almostbob

likely not a perfect solution,
ruminate while we illuminate, the possibilities

styles belong in the stylesheet so

<ul>
<li id='menu1')>Menu1</ul>
<li id='menu2')>Menu2</ul>
<li id='menu3')>Menu3</ul>
</ul>

which Could be css-ed

li#menu1 { height:/*height of image*/; width:/* width of image*/;background-image:url('menu1.png');color:black }
li#menu2 { height:/*height of image*/; width:/* width of image*/;background-image:url('menu2.png');color:black }
li#menu3 { height:/*height of image*/; width:/* width of image*/;background-image:url('menu3.png');color:black }
/* and mouseover effects something like */
li#menu1:hover { /*not necessary to repeat unchanged items */ color:PINK }
li#menu2:hover { /*not necessary to repeat unchanged items */ color:PINK }
li#menu3:hover { /*not necessary to repeat unchanged items */ color:PINK }

I use 3dapperance.png-s with a transparent background, the hover effect changes background and text colors, looks good
css is four state, derfault hover active visited, there are lots of fun things to play

Edited by almostbob because: n/a
Member Avatar for wonderland

Thank you,

Will try this out :)

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.