Okay i have this problem with every page i make. im not sure what im doing wrong but all my pages never work for every resolution. Probably because im using a widescreen? lol im not sure but it never looks right on resolutions smaller than a widescreen one. parts of it you cant see so you have to scroll to the side or in this case the content extends furthur than the div. an example is at larzconwell.com
so heres the code. i would greatly appreciate it if you could help me resolve this problem.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href='http://fonts.googleapis.com/css?family=Tinos' rel='stylesheet' type='text/css'>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"> </script>
<title>Larz Conwell</title>
<style>
/* standard */
body {
background-color: #333;
color: #ccc;
font-family: 'Tinos', arial, serif;
}
a:link {
color: #CCC;
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #CCC;
}
a:hover {
text-decoration: none;
color: #09F;
}
a:active {
text-decoration: none;
color: #09F;
}
textarea {
resize: none;
}
/* classes */
.dash {
font-size:20px;
color:#09F;
}
.header {
z-index:1;
float:left;
background:#666;
margin-left:25px;
margin-top:75px;
padding-left:5px;
padding-right:5px;
padding-bottom:5px;
width:31%;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
-moz-box-shadow: 5px 5px 2px #000;
-webkit-box-shadow: 5px 5px 2px #000;
box-shadow: 5px 5px 2px #000;
opacity:0.9;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=90);
}
.menu {
z-index:3;
float:right;
background:#666;
margin-left:25px; /*only applies if floating left */
margin-right:25px;
margin-top:15px;
padding-left:25px;
padding-right:5px;
width:27%;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
-moz-box-shadow: 5px 5px 2px #000;
-webkit-box-shadow: 5px 5px 2px #000;
box-shadow: 5px 5px 2px #000;
opacity:0.7;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
}
.menuname {
color:#09F;
font-size:20px;
}
.content {
z-index:2;
float:left;
background:#666;
margin-left:25px; /*only applies if floating left */
margin-right:25px;
margin-top:50px;
padding-top:25px;
padding-left:25px;
padding-right:5px;
padding-bottom:25px;
width:60%;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
-moz-box-shadow: 5px 5px 2px #000;
-webkit-box-shadow: 5px 5px 2px #000;
box-shadow: 5px 5px 2px #000;
opacity:0.7;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
}
.linkletter {
color: #09F !important;
font-size:50px !important;
}
.linkletter:hover {
color:#000 !important;
font-size:50px !important;
}
.links {
font-size:35px !important;
}
.links:hover {
font-size:35px !important;
color:#000 !important;
}
.footer {
z-index:2;
float:left;
background:#666;
margin-left:25px; /*only applies if floating left */
margin-right:25px;
margin-top:20px;
margin-bottom:20px;
padding:10px;
width:31%;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
-moz-box-shadow: 5px 5px 2px #000;
-webkit-box-shadow: 5px 5px 2px #000;
box-shadow: 5px 5px 2px #000;
opacity:0.7;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
}
</style>
<!--disables rightclick-->
<script language=JavaScript>
<!--
//Disable right mouse click Script
//By Maximus (maximus@nsimail.com) w/ mods by DynamicDrive
//For full source code, visit http://www.dynamicdrive.com
var message="Function Not Allowed -Larz Conwell";
///////////////////////////////////
function clickIE4(){
if (event.button==2){
alert(message);
return false;
}
}
function clickNS4(e){
if (document.layers||document.getElementById&&!document.all){
if (e.which==2||e.which==3){
alert(message);
return false;
}
}
}
if (document.layers){
document.captureEvents(Event.MOUSEDOWN);
document.onmousedown=clickNS4;
}
else if (document.all&&!document.getElementById){
document.onmousedown=clickIE4;
}
document.oncontextmenu=new Function("alert(message);return false")
// -->
</script>
<script>
$(document).ready(function() {
$('div').hide().fadeIn(3500);
$(".header").draggable();
});
$(document).ready(function() {
$(".menu").draggable();
});
$(document).ready(function() {
$(".content").draggable();
});
$(document).ready(function() {
$(".footer").draggable();
});
</script>
</head>
<body>
<!--header area: logo-->
<div class="header">
<p><img src="images/logo.png" width="437" height="158" alt="Larz Conwell" /></p>
<p><span class="dash">//</span>Web Designer & Graphic Artist</p>
</div>
<!-- menus-->
<div class="menu">
<p>Note right now the Portfolio portion of the website does not work and is in progress.</p>
<p class="menuname"> //Portfolio</p>
<p><span class="dash">//</span><a href="pages/photography.html">Photography</a> <span class="dash">//</span><a href="pages/photoshop.html">Photoshop Creations</a> <span class="dash">//</span><a href="pages/design.html">Designs</a></p>
</div>
<!--content-->
<div class="content">
<table width="100%" border="0">
<tr>
<td width="36%" valign="top"><img src="images/about.png" width="251" height="81" alt="About" /><br />
Hello I'm Larz Conwell and i reside in Georgia, I am a Freelance Web Designer and Graphic Artist. As of right now i am a senior in high school and i am working on getting better at Web Design as well as Graphic Design. If you would like a web site made or editing done please ask i would love to help, and since im only in high school, for now im doing anything for free. <br /></td>
<td width="23%" valign="top"><img src="images/contact.png" width="251" height="81" alt="Contact" />
<form id="form1" name="form1" action="/cgi-bin/cgiemail" method="post" enctype="application/x-www-form-urlencoded">
<table width="100%" border="0">
<tr>
<td height="32" align="right" valign="top">Name</td>
<td valign="top"><label for="name"></label>
<input name="name" type="text" id="name" /></td>
</tr>
<tr>
<td height="31" align="right" valign="top">E-mail</td>
<td valign="top"><label for="email"></label>
<input type="text" name="email" id="email" /></td>
</tr>
<tr>
<td height="30" align="right" valign="top">Comment</td>
<td valign="top"><label for="comment"></label>
<label for="comment"></label>
<textarea name="comment" id="comment" cols="21" rows="5"></textarea></td>
</tr>
<tr>
<td colspan="2" align="center" valign="top"><input type="submit" name="submit" id="submit" value="Contact Me" /> <input type="reset" name="reset" id="reset" value="Reset" /></td>
</tr>
</table>
</form></td>
<td width="41%" valign="top"><img src="images/qa.png" width="251" height="81" alt="Questions & Answers" /><br />
Q: Why should i pick you to make my website?<br />
A: I am able to make your website however you want and i have good design techniques so it will look great and also have great functionality at the same time.<br />
<br />
Q: Why would you make content for people for free?<br />
A: Mainly because im in high school and i dont have "proper" training, so i feel i should do it for free till i get out of college. Plus, who doesnt like free stuff? </td>
</tr>
<tr>
<td colspan="3" align="center"><span class="linkletter">F</span><a href="http://facebook.com/larz.conwell"><span class="links">acebook</span></a> <span class="linkletter">E</span><a href="mailto:larzconwell@gmail.com"><span class="links">-mail</span></a></td>
</tr>
</table>
</div>
<!--footer-->
<div class="footer"><span class="dash">//</span>©2011 All Rights Reserved Larz Conwell <a href="mailto:larzconwell@gmail.com">E-mail</a></div>
</body>
</html>
thank you in advance (:
On each of your div elements you have a percentage width set, which means that when the browser window is less than a certain width, then your divs will resize as well and the content of the divs will fall out. This can be resolved by replacing the percentage width with a pixel value, you could try this:
Correct:
Incorrect (results in browser resize issues):