html - Looking for a way to position block elements in a line, but design falls apart at 25% zoom -
i designing page, , run problem, can not solve on own. on zooming out, items in header moving vertically, @ 25%, elements in wrong position. using block display, because want menu items move center on zoomout(like on facebook, twitter or here), inline , inline-block not solving problem. same reason on relative positioning.
is there way achive same effect instead of relative positioning?
any ideas how make right?
cheers
andrew
html:
<!doctype html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <style type="text/css" media="screen"> </style> <title>layout</title> <link href="../content/layout.css" rel="stylesheet" /> </head> <body> <div id="menucontainer"> <div id="wrapper"> <a href="http://www.google.com" class="lc"> <p class="l"> </p> </a> <a href="http://www.idk.com" class="kc"> <p class="k">Új kérdés</p> </a> <a href="http://www.idk.com" class="ec"> <p class="e">Új Értékelés</p> </a> <a href="http://www.idk.com" class="messagec"> <p class="message"> </p> </a> </div> </div> </body> </html> css:
body { background-color: lightgray; margin:0 auto;} #menucontainer { position: fixed; width: 100%; min-height: 45px; height: 20px; background: #3f3f3f; /* old browsers */ background: -moz-linear-gradient(top, #3f3f3f 0%, #000000 91%, #3f3f3f 91%, #33eb31 93%, #33eb31 101%); /* ff3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#3f3f3f), color-stop(91%,#000000), color-stop(91%,#3f3f3f), color-stop(93%,#33eb31), color-stop(101%,#33eb31)); /* chrome,safari4+ */ background: -webkit-linear-gradient(top, #3f3f3f 0%,#000000 91%,#3f3f3f 91%,#33eb31 93%,#33eb31 101%); /* chrome10+,safari5.1+ */ background: -o-linear-gradient(top, #3f3f3f 0%,#000000 91%,#3f3f3f 91%,#33eb31 93%,#33eb31 101%); /* opera 11.10+ */ background: -ms-linear-gradient(top, #3f3f3f 0%,#000000 91%,#3f3f3f 91%,#33eb31 93%,#33eb31 101%); /* ie10+ */ background: linear-gradient(to bottom, #3f3f3f 0%,#000000 91%,#3f3f3f 91%,#33eb31 93%,#33eb31 101%); /* w3c */ filter: progid:dximagetransform.microsoft.gradient( startcolorstr='#3f3f3f', endcolorstr='#33eb31',gradienttype=0 ); /* ie6-9 */ -webkit-box-shadow: 0px 2px 12px 4px rgba(50, 50, 50, 0.64); -moz-box-shadow: 0px 2px 12px 4px rgba(50, 50, 50, 0.64); box-shadow: 0px 2px 12px 4px rgba(50, 50, 50, 0.64); font-family: corbel; z-index: 2; display: inline-block; } #wrapper { margin-left: auto; margin-right: auto; width: 960px; z-index: -1; white-space: nowrap; height: 30px; max-height: 30px; display: block; padding-top:9px; padding-bottom:10px; } .lc { left: 0%; min-width: 30px; top: -20px; max-width:30px; width:30px; display: block; position:relative; white-space:nowrap; height:30px; min-height:30px; margin-right:20px; margin-top:2px; } .l { background-image: url(/logo.png); background-size: 30px 30px; height: 30px; width: 30px; min-width: 30px; max-width: 30px; } .kc { left: 7%; top: -64px; display: inline-block; position: relative; text-decoration: none; width:90px; min-width:90px; white-space:nowrap; height:30px; } .k { font-family: arial; font-weight: bold; font-size: 1.2em; color: white; text-decoration:none; } .k:link { text-decoration: none; } .k:visited { text-decoration: none; } .k:hover { text-decoration: none; color: #33eb31; } .k:active { color: white; text-decoration: none; } .ec { left: 20%; top: -105px; display: block; position: relative; text-decoration: none; width:110px; min-width:110px; white-space:nowrap; height:30px; } .e { position: relative; font-family: arial; font-weight: bold; font-size: 1.2em; color: white; min-width: 30px; } .e:link { text-decoration: none; } .e:visited { text-decoration: none; } .e:hover { text-decoration: none; color: #33eb31; } .e:active { color: white; text-decoration: none; }
i think might on complicating little bit. shouldn't need use position:absolute;. should use ul li elements menu instead. can set #wrapper size of page , use margin:0px auto center it.
let me know if looks you're trying do: http://jsfiddle.net/gxwxk3zv/
Comments
Post a Comment