How to minimize the html page without any mess up? -
i have designed html page css coding when minimizing page things messing up. can please tell me have change css code clean page without mess up?
my css code
.body { min-width:600px; } .header{ height:30px; background-color:#142441; color:white; border-radius:10px; } .headerleft { float:left; width:300px; text-align:center; height:25px; padding:2px; font-size:20px; } .headerright { width:200px; float:right; text-align:center; height:25px; padding:2px; } .headerright { color:white; } .menu { background-color:#658ac4; height:30px; border-radius:10px; } .menu ul { margin:0px;padding:0px; } .menu { min-width:10px; width:150px; float:left; text-decoration:none; color:black; padding:0.2em 0.6em; text-align:center; height:30px; } .menu a:hover {background-color:white;} .menu li {display:inline;} .table{ border:1px solid black; border-radius:5px; float:left; width:1127px; min-width:100px; min-height:30px; } .table th { text-align:center; background-color:#a3c3e6; } .table tr:hover { background-color:#dfe1e1; } .table td { padding:5px; text-align:center; } .table th { color:black; text-decoration:none; display:inline-block; } .a tr:nth-child(2n+2) { background-color: #dfe1e1; } .right { width:196px; min-width:50px; border:1px solid black; border-radius:5px; float:right; text-align:left; padding:5px; min-height:30px; } .right { background-color:#dfe1e1; } my html code
<!doctype html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <link href="amlstylesheet1.css" rel="stylesheet" /> </head> <body class="body"> <div class="header"> <div class="headerleft">aml independent review tool </div> <div class="headerright"> <label for="application user">application user</label> <a href="#">signout</a> </div> </div> <div class="menu"> <ul > <li><a href="/home" class="active"><span>home</span></a></li> <li><a href="/model"><span>model</span></a></li> <li><a href="/new assesment"><span>newassesment</span></a></li> <li><a href="/settings"><span>settings</span></a></li> <li><a href="/help"><span>help</span></a></li> </ul> </div> <div> <h4>aml independent review - audit history</h4> <p>ghudhfuerdghdhgiblsjvi hwgjirg hijgvkrsjgvk uiuweitgsrkg isjgvierjgie gjuiejgi igjveijvgiji jgviejfgikgjeg igejvkjdgbik</p> </div> <div> <table class="table"style="min-width:100px;"> <tr> <th>aml independent review name</th> <th>country</th> <th>started by</th> <th>status</th> <th>start date</th> <th>end date</th> <th>compilance distribution <br /><a style="padding-bottom:15px;" href="view legend">view legend</a><a "href="#"><img src="go_down.png" /></a></th> <th>action</th> </tr> <tr> <td>australian tech annual aml review-2014</td> <td>australia</td> <td>anthonyxyz</td> <td>completed</td> <td>25-feb-2014</td> <td>30-mar-2014</td> <td>60%</td> <td>action</td> </tr> <tr> <td>australian tech annual aml review-2014</td> <td>australia</td> <td>anthonyxyz</td> <td>completed</td> <td>25-feb-2014</td> <td>30-mar-2014</td> <td>70%</td> <td>action</td> </tr> <tr> <td>australian tech annual aml review-2014</td> <td>australia</td> <td>anthonyxyz</td> <td>completed</td> <td>25-feb-2014</td> <td>30-mar-2014</td> <td>70%</td> <td>action</td> </tr> <tr> <td>australian tech annual aml review-2014</td> <td>australia</td> <td>anthonyxyz</td> <td>completed</td> <td>25-feb-2014</td> <td>30-mar-2014</td> <td>70%</td> <td>action</td> </tr> <tr> <td>australian tech annual aml review-2014</td> <td>australia</td> <td>anthonyxyz</td> <td>completed</td> <td>25-feb-2014</td> <td>30-mar-2014</td> <td>70%</td> <td>action</td> </tr> <tr> <td>australian tech annual aml review-2014</td> <td>australia</td> <td>anthonyxyz</td> <td>completed</td> <td>25-feb-2014</td> <td>30-mar-2014</td> <td>70%</td> <td>action</td> </tr> <tr> <td>australian tech annual aml review-2014</td> <td>australia</td> <td>anthonyxyz</td> <td>completed</td> <td>25-feb-2014</td> <td>30-mar-2014</td> <td>70%</td> <td>action</td> </tr> <tr> <td>australian tech annual aml review-2014</td> <td>australia</td> <td>anthonyxyz</td> <td>completed</td> <td>25-feb-2014</td> <td>30-mar-2014</td> <td>70%</td> <td>action</td> </tr> <tr> <td>australian tech annual aml review-2014</td> <td>australia</td> <td>anthonyxyz</td> <td>completed</td> <td>25-feb-2014</td> <td>30-mar-2014</td> <td>60%</td> <td>action</td> </tr> </table> </div> <div class="right" > <label for="my open items">my open items</label><br /> <a href="#">aml-122</a><br /> account information needed <br/> <label for="my open items">my open items</label><br /> <a href="#">aml-122</a><br /> account information needed <br/> <label for="my open items">my open items</label><br /> <a href="#">aml-122</a><br /> account information needed <br/> <label for="my open items">my open items</label><br /> <a href="#">aml-122</a><br /> account information needed <br/> <label for="my open items">my open items</label><br /> <a href="#">aml-122</a><br /> account information needed <br/> <label for="my open items">my open items</label><br /> <a href="#">aml-122</a><br /> account information needed </div> </body> </html>
what looking called responsive web design.there few possible ways it. can select according need
you can use media queries in define different stylesheets different screens. used way currently.
sneak peek: http://css-tricks.com/css-media-queries/ , https://developer.mozilla.org/en-us/docs/web/guide/css/media_queriesyou can use viewport meta tag.
sneak peek:https://developer.mozilla.org/en/docs/mozilla/mobile/viewport_meta_tagyou can design in % (fluid responsive) part tricky. experience can designing full website giving in % difficult.
i suggest learn media query. quite simple , reliable.
Comments
Post a Comment