i'm new to css and i'm trying to figure out a way to incorporate a legend tag as an header for my page
currently my master page is styled by a field set :
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-alig开发者_运维技巧n:right;
}
<fieldset class="field_set_main" >
<legend class="header">
buy for you
</legend>
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</fieldset>
The legend caption appears with its own background color "white" , if i set it to black only the caption text itself "buy for you" get's black , it appears as a white box in the right of my border, Ii'm looking for a css style for the legend to appear as an header for the page ( with the same background color as the fieldset's background color , a different forecolor for the text ).
Is there a footer element in the fieldset , i want a caption to appear at the bottom of the page as well.
- Any good sources for useful css styles ? especially for master pages styled with a main fieldset ?
It sounds like you're trying to use fieldset
as a container for your entire page, and legend
as a page header. This is a misuse of the semantics of those two elements.
If you need elements to wrap the page for styling, I highly recommend you change your markup and CSS to:
.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>
The legend
field is notoriously hard to style consistently and completely, so I'd avoid its use unless it's semantically vital, which in your case it sounds like that's definitely not the case.
精彩评论