将文本和菜单保存在div标签内?

时间:2015-09-15 12:14:51

标签: html text menu tags

我无法将菜单和文字留在div标签内?

有人可以帮助我吗?

www.sverkel.dk/index3.php

    body {
    	margin: 0;
    	font-family:verdana;
    }
    
    
    header {
    	background: #cf5858; /* Old browsers */
        background: -moz-linear-gradient(top, #cf5858 0%, #902727 100%); /* FF3.6+ */
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#cf5858), color-stop(100%,#902727)); /* Chrome,Safari4+ */
        background: -webkit-linear-gradient(top, #cf5858 0%,#902727 100%); /* Chrome10+,Safari5.1+ */
        background: -o-linear-gradient(top, #cf5858 0%,#902727 100%); /* Opera 11.10+ */
        background: -ms-linear-gradient(top, #cf5858 0%,#902727 100%); /* IE10+ */
        background: linear-gradient(to bottom, #cf5858 0%,#902727 100%); /* W3C */
    }
    
    #btn-menu {
    	display: none;  	
    }
    
    header label {
    	display:none;
    	width: 30px;
    	height:20px;
    	padding:10px;
    	border-right:1px solid #fff;
    }
    
    
    header label:hover {
    	cursor: pointer;
    }
    
    .menu ul {
    	margin:0;
    	list-style:none;
    	padding:0;
    	display:flex;
    	justify-content: center;
    }
    
    .menu li {
    }
    
    .menu li:hover {
    	background:#9E3C3E;
    }
    
    .menu li a {
    	display: block;
    	padding: 15px 20px;
    	color: #fff;
    	text-decoration: none;
    }
    
    main {
    	padding:20px;
    }
    
    @media (max-width:768px) {
    	header label {
    		display:block;
    	}
    	
    	.menu {
    		position:absolute;
    		background: #cf5858; /* Old browsers */
            background: -moz-linear-gradient(top, #cf5858 0%, #902727 100%); /* FF3.6+ */
            background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#cf5858), color-stop(100%,#902727)); /* Chrome,Safari4+ */
            background: -webkit-linear-gradient(top, #cf5858 0%,#902727 100%); /* Chrome10+,Safari5.1+ */
            background: -o-linear-gradient(top, #cf5858 0%,#902727 100%); /* Opera 11.10+ */
            background: -ms-linear-gradient(top, #cf5858 0%,#902727 100%); /* IE10+ */
            background: linear-gradient(to bottom, #cf5858 0%,#902727 100%); /* W3C */
    		width:70%;
    		margin-left: -70%;
    		transition: all 0.3s;
    	}
    	
    	.menu ul {
    		flex-direction:column;
    	}
    	
    	.menu li {
    		border-top: 1px solid #fff;
    	}
    	
    	#btn-menu:checked ~ .menu {
    		margin:0;
    	}
    	
    }
<div class="container">
    <div class="top" id="cell1"></div>
    
    <div class="midt" id="cell2">    
    <header>
        <input type="checkbox" id="btn-menu">
        <label for="btn-menu"><img src="billeder/menux.png"></label>
    
        <nav class="menu">
    	<ul>
        	<li><a href="#">Forside</a></li>
            <li><a href="#">Produkter</a></li>
            <li><a href="#">Priser</a></li>
            <li><a href="#">Om os</a></li>
            <li><a href="#">Kontakt</a></li>
       </ul>
       </nav>
    </header>
    </div>
        
        
    <div class="indhold" id="cell3" align="center"><br><h2>Velkommen til vores nye hjemmeside</h2><br><br>Her på siden vil du finde en masse informationer om vores services, produkter, priser og meget andet. Siden er stadig under opbygning...</div>
        
    <div class="bund" id="cell4"></div>
 </div>

0 个答案:

没有答案