Making a HTML/CSS code work for all resolutions? -
i have html mixed css index.html code don't know how can make work resolutions. way it's coded, seems hard make changes perhaps not doing right.
could me out achieving desired result?
<!doctype html public "-//w3c//dtd html 4.01 transitional//en" "http://www.w3.org/tr/html4/loose.dtd"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1"> <title>welcome ro server</title> <meta name="generator" content="wysiwyg web builder 8 - http://www.wysiwygwebbuilder.com"> <style type="text/css"> body { height: auto; background-color: #000000; background: url(images/background.jpg) no-repeat; color: #000000; background-size: 100%; } </style> <style type="text/css"> { color: #c8d7eb; text-decoration: underline; } a:visited { color: #c8d7eb; } a:active { color: #c8d7eb; } a:hover { color: #376bad; text-decoration: underline; } </style> <style type="text/css"> #image1 { height: auto; bottom: 0; border: 0px #000000 solid; } #image2 { height: auto; bottom: 0; border: 0px #000000 solid; } #image3 { height: auto; bottom: 0; border: 0px #000000 solid; } bottom: 0; #image4 { height: auto; border: 0px #000000 solid; } #wb_text1 { background-color: transparent; border: 0px #000000 solid; padding: 0; } #wb_text1 div { text-align: center; } #wb_text3 { background-color: transparent; border: 0px #000000 solid; padding: 0; } #wb_text3 div { text-align: center; } #image6 { height: auto; bottom: 0; border: 0px #000000 solid; } #slideshow1 { -moz-box-shadow: 0px 0px 3px #000000; -webkit-box-shadow: 0px 0px 3px #000000; box-shadow: 0px 0px 3px #000000; } #image7 { height: auto; bottom: 0; border: 0px #000000 solid; } #wb_text4 { background-color: transparent; border: 0px #000000 solid; padding: 0; } #wb_text4 div { text-align: left; } #image10 { height: auto; bottom: 0; border: 0px #000000 solid; } #image9 { height: auto; bottom: 0; border: 0px #000000 solid; } #image8 { bottom: 0; border: 0px #000000 solid; } #image5 { height: auto; bottom: 0; border: 0px #000000 solid; } #image11 { height: auto; bottom: 0; border: 0px #000000 solid; } #image12 { bottom: 0; padding:0px; border: 0px #000000 solid; } #image13 { height: auto; bottom: 0; border: 0px #000000 solid; } </style> <script type="text/javascript" src="./swfobject.js"></script> <script type="text/javascript" src="./jquery-1.7.2.min.js"></script> <script type="text/javascript" src="./jquery.effects.core.min.js"></script> <script type="text/javascript" src="./jquery.effects.blind.min.js"></script> <script type="text/javascript" src="./jquery.effects.bounce.min.js"></script> <script type="text/javascript" src="./jquery.effects.clip.min.js"></script> <script type="text/javascript" src="./jquery.effects.drop.min.js"></script> <script type="text/javascript" src="./jquery.effects.fold.min.js"></script> <script type="text/javascript" src="./jquery.effects.scale.min.js"></script> <script type="text/javascript" src="./jquery.effects.slide.min.js"></script> <script type="text/javascript" src="./wb.slideshow.min.js"></script> <script type="text/javascript"> $(document).ready(function() { $("#slideshow1").slideshow( { interval: 3000, type: 'sequence', effect: 'none', direction: '', effectlength: 2000 }); }); </script> </head> <body> <div id="wb_image4" style="position:absolute;left:439px;top:194px;width:586px;height:428px;z-index:3;"> <img src="images/layer5.png" id="image4" alt="" border="0" style="width:586px;height:428px;"></div> <div id="wb_youtube1" style="position:absolute;font-family:verdana;font-size:12px;left:573px;top:236px;width:335px;height:379px;z-index:4;"> welcome myro!<br><br> intro text<br> <br><br> -- <i>staff</i> </div> <div id="wb_text3" style="position:absolute;left:449px;top:624px;width:450px;height:16px;text-align:center;z-index:7;"> <span style="color:#ffffff;font-family:arial;font-size:13px;"><strong> helena - myro 2015. rights reserved.<br><br> </strong></span></div> <div id="wb_image7" style="position:absolute;opacity:1;left:871px;top:193px;width:464px;height:429px;z-index:11;"> <img src="images/layer5.png" id="image7" alt="" border="0" style="width:464px;height:429px;"></div> <div id="wb_image8" style="position:absolute;left:389px;top:309px;width:138px;height:135px;z-index:18;"> <a href="#"><img src="images/register.png" id="image8" alt="" border="0" style="width:138px;height:135px;"></a></div> <div id="wb_image9" style="position:absolute;left:389px;top:459px;width:138px;height:135px;z-index:18;"> <a href="#"><img src="images/download.png" id="image8" alt="" border="0" style="width:138px;height:135px;"></a></div> <div id="wb_image10" style="position:absolute;left:655px;top:560px;width:28px;height:28px;z-index:13;"> <a href="https://plus.google.com"><img src="images/google%2b.png" id="image10" alt="" border="0" style="width:28px;height:28px;"></a></div> <div id="wb_image9" style="position:absolute;left:610px;top:560px;width:28px;height:28px;z-index:14;"> <a href="#" title="facebook"><img src="images/facebook.png" id="image9" alt="" border="0" style="width:28px;height:28px;"></a></div> <div id="wb_image8" style="position:absolute;left:990px;top:232px;width:245px;height:54px;z-index:15;"> <a href="#"><img src="images/control-panel.png" id="image8" alt="" border="0" style="width:240px;height:54px;"></a></div> <div id="wb_image5" style="position:absolute;left:715px;top:475px;width:240px;height:54px;z-index:16;"> <img src="images/poring.png" id="image5" alt="" border="0" style="width:201px;height:111px;"></a></div> <div id="wb_image11" style="position:absolute;left:943px;top:349px;width:240px;height:54px;z-index:17;"> <img src="images/myro.png" id="image11" alt="" border="0" style="width:324px;height:243px;"></a></div> <div id="wb_image12" style="position:absolute;left:989px;top:299px;width:240px;height:54px;z-index:18;"> <a href="#"><img src="images/forum.png" id="image12" alt="" border="0" style="width:240px;height:54px;"></a></div> <div id="wb_image13" style="position:absolute;left:565px;top:560px;width:28px;height:28px;z-index:19;"> <a href="#"><img src="images/twitter.png" id="image13" alt="" border="0" style="width:28px;height:28px;"></a></div> <div id="wb_flash1" style="position:absolute;left:144px;top:222px;width:250px;height:250px;z-index:20;"> <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="420" height="407" id="flash1"> <param name="movie" value="sfx3.swf"> <param name="quality" value="high"> <param name="scale" value="exactfit"> <param name="wmode" value="transparent"> <param name="play" value="true"> <param name="loop" value="false"> <param name="menu" value="false"> <param name="allowfullscreen" value="false"> <param name="allowscriptaccess" value="samedomain"> <param name="salign" value="tl"> <embed src="sfx3.swf" width="250" height="250" quality="high" wmode="transparent" loop="false" play="true" menu="false" allowfullscreen="false" allowscriptaccess="samedomain" scale="exactfit" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer"> </embed> </object> </div> </body> </html>
first of cannot code of website style inside html. please read: http://www.w3schools.com/css/css_howto.asp
second need remove of messy css like:
position: absolute; left: 449px; top: 624px; width: 450px; height: 16px; text-align: center; z-index: 7; } and instead set global css rules can use them in multiple places in code. reccommend reading
http://www.smashingmagazine.com/2007/05/10/70-expert-ideas-for-better-css-coding/
so understand need style on classes instead of divs. , easy solution have ready libararies http://getbootstrap.com/css/
which included need organize , style properly.
Comments
Post a Comment