Member Avatar for kathymac

I have a website where on one page I used nested tables to position elements and on another page I used <div> tags to position elements. I did this for testing purposes.

On all webpages, there is a background image 900x600 set in the css file.

On the far left of my web page, I have links displaying vertically at different locations down the page to match up with the specific locations on the background image.
For example I have a picture of 3 locks on the background and on each lock, I have:

about us
coming events
contact us
blog

It works out fine both using the nested table option and <div> positioning.
However, I know that the <div> is the way to go.

My customer is complaining that when he clicks the "Zoom In/Zoom Out" menu option in his browser, the menu items (about us, etc.) move away from their expected position in the web page.

Is there a way to fix this? If so, could someone point me to a tutorial I could review?

K

  • 3 Contributors
  • 4 Replies
  • 130 Views
  • 3 Days Discussion Span
  • Latest Post Latest Post by Fortinbra

Dani AI

Generated

described a common symptom: interactive labels that line up with spots on a background image drift when the user changes the browser zoom. was right to move away from fixed, table-based positioning; the practical goal is to make the labels scale with the image so their relative positions remain constant under zoom.

A reliable pattern is to place the image in the document (not only as a CSS background), wrap it in a positioned container, and place the links as absolutely positioned children using percentage coordinates. Percent values are calculated from the image pixel coordinates so they track as the image scales. Example structure:

<div class="wrap">
  <img src="bg.jpg" alt="" class="bg">
  <a href="/about" class="hotspot" style="left:18%; top:24%;">About us</a>
</div>
.wrap { position:relative; max-width:900px; margin:0 auto; }
.bg  { display:block; width:100%; height:auto; }
.hotspot { position:absolute; transform:translate(-50%,-50%); }

If you prefer vector precision, embed the artwork in an SVG and place clickable text or <a> elements inside the SVG coordinate space. SVG scales uniformly with the viewport, so coordinates remain exact as the page zooms.

To compute percentages from pixel coordinates use the simple ratio: left% = (x_px / image_width_px) * 100 and top% = (y_px / image_height_px) * 100. Test at several zoom levels and browsers (Chrome, Firefox, Edge) because rounding and DPI differences can introduce small offsets. Avoid relying on floats and pixel offsets for this use case (see on float/clear quirks); use the overlay technique or SVG for the most predictable results.

Recommended Answers

All 4 Replies

Member Avatar for Flynox

I would actually suggest using a fluid layout, it's how I design all of my websites and the best way I've encountered so far.

Member Avatar for kathymac

Hi
Could you please provide me an example or a tutorial.
I just don't know how to do this.

Thank you.

Member Avatar for Flynox

Oh, lol. Sorry, I forgot. Well.. Well I'm not very good at tutorials, in fact, I don't think i ever made one before. but here's a try. This is extracted and edited from the web page I'm creating at the moment.

body {min-width:640px}

The element to which the min-width is applied will never decrease less than the min-width set. But it will be allowed to grow normally, however big.

#header,#menu,#content,#sidebar,#footer {
overflow:hidden;
display:inline-block}

The header, menu, content, sidebar, and footer are the columns we'll be working with. Overflow:hidden is optional, it stops the other elements' objects/text/ect. from running into each other.
On display:inline-block, inline means that it is displayed inline, inside the current whatever. block means that the element is displayed as a block. You will see when you test this out.

#footer {background:#999}
#header {background:#999}
#menu {background:#777}
#content {background:#666}
#sidebar {background:#777}

I used colors for each block when i first started to help me out, I'm sure it will help you out too. When you think you don't need them anymore, just delete these.

#header,#footer {width:100%}

This just makes the header and footer fit the page left and right 100 percent.

#header,#menu,#content,#sidebar {float:left}

I added in the header, because i didn't really know any other way of doing the thing i wanted to do. If you delete #header, you will know what i mean. Maybe someone can help with that. The float:left keeps the menu and sidebar where you want it to be. If you do float:right, the sidebar and menu will switch places. if you do float:center, each box will separate about 5 px. I'm really not sure why this happens, all i can say is that it does.

#menu {width:20%}
#content {width:60%}
#sidebar {width:20%}
#footer {clear:left}

Each element sets the width, and i use clear:left just in case. It specifies which sides of an element where other floating elements are not allowed.
Now for the HTML!!! We're almost done!

<div id="header"><h1>Yo, i'm second in command in box's.</h1>
</div>
<div id="menu"><h1>Hi, I navigate</h1>
</div>
<div id="content"><h1>what's up i'm da big boss</h1>
</div>
<div id="sidebar"><h1>Hi! I'm the sidebar</h1>
</div>
<div id="footer"><h1>I am the footer.</h1>
</div>

I almost forgot to add the headers, they helped me out too when i first started. If you didn't have anything between the div objects when starting out, you would probably be confused.
And this is what we should have...

<html>
<body>
<style type="text/css"/>
body {min-width:640px}
#header,#menu,#content,#sidebar,#footer {
overflow:hidden;
display:inline-block}

#footer {background:#999}
#header {background:#999}
#menu {background:#777}
#content {background:#666}
#sidebar {background:#777}

#header,#footer {width:100%}
#header,#menu,#content,#sidebar {float:left}
#menu {width:20%}
#content {width:60%}
#sidebar {width:20%}
#footer {clear:left}
</style>
<div id="header">
</div>
<div id="menu">
</div>
<div id="content">
</div>
<div id="sidebar">
</div>
<div id="footer">
</div>
</body>
</html>

And We're DONE!!!! Yayyyy

Edited by Flynox because: n/a
Member Avatar for Fortinbra

That's the first time I've seen CSS code split up by property, instead of by object.
Another thing to look at with layouts like this is the clear property.

#header,#footer {width:100%; clear:both;}

This will force the headers and footers to be on a line by themselves. Anything before them will appear above them, anything after would be below them. clear uses left, right, and both.

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.