The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
 Reply to this topicStart new topic
> Float left item in nav menu go bottom after zoom 90% etc, I wanted to create a navigation menu, but last item after zooming out,
light123
post Aug 16 2021, 12:42 PM
Post #1





Group: Members
Posts: 2
Joined: 16-August 21
Member No.: 28,046
I wanted to create a navigation menu, but last item after zooming out, for example at 90% zoom goes down. "Five" is located under "Four" item. Navigation should be static in size and span one line, not two. All items should occupy the entire size of the div#page (960px, 192px*5) in one bar.

CODE
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>My title</title>

<style type="text/css">
body {
  background-color: blue;
  margin: 0;
}
.wrapper {
  width: 960px;
  margin: 20px auto 0 auto;
}
#page {
  background-color: #777272;
  width: 100%;
  height: 800px;
}
nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
nav ul li {
  float: left;
}
nav ul li a {
  text-decoration: none;
  display: block;
  background-color: purple;
  width: 170px;
  height: 20px;
  line-height: 20px;
  padding: 10px;
  border: 1px solid black;
  text-align: center;
  margin: 5px 0px 20px 0;
}
a:visited {
  color: white;
}
.clear {
  clear: both;
}
</style>

    </head>
    <body>
        <div class="wrapper">
            <div id="page">
                <nav>
                    <ul>
                        <li><a href="">One "1" One</a></li>
                        <li><a href="">Two "2" Two</a></li>
                        <li><a href="">Three "3" Three</a></li>
                        <li><a href="">Four "4" Four</a></li>
                        <li><a href="">Five "5" Five</a></li>
                    </ul>
                </nav>
                <ul class="clear">
                    <li>Tomato</li>
                    <li>Cucumber</li>
                    <li>Carrot</li>
                </ul>
            </div>
        </div>
    </body>
</html>


[+] Stackoverflow Code Snippet << click here

Thanks for help.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Aug 16 2021, 12:51 PM
Post #2


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,730
Joined: 9-August 06
Member No.: 6
So when the user zooms you want the page to get a horizontal scroll bar instead? If so you could give nav a min-width that is the sum of the width of all the buttons + any padding and margin.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
light123
post Aug 16 2021, 01:30 PM
Post #3





Group: Members
Posts: 2
Joined: 16-August 21
Member No.: 28,046
I would like the page to look the same after zooming in and out.

This post has been edited by light123: Aug 16 2021, 01:31 PM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Aug 16 2021, 03:13 PM
Post #4


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,730
Joined: 9-August 06
Member No.: 6
The same as what? As you happen to see it in your browser with the window size you use and the text size you use on the screen resolution you use? You know zilch about under what circumstances someone else sees your page.

What happens with your menu is exactly how floats are supposed to work. I told you how to make that not happen but then the page will be wider than the browser window and there will be a horizontal scroll bar. It's one or the other.

There are attempts to disable zoom floating around, but I don't think any of them works well, not AFAIK anyway. And that's a good thing.

You could also use relative sizes for your widths. That would make the whole thing more adaptable.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
« Next Oldest · Cascading Style Sheets · Next Newest »
 

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 

Display Mode: Standard · Switch to: Linear+ · Switch to: Outline

Track this topic · Email this topic · Print this topic · Subscribe to this forum

- Lo-Fi Version Time is now: 20th April 2024 - 12:16 AM
Invision Power Board © 2024  IPS, Inc.
Licensed to: HTMLHelp.com, LLC