HTML, CSS : Why does my layout mess up on different resolutions? -
i trying make portfolio kind of thing html , css , layout looks on resolution of 1920 * 1080 when change resolution moves around , looks bad.
can point out me going wrong code , provide me solution problem?
--- edited new code
how looks on 1920 * 1080: http://screencast.com/t/mq8h3babxii
so have changed advised things i'm still getting that, example, when change screen resolution of 1920 * 1080 1280 * 1024 test how looks comment areas pull on top of grey 'contact me' box ends me picture on link: http://screencast.com/t/xzewsgwdqp
<html> <head> <link rel="stylesheet" type="text/css" href="portfoliostyles.css" /> </head> <body> <div id="pagetitlecontact"> contact me</div> <div id="sidebar"> </div> <div id="commentsidebar"> </div> <div id="logos"> <ul> <div id="home"><li><a href="portfoliohome.html"><img src="home.png" alt="list item 1" /></a></li></div> <div id="aboutme"><li><a href="portfolioaboutme.html"><img src="aboutme.png" alt="list item 2" /></a></li></div> <div id="achievements"><li><a href="portfolioachievement.html"><img src="achievement.png" alt="list item 3" /></a></li></div> <div id="hobbies"><li><a href="portfoliohobbies.html"><img src="hobbies.png" alt="list item 4" /></a></li></div> <div id="contactme"><li><a href="portfoliocontactme.html"><img src="contactmehighlighted.png" alt="list item 4" /></a></li></div> </ul> </div> <textarea id="contactmetextarea"> </textarea> <div id="commentsection"> <form action="postcommentandreturn.php" method="post"> <div id="nameareatitle"> name:</div><input type="text" id="namearea" name="name" /> <br> <textarea placeholder="insert comment here..." type="text" id="commentarea" name="comment"></textarea> <div id="submitlocation"><input type="submit" id="submitcomment" value="submit"/></div> </form> </div> <!--comment section--> <div id="postedcomments"> <tr> <td><div id="postersname"> </div> </td> </tr> <tr> <td><div id="commentdate"></div></td> </tr> <tr> <td> <textarea id="posterscomment"></textarea></td> </tr> </table> </div> </body> </html> css:
html,body { height: 100%; padding: 0px; margin: 0px; } #sidebar { background-color: #111111; width:100px; height:100%; position:fixed; z-index:-1; } #commentsidebar { background-color: #111111; width:300px; height:100%; position:fixed; z-index:-1; right:0; } #logos { position:absolute; margin-left:-20px; } #home { margin-top:50px; } #homeinfo { resize: none; position:fixed; display: block; height:400px; width:800px; overflow:hidden; outline:none; background-color:#3f3f3f; color:white; font-family:arial; font-size:30px; border-radius:10px; font-weight:700; text-align:left; padding-right:20px; padding-left:40px; top: 50%; left: 50%; max-width:800px; margin-left:-350px; margin-top:-200px; -moz-box-shadow: 3px 3px 5px 6px #ccc; -webkit-box-shadow: 3px 3px 5px 6px #ccc; box-shadow: 3px 3px 5px 6px #ccc; } #pagetitlecontact { position:fixed; top: 50%; left: 50%; margin-top:-400px; margin-left:-400px; color:limegreen; font-size:100px; font-family:arial; -moz-box-shadow: 3px 3px 5px 6px #ccc; -webkit-box-shadow: 3px 3px 5px 6px #ccc; box-shadow: 3px 3px 5px 6px #ccc; padding-left:20px; padding-right:20px; } #aboutme { margin-top:100px; } #achievements { margin-top:100px; margin-left:-7px; } #hobbies { margin-top:100px; } #contactme { margin-top:100px; margin-bottom:50px; } #contactmetextarea { -moz-box-shadow: 3px 3px 5px 6px #ccc; -webkit-box-shadow: 3px 3px 5px 6px #ccc; box-shadow: 3px 3px 5px 6px #ccc; resize: none; position:fixed; display: block; height:600px; width:1000px; max-width:1000px; outline:none; background-color:#3f3f3f; color:whitesmoke; font-family:arial; font-size:30px; border-radius:10px; text-align:left; padding-right:20px; padding-left:40px; top: 50%; left: 50%; margin-left:-500px; margin-top:-300px; padding-top: 50px; } #commentsection { position:fixed; top:50%; margin-left:140px; margin-top:-300px; } #nameareatitle { font-family:arial; color:black; font-weight:bold; } #namearea { font-family:arial; color:black; width:300px; height:40px; font-size:30px; } #commentarea { font-family:arial; color:black; width:300px; height:300px; resize: none; margin-top:10px; font-size:20px; } #submitcomment { width:100px; font-size:20px; } #postedcomments{ position:absolute; right:0px; margin-top:10px; margin-right:10px; width:280px; background-color:grey; } #postersname { width:260px; height:25px; font-size:20px; font-family:arial; background-color:white; color:black; border-color:black; border-width:1px; border-style:solid; padding-left:10px; font-weight:bold; margin-top:10px; } #commentdate { width:260px; height:25px; font-size:20px; font-family:arial; background-color:white; color:black; border-color:black; border-width:1px; border-style:solid; padding-left:10px; } #posterscomment { width:275px; height:200px; font-size:20px; font-family:arial; background-color:white; color:black; border-color:black; border-width:1px; border-style:solid; padding-left:10px; resize:none; } li { list-style-type:none; }
without looking @ closely, can add container div or wraps code up, , assign min-width attribute ensure never goes smaller given size.
layout seems relying on width of body , window size changes width of body. having wrapper min-width or declared width make horizontal scroll bar appear when users have window smaller width of container.
and others have stated, have nesting issues. general page layout this:
<html> <head> <!-- head content --> </head> <body> <!-- page content --> <ul> <li><!-- list item --></li> <li><!-- list item --></li> </ul> </body> </html>
Comments
Post a Comment