mmmartin123456 Posted May 16, 2014 Share Posted May 16, 2014 i have problem make web size... if make fixed value like body {width:1000px} it make bad if someone have DISPLEY RESOLUTION under 1000... so solution for it make value with % ... instant px body { margin-left:13%; margin-right:13%; } with this make my body like center and make for others ELEMENTS BLOCK corect width but... if want for some BLOCK add border it is like shorthand border:1px solid gray; i cant use value at %... and here i get problem if make PX value i get others posicions if use diferent DISPLEY RESOLUTION 1px at 1000xXXX is like 1% and 1px at 2000xXXX is diferent... example i make like some ... BAR PANEL with 5 buttons... and use width:19.9%; it make in end some space... 0,1 for border whatever it dont make corect width not use 100%.. space... or take more like 100% and droped under button... like make second bar a.bar {float:left; width:19.8%; border:1px solid gray; text-align:center;color:#FF0000; text-decoration:none; background-color:#dddddd; } diferent DISPLEY RESOLUTION make diferent effect is some way fixed it for corect ?? border:1px solid gray; here i cant use value %.... or some example some already make layout posicions with some ELEMENTS BLOCK ??? Link to comment Share on other sites More sharing options...
davej Posted May 16, 2014 Share Posted May 16, 2014 Can you show the problem on your testing webpage? Link to comment Share on other sites More sharing options...
mmmartin123456 Posted May 16, 2014 Author Share Posted May 16, 2014 i testing layout make... for now in my opinion are 2 case make for universal DISPLEY RESOLUTION with auto change "width" value % second way is make like fixed value body {width:1000px} and math conting ... value PX HTML <!DOCTYPE html><html><head><meta charset="UTF-8" /><!-- --> <meta http-equiv="refresh" content="5" /> <link rel="stylesheet" type="text/css" href="styles.css" /><script src="Javascripts.js"></script><title>AnimeFan.wz.sk</title><meta name="keywords" content="animefan" /><meta name="description" content="animefan" /><meta name="author" content="mmmartin123456" /></head><body><header><div class="left"><p id="demo">A Paragraph.</p><button type="button" onclick="myFunction()">Try it</button></div><div class="midle"><p>Anime Fan Wellcome ALL</p></div><div class="clear"></div></header><div class="clear"></div><nav><a class="bar" href="sub.html">Home</a><a class="bar" href="#">News</a><a class="bar" href="#">Contact</a><a class="bar" href="#">About</a><div class="clear"></div></nav><section><div class="clear"></div><p id="testbar_1">ANIME LIST</p><ul class="list"><li><a class="bar_1" href="#">XXXXXXX</a></li><li><a class="bar_1" href="#">XXXXXXX</a></li><li><a class="bar_1" href="#">XXXXXXX</a></li><li><a class="bar_1" href="#">XXXXXXX</a></li><li><a class="bar_1" href="#">XXXXXXX</a></li><li><a class="bar_1" href="#">XXXXXXX</a></li><li><a class="bar_1" href="#">XXXXXXX</a></li><li><a class="bar_1" href="#">XXXXXXX</a></li><li><a class="bar_1" href="#">XXXXXXX</a></li><li><a class="bar_1" href="#">XXXXXXX</a></li><li><a class="bar_1" href="#">XXXXXXX</a></li><li><a class="bar_1" href="#">XXXXXXX</a></li><li><a class="bar_1" href="#">XXXXXXX</a></li><li><a class="bar_1" href="#">XXXXXXX</a></li><li><a class="bar_1" href="#">XXXXXXX</a></li><li><a class="bar_1" href="#">XXXXXXX</a></li><li><a class="bar_1" href="#">XXXXXXX</a></li><li><a class="bar_1" href="#">XXXXXXX</a></li><li><a class="bar_1" href="#">XXXXXXX</a></li><li><a class="bar_1" href="#">XXXXXXX</a></li><li><a class="bar_1" href="#">XXXXXXX</a></li><li><a class="bar_1" href="#">XXXXXXX</a></li><li><a class="bar_1" href="#">XXXXXXX</a></li><li><a class="bar_1" href="#">XXXXXXX</a></li><li><a class="bar_1" href="#">XXXXXXX</a></li></ul></section><article><div class="clear"></div><div id="javaefects"><a href="#"><img src="pictureno game no life-4.jpg" alt="NO GAME NO LIFE"></a></div><div id="text"><h1>ARTICLE</h1><p>This is a paragraph11safasfasfasdsadsadasdsadasdsadadsadsadadsadsad1.</p><p>This is a paragraph11safasfasfasdsadsadasdsadasdsadadsdasdsadasdsadadsdasdsadasdsadadsdasdsadasdsadadsadsadadsadsad1.</p><p>This is a paragraph11safasfasfasdsadsadasdsadasdsadadsadsadadsadsad1.</p><p>This is a paragraph11safasfasfasdsadsadasdsadasdsadadsadsadadsadsad1.</p><p>This is a paragraph11safasfasfasdsadsadasdsadasdsadadsadsadadsadsad1.</p><p>This is a paragraph11safasfasfasdsadsadasdsadasdsadadsadsadadsadsad1.</p><p>This is a paragraph11safasfasfasdsadsadasdsadasdsadadsadsadadsadsad1.</p><p>This is a paragraph11safasfasfasdsadsadasdsadasdsadadsadsadadsadsad1.</p><p>This is a paragraph11safasfasfasdsadsadasdsadasdsadadsadsadadsadsad1.</p><p>This is a paragraph11safasfasfasdsadsadasdsadasdsadadsadsadadsadsad1.</p><p>This is a paragraph11safasfasfasdsadsadasdsadasdsadadsadsadadsadsad1.</p><p>This is a paragraph11safasfasfasdsadsadasdsadasdsadadsadsadadsadsad1.</p><p>This is a paragraph11safasfasfasdsadsadasdsadasdsadadsadsadadsadsad1.</p><p>This is a paragraph11safasfasfasdsadsadasdsadasdsadadsadsadadsadsad1.</p><p>This is a paragraph11safasfasfasdsadsadasdsadasdsadadsadsadadsadsad1.</p><p>This is a paragraph11safasfasfasdsadsadasdsadasdsadadsadsadadsadsad1.</p><p>This is a paragraph11safasfasfasdsadsadasdsadasdsadadsadsadadsadsad1.</p><p>This is a paragraph11safasfasfasdsadsadasdsadasdsadadsadsadadsadsad1.</p><p>This is a paragraph11safasfasfasdsadsadasdsadasdsadadsadsadadsadsad1.</p><p>This is a paragraph11safasfasfasdsadsadasdsadasdsadadsadsadadsadsad1.</p><p>This is a paragraph11safasfasfasdsadsadasdsadasdsadadsadsadadsadsad1.</p><p>This is a paragraph11safasfasfasdsadsadasdsadasdsadadsadsadadsadsad1.</p></div><div><br /><br /><br /><br /><p>This is a paragraph11safasfasfasdsadsadas<br />dsadasdsadadsadsadadsadsad1.</p></div></article><aside><div class="clear"></div><h1>CSS example!</h1><p>This is a paragraph222.</p></aside><div class="clear"></div><footer><h1>This web started:</h1><p>8.5 2014</p></footer></body></html> CSS body {margin-left:13%;margin-right:13%;/*width-max:1000px*//*margin:auto;*//*width:1000px;*/ /*width:80%;*/background:#470000 url("girl.jpg") no-repeat fixed center top; /*SHORTCUT*//*background-color:#ffffff;background-image:url("paper.jpg");background-repeat:no-repeat;background-attachment:fixed;background-position:center top; */}p{color:blue;margin-left:2%;}h1{color:black;}div.clear{clear:both;}header,section,article,aside,footer,div.body{background: -webkit-linear-gradient(left top, red,orange,yellow); /*duha*/background: -o-linear-gradient(left top, red,orange,yellow);background: -moz-linear-gradient(left top, red,orange,yellow);background: linear-gradient(left top, red,orange,yellow);border:1px solid gray;margin:15px 0% 15px 0%;padding:0% 0% 0% 0%;}header{width:100%;/*height:50px;*/}div.left{width:33%;float:left;}div.midle{width:33%;float:left;text-shadow:2px 2px #FFFFFF;}div.midle p{text-align:center;padding:0px 0px 0px 0px;color:black;font-size:1.5em;}nav{/*margin-left:15px;*/}a.bar /*GLOBAL BAR*/{float:left; /*ALLOW USE width*/width:24.8%; border:1px solid gray; text-align:center;}a.bar:link,a.bar:visited /*NORMAL LINK SEE*/{color:#FF0000; /*number #B2FF99 ,name red , ........*/text-decoration:none; /*none, underline, ........*/background-color:#dddddd; /*number #B2FF99 ,name red , ........*/} /*font-family:monospace; ........*/a.bar:hover /*WHEN MOVY WITH MOUSE AT*/{color:#FF0000;text-decoration:none; background-color:#B2FF99;}a.bar:active /*AFTER CLICK AT LINK*/{color:#FF0000;text-decoration:none; background-color:#B2FF99;}section,article,aside{width:20%; overflow:hidden;float:left;/*display:block;*/ }#testbar_1{margin-left:0px;text-align:center;padding:5px 0px 0px 0px;color:black;}ul.list li{margin:0px 40px 3px 0px;list-style-type:none;/*;*/background-color:#ffffff;text-align:center;}a.bar_1{text-decoration:none;color:black;}a.bar_1:link,a.bar_1:visited {text-decoration:none;color:black;} a.bar_1:hover /*WHEN MOVY WITH MOUSE AT*/{text-decoration:underline;color:#FF0000;}article{margin:15px 15px 0px 15px;padding:0px 0px 0px 0px; width:564px;}#javaefects{margin:0px;/*padding:2px;*/width:474px;height:240px;}#javaefects img {/*outline-style:dotted;*/border:10px solid gray;width:544px;height:250px;}#text{margin:40px 15px 15px 15px;padding:0px 10px 0px 0px;height:300px;overflow-y:scroll;word-break:break-all;}aside{float:left;}footer{/*clear:both;*/} at CSS look line a.bar { width:24.8%; border:1px solid gray; } here border cant make with value % .... value PX is diferent at DISPLEY RESOLUTION so is 2000x768 or 1366x768 or 1024x768 is diferent in number pixels mean border take other value space in web Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now