css style fieldset - PullRequest
Новая
       21

css style fieldset

0 голосов
/ 01 октября 2011

Я новичок в CSS и пытаюсь найти способ включить тег легенды в качестве заголовок для моей страницы

В настоящее время моя главная страница оформляется набором полей: 

 fieldset.field_set_main
 {
     border-bottom-width:50px;
     border-top-width:100px;
     border-left-width:30px;
     border-right-width:30px;       
     margin:auto;    
     width:1300px;
     height:700px;
     padding:0px 0px 0px 0px;
     border-color:Black;    
     border-style:outset;  
     display:table;
}

legend.header
{          
     text-align:right;
}

<fieldset class="field_set_main" >
    <legend class="header">
        buy for you 
    </legend>                              
    <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
    </asp:ContentPlaceHolder>                                                                                  
</fieldset>

  1. Заголовок легенды появляется с собственным фоновым цветом "белый", если я установил его на черный только сам текст заголовка «купить для вас» становится черным, он отображается в виде белого прямоугольника справа от моей границы, я ищу стиль CSS, чтобы легенда отображалась в качестве заголовка страницы (с тем же цветом фона, что и цвет фона набора полей, другой цвет текста для текста).

  2. Есть ли элемент нижнего колонтитула в наборе полей, я хочу, чтобы заголовок также отображался внизу страницы.

  3. Есть ли хорошие источники полезных стилей CSS? специально для главных страниц, стилизованных под основной набор полей?

1 Ответ

3 голосов
/ 01 октября 2011

Похоже, вы пытаетесь использовать fieldset в качестве контейнера для всей вашей страницы и legend в качестве заголовка страницы.Это неправильное использование семантики этих двух элементов.

Если вам нужны элементы для переноса страницы для стилизации, я настоятельно рекомендую изменить разметку и CSS на: 

 .field_set_main {
     border: 30px solid black;
     border-bottom-width:50px;
     border-top-width:100px;
     margin:auto;    
     width:1300px;
     height:700px;
     padding: 0;
     display:table;
}

.header
{          
     text-align:right;
}

<div class="field_set_main" >
    <h1 class="header">
        buy for you 
    </h1>                              
    <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
    </asp:ContentPlaceHolder>                                                                                  
</div>

.Общеизвестно, что поле legend сложно стилизовать последовательно и полностью, поэтому я бы избегал его использования, если только оно не является семантически важным, что в вашем случае выглядит так, как будто это совсем не так.

...