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佈局問題。分辨率

回答

相關問題