All geek questions in one place

Float works as an inline style, but not when I move it to an external style sheet

So, I was messing around with asp.net, and I seem to be stuck in a CSS issue. When I float the div to the right, it works as expected. However, when I move this style to an external stylesheet, it doesn't work at all.

I understand that inline styles have a higher priority and something may interfere, but I can't figure that out.

Here is my page

<%@ 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>

And here is the stylesheet

  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; }

When I use it in an external stylesheet, this is the code

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

and my css sheet has this added

 .test { float:right; }

Question: So why does a style work when I put it in a string, but it does not work when I move this exact piece of code to an external stylesheet?

+4
source share
2 answers

Inline styles are applied last. Use Firebug or Developer Tools to find out if your style redefines your appearance (your style is crossed out),

To replace even inline styles, use !important override :

 .test { float: right !important; }
+1
source

Looking at the layout of your code, you have an interesting nesting that can be selected for the loop.

So you have this:

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

And you say you switch it to this when you transfer it to an external stylesheet:

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

So you have a header div with a div nested inside it with the inside of that nested div. Then you close this nested one and add your bit of random text "Stephen Granets Site!" and then you close the header div.

What if we take this approach:

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

This gives you the ability to set something like this for 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%; }

Is that clear to you? Are you trying to keep the title bar and label next to each other? This is what I assumed when I wrote this.

0
source

Source: https://habr.com/ru/post/1403129/

More articles:


All Articles