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

    Join Date
    Aug 2003
    Location
    UK
    Posts
    89
    Rep Power
    12

    positioning question for CSS


    hi

    I'm new to CSS (although very happy to have become aquainted....) and i'm a bit stuck.

    I have 4 images floating on the RHS of my page roughly following this tutorial . I want to use them as roll-over buttons and have a gif attached above each image naming the link.

    I'm not really sure how to do this taking into consideration magins, etc.

    I did consider for an east solution combining the original gif image and the JPEG image into one file but then the overall look is sub standard when compressed....

    any help would be great,

    thanks,

    jim
    Last edited by billybonds; October 28th, 2003 at 11:13 AM.
  2. #2
  3. No Profile Picture
    No. 4
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2003
    Location
    UK
    Posts
    89
    Rep Power
    12
    not sure if that 2nd paragraph is clear....

    at the moment there are only the JPEG images floating on the RHS of the page. I want to have the appropriate gif attached to the appropriate JPEG as a label but with the margins set to 15px to space out the images I'm not sure how to do this....
  4. #3
  5. No Profile Picture
    Super Moderator
    Devshed Specialist (4000 - 4499 posts)

    Join Date
    Jul 2003
    Posts
    4,009
    Rep Power
    2791
    Remember this: Margins point inwards (internal) and padding points outwards (external).

    padding:15px;
  6. #4
  7. No Profile Picture
    No. 4
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2003
    Location
    UK
    Posts
    89
    Rep Power
    12
    it's ok - i've got it by creating a different class for the gifs with different margin settings....

    i like css!
  8. #5
  9. No Profile Picture
    No. 4
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2003
    Location
    UK
    Posts
    89
    Rep Power
    12
    oops..... i spoke too soon!

    2 things :-

    1) I want to use the images as rollover buttons. However in DW I am only able to select the top image - all the rest in design view are as if they are not there.

    2) When I preview in IE (haven't checked any others yet) by pressing F12 all looks as it should until I go to a different and come back. When I come back all images are lined up horizontally along the top.

    Any ideas?

    Thanks,

    Jim
    Last edited by billybonds; October 28th, 2003 at 11:14 AM.
  10. #6
  11. No Profile Picture
    No. 4
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2003
    Location
    UK
    Posts
    89
    Rep Power
    12
    My code:

    .floatright {
    float: right;
    margin: 0px 15px 15px 15px;
    clear: right;
    }

    .floatright-b {
    float: right;
    margin: 0px 15px 0px 15px;
    clear: right;
    }

    <img class="floatright-b" src="images/mission.gif" width="110" height="25"><img class="floatright" src="images/our_mission_image_off.jpg"><img class="floatright-b" src="images/about.gif"><img class="floatright" src="images/about_us_image_off.jpg"><img class="floatright-b" src="images/help.gif"><img class="floatright" src="images/help_us_image_off.jpg"><img class="floatright-b" src="images/volunteer.gif"><img class="floatright" src="images/volunteer_image_off.jpg">
  12. #7
  13. No Profile Picture
    No. 4
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2003
    Location
    UK
    Posts
    89
    Rep Power
    12
    ok (....if anybody's listening.... sniff...) I've added dimensions to all Gifs and JPEGS and now they seem to be holding their position in the web page.

    Also now only the second image down is only invisible to DW.... (although the bottom image only picks up about halfway down)
  14. #8
  15. No Profile Picture
    No. 4
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2003
    Location
    UK
    Posts
    89
    Rep Power
    12
    ok it's all working now
  16. #9
  17. No Profile Picture
    Super Moderator
    Devshed Specialist (4000 - 4499 posts)

    Join Date
    Jul 2003
    Posts
    4,009
    Rep Power
    2791
    Dreamweaver is really crap. Write virtually any custom code and it will ignore it. Example:

    <b><i>Text</b></i>

    It will throw a fit because they are not in perfect order.
  18. #10
  19. No Profile Picture
    No. 4
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2003
    Location
    UK
    Posts
    89
    Rep Power
    12
    i'm beginning to see that..... thing is about 10 weeks ago i didn't know my HTML from my a*se and I don't really have the confidence to 'go it alone'

    having said that it HAS been a massive help in getting me as far as i am

    cheers,

    jim
  20. #11
  21. Me likey breadsticks...
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Jan 2003
    Location
    Los Angeles
    Posts
    1,189
    Rep Power
    18
    Originally posted by PHP-Newb
    Dreamweaver is really crap. Write virtually any custom code and it will ignore it. Example:

    <b><i>Text</b></i>

    It will throw a fit because they are not in perfect order.
    The reason it throws a fit is because in order to be XHTML compliant your tags should be nested correctly.

    -b
    PostgreSQL, it's what's for dinner...
  22. #12
  23. No Profile Picture
    Super Moderator
    Devshed Specialist (4000 - 4499 posts)

    Join Date
    Jul 2003
    Posts
    4,009
    Rep Power
    2791
    True, but a verified page will still run with no problems what so ever, whereas dreamweaver will ignore the tags.

IMN logo majestic logo threadwatch logo seochat tools logo