Grow your CSS skills. Land your dream job.

RESOLVED – Thanks!! apDivs that were working

  • # March 23, 2009 at 2:22 pm

    UPDATE : Since I "put" the Messed up version – whatever did this is now doing it to the whole previously posted site – I overwrote something I shouldn’t have – Help!!?*@

    I designed using apDivs to give me some flexibility and I plan to get rid of most of them once the design is settled down.

    In the meantime, something I’ve done has got them where they won’t stay in their place when the browser window gets wider than the outer wrapper.

    I’m going nuts trying to see the difference between the pages that were working fine and the messed up version which was the result of trying to place some nested divs into the layout, so I could replace the apDivs.

    Now, all the original files on my local drive, from before I started trying to nest the Divs on just one of the files, are all behaving like this.

    Take a look if you think you can help…

    Before:
    [url="http://www.kdpools.net/new/Rectangle.html"http://www.kdpools.net/new/Rectangle.html/url

    After:
    [url="http://www.kdpools.net/new/RectangleMessedUp.html"http://www.kdpools.net/new/RectangleMessedUp.html/url

    Sure do appreciate any advice.

    Thanks,
    Susan

    # March 23, 2009 at 2:40 pm

    I am not a fan of your code:

    but using firebug I worked you css to this:

    Code:
    #wrapper #CommonArea { background: #FFFFFF; height: 4px; }
    #apDiv14 { position:absolute; left:191px; top:366px; width:464px; height:92px; z-index:1; }
    #apDiv15 { position:absolute; left:18px; top:441px; width:279px; height:23px; z-index:1; }
    #apDiv17 { position:absolute; left:299px; top:188px; width:595px; height:163px; z-index:1; }
    #apDiv18 { position:absolute; left:798px; top:356px; width:14px; height:346px; z-index:1; background: #0C4FC4; }
    #apDiv5 {
    position:absolute; left:148px; top:360px; width:186px; height:112px; z-index:1;
    }
    #apDivNav {position:relative; display:block; margin-left:100px;}
    #apDiv1 { position:absolute; left:5px; top:356px; width:188px; height:346px; z-index:1; background: #0C4FC4; }

    I guess that is how you roughly want it to look, I don’t know for sure….

    I would re-write the code, I am not an absolute fan of absolute positioning

    EDIT: tested on 1024×768 monitor

    # March 23, 2009 at 2:45 pm

    Make #NavArea position: relative and move #apDiv17 inside it.

    At the moment #apDiv17 is positioned absolutely, relative to the page body.

    Quote:
    I would re-write the code, I am not an absolute fan of absolute positioning

    :lol: Me neither. Guess I’m more of a float kinda guy.

    # March 23, 2009 at 3:10 pm
    "apostrophe" wrote:
    Make #NavArea position: relative and move #apDiv17 inside it.

    At the moment #apDiv17 is positioned absolutely, relative to the page body.

    Quote:
    I would re-write the code, I am not an absolute fan of absolute positioning

    :lol: Me neither. Guess I’m more of a float kinda guy.

    whatever floats your boat :shock:

    sorry ….. bad joke

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".