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

标签 html css

关于 my Page我有一个导航栏。但是，如果我在导航栏内放大，就会消失。导航得到了位置:固定。我不知道如何更正它，当我放大它时我仍然可以看到导航栏。

代码:

*{
    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;
}
<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>

最佳答案

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

*{
    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>

关于html - 如果我放大，div 容器就会消失，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28026167/

上一篇：javascript - 如果名称为空，则隐藏文章的 css/jquery 代码

下一篇：javascript - 使用滚动条防止 div 来自新字符串

相关文章：

javascript - Bootstrap 响应式 CSS 导航栏不工作

html - 为什么 Android 和 iOS 浏览器默认呈现的网站宽度比设备屏幕宽度宽？

css - 应用程序中所有文本实例周围的自定义光标，而不使用 <span>？

html - 在页面上居中对齐溢出的图像

php - active class 如何实现分页

jquery - 使用 jQuery 更新带有下拉选择值的类

html - 如何制作一个 div 以适应滚动隐藏的所有可用宽度？

html - CSS 旋转创建箭头摇动

html - 更改跨度文本的颜色但不在 :before (or :after)

html - 调整浏览器大小时，一页网站页面会移动

©2024 IT工具网  联系我们