css - How to make the view window grows while the user zooms in?


Tags: css

Problem :

I am testing the following script with FireFox 3.6.8. The problem with the following script is that when the user zooms in, the browser view doesn't grow at all. Ideally, I expect to see a growing view with horizontal bar on the bottom of the browser. I am sure that I miss some key CSS rules here.

Anyone can help?

<!DOCTYPE html> 
<html lang="en">
<head>
<title>Test Zoom In</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style TYPE="text/css">
#nav-primary {
        border: border:5px solid red;
    background:url("http://static02.linkedin.com/scds/common/u/img/sprite/sprite_global_v3.png") no-repeat scroll 0 -470px transparent;
}
#nav-primary .wrapper {
    background:url("http://static02.linkedin.com/scds/common/u/img/sprite/sprite_global_v3.png") no-repeat scroll 0 -510px transparent;
    height: 39px;
    padding: 0 5px;
}
</style>
</head>
<body>
<div class="member" id="header">
 <div class="wrapper">
    <div id="nav-primary">
        <div class="wrapper">
        </div>
    </div>
 </div>
</div> 
</body>
</html>

Thank you



Solution :

set width on #nav-primary .wrapper css class to 980px(which is the width of your image)


    CSS Howto..

    Show text at bottom with css

    How to adapt website to user's Screen Resolution?

    How can I get two form fields side-by-side, with each field’s label above the field, in CSS?

    Showcase Image and Carousel Caption

    How remove space on around content (css)?

    How table-cell width with percentage value works?

    CSS: How to align text to baseline of height-adjusted input element?

    How do I create a radial css3 border gradient shadow

    How do I keep an image and text centered vertically with bootstrap?

    How to add a mailto to a sentence without extra spacing?

    How to build a responsive padding for list menus using CSS?

    How fixed a navigation to the center on scroll?

    How do I hide the div if the Var is empty?

    CSS / jQuery: How to prevent tooltip from disappearing behind border of main wrapper (working code)

    how to spread small image file in background and it should scroll with other elements

    how to compute Facebook graph api cover offset_y to pixel?

    How to make corners of progress bar round in css

    Greasemonkey: How to do something when style=“display: none;” changes?

    CSS - How can I make a font readable over any color?

    how to do jquery once fade out has finished?

    How to Overlay a Transparent Navbar Over a Fullscreen Jumbotron

    Links fade in when hovered - how to get them to stay opaque when their target is visible?

    How can I resize to fit html elements horizontally using CSS?

    How do I make this menu using only HTML and CSS

    How to show the same font which in photoshop on my webpage?

    How to center image while also aligning text to the right of image?

    How to load a local copy of a generic CSS file when CDN is down? [duplicate]

    CSS: How to remove enter from HTML?

    How to change css display none or block with button click

    How to make a horizontal expandable menu fluid