float работает как встроенный стиль, но не когда я перемещаю его во внешнюю таблицу стилей - PullRequest
Новая
       35

float работает как встроенный стиль, но не когда я перемещаю его во внешнюю таблицу стилей

4 голосов
/ 23 марта 2012

Так что я возился с asp.net и, похоже, застрял в проблеме CSS. Когда я плаваю div прямо в строке, он работает как ожидалось. Однако когда я перемещаю этот стиль во внешнюю таблицу стилей, он вообще не работает.
Я понимаю, что встроенные стили имеют более высокий приоритет и что-то может мешать, но я не могу понять, что.

Вот моя страница 

        <%@ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="MasterPage" %>

    <!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 runat="server">
        <title></title>
        <asp:ContentPlaceHolder id="head" runat="server">
        </asp:ContentPlaceHolder>
        <link href="StyleSheet.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
        <form id="form1" runat="server">
        <div>

***********************the div below that has style="float:right"****************
            <div class="Header"><div style="float:right"><asp:Label ID="lblMasterMessage" runat="server" /></div>Stephen Granets Site!</div>
********************************************************************************

            <div class="ColumnLeft" >
                //stuff
            </div>
                <div class="SiteMap">
                    <asp:SiteMapPath ID="SiteMapPath1" runat="server">
                        <CurrentNodeStyle Font-Bold="True" />
                        <NodeStyle CssClass="ContentLink" Font-Bold="True" />
                        <RootNodeStyle CssClass="ContentLink" Font-Bold="True" />
                    </asp:SiteMapPath>
                </div>
            <div class="ColumnCenter">
                <asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">

                </asp:ContentPlaceHolder>
            </div>
        </div>
        <asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server" />
        </form>
    </body>
    </html>

А вот таблица стилей 

    body {
    }
    .Header
    {
        background-color: #6699FF;
        font-family: Verdana;
        font-size: xx-large;
        font-weight: bold;
        color: #FFFFFF;
        padding: 40px 0px 0px 10px;
        width: 100%;
    }
    .ColumnLeft
    {
        padding: 7px;
        background-color: #6699FF;
        float: left;
    }

    a
    {
        color: #000000;
        text-decoration: none;
    }
    a:visited
    {
        color: #000000;
        text-decoration: none;
    }
    a:link
    {
        color: #000000;
        text-decoration: none;
    }
    a:hover
    {
        color: #FFFFFF;
        text-decoration: underline;
    }
    .underline
    {
        text-decoration: underline;
    }
    .ColumnCenter
    {
        margin: 7px 7px 7px 175px;
    }
    a:hover.ContentLink
    {
        color: #000000;
        text-decoration: underline;
    }
    .SiteMap
    {
        font-size: large;
        background-color: #DFEAFF;
    }

Когда я использую его во внешней таблице стилей, именно этот код 

 <div class="test">asp label</div>

и на моем листе CSS есть это 

.test
{
   float:right;
}

Вопрос: Так почему же стиль работает, когда я помещаю его в строку, но не работает, когда я перемещаю этот точный фрагмент кода во внешнюю таблицу стилей?

Ответы [ 2 ]

1 голос
/ 23 марта 2012

Встроенные стили применяются последними.Используйте Firebug или Инструменты разработчика, чтобы увидеть, переопределяет ли другой стиль «ближе» ваш, когда вы делаете его внешним (ваш стиль будет перечеркнут).

Чтобы заменить даже встроенные стили, используйте !important override : 

.test {
    float: right !important;
}
0 голосов
/ 23 марта 2012

Взглянув на макет вашего кода, у вас происходит интересное вложение, которое может создавать некоторые вещи для цикла.

Итак, у вас есть следующее: 

<div class="Header"><div style="float:right"><asp:Label ID="lblMasterMessage" runat="server" /></div>Stephen Granets Site!</div>

И вы говорите, что переключаете его на это, когда берете его во внешнюю таблицу стилей: 

<div class="test">asp label</div>

Таким образом, у вас есть Div заголовка с вложенным div внутри него с внутренней частью этого вложенного div.Затем вы закрываете вложенное и добавляете случайный текст "Сайт Стивена Гранетса!"и затем вы закрываете заголовок div.

Что если мы воспользуемся этим подходом: 

<div class="headerWrapper"><div class="Header">Stephen Granets Site!</div><div class="label"><asp:Label ID="lblMasterMessage" runat="server" /></div></div>

Это даст вам возможность установить что-то подобное для CSS: 

.headerWrapper{
background-color: #6699FF;
font-family: Verdana;
font-size: xx-large;
font-weight: bold;
color: #FFFFFF;
padding: 40px 0px 0px 10px;
width: 100%;
margin:0 auto; /* this should center align your containing div */
}

.Header{
font-size:large;
float:left;
width:50%;
}

.label{
float:right; /* If you have your paddings and margins set correctly you could just float this to the left as well */

width:50%;
}

Это проясняет что-нибудь для вас?Вы пытаетесь сложить заголовок div и метку рядом друг с другом?Это то, что я предположил, когда написал это.

...