Break interface when zoom in or zoom out website

HTML & CSS
1

I have a html structure and css as below, please help me check why when I zoom (in or out), nav-menu is break (I attached some images to demonstrate):


<div id="wrapper" class="clearfix">
    <header id="masthead" class="site-header" role="banner">
        <div class="top-header clearfix">
            <a href="#"><img alt="logo" src="images/logo-trans.png"></a>
            <div class="right-img">
                <div class="menu-top-menu-container">
                    <ul id="menu-top-menu" class="nav-menu">
                        <li><a href="#" rel="home"><img class="page-home" src="images/icon-home-menu.png"></a></li>
                        <li><a href="#>Apartments</a></li>
                        <li><a href="#">Blog</a></li>
                        <li><a href="#">Things To Do</a></li>
                        <li><a href="#">FAQ</a></li>
                        <li><a href="#">Agents</a></li>
                        <li><a href="#">About Us</a></li>
                        <li><a href="#">Reviews</a></li>
                        <li><a href="#">Contact</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </header>
</div> <!-- end #wrapper -->

And it’s style:


#wrapper {
    width: 980px;
    margin: 0 auto;
}

header .top-header {
    width: 100%;
    height: 122px;
    background: transparent url("../images/bg-top-header.png") repeat-x;
}

header .top-header img[alt="logo"] {
    width: 340px;
    float: left;
}

header .top-header .right-img {
    min-width: 640px;
    float: right;
}

header .top-header .menu-top-menu-container {
    padding-top: 64px;
}

header .top-header .menu-top-menu-container ul {
    display: inline-block;
    float: right;
}

header .top-header .menu-top-menu-container ul li {
    float: left;
}

header .top-header .menu-top-menu-container ul li a {
    font-size: 15px;
    height: 56px;
    display: inline-block;
    float: left;
    font-family: 'Palatino Linotype', arial, sans-serif !important;
    color: black;
    padding-right: 20px;
}

I searched on internet and try some ways but that problem is still. Thank for watching!

2

Hi,

Any pixel width element will break when zoom is used because there comes a point when things just don’t fit. You should either use ems instead of px or just code for a free-er design that doesn’t have exact fits. The main cause of the problem is that the menu items are spaced out with exact px padding and therefore there is no breathing space in that menu so any minor pixel adjustments cause the menu to drop.

I would code it like this and allow the nav to breathe without using padding at all on the nav items but using display:table properties to centre the items in each cell.

e.g.


<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
ul {
	margin:0;
	padding:0;
	list-style:none
}
#wrapper {
	width: 980px;
	margin: 0 auto;
}
header .top-header {
	width: 100%;
	height: 122px;
	background: transparent url("../images/bg-top-header.png") repeat-x;
}
header .top-header img[alt="logo"] {
	width: 340px;
	float: left;
}
header .top-header .right-img {
	/*min-width: 640px;*/
/*	float: right;*/
	margin-left:350px;
}
header .top-header .menu-top-menu-container {
	padding-top: 64px;
	width:100%;
	display:table
}
header .top-header .menu-top-menu-container ul {
	/*	display: inline-block;
	float: right;*/
	display:table-row;
}
header .top-header .menu-top-menu-container ul li {
	/*float:left;*/
	display:table-cell;
	text-align:center;
}
header .top-header .menu-top-menu-container ul li a {
	font-size: 15px;
	height: 56px;
	/*display: inline-block;*/
	display:block;
	font-family: 'Palatino Linotype', arial, sans-serif !important;
	color: black;
}
</style>
</head>

<body>
<div id="wrapper" class="clearfix">
		<header id="masthead" class="site-header" role="banner">
				<div class="top-header clearfix"> <a href="#"><img alt="logo" src="images/logo-trans.png"></a>
						<div class="right-img">
								<div class="menu-top-menu-container">
										<ul id="menu-top-menu" class="nav-menu">
												<li><a href="#" rel="home"><img class="page-home" src="images/icon-home-menu.png"></a></li>
												<li><a href="#">Apartments</a></li>
												<li><a href="#">Blog</a></li>
												<li><a href="#">Things To Do</a></li>
												<li><a href="#">FAQ</a></li>
												<li><a href="#">Agents</a></li>
												<li><a href="#">About Us</a></li>
												<li><a href="#">Reviews</a></li>
												<li><a href="#">Contact</a></li>
										</ul>
								</div>
						</div>
				</div>
		</header>
</div>
<!-- end #wrapper -->
</body>
</html>

That will zoom up or down without breaking now.

The display:table properties are only supported in IE8+ so id you want to support IE7 and under you would need to use your floated method instead for those browsers (via conditional comments)

3

Here is my real website, can you give me some advises?

4

Where?

You forgot the link :slight_smile:

5

Oh :slight_smile: I’m so sorry. This is http://baogiadientu.com/apartment/. Let’s visit it :slight_smile: And what should I do to have breathing space?

6

I’ve found my answer. It’s simple. As you say, I remove width in .rightheader .top-header -img and reduce width of logo image. I made for it breathing space :slight_smile:

7

Glad you sorted it :slight_smile:

8

:slight_smile: