#1
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2003
    Posts
    50
    Rep Power
    11

    Question interaction prob. b/w div items using css


    Hi there,

    I am building a site using CSS :

    http://www.kohlrdesigns.com/inform/

    I am getting a bad interaction between two div items and I don't know how to fix it. When the site is first viewed it is fine. However, once the submenu is opened under products, the entire black background moves down with it. I have tried setting the background to absolute, but then I was getting a scroll bar at the bottom. So it is currently set to relative. However I can see that it is interacting with the nav bar in some way. I have tried moving the <div class="black></div> to different areas in the html but this only seems to mess up things. So I'm at a dead end in trying to figure out how to fix it even though I can see the problem.

    The black background is created using the following code:

    DIV.black{
    position:relative;
    top: -228;
    height:100%;
    left:148;
    width:100%;
    background-color: #000000;

    }

    I'm hoping somebody might be able to tell me how I can stop this interaction. I hope I have included enough info. I even read the "how to post for newbies" section please let me know if there is more info needed to give me some suggestions!

    Thanks so much!!!
    Jill
  2. #2
  3. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2003
    Location
    Rhondda Cynon Taff, Wales
    Posts
    172
    Rep Power
    12
    no problem, use absolute instead of relative in your css( this requires positioning). relative is relative to an object, it can move but, absolute cant.
    Ryan Jones (RyanJ)
  4. #3
  5. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2003
    Posts
    50
    Rep Power
    11
    thanks for the suggestion of changing it to absolute. Unfortunately when I do that, I then get a scroll bar across the bottom of the screen even though width is set at 100% and shouldn't be causing a scroll bar.....so not sure how to fix that if I change it to absolute...
    Thanks,
    Jill
  6. #4
  7. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2003
    Location
    Rhondda Cynon Taff, Wales
    Posts
    172
    Rep Power
    12
    the scroll bar should behave normally eventhough absolute positioning was used? i dont know why that would happen?
    Ryan Jones (RyanJ)
  8. #5
  9. Senior Member
    Devshed Intermediate (1500 - 1999 posts)

    Join Date
    Aug 2003
    Location
    Toronto
    Posts
    1,614
    Rep Power
    14
    Ok guys,, give me some good reasons why I should use css for page layout as against tables, which is rigid, but predictable across the board.

    No flame wars.. just solid reasons.
    webM

    for $i(0..20){for($j=0;$j<=$i;$j+=2){print pack(qq{H2},
    substr(qq{5f5745424d415354415f},$j,2));}print qq{\n};};
  10. #6
  11. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2003
    Location
    Rhondda Cynon Taff, Wales
    Posts
    172
    Rep Power
    12
    ?????? what doo you mean????
    Ryan Jones (RyanJ)
  12. #7
  13. Retired
    Devshed Supreme Being (6500+ posts)

    Join Date
    Feb 2002
    Location
    Finland
    Posts
    9,143
    Rep Power
    2493
    That was an interesting comment webmasta though maybe off topic slightly.

    I am interested to see the response. I have been trying to do layouts with CSS instead of tables, and it drives me nuts.

    Browsers handle styles (divs for example) for differently. At least with tables, you know what you are getting

    BTW, I write XHTML 1.0 complaint html

    Jamie

    Cheers,
    Jamie

    >_ skiFFie ? | Twitter

    __________________

    Let the might of your compassion arise to bring a quick end
    to the flowing stream of the blood and tears .....
    Please hear my anguished words of truth.

    __________________
  14. #8
  15. Senior Member
    Devshed Intermediate (1500 - 1999 posts)

    Join Date
    Aug 2003
    Location
    Toronto
    Posts
    1,614
    Rep Power
    14
    Youre right.. off topic .. Ill start a new thread and lets see what happens

    Here it is.
    http://forums.devshed.com/t87293/s24...b116ac92e.html
    Last edited by webmasta; September 28th, 2003 at 03:33 PM.
    webM

    for $i(0..20){for($j=0;$j<=$i;$j+=2){print pack(qq{H2},
    substr(qq{5f5745424d415354415f},$j,2));}print qq{\n};};
  16. #9
  17. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2003
    Posts
    50
    Rep Power
    11
    I understand that the absolute should work, but it isn't. Any other ideas? I have included my .css if that might help.

    Pleeeeeaaaaassssee Its making me crazy!
    Attached Files
  18. #10
  19. Thanks Johnny Hart (BC) R.I.P.

    Join Date
    May 2003
    Location
    Dallas
    Posts
    5,268
    Rep Power
    1956
    There are several opportunities for improvement.

    Relative positioning holds open the vacated space, which can cause surprises. What is "top: -228;" Do you want the div moved up 228 px? in? mm? ems? %? The same applies to "left: 148;" Since height and width are set to 100%, the held open space means that more than 100% of each is rendered, thus scroll bars.

    I can't seem to get the site (404), so am unable to see how it's applied. But likely, as a previous poster has suggested, absolute positioning should be used.

    cheers,

    gary
    There are those who manage to build a web site without knowing what they're doing; thereby proving to themselves they do, indeed, know what they're doing.

    My html and css workshop, demos and tutorials.
    Ask a better question, get a better answer.
  20. #11
  21. No Profile Picture
    Super Moderator
    Devshed Specialist (4000 - 4499 posts)

    Join Date
    Jul 2003
    Posts
    4,009
    Rep Power
    2791
    Yes, use absolute with your code, but you will need to re-position the div.

    DIV.black{
    position:relative;
    top: -228;
    height:100%;
    left:148;
    width:100%;
    background-color: #000000;

    }
  22. #12
  23. No Profile Picture
    Super Moderator
    Devshed Specialist (4000 - 4499 posts)

    Join Date
    Jul 2003
    Posts
    4,009
    Rep Power
    2791
    P.S. kk5st can you please, please add this to your sig:

    ----------
    cheers,

    gary
    ----------

    It drives me up the wall seeing that you have typed it in each time :P
  24. #13
  25. Thanks Johnny Hart (BC) R.I.P.

    Join Date
    May 2003
    Location
    Dallas
    Posts
    5,268
    Rep Power
    1956
    Originally posted by PHP-Newb
    P.S. kk5st can you please, please add this to your sig:

    ----------
    cheers,

    gary
    ----------

    It drives me up the wall seeing that you have typed it in each time :P

    Well, sometimes I sign differently. But, the real reason is that I don't know I'm through with my post 'til I type it.

    thwwwp

    gary
    There are those who manage to build a web site without knowing what they're doing; thereby proving to themselves they do, indeed, know what they're doing.

    My html and css workshop, demos and tutorials.
    Ask a better question, get a better answer.

IMN logo majestic logo threadwatch logo seochat tools logo