div布局问题。分辨率

好的，我对每个页面都有这个问题。即时通讯不知道我做错了什么，但我的所有网页都不适用于每个决议。可能是因为我使用宽屏？大声笑im不知道，但它从来没有看过小于宽屏的决议。部分你不能看到，所以你必须滚动到一边或在这种情况下，内容比div延伸更远。一个例子是larzconwell.com div布局问题。分辨率

所以继承了代码。如果你能帮我解决这个问题，我将不胜感激。

<!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 ([email protected]) 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> &nbsp;&nbsp;<span class="dash">//</span><a href="pages/photoshop.html">Photoshop Creations</a> &nbsp;&nbsp;<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 &amp; 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 &quot;proper&quot; 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> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="linkletter">E</span><a href="mailto:[email protected]"><span class="links">-mail</span></a></td> 
    </tr> 
</table> 
</div> 
<!--footer--> 
<div class="footer"><span class="dash">//</span>&copy;2011 All Rights Reserved Larz Conwell &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="mailto:[email protected]">E-mail</a></div> 
</body> 
</html>

预先感谢您（：

来源

2011-03-06 user645607

它对我来说很好 – 2011-03-06 04:23:52

宽屏？你可以张贴截图吗？大声笑 – user645607 2011-03-06 04:34:48

在您的每个div元素上都设置了百分比宽度，这意味着当浏览器窗口小于某个宽度时，您的div也会调整大小，并且div的内容将会消失。这可以通过像素值替换百分比宽度来解决，你可以试试这个： 正确：

宽度：360像素;

不正确的（导致浏览器调整大小的问题）：

宽度：30％;

来源

2011-03-06 04:40:01

你确定会工作吗？我通常使用px调整大小，它不适用于我，但我会尝试谢谢你 – user645607 2011-03-06 04:43:10

它会工作！如果它没有出现这个问题，我很乐意为你解决它。很高兴能有一些帮助！ – 2011-03-06 04:46:02

对齐到左边会是一个很好的px大小？对于所有决议我的意思是大声笑360听起来很大。 – user645607 2011-03-06 04:47:04

每个设计师面对这样的问题，我会建议你做2个CSS文件，一个用于resoulution 800X1024，另一个用于宽，并写代码来检测分辨率和输出所需的CSS，尝试了这一点，看看

我不知道，但尝试这个脚本

<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>

来源

2011-03-06 04:24:04

AHH听起来像个好主意。谢谢谢谢谢谢 – user645607 2011-03-06 04:32:09

我很抱歉，但这不是解决问题的非常有效的方法。您只需将div的宽度设置为像素值而不是百分比值即可解决问题。 – 2011-03-06 04:42:15

div布局问题。分辨率

回答

相关问题