Preventing inline-block nav. bar from busting out when Zoomed

HTML & CSS
1

…you don’t get to say “bust out” very often on a code forum do you!

Anyway, I would like to make a li, inline-block navigation bar not break out of a single line upon zooming. I’m not quite sure what to do; I thought about setting the width but that doesn’t seem to work. I could be very conservative with the padding, but then the navigation bar looks off if it isn’t center.


body {
font-size: 90%;
font-family: verdana,helvetica,sans-serif;
background:#FFFFFF;
margin-left: auto;
margin-right: auto;
margin-top: 211px;
text-align:center; /*center #pageWrapper in IE 5.x */
}

h1 {
position: relative; /* wrap floats */
padding: 0 0 0 0;
font-weight: bold;
font-size: 110%;
font-family: helvetica, verdana, sans-serif;
font-color: black;
}

p {position: relative;
padding: 10px 0 0 0;
}

#textWrapper {
margin-left: auto;
margin-right: auto;
text-align:left;
width: 992px;}

#contentWrapper {
height: 20%;
}

#navBar {
position:relative;
list-style: none;
height: 20%;
font-size: 1px;
padding-top: 10px;
text-align: center;
}

#navBar li {
display:inline;
}

#navBar hr {
display: block;
background-color: black;
}

#hrNull {
display: none;
}

#navBar a {
display:-moz-inline-block;
display:-moz-inline-box;
display: inline-block;
font-size: 18px;
text-decoration: none;
color: black;
padding: 10px 50px 10px;

}

#navBar a:active,
#navBar a:focus,
#navBar a:hover {
background: #67A 0 no-repeat;
}

#navBar a:hover {
color: gold;
}

#column1, #column2, #column3, #column4 {
padding-top: -10px;
}

#column1 {
position: absolute;
width: 211;
}

#column2 {
position: absolute;
width: 211;
margin-left: 241px;
}

#column3 {
position: absolute;
width: 211;
margin-left: 482px;
}

#column4 {
position: absolute;
width: 211;
margin-left: 723px;
}

Thoughts?

Thanks!

2

Hi,
We would need to see the html that goes with your css in order to view it in a browser.

You gotta realize that the text has to go somewhere when it runs out of room, the natural thing to do is drop down and start a new line. The other thing to consider is that your viewers are not going to be stress testing things like we do. They may zoom in two levels to get it readable if that is the case but they are not going to zoom in to the max and try to break the page.

You could use white-space:nowrap to prevent it from dropping down but it would create a horizontal scrollbar unless you used overflow:hidden along with it.

3

“You could use white-space:nowrap to prevent it from dropping down but it would create a horizontal scrollbar”

From the perspective of a web designer: is that undesirable?

Here be the HTML:


<html>
<head>
<title>Concept 3</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="CC_CSS_3.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="textWrapper">

<div id="navBar">
<li><a href="">about us</a></li>
<li><a href="">minutes</a></li>
<li><a href="">opinions</a></li>
<li><a href="">calendar</a></li>
<li><a href="">contact us</a></li>

<hr />
</div>

<div id="contentWrapper">
<div id="column1">

<h1>Announcements</h1>
<p>The College Council Today is... </p>
</div>

<div id="column2">
<h1>For Students</h1>
<p> Loreum ipsum is amazing.</p>
</div>

<div id="column3">
<h1>For Clubs & <br />
Organizations</h1>
<p>Loreum ipsum is amazing.</p>
</div>

<div id="column4">
<h1>For Visitors</h1>
<p>Loreum ipsum is amazing.</p>
</div>


</div>
</div>
</body>
</html>
4

Well, you try to avoid it from happening when possible unless it is part of the design. Some sites are designed to scroll sideways but that is another subject.

First thing you need to do is get those LI items wrapped in a UL. You have invalid code by just wrapping them in a div. Then you need to get that <hr> out of there too.

[B]<ul id[/B]="navBar">
    <li><a href="">about us</a></li>
    <li><a href="">minutes</a></li>
    <li><a href="">opinions</a></li>
    <li><a href="">calendar</a></li>
    <li><a href="">contact us</a></li>
[B]</ul>[/B]

Just set a bottom border on the UL to take the place of the <hr>.
Next you will need not remove the default margin and padding now that it is wrapped in a UL.

I would just back off on that 50px side padding and take it down to about 30px. Set white-space:nowrap on the UL and then it survives about 5 zooms for me. That is safe enough!

No need for the height:20%; the UL is just saying 20% of what? There are no defined heights on the parent for it to reference from.

#navBar {
[B]    margin:0;
    padding:0;[/B]
    list-style: none;
    [COLOR=Red]/*height: 20%;*/[/COLOR]
    font-size: 1px;
    padding-top: 10px;
    text-align: center;
[B]    border-bottom:2px solid #666;
    white-space:nowrap;[/B]
}
#navBar li {
    display:inline;
}
#navBar a {
    display:-moz-inline-box;
    display: inline-block;
    font-size:18px;
    text-decoration:none;
    color: black;
    padding: 10px [B]30px;[/B]
}

#navBar a:active,
#navBar a:focus,
#navBar a:hover {
    background: #67A;
}
#navBar a:hover {
color: gold;
}
5

All these tricks with borders astound me. I never think of them!

Thank you so much! Works like a charm.

6

Your welcome! :wink:

You might want to consider floating your columns and getting rid of the absolute positioning. The AP’d columns will cause problems if you plan on having a footer at the end of your page.