Jump to content

layout webpage


mmmartin123456

Recommended Posts

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

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

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...