0

我一直在研究,但我不确定如何寻找我想要的东西。我在我的第一学期 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 */

我真的很感谢你的帮助:)

布拉德...这是页面的代码...

<body background="beach.jpg">
<div style="text-align: center;">
    <img src="Oahu banner.jpg" width="995" height="295">


    <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" width="513" height="386" alt="Waterfall" />
</div>
</body>
4

2 回答 2

0

您需要background-repeat: no-repeat因为默认情况下背景图像垂直和水平重复。

对于您问题的第二部分,听起来您想要background-position: center。这将使图像垂直和水平居中,在图像周围留出空间。或者,您可以将背景颜色设置为您想要的任何颜色。

CSS

background: url("http://placehold.it/300x18") no-repeat center (whatever color you want);

JSFiddle

于 2013-03-11T00:57:51.253 回答
0

你也可以试试这个,它将整个页面定位在中心,与屏幕大小无关

*{ 边距:1px 自动;

}

于 2013-03-11T05:22:15.153 回答