2

Here is my HTML:

<div style="height:50px">

    <div tabindex="0" class="banner" onclick="location.href='Home.html'">
        Page 1
    </div>

    <div tabindex="0" class="banner" onclick="location.href='Page 1.html'">             
        Page 2
    </div>

    <div tabindex="0" class="banner" onclick="location.href='Page 2.html'">
        Page 3
    </div>

    <div tabindex="0" class="banner" onclick="location.href='Page 3.html'">
        Page 4
    </div>

</div>

And my CSS:

.banner {
    background: orange;
    color: aqua;
    float: left;
    width: 298px;
    height: 50px;
    vertical-align: top;
    border: 1px solid #000000;
    text-align: center;
    font-family: Garamond;
    font-size: x-large;
    display: table-cell;
    vertical-align: middle;
    line-height:50px;
    cursor:pointer;
    font-weight:bold;
}

The body of my website is 1200px wide. The website structure appears to work fine on different sized screens (from the computers I have checked it on) and all major browsers. However, when zooming out, on all devices, the far right drops down and goes to the left (beneath the first ). Is there any way to do this without any major difficulties? (time is an issue here which is why I only want a simple solution if possible). If there isn't an easy and fast way to do this, then don't worry about it, I'll just leave it as it is.

User2468
  • 99
  • 1
  • 10

2 Answers2

1

Simple answer is, you can't. No CSS tweaks or JS detect zooming.

Graeme
  • 1,107
  • 2
  • 12
  • 30
  • I've just had a thought - as nothing else goes wrong with the webpage other than this, could I set the
    s to be percentage widths of the parent
    ?
     – User2468 Apr 18 '14 at 22:57
  • 1
    Yes. So
    – Graeme Apr 18 '14 at 23:02
  • Using your advice, I set each of the orphan
    s to 25% of the parent. However, this caused the furthest right to always fall beneath. I assume this is due to the borders adding to the width. I then tried setting each to 24%. This has prevented the structure changing, but I am unsure how to set equal spacing between the orphan
    s as they currently float left, leaving a gap between the furthest right and the edge of the parent
    . Any solutions?
     – User2468 Apr 18 '14 at 23:17
  • I'd just like to point out that it -is- possible to detect zoom: http://stackoverflow.com/questions/1713771/how-to-detect-page-zoom-level-in-all-modern-browsers – James Bruckner Apr 19 '14 at 00:21
1

See this link about viewport meta tag, It could prevent zoom in/out by determining the views width, so I think it may help you

Using the viewport meta tag to control layout

Update:

See this link also

How can I “disable” zoom on a mobile web page?

Community
  • 1
  • 1
MujtabaFR
  • 5,956
  • 6
  • 40
  • 66