background color ..when using "divs"..time to help

Discussion in 'Web Design and Development' started by pelsar, Nov 6, 2008.

  1. pelsar macrumors regular

    Joined:
    Apr 29, 2008
    Location:
    israel
    #1
    ok you div gurus...time to help out a newbie.....my first "div" site is now in the process and it seems putting in a background color via dreamweaver isnt what it used to be:

    so whats the code?....and "be gentle"....no short cuts i need it from the beginning the } to the ending one....}

    the color is: #999FA3

    this is part of my css style sheet...

    }

    div.index-01_ {
    position:absolute;
    left:0px;
    top:0px;
    width:25px;
    height:576px;
    }
     
  2. davethewave macrumors member

    Joined:
    Jul 30, 2007
    Location:
    Trieste, Italy
    #2
    Code:
    div.index-01_ {
        position:absolute;
        left:0px;
        top:0px;
        width:25px;
        height:576px;
        background-color:  #999FA3;
    }
    
    happy coding!
    bye DV
     
  3. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #3
    Actually it would start from the CSS selector and the {, not the } ;)

    Code:
    div.index-01_ {
    [B]background-color: #999FA3;[/B]
    position:absolute;
    left:0px;
    top:0px;
    width:25px;
    height:576px;
    }
    or
    Code:
    div.index-01_ {
    [B]background: #999FA3;[/B]
    position:absolute;
    left:0px;
    top:0px;
    width:25px;
    height:576px;
    }
     
  4. pelsar thread starter macrumors regular

    Joined:
    Apr 29, 2008
    Location:
    israel
    #4
    I'm getting smarter..

    but that will do the background only for that particular style sheet...i need a background for the complete page...the area outside of the webpage.....where there is no style sheet

    .....the "old system was this:

    body {
    background-color: #999FA3;
    }

    and dreamweaver has a rather nasty note: No CSS properties apply to current selection......
     
  5. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #5
    A stylesheet is either the contents of the style tag or a .css file. Each part of it is just a CSS selector and its properties. So, when you say "but that will do the background only for that particular style sheet" you really mean, "but that will do the background only for that particular CSS selector." You weren't specific enough in the original post for us to realize what you were wanting to do. Having,
    Code:
    body {
    background-color: #999FA3;
    }
    should be enough for applying the color to the page, but other CSS could be overriding it in other parts of the stylesheet. So, if it's not working, we're going to need to see more code (both HTML and CSS), and possibly a link if you have one so we an view this.
     
  6. pelsar thread starter macrumors regular

    Joined:
    Apr 29, 2008
    Location:
    israel
    #6
    div background trouble...the site

    there is no outside stylesheet....so its all online


    heres the site:
    http://www.vistaspinner.com/cmsdemo/
     
  7. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #7
    In the HTML code there is this line,
    HTML:
    <body style="background-color:#FFFFFF;">
    and is the cause of the problem. It's overriding the style you added. You can edit this by hand and remove the style part so you're left with,
    HTML:
    <body>
    but Dreamweaver may add it back later, but is certainly worth a try. I don't have Dreamweaver installed these ways so can't check specifics.
     
  8. pelsar thread starter macrumors regular

    Joined:
    Apr 29, 2008
    Location:
    israel
    #8
    that was it...thanks...

    that was causing the problem...thanks....i can see I"m going to be spending some very long nights as i debug my first sites......
     
  9. SrWebDeveloper macrumors 68000

    SrWebDeveloper

    Joined:
    Dec 7, 2007
    Location:
    Alexandria, VA, USA
    #9
    Using the body as a selector and assigning the background color is perfectly valid in CSS and DW. Matter of fact, DW creates a body selector by default. Also, DW by default does CSS inline, so to link a stylesheet, first create one in DW (file -> new -> CSS Style Sheets) and save, then in your HTML document in DW click on the Design panel -> CSS Styles tab -> click on the tiny icon on the lower right of that tab area "Attach Style Sheet". Now you can use design view and the CSS Styles Tab for highlighting content and applying styles, creating new styles that end up in the style sheet, a complete WYSIWYG tool. Plus, you can edit the styles directly in the tab area if desired. Yes, it is a bit clunky compared to other competing products, I agree completely. I'm just addressing how DW works in this manner.

    On a side note, attaching a style sheet is the same in DW as you editing the source and adding into the head section:

    Code:
    <link href="/test.css" rel="stylesheet" type="text/css" />
    DW just automates that for you with the proper filename in path, but that's all it really does.

    Now, as an informal suggestion I always like to start all new pages with a master wrapper DIV, meaning one div that might set the page size, serves as the hightest level container, show the default background color, etc. This is also helpful when doing alignment within child div's when working with relative and absolute positioning. This is just the way I like to do it, then I start adding div's inside for my layout for each content area. You can just as easily apply styles to the body selector, but if you start coding complex layouts the master wrapper (container) div is a great tool.

    My .02 and I know everyone does it their own way.

    -jim
     
  10. pelsar thread starter macrumors regular

    Joined:
    Apr 29, 2008
    Location:
    israel
    #10
    the informal suggestion...the wrap

    i like your .02....only now i'm going to need some help in implementing it. My learning process involves going through photoshop/dreamweaver/css stylesheets...meaning since i have to make a living i use the tools i know and slowly adapt and expand. .....my plan is design in photoshop, output as div, classes etc, moving into dreamweaver where i'll then modify.

    with my first attempt: http://www.vistaspinner.com/ftp1/learning/container.html

    i have discovered that photoshop does not out put with such a wrapper (or it does as table01 and i dont know how to use it, move them all as a single unit...can i get some help here?
     
  11. SrWebDeveloper macrumors 68000

    SrWebDeveloper

    Joined:
    Dec 7, 2007
    Location:
    Alexandria, VA, USA
    #11
    The wrapper is a simple device developers learned to implement to simplify alignment and layout issues after discovering (the hard way) that it works differently than tables and cells.

    Just like a good artist learns when to use the best brush, how to mix colors without waste and minimize a mess - it's the same with div layouts, you pick it up and after awhile and start doing. As we discuss often here on MacRumors, the learning curve is small, the effort worthwhile because the site is easily scalable due to separation and content from style, and in the end it means alot less coding and work.

    Nothing wrong at all using Adobe to slice up images and export a div, but the wrapper part - that you're learning from your peers, and of course to benefit from it you will need to do a little coding by hand. Adding in that div manually in the HTML source, of course. For the record I was not talking about adding wrappers around an image simply because it is sliced, my wrapper div comment was about the master div for total page layout.

    I tried your link above, it is a password protected page.

    Here is a classic situation where a wrapper div helps with aligning text on the bottom of a div (same as <td valign="bottom"> in tabular layout) - try it in your browser:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Example</title>
    
    <style>
    div {margin: 2px}
    div#content {width: 100px; height: 100px; vertical-align: bottom; border: 1px solid red}
    div#content2_wrapper {position: relative; width: 100px; height: 100px; border: 1px solid green;}
    div#content2 {position: absolute; bottom: 0;}
    </style>
    
    </head>
    
    Behold, two 100x100 boxes each with some text, the first is a BAD use of div/css to bottom align some text, the second works:
    
    <div id='content'>This text is supposed to be aligned on the bottom! Is it?</div>
    
    <div id='content2_wrapper'>
        <div id='content2'>Look! This actually is on the bottom!</div>
    </div>
    
    <body>
    </body>
    </html>
    Notes: I added a 2px margin for all div's to make the display more readable. Of course there are other ways to do this, and everyone has their own way of creating the CSS, but as you can see in the code for the green box, a wrapper div with relative positioning then a child div with absolute positioning along with bottom set to 0 means perfect bottom alignment. The red box seems like it should work - i.e. vertical-align: bottom - but alas that command is for something else. Just one of the tricks you learn.

    -jim
     

Share This Page