I am trying to make a portfolio kind of thing with HTML and CSS and my layout looks really good on my resolution of 1920 * 1080 but when i change the resolution everything moves around and everything looks really bad.
Can anybody point out to me where I am going wrong with my code and provide me with a solution to my problem?
--- Edited new code
How it looks on 1920 * 1080: http://screencast.com/t/mq8H3baBxIi
So i have changed the advised things but i'm still getting that, for example, when i change from my screen resolution of 1920 * 1080 to 1280 * 1024 to test how it looks the comment areas pull on top of the grey 'contact me' box so that it ends up like me picture on this 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 at it too closely, you can probably add a container div or something that wraps all your code up, and then assign a min-width attribute to ensure that it never goes smaller than the given size.
Your layout seems to be relying on the width of your body and as your window size changes so will the width of your body. Having a wrapper with a min-width or declared width will make it so a horizontal scroll bar will appear when users have a window smaller than the width of your container.
And like others have stated, you have some nesting issues. General page layout will look like this:
<html>
<head>
<!-- Head Content -->
</head>
<body>
<!-- Page Content -->
<ul>
<li><!-- List Item --></li>
<li><!-- List Item --></li>
</ul>
</body>
</html>