Фоновое изображение .NET / CSS не пройдет через нижнюю часть окна браузера. - PullRequest
Новая
       0

Фоновое изображение .NET / CSS не пройдет через нижнюю часть окна браузера.

0 голосов
/ 03 февраля 2012

Я достаточно опытен в программировании на .NET, обычно на C #, хотя элементы управления, которые я использую для этого проекта, VB. Обычно я работаю с программирующими надежными приложениями, но, конечно, когда я делаю простой сайт для друга, это когда я не могу понять проблему.

Я использую главную страницу VB для сайта. Предполагается, что div «wood» - это фоновое изображение, которое динамически повторяется по мере продвижения вниз страницы, но по какой-то причине оно достигает высоты окна браузера. Background-repeat: repeat-y, похоже, ничего не делает, поэтому я чувствую, что проблема связана с CSS. Вот главная страница: 

<%@ Master Language="VB" CodeFile="Normal.master.vb" Inherits="Normal" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>D&M Official Site</title>
<link runat="server" rel="stylesheet" type="text/css" href="Styles/Main.css" />
</head>
<body onload="MM_preloadImages('images/swaps/swap1.jpg','images/swaps/swap2.jpg','images/swaps/swap3.jpg')">
    <div id="wood" >
        <div id="mediaButtons">

        </div>
            <div id="wrapper">
                <div id="logo"><asp:Image Height="200" runat="server" ImageUrl="~/images/logo.png" /></div>
                <div id="menu"><img src="images/menu.jpg" width="560" height="373" border="0" usemap="#Map" id="Image1" />
                  <map name="Map" id="Map">
                    <area shape="poly" coords="43,266,49,296,59,279,68,290,83,294,87,295,95,297,97,298,95,299,99,298,103,299,105,297,114,320,131,343,143,358,141,368,152,369,152,356,157,360,156,355,158,354,159,354,160,354,163,351,167,350,189,365,195,353,173,333,168,315,161,290,157,271,152,247,147,240,159,206,162,193,161,157,161,139,150,110,130,100,117,91,118,84,126,75,129,52,122,39,108,37,92,49,91,61,94,71,94,93,76,103,62,116,53,134,42,188,48,255" href="Default.aspx" onmouseover="MM_swapImage('Image1','','images/swaps/swap1.jpg',1)" onmouseout="MM_swapImgRestore()" />
                    <area shape="poly" coords="223,24,244,37,252,48,245,62,239,72,247,83,261,100,270,108,273,158,273,203,271,232,259,241,254,278,252,308,259,330,268,344,255,351,241,360,229,367,217,366,207,349,198,310,197,249,181,243,172,210,169,179,170,158,171,141,182,112,190,96,201,94,211,83,205,59,208,36" href="tourdates.aspx" onmouseover="MM_swapImage('Image1','','images/swaps/swap2.jpg',1)" onmouseout="MM_swapImgRestore()" />
                    <area shape="poly" coords="309,35,328,38,338,51,335,66,329,77,329,90,355,100,364,133,368,154,357,207,353,223,349,255,341,295,338,332,335,343,340,360,334,369,324,352,317,337,301,333,286,343,273,351,272,341,284,330,283,311,285,289,285,241,281,209,277,179,275,143,275,112,296,103,303,91,303,75,297,65,299,46" href="media.aspx" onmouseover="MM_swapImage('Image1','','images/swaps/swap3.jpg',1)" onmouseout="MM_swapImgRestore()" />
                  </map>
                </div>
            </div>
            <div id="Main">
                <div style=" left:10px; position:relative; top:10px;">
                    <form id="MainForm" style="position:relative" runat="server">
                        <asp:contentplaceholder id="ContentPlaceHolder" runat="server"></asp:contentplaceholder>
                    </form>
                </div>
            </div>
   </div>
</body>
</html>

Here's the CSS:

html 
{
    height: 100%;
}
body 
{
    margin: 0;
    padding: 0;
    height: 100%;
    background-image: url(../Images/wallpaper.jpg);
}

#mediaButtons
{
    position:relative;
    text-align:center;
    z-index:101;
    padding-bottom:0;
    margin-bottom:0;
}

#Main
{
    position:relative; 
    background-color:#ffe4b5; 
    top:430px;
    left:20px;
    width:640px;
    height:100%;
}

#wood
{
    margin: 0;
    padding: 0;
    height:100%;
    background-repeat:repeat-y;
    background-image:url(../Images/wood.jpg); 
    z-index:1; 
    text-align: left; 
    width:695px; 
    margin-right:auto; 
    margin-left:auto;
    background-position:center;
}

#wrapper 
{
    margin-top:0;
    top:-20px;
    text-align: left;
    width: 695px;
    margin-right: auto;
    margin-left: auto;
    position: relative;
}

#logo 
{
    position:absolute;
    left:-69px;
    top:-27px;
    width:200px;
    height:200px;
    z-index:100;
}
#menu 
{
    position:absolute;
    left:62px;
    top:35px;
    width:560px;
    height:373px;
    z-index:2;
}

У меня недостаточно навыков CSS, поэтому извините, если это глупая проблема: (

1 Ответ

0 голосов
/ 03 февраля 2012

Возможно, из-за того, что у вас есть 

<%@ Master Language="VB" CodeFile="Normal.master.vb" Inherits="Normal" %>

перед вашим DOCTYPE, в результате чего браузер отображает страницу в режиме причуд.

...