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
Post a Comment