CSS HTML瀏覽器大小更改放置

-1

當瀏覽器的大小發生變化時，如何停止頁面上的項目移動？CSS HTML瀏覽器大小更改放置

例如，隨着瀏覽器尺寸的減小以及「左」和「右」的移動，底部的菜單（Home/Music/Videos/Tour/Contact）表格和「LISTEN」按鈕。無論屏幕大小如何，我都希望所有這些位於背景圖片的固定位置。

<style type="text/css"> 

/* sets the format of the background image */ 
body { 
background-color: gray; 
background-image: url('images/backgroundpic.jpg'); 
background-repeat: no-repeat; 
background-attachment: fixed; 
background-position: center; 
margin: 0; 
bottom: 0; 
height: 100%; 
width: 100%; 
white-space: nowrap; 
} 

/* Main menu settings */ 
#centeredmenu { 
clear:both; 
float:left; 
margin:0; 
padding:0; 
width:100%; 
font-family:Verdana, Geneva, sans-serif; 
font-size:90%; 
z-index:1000; /* This makes the dropdown menus appear above the page content below */ 
position:relative; 
white-space: nowrap; 
} 

/* puts the bottom dropup menu on the bottom of the page and centered */ 
ul { 
list-style-type: none; 
list-style: none; 
position: fixed; 
bottom: 0; 
margin: 50px; 
padding: 0; 
clear: left; 
float: right; 
float: left; 
right:50%; 
text-align: center; 
white-space: nowrap; 
} 


/* makes it so that the hovered selections stay above the appropriate options */  
ul li{ 
display:block; 
float:left; 
list-style:none; 
margin:0; 
padding:0; 
position:relative; 
right:50%; 
left:50%; 
white-space: nowrap; 
} 


/* makes the bottom dropup menu vertical */ 
li { 
float: left; 
white-space: nowrap; 
} 


/* gives the bottom dropup menu shape, style, and form */ 
li a, .dropbtn { 
display: inline-block; 
color: white; 
text-align: center; 
padding: 14px 16px; 
text-decoration: none; 
white-space: nowrap; 
} 


li a:hover, .dropdown:hover .dropbtn { 
background-color: #87cefa; 
white-space: nowrap; 
} 


li.dropdown { 
display: inline-block; 
white-space: nowrap; 
} 

/* puts the content inside the hovered selections */ 
.dropdown-content { 
display: none; 
text-align: center; 
position: absolute; 
bottom: 30px; 
left: 0; 
background-color: #f9f9f9; 
min-width: 160px; 
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); 
white-space: nowrap; 
} 


/* content inside the hover selections */ 
.dropdown-content a { 
color: black; 
padding: 12px 16px; 
text-decoration: none; 
display: block; 
text-align: center; 
white-space: nowrap; 
} 


/* makes the selected content in the hover selections colored gray */ 
.dropdown-content a:hover {background-color: #f1f1f1} 
white-space: nowrap; 


/* makes the hovered selections possible */ 
.dropdown:hover .dropdown-content { 
display: block; 
white-space: nowrap; 
} 

/* gives the LISTEN button positioning, style, format, ect */ 
input#gobutton{ 
text-align: center; 
position: absolute; 
top: 50%; 
left: 34%; 
width: 400px; 
transform: translate(-50%, -50%) 
cursor:pointer; 
padding:5px 25px; 
background:#87CEFA; 
border:1px solid #1E90FF; 
-moz-border-radius: 10px; 
-webkit-border-radius: 10px; 
border-radius: 10px; 
-webkit-box-shadow: 0 0 4px rgba(0,0,0, .75); 
-moz-box-shadow: 0 0 4px rgba(0,0,0, .75); 
box-shadow: 0 0 4px rgba(0,0,0, .75); 
color:#f3f3f3; 
font-size:1.1em; 
white-space: nowrap; 
} 

/* gives the LISTEN button a hover option and style */ 
input#gobutton:hover, input#gobutton:focus{ 
background-color :#000080; 
-webkit-box-shadow: 0 0 1px rgba(0,0,0, .75); 
-moz-box-shadow: 0 0 1px rgba(0,0,0, .75); 
box-shadow: 0 0 1px rgba(0,0,0, .75); 
white-space: nowrap; 
} 

#LeftTable { 
position: absolute; 
width: 25%; 
min-width: 25%; 
right: 50px; 
left: 50px; 
top: 50px; 
height: 100px; 
border: 1px; 
color: black; 
font-weight: bold; 
background-color: white; 
opacity: 0.5; 
filter: alpha(opacity=50); 
border:1px solid black; 
padding:5px; 
white-space: nowrap; 
} 


#RightTable { 
text-align: center; 
position: absolute; 
width: 500px; 
min-width: 25%; 
right: 25%; 
left: 50%; 
top: 50%; 
bottom: 50%; 
height: 100px; 
border: 1px; 
color: black; 
font-weight: bold; 
background-color: white; 
opacity: 0.5; 
filter: alpha(opacity=50); 
border:1px solid black; 
padding:5px; 
margin: 0 auto; 
white-space: nowrap; 
} 

</style> 
</head> 
<body> 

<div style="width: 500px; margin: 0 auto; overflow: hidden;"> 
<div style="float: left; width: 80%;">Left Column</div> 
<div style="float: right; width: 20%;">Right Column</div> 
</div> 

<table id = "RightTable"> 
<tr> 
<td width = "20%"></td> 
<td width = "80%" > 
<table> 
<tr><td>Right</td></tr> 
<tr><td>Right</td></tr> 
</table> 
</td> 
</tr> 
</table> 


<table class="gobutton" align="center"> 
<tr> 
<td> 
<div class="b_left"></div> 
<div class="b_middle"> 
<a href="http://www.google.com.html"> 
<input id="gobutton" type="submit" value="LISTEN" /> 
</a> 
</div> 
<div class="b_right"></div> 
</div> 
</td> 
</tr> 
</table> 
</div> 

<div class="body"> 
<table id = "LeftTable"> 
<tr> 
<td width = "20%"></td> 
<td width = "80%" id='test'> 
<table> 
<tr><td>Left</td></tr> 
<tr><td>Left</td></tr> 
</table> 
</td> 
</tr> 
</table> 
</div> 

<div id="centeredmenu" nowrap> 
<ul> 
<li class="dropdown" align="center" nowrap> 
<a href="#" class="dropbtn" nowrap>Home</a> 
<div class="dropdown-content"> 
<a href="#">Home Page</a> 
</div> 

<li class="dropdown" align="center" nowrap> 
<a href="#" class="dropbtn" nowrap>Music</a> 
<div class="dropdown-content"> 
<a href="#">Song 1</a> 
<a href="#">Song 2</a> 
<a href="#">Song 3</a> 
</div> 

<li class="dropdown" align="center" nowrap> 
<a href="#" class="dropbtn" nowrap>Videos</a> 
<div class="dropdown-content"> 
<a href="#">Video 1</a> 
<a href="#">Video 2</a> 
<a href="#">Video 3</a> 
</div> 

<li class="dropdown" align="center" nowrap> 
<a href="#" class="dropbtn" nowrap>Tour</a> 
<div class="dropdown-content"> 
<a href="#">North America Dates</a> 
<a href="#">Europe Dates</a> 
<a href="#">Misc Dates</a> 
</div> 

<li class="dropdown" align="center" nowrap> 
<a href="#" class="dropbtn" nowrap>Contact</a> 
<div class="dropdown-content"> 
<a href="#">Comments</a> 
<a href="#">Technical Support</a> 
<a href="#">Booking</a> 
</div> 

<li class="dropdown" align="center" nowrap> 
<a href="#" class="dropbtn" nowrap>Contact</a> 
<div class="dropdown-content"> 
<a href="#">Comments</a> 
<a href="#">Technical Support</a> 
<a href="#">Booking</a> 
</div> 

</li> 
</ul> 
</div> 

</body> 
</html>

來源

2016-09-21 Krispy

因爲你擁有了一切設置爲100％，因此它與瀏覽器調整。爲了避免這種情況，請將容器放在大約990像素（如果想要放大的情況下爲1170像素）和邊距：0自動將容器放在頁面中央。 – Rob

請仔細閱讀[如何創建一個最小，完整和可驗證的示例]（http://stackoverflow.com/help/mcve），並將您的示例代碼縮減到只有相關部分 – henry

是否就像添加＃容器{border-width：990px; margin：0 auto;}？因爲我將它添加到我的CSS代碼中，但它仍未修復它。我還需要在HTML中做些什麼嗎？ – Krispy

它看起來像你正在尋找一種方式來有一個3列布局和一個左右列有固定寬度的頁腳。那是對的嗎？

如果是這樣，也許你可以使用CSS flexbox創建這種佈局。看看這個例子。

希望這可以幫助！

#body { 
 
    background-color:#af5; 
 
    padding:10px; 
 
    min-width:700px; 
 
} 
 
.container { 
 
    flex-direction:row; 
 
    flex-wrap:nowrap; 
 
    justify-content:center; 
 
    display:flex; 
 
} 
 
.column { 
 
    border:1px solid #333; 
 
    background-color:#dfdfdf; 
 
    min-height:300px; 
 
    padding:20px; 
 
} 
 
.left { 
 
    flex-basis:150px; 
 
} 
 
.center { 
 
    flex-basis:auto; 
 
} 
 
.right { 
 
    flex-basis:150px; 
 
} 
 
.bottom { 
 
    width:100%; 
 
    border:1px solid #333; 
 
    box-sizing:border-box; 
 
    background-color:#def; 
 
} 
 
.bottom ul li { 
 
    display:inline-block; 
 
    margin:0 20px; 
 
}

<div id="body"> 
 

 
<div class="container"> 
 
    <div class="left column"> 
 
    Left column has a fixed width. 
 
    </div> 
 
    <div class="center column"> 
 
    <h2>Center has no fixed width.</h2> 
 
    <p> 
 
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 
 
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
 
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 
 
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse 
 
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non 
 
proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
 
    </p> 
 
    </div> 
 
    <div class="right column"> 
 
    Right column has a fixed width too. 
 
    </div> 
 
</div> 
 
<div class="bottom"> 
 
    <ul> 
 
    <li>Menu elem 1</li> 
 
    <li>Menu elem 2</li> 
 
    <li>Menu elem 3</li> 
 
    </ul> 
 
</div> 
 
</div>

來源

2016-09-21 18:11:23

是的！謝謝！ – Krispy

CSS HTML瀏覽器大小更改放置

回答

相關問題