div layout problems. resolution
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){
do开发者_StackOverflowcument.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:
- width:360px;
Incorrect (results in browser resize issues):
- width:30%;
Every designer face this problems, I would suggest you to make 2 css files, one for resoulution 800X1024 and another for wide, and write a code to detect the resolution and output the required CSS, try this out and see
I am not sure but try this script
<script type="text/javascript">
function getcss(cssfile){
loadcss = document.createElement('link')
loadcss.setAttribute("rel", "stylesheet")
loadcss.setAttribute("type", "text/css")
loadcss.setAttribute("href", cssfile)
document.getElementsByTagName("head")[0].appendChild(loadcss)
}
if(screen.width <= '800')
// Defines the resolution range you're targeting (less than 800 pixels wide in this case)
{
getcss('800x600.css')
// Defines the .css file you want to load for this range (800x600.css)
}
else if(screen.width > '800' && screen.width < '1280')
// This time we're targeting all resolutions between 800 and 1280 pixels wide
{
getcss('1024x768.css')
//And we want to load the .css file named "1024x768.css"
}
else if(screen.width > '1024' && screen.width < '1600')
//Targeting screen resolutions between 1024 and 1600px wide
{
getcss('1280x1024.css')
//Load 1280x1024.css
}
else
{
getcss('1280x1024.css')
//This else statement has "if" condition. If none of the following criteria are met, load 1280x1024.css
}
</script>
加载中,请稍侯......
精彩评论