2013-03-18 111 views
1

我現在掙扎了好幾天,而且我找到了一個似乎沒有用的解決方案。1000寬度以下的水平滾動

無論如何,我想要做的是當有人拖動窗口小於1000 px的寬度'鎖定'屏幕。我的意思是,必須出現一個水平滾動條,並且背景圖像必須停止調整大小,並且文本停止轉移。背景必須在達到1000像素以下時才能水平滾動以及文字。

希望能有人能幫助我,想對現在看兩天:■

<!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> 
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" /> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 

<title>Hup</title> 


<style type="text/css"> 
html{ 

    background: url(jup.png) no-repeat center center fixed; 
    min-width:500px; 
    max-height: 500px; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size:auto 580px; 
    background-position: center 120px; 
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='jup.png',  sizingMethod='scale'); 
    -ms-filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='jup.png', sizingMethod='scale'); 
} 

#menu { 
    position:absolute; 
    margin-top:80px; 
    margin-left:20px; 
    position:absolute; 
right:20px; 
} 
.menu_container { 
    width:500px; 
    overflow:hidden; 
    position:absolute; 
    display:none; 
    height:100px; 
} 
#bottom { 
    position:absolute; 
    margin-top:720px; 
    position:absolute; 
    left:20px; 
    white-space: nowrap; 
} 
.bottom_container { 
    width:500px; 
    overflow:hidden; 
    position:absolute; 
    display:none; 
    height:100px; 

} 
body,td,th { 
    font-family: Arial, Helvetica, sans-serif; 
    font-size: 12px; 
    color: #000000; 

} 
body { 
    min-width:1024px; 
    background-color: #000; 
    margin-left: 0px; 
    margin-top: 0px; 
    margin-right: 0px; 
    margin-bottom: 0px; 
} 
</style> 
</head> 

<body> 

<div id="menu"> 
<div class="container"> 
Text here 
</div> 

</div> 
<div id="bottom"> 
<div class="container"> 
Text here 
</div> 

</div> 

</body> 
</html> 
+1

你的HTML MIN-和最大寬度與已設置寬度衝突html標籤。嘗試刪除這些設置。 – Jost 2013-03-18 20:16:29

+0

很難看到HTML標籤的樣式,因爲您擁有它。我會將其更改爲body {}並從下面添加Adam的解決方案。 – isherwood 2013-03-18 20:16:47

+0

如果我只保留html標籤中的最小寬度,或者只保留在body標籤中,背景仍然不會滑動,文字會,但背景不會... – 2013-03-18 20:43:51

回答

2

簡單:

body { min-width: 1000px; } 
+0

我在我的身體中現在標記...即使我刪除了html標記中的最小寬度,但背景仍然不會沿着..:s – 2013-03-18 20:44:37

+0

將您的背景圖像放在您的身體上(在您的CSS中),而不是您的標記。請記住,您正在設置身體的最小寬度,而不是標記的最小寬度。 – Adam 2013-03-18 21:39:35