如果我放大，div容器会消失

时间：2015-01-19 13:50:06

标签： html css

在my Page我有一个导航栏。但如果我放大导航栏内部的消息。导航得到了这个位置：固定。我不知道如何纠正它，当我放大内部时，我仍然可以看到导航栏。

代码：

＆＃13;
＆＃13; 
*{
    margin: 0px;
    padding: 0px;
    font-family: 'Muli', sans-serif;
    font-size: 20px;
}

body{
    background-color: #4A3A47;
    height: 5000px;
}

section{
    width: 1200px;
    margin-left: auto;
    margin-right: auto;
    overflow: hidden;
    text-align: center;
    height: 100%;
}


.divbox{
    vertical-align: top;
    display: inline-block;
    width: 250px;
    border: 4px solid #D7E8D5;
    margin: 0 50px;
    transition: all 0.5s;
    margin-top: 200px;
    margin-bottom: 200px;
    background-color: #D7E8D5;
}

.divbox:hover{
    border-bottom-right-radius: 75px;
    border-bottom-left-radius: 75px; 
}



/* Bildern noch eine Klasse geben */

.divbox:hover img{
    border-bottom-right-radius: 75px;
    border-bottom-left-radius: 75px;    
}

img{
    transition: all 0.5s;
}

/*margin-left: -602px;---------------*/


nav {
    margin-left: -602px;
    position: fixed;
    left: 50%;
    transform: translate(-100%);
    top: 100px;
    width: 250px;
    background-color: #E8ED76;
}

nav h3{
	font-size: 12px;
	line-height: 34px;
	padding: 0 10px;
	cursor: pointer;
	background-color: #FFCD57;
}

nav li{
    list-style-type: none;
}

nav ul ul li a{
    color: black;
    text-decoration: none;
    font-size: 20px;
    line-height: 27px;
    display: block;
    padding: 0 15px;
    transition: all 0.5s;
}

nav ul ul li a:hover{
    background-color: #FFCD57;
    border-left: 5px solid #4A3A47;
}

nav ul ul{
    display: none;
}

nav li.active ul{
    display: block;
}
＆＃13; 
<html>
    <head>
        <title>Startseite</title>
        <link rel="stylesheet" href="index.css">
        <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
        <link href='http://fonts.googleapis.com/css?family=Muli' rel='stylesheet' type='text/css'>
        
        
        <!-- prefix free to deal with vendor prefixes -->
<script src="http://thecodeplayer.com/uploads/js/prefixfree-1.0.7.js" type="text/javascript" type="text/javascript"></script>

<!-- jQuery -->
<script src="http://thecodeplayer.com/uploads/js/jquery-1.7.1.min.js" type="text/javascript"></script>
        
        <script type="text/javascript">
/*jQuery time*/
$(document).ready(function(){
	$("nav h3").click(function(){
		//slide up all the link lists
		$("nav ul ul").slideUp();
		//slide down the link list below the h3 clicked - only if its closed
		if(!$(this).next().is(":visible"))
		{
			$(this).next().slideDown();
		}
	})
})
</script>
    </head>
    <body>
        
        <nav>
            <ul>
                <li><h3>Bereich 1</h3>
                    <ul>
                        <li><a href="#">Link 1.1</a></li>
                        <li><a href="#">Link 1.2</a></li>
                    </ul>
                </li>
                <li><h3>Bereich 2</h3>
                    <ul>
                        <li><a href="#">Link 2.1</a></li>
                        <li><a href="#">Link 2.2</a></li>
                        <li><a href="#">Link 2.1</a></li>
                        <li><a href="#">Link 2.2</a></li>
                        <li><a href="#">Link 2.1</a></li>
                        <li><a href="#">Link 2.2</a></li>
                    </ul>
                </li>
                <li><h3>Bereich 2</h3>
                    <ul>
                        <li><a href="#">Link 2.1</a></li>
                        <li><a href="#">Link 2.2</a></li>
                        <li><a href="#">Link 2.1</a></li>
                        <li><a href="#">Link 2.2</a></li>
                        <li><a href="#">Link 2.1</a></li>
                        <li><a href="#">Link 2.2</a></li>
                    </ul>
                </li>
            </ul>
        </nav>
        
        
        
        
        <section>
            <article>
                <div class="divbox">
                    <img src="http://ipadminibackgrounds.com/assets/Battlefield-3-Game-iPad-mini-wallpaper-250x250.jpg" width="250" height="250" />
                </div>
                <div class="divbox">
                    <img src="http://static.planetminecraft.com/files/resource_media/screenshot/1341/11Minecraft-Creeper-Wallpaper-1080p-HD-250x250up_6509836_lrg.jpg" width="250" height="250" />
                </div>
                <div class="divbox">
                    <img src="https://lh5.googleusercontent.com/-Nv-tRjOe0Ww/AAAAAAAAAAI/AAAAAAAAAMQ/81G-ZfxzYNc/photo.jpg" width="250" height="250" />
                </div>
            </article>
        </section>
    </body>
</html>
＆＃13;
＆＃13;
＆＃13;

1 个答案:

答案 0 :(得分：1)

我已经为您解决了这个问题。

*{
    margin: 0px;
    padding: 0px;
    font-family: 'Muli', sans-serif;
    font-size: 20px;
}

body{
    background-color: #4A3A47;
    height: 5000px;
}

section{
    width: 1200px;
    margin-left: auto;
    margin-right: auto;
    overflow: hidden;
    text-align: center;
    height: 100%;
}


.divbox{
    vertical-align: top;
    display: inline-block;
    width: 250px;
    border: 4px solid #D7E8D5;
    margin: 0 50px;
    transition: all 0.5s;
    margin-top: 200px;
    margin-bottom: 200px;
    background-color: #D7E8D5;
}

.divbox:hover{
    border-bottom-right-radius: 75px;
    border-bottom-left-radius: 75px; 
}



/* Bildern noch eine Klasse geben */

.divbox:hover img{
    border-bottom-right-radius: 75px;
    border-bottom-left-radius: 75px;    
}

img{
    transition: all 0.5s;
}

/*margin-left: -602px;---------------*/


nav {
   
    position: fixed;
    top:90px;
    left:0px;
    
    width: 250px;
    background-color: #E8ED76;
z-index:100;
}

nav h3{
	font-size: 12px;
	line-height: 34px;
	padding: 0 10px;
	cursor: pointer;
	background-color: #FFCD57;
}

nav li{
    list-style-type: none;
}

nav ul ul li a{
    color: black;
    text-decoration: none;
    font-size: 20px;
    line-height: 27px;
    display: block;
    padding: 0 15px;
    transition: all 0.5s;
}

nav ul ul li a:hover{
    background-color: #FFCD57;
    border-left: 5px solid #4A3A47;
}

nav ul ul{
    display: none;
}

nav li.active ul{
    display: block;
}
<html>
    <head>
        <title>Startseite</title>
        <link rel="stylesheet" href="index.css">
        <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
        <link href='http://fonts.googleapis.com/css?family=Muli' rel='stylesheet' type='text/css'>
        
        
        <!-- prefix free to deal with vendor prefixes -->
<script src="http://thecodeplayer.com/uploads/js/prefixfree-1.0.7.js" type="text/javascript" type="text/javascript"></script>

<!-- jQuery -->
<script src="http://thecodeplayer.com/uploads/js/jquery-1.7.1.min.js" type="text/javascript"></script>
        
        <script type="text/javascript">
/*jQuery time*/
$(document).ready(function(){
	$("nav h3").click(function(){
		//slide up all the link lists
		$("nav ul ul").slideUp();
		//slide down the link list below the h3 clicked - only if its closed
		if(!$(this).next().is(":visible"))
		{
			$(this).next().slideDown();
		}
	})
})
</script>
    </head>
    <body>
        
        <nav>
            <ul>
                <li><h3>Bereich 1</h3>
                    <ul>
                        <li><a href="#">Link 1.1</a></li>
                        <li><a href="#">Link 1.2</a></li>
                    </ul>
                </li>
                <li><h3>Bereich 2</h3>
                    <ul>
                        <li><a href="#">Link 2.1</a></li>
                        <li><a href="#">Link 2.2</a></li>
                        <li><a href="#">Link 2.1</a></li>
                        <li><a href="#">Link 2.2</a></li>
                        <li><a href="#">Link 2.1</a></li>
                        <li><a href="#">Link 2.2</a></li>
                    </ul>
                </li>
                <li><h3>Bereich 2</h3>
                    <ul>
                        <li><a href="#">Link 2.1</a></li>
                        <li><a href="#">Link 2.2</a></li>
                        <li><a href="#">Link 2.1</a></li>
                        <li><a href="#">Link 2.2</a></li>
                        <li><a href="#">Link 2.1</a></li>
                        <li><a href="#">Link 2.2</a></li>
                    </ul>
                </li>
            </ul>
        </nav>
        
        
        
        
        <section>
            <article>
                <div class="divbox">
                    <img src="http://ipadminibackgrounds.com/assets/Battlefield-3-Game-iPad-mini-wallpaper-250x250.jpg" width="250" height="250" />
                </div>
                <div class="divbox">
                    <img src="http://static.planetminecraft.com/files/resource_media/screenshot/1341/11Minecraft-Creeper-Wallpaper-1080p-HD-250x250up_6509836_lrg.jpg" width="250" height="250" />
                </div>
                <div class="divbox">
                    <img src="https://lh5.googleusercontent.com/-Nv-tRjOe0Ww/AAAAAAAAAAI/AAAAAAAAAMQ/81G-ZfxzYNc/photo.jpg" width="250" height="250" />
                </div>
            </article>
        </section>
    </body>
</html>

相关问题
最新问题