locked
Style only applying to some areas, not others RRS feed

  • Question

  • As a rookie, I'm really struggling with the positioning attributes for different areas; "position: relative" and such just does not make sense to me yet.

    But on to my specific problem, I have in my layout.css a page_content, banner, and column_l (among others). The idea is that banner and column_l fall within page_content. But the style I apply to page_content appears only in the banner region, not the column_l. Below is the code:

    Layout.css

    -------------

    #page_content {

    clear: both;
    }
    #banner {

    clear: both;
    }
    #column_l {

    float: left;
    }

    -----------

    Style.css

    -----------

    #page_content {
    background-color: #ffffff;
    border-
    }
    #banner {
    margin: 0;
    padding: 0;
    background-color: #113962;
    font-family: Arial, Helvetica, sans-serif;
    font-size: xx-large;
    font-weight: bolder;
    text-indent: 45px;
    color: #FE9B00;
    text-transform: capitalize;
    line-height: 50px;
    }
    #column_l {
    width: 580px;
    margin: 0;
    padding: 0 15px;


    }

    --------

    DWT

    --------

    <!-- Begin Page Content -->
    <div id="page_content">
    <!-- Begin Banner -->
    <div id="banner">
    <!-- #BeginEditable "banner" -->
    <p>Banner</p>
    <!-- #EndEditable -->
    </div>
    <!-- End Banner -->
    <!-- Begin Left Column -->
    <div id="column_l">
    <!-- #BeginEditable "content" -->
    <h2>Headline 2</h2>
    <p>insert content here</p>
    <!-- #EndEditable -->
    </div>
    <!-- End Left Column -->
    </div>
    <!-- End Page Content -->

    Do I have anything wrong in the code? The background-color, and border-left does not appear in the column_l area

    PLEASE HELP!!!

    Wednesday, July 11, 2012 12:54 AM

Answers

  • The columns are children of page_contents.  But as I said, page_contents doesn't know anything about them.  It has no idea how big they are, so when it is sizing itself, it doesn't include them.  Thus the need to get them included in the space with a clear:both element that leaves room for them.

    Think of them as invisible occupants of the page_contents' room. They are in the room, but page_contents doesn't see them and won't set the table for them.  You can tell they are there because another occupant can't stand in the same location - the other occupants will wrap around the floated ones.  But to get the room large enough, the other occupants have to leave room for them in the middle, and push out the walls of the room themselves - that "clear:both" element.

    • Marked as answer by fstrydom Thursday, July 12, 2012 2:20 PM
    Thursday, July 12, 2012 3:39 AM
  • Your issue has nothing to do with inheritance.  Only the #page_contents has been told to have the white background color.  When the floated columns are inside page_contents, they'll be on its white background.

    Your issue is that you don't know how to get the page_contents to be sized to include floated contents.  Right now it's only including what you see with the white background.

    When you float something, it is positioned according the floats, then removed from the document flow.  The page_contents has no idea those columns are inside it.  It ends where the last non-floated thing ends.  Put something *not* floated below those columns in the document, but still inside page_contents.  Give that element a style of "clear:both" so it drops below both floated columns. 

    <p style="clear:both">&nbsp;</p> will do it.

    Since it's not floated, page_contents will know it's there and drop to include it.  Since it's "clear:both", it will be below the floated columns above it, and page-contents will thus include them as well.



    • Edited by KathyW2 Wednesday, July 11, 2012 9:04 PM
    • Marked as answer by fstrydom Thursday, July 12, 2012 2:20 PM
    Wednesday, July 11, 2012 9:02 PM

All replies

  • OK - I figured the problem is with "float: left". If i remove it, then the style is applied. Problem is I also omitted above (because I thought it irrelevant) that I have a column_r to the right of column_l. If I remove the float: left than column_l takes up the entire width of the container even though in the style sheet I have the width set.

    Like I said - I'm just not getting how the relative position of an object is figured out

    Wednesday, July 11, 2012 1:05 AM
  • In the code you posted, the page content has a white background and an invalid border definition. The banner has a different background color defined, while the left column doesn't. By that code, only the banner would have a colored background, and nothing would have any border. I realize that could be a typo, but that is how it reads. Your best bet is to publish your test page and post a link so we can view the styles and html in context.

    Aside from that, avoid messing with positioning and learn how floats work (use the learning resources listed in the "Read me first" thread). You will have much less trouble with your layout that way.

    Jim


    'Tis the business of little minds to shrink; but he whose heart is firm, and whose conscience approves his conduct, will pursue his principles unto death. Thomas Paine

    Wednesday, July 11, 2012 1:40 AM
  • LOL - somehow the border code did not copy/paste. Basically just "border-left: 5px solid #b7b7b7". 

    I realize I have it so that banner background overrides the white background. But I'm looking for the column_l element to have a white background.

    Lemme go read and see how I can publish a test page....

    Wednesday, July 11, 2012 1:49 AM
  • Using absolute positioning without a very good understasnding of how CSS works is a recipe for disaster. It is likely that you will end up with a site that is broken in at least one browser and will not display in a way that visitors can easily use it. This is because screen resolutions are different on each machine, some browsers scale based on OS settings while others don't. For example if you mix pixels for page layout and points for text and the person is using large fonts in their OS (think high resolution laptops and the iPad) your text will overlap. Same thing with people who use larger fonts because they have less than perfect vision.

    You need to step back and get a grounding in HTML & CSS. This is a prerequisite for using Expression Web. There are some excellent training resources in the Learning Resources section of the FAQ. From the FAQ:

    Are you new to Microsoft Expression Web?
    This article (http://support.microsoft.com/default.aspx?scid=kb;en-US;2511858) outlines the prerequisites for using Expression Web effectively, along with a list of useful resources you can use to get up to speed on modern Web design. The bottom line is that you do need to have some knowledge of Web design before you’ll be comfortable or effective using Microsoft Expression Web.

    While this tutorial was created using Expression Web 2 the principles and basics are the same as in EW 4 with just some minor interface changes such as all site related functions having been moved to the Site menu. Rather logical if you think about it. :)


    Free Expression Web Tutorials
    For an Expression Web forum with without the posting issues try expressionwebforum.com

    Wednesday, July 11, 2012 2:34 PM
  • I think my question got asked the wrong way by talking about position I was not talking about the position property, but merely about positioning in general. I have sinse done a LOT of reading about the various properties that can affect the layout of the page. I have removed ALL "position:" properties from my code and have done various other cleanup. But my problem still exists and through all the reading I did and samples I looked at my problem still exists. 

    My problem specifically is with "float: left/right". If I set the "float" property the style properties from the parent is not replicated for the children. My question specifically is when will the float property prevent child areas from not inheriting the style values from the parent?

    Wednesday, July 11, 2012 6:09 PM
  • My problem specifically is with "float: left/right". If I set the "float" property the style properties from the parent is not replicated for the children. My question specifically is when will the float property prevent child areas from not inheriting the style values from the parent?

    ???

    Your question makes no sense. First of all, the float property has NO effect on inheritability of other properties. None.

    Second, not all properties are inheritable, and you may be expecting a child element to inherit such a property. You have been markedly unclear about what you want/expect to see versus what you are actually seeing. And you still have not published a link to the actual page in question.

    We need to see the actual page's source markup, images, CSS, etc., in situ, to try to help solve your problem, and for you to be able to point to specific elements. In display/appearance issues, both page source order and CSS source order and specificity are key to how things are applied, and we cannot discern these things without the WHOLE picture. Capisc'?

    POST. A. LINK!

    cheers,
    scott


    Please remember to "Mark as Answer" the responses that resolved your issue. It is common courtesy to recognize those who have helped you, and it also makes it easier for visitors to find the resolution later.

    Wednesday, July 11, 2012 7:05 PM
  • OK, OK, I'm getting there!

    http://www.s2s.xoomsite.com/about/default.html

    This page shows it best.

    The "banner" region with the text "ABOUT US..." inherits the background color from #page_contents

    But the left and right columns ("About Summit2Sea" and "contract vehicles") do not inherit the white background

    When I remove the float:left property from the left column it does inherit the background but it also spans the entire container even though I have the width set

    PLEASE HELP!

    Wednesday, July 11, 2012 7:47 PM
  • Your issue has nothing to do with inheritance.  Only the #page_contents has been told to have the white background color.  When the floated columns are inside page_contents, they'll be on its white background.

    Your issue is that you don't know how to get the page_contents to be sized to include floated contents.  Right now it's only including what you see with the white background.

    When you float something, it is positioned according the floats, then removed from the document flow.  The page_contents has no idea those columns are inside it.  It ends where the last non-floated thing ends.  Put something *not* floated below those columns in the document, but still inside page_contents.  Give that element a style of "clear:both" so it drops below both floated columns. 

    <p style="clear:both">&nbsp;</p> will do it.

    Since it's not floated, page_contents will know it's there and drop to include it.  Since it's "clear:both", it will be below the floated columns above it, and page-contents will thus include them as well.



    • Edited by KathyW2 Wednesday, July 11, 2012 9:04 PM
    • Marked as answer by fstrydom Thursday, July 12, 2012 2:20 PM
    Wednesday, July 11, 2012 9:02 PM
  • Thanks Kathy, your explanation is just what I needed!

    I will give it a try in a bit. 

    One follow up question though for clarification: In EW if I open the DWT code and click anywhere within one of the floating columns, and then look at the applied rules panel, it shows the column as a child to page_content, who in turn is a child to container and then body. This led me to believe that the columns where correctly included in page_content. To be fair background_color property the page_content was crossed out with a warning "the property background_color" is not inherited but may show within child elements that don't set this property.

    Also, I would be interested to know what the experts think of my approach to the layout. I realize there are many ways to skin a cat, but I'm looking for the purist solution to ensure that any future updates to content or layout would be as dynamic as possible

    Thanks Again!

    Thursday, July 12, 2012 1:34 AM
  • Background properties are not inherited, period. However, background properties that are not specified are by default blank (image), or transparent (color), so any element without a specified value will be, in effect, transparent, and show whatever is specified for their container's background properties.

    The Apply Styles panel has nothing to do with containership (structure), but only with presentation. The page's HTML source code is where you need to look to determine structure, and you need to understand the consequences on page flow of floating elements within a container.

    Also, I would be interested to know what the experts think of my approach to the layout. I realize there are many ways to skin a cat, but I'm looking for the purist solution to ensure that any future updates to content or layout would be as dynamic as possible

    Your approach? That looks like a standard two-column-with-header-and-footer template. I don't see anything out of the ordinary about it, and have no idea what you mean by "... the purist solution to ensure that any future updates to content or layout would be as dynamic as possible." Purist? Dynamic?

    cheers,
    scott


    Please remember to "Mark as Answer" the responses that resolved your issue. It is common courtesy to recognize those who have helped you, and it also makes it easier for visitors to find the resolution later.

    Thursday, July 12, 2012 3:33 AM
  • The columns are children of page_contents.  But as I said, page_contents doesn't know anything about them.  It has no idea how big they are, so when it is sizing itself, it doesn't include them.  Thus the need to get them included in the space with a clear:both element that leaves room for them.

    Think of them as invisible occupants of the page_contents' room. They are in the room, but page_contents doesn't see them and won't set the table for them.  You can tell they are there because another occupant can't stand in the same location - the other occupants will wrap around the floated ones.  But to get the room large enough, the other occupants have to leave room for them in the middle, and push out the walls of the room themselves - that "clear:both" element.

    • Marked as answer by fstrydom Thursday, July 12, 2012 2:20 PM
    Thursday, July 12, 2012 3:39 AM
  • Thanks Kathy

    Your explanation makes perfect sense!

    Thursday, July 12, 2012 2:22 PM