October 28th, 2003, 07:51 AM
positioning question for CSS
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,
Last edited by billybonds; October 28th, 2003 at 11:13 AM.
October 28th, 2003, 07:56 AM
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....
October 28th, 2003, 08:50 AM
Remember this: Margins point inwards (internal) and padding points outwards (external).
October 28th, 2003, 09:21 AM
it's ok - i've got it by creating a different class for the gifs with different margin settings....
i like css!
October 28th, 2003, 09:37 AM
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.
Last edited by billybonds; October 28th, 2003 at 11:14 AM.
October 28th, 2003, 09:42 AM
margin: 0px 15px 15px 15px;
margin: 0px 15px 0px 15px;
<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">
October 28th, 2003, 10:27 AM
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)
October 28th, 2003, 10:48 AM
October 28th, 2003, 10:48 AM
Dreamweaver is really crap. Write virtually any custom code and it will ignore it. Example:
It will throw a fit because they are not in perfect order.
October 28th, 2003, 11:12 AM
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
October 28th, 2003, 05:25 PM
The reason it throws a fit is because in order to be XHTML compliant your tags should be nested correctly.
PostgreSQL, it's what's for dinner...
October 29th, 2003, 06:09 PM
True, but a verified page will still run with no problems what so ever, whereas dreamweaver will ignore the tags.