css - Div takes the place of another div when I zoom in -


i new html , css. have started make own website, have encountered problem, it's when zoom in content div goes menu div. can't seem find answer myself great if me.

html:

<html> <head> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1"> <link rel="stylesheet" type="text/css" href="css/style.css"> <title>insert title here</title> </head> <body>         <div class="logobar">                <div class="helper">                         <div class="logo"></div>             </div>         </div>             <div id="vmenu">                  <ul>                    <li><a href="">acceuil</a></li>                    <li><a href="">identification</a></li>                    <li><a href="">mon parcours</a></li>                    <li><a href="">ma formation</a></li>                    <li><a href="">mes projets</a></li>                    <li><a href="">dossier de veille</a></li>                    <li><a href="">contact me</a></li>                  </ul>                </div>               <div class="content">             </div> </body> </html> 

css:

/******************custom styles********************/  @font-face { font-family: stainy; src: url(../font/stainy.ttf); }  body{     background:url(../img/bg.png) no-repeat center center fixed;     -moz-background-size: cover;     -webkit-background-size: cover;     -o-background-size: cover;     background-size: cover;      margin:0 ;     padding:0;     height: 100%;     width: 100%; }  .logobar{      background:url(../img/logobar.png) ;     height:149px;        position:relative;     width: 100%; min-width: 960px; }  .helper{     height:120px;     width:100%;     display: table; }  .logo{       background:url(../img/untitled-1.png) no-repeat center;      width:262px;      height:80px;      margin:0 auto;      display: table-cell;      vertical-align: middle; }     div#vmenu {     margin: 0;     padding: .25em 0em .25em 0em;     /***border: solid 2px #30c9e0;***/       width: 13.5em;     float:left;   }  div#vmenu ul {     margin: 0;     padding: 0;     list-style: none;   }   div#vmenu ul li {     margin: 0;     padding: 0;     list-style: none;     color: #6f8083;    font-family: stainy; }   div#vmenu ul a:link {     margin: 0;     padding: .2em 0em .2em .4em;     text-decoration: none;     font-size:23pt;       color: #6f8083;    font-family:stainy;     display: block;   }   div#vmenu ul a:active {     margin: 0;     padding: .25em .5em .25em .5em;     text-decoration: none;     color: black;    font-family: stainy;     font-size:23pt;    }   div#vmenu ul a:visited {     margin: 0;     color: #6f8083;    font-family: stainy;    text-decoration: none;      font-size:23pt;        color: #ffffff;   }   div#vmenu ul li a:hover {     margin: 0;     padding: .2em 0em .2em .4em;     text-decoration: none;      font-size:24pt;    background-color: #30c9e0;     color: black;   }    .content{    width: 700px ;   height:100px;   margin-top:20px;   margin-left: auto ;   margin-right: auto ;   border: 1px solid #30c9e0;   background-color:white;   text-align:center;   -moz-box-shadow: 0 0 3px 3px #4d4f50;   -webkit-box-shadow: 0 0 3px 3px #4d4f50;    box-shadow: 0 0 3px 3px #4d4f50;  } 

to achieve you're looking for, without modifying layout you've created, add min-width body style. (for layout, 1150px ought it, weirdly irregular minimum width device. fyi.)


Comments

Popular posts from this blog

basic authentication with http post params android -

vb.net - Virtual Keyboard commands -

How to get multiresult with multicondition in Sql Server -