背景和菜单栏在宽屏上变得不成比例......我不想要这个
Posted
技术标签:
【中文标题】背景和菜单栏在宽屏上变得不成比例......我不想要这个【英文标题】：Background and menubar gets disproportioned on wider screen... I do not want this 【发布时间】：2013-03-11 00:28:55 【问题描述】：我一直在研究，但我不确定如何寻找我想要的东西。我在我的第一学期 html 和 CSS。我的页面在我的 15 1/2 英寸显示器上看起来很棒……但是当我将它移动到我的 19 1/2 显示器时，它会将背景图像的另一部分添加到右侧，并将菜单栏延伸到整个距离。我在寻找什么代码可以使页面在更宽的屏幕上保持完整，也许在每一侧添加彩色（或空白）边框？感谢您的帮助。
感谢 Brad 和 Fiddle 提供的帮助。不重复有助于背景，但是，在更大的显示器上，我的菜单栏想要清晰地穿过，而 .box 和 img.posit 想要坚持到最左侧。我宁愿它们根据背景图像保持测量。
样式表：
body font-family:Arial, Verdana, Garamond;
background-image: beach.jpg; background-repeat: no-repeat; background-position: center;
a text-decoration: none;
color: #FF4D10; font-size: 14pt;
a:hover background-color: white;
.menu position:center;
text-align: center;
width: 100%; margin: 0; text-decoration: none;
.menuword width: 10%; background-color: beach.jpg; font-weight: 500; text-decoration: none;
.menuwordselect width: 10%; font-weight: bolder; font-style: italic; text-decoration: none;
.menupipe width: 0%; font-weight: bolder;
.box width: 400px; margin-left: 25px; margin-top: 100px; border-radius: 7px; background-color: #ffff9c; padding: 10px; color: #303032;
/* set styles for class named box to position the image */
img.posit position: relative; left: 550px; top: -435px
/* sets styles for class named posit to position the image */
非常感谢您的帮助:)
Brad...这是页面的代码...
<body background="beach.jpg">
<div style="text-align: center;">
<img src="Oahu banner.jpg" >
<table class="menu">
<tr>
<td class="menuword"><a href="sitemap.html">Waikiki</a></td>
<td class="menupipe">|</td>
<td class="menuword"><a href="script.html">North Shore</a></td>
<td class="menupipe">|</td>
<td class="menuword"><a href="cast.html">Cultural and Historical</a></td>
<td class="menupipe">|</td>
<td class="menuword"><a href="costumes.html">Best Deal Ever</a></td>
<td class="menupipe">|</td>
<td class="menuword"><a href="set.html">More Info</a></td>
<td class="menupipe">|</td>
<td class="menuword"><a href="props.html">Site Map</a></td>
</tr>
</table>
</div>
<div>
<p class="box">Oahu known as "The Gathering Place", is the third largest of the Hawaiian Islands and home to more than 950,000 people, almost 75% of the U.S. state of Hawaii's population. The state capital, Honolulu, is on Oahu's southeast coast. In the greatest dimension, this volcanic island is 44 miles (71 km) long and 30 miles (48 km) across. The length of the shoreline is 227 miles (365 km). The island is the result of two separate shield volcanoes: Wai'anae and Ko'olau, with a broad "valley" or saddle, the Oahu Plain between them. The highest point is Mt. Ka'ala in the Wai'anae Range, rising to 4,003 feet (1,220 m) above sea level.
<br><br>
But there is more to Oahu than just height and width. Honolulu, the state's capital, not only displays an impressive skyline of highrises, but also the beautiful beach of Waikiki, where Duke Kahanamoku "the father of surfing" developed his surfing and swimming skills.
<br><br>Across the pineapple fields at the middle of the island, the North Shore is home to modern day world renown surfing competitions, prolific fruit plantations and a quiet, rural lifestyle for many residents.
<br><br>The cultural heritage of the native peoples is richly preserved in many world class museums, libraries and attractions. Pearl Harbor as an important piece of our American history is a must see stop for all visitors.
<br><br>There is something for everyone on this beautiful tropical island. Come vist and Hang Loose in Oahu!</p>
<img class="posit" src="waterfallbig.jpg" />
</div>
</body>
【问题讨论】：
发布您的代码。否则，很难帮助你。此外，显示器的物理尺寸与此无关......像素尺寸很重要。您可能希望在 CSS 中使用background-repeat: no-repeat。
谢谢布拉德，这是我的代码
你能编辑你的帖子并将代码放在那里吗？
【参考方案1】：
您需要background-repeat: no-repeat，因为默认情况下背景图像会垂直和水平重复。
对于您问题的第二部分，听起来您想要background-position: center。这将使图像垂直和水平居中，在图像周围留出空间。或者，您可以将background-color 设置为您想要的任何值。
CSS
background: url("http://placehold.it/300x18") no-repeat center (whatever color you want);
JSFiddle
【讨论】：
谢谢！我会试一试:)【参考方案2】：你也可以试试这个，它将整个页面定位在中心，与屏幕大小无关
* 边距：1px 自动；
【讨论】：
以上是关于背景和菜单栏在宽屏上变得不成比例......我不想要这个的主要内容，如果未能解决你的问题，请参考以下文章