Hi,
I am trying to achieve with CSS what I typically used to do in Dreamweaver with HTML: inserting an image (jpg and gif) and also image rollovers. Can you please post a external code css example of how I can insert an image in Div Layers that are created in Dreamweaver, but controlled with CSS.
The example basically should say where to call the file from, something like:
.div.image {url(images/logo.gif)}
and it should also say the positioning, where do I want the image to be positioned:
top: 0px;
left: 0px;
width: 33px;
height: 33px;
For the rollover images in addition to the url call and the positioning, I also want the following states:
.div.image:link
.div.image:active
.div.image:visited
.div.image:hover
If the link, active, visited and hover works with text, I'm guessing it ought to work with images too.
I don't even know if the images should be in Div layers, but that's what Dreamweaver gives me. If it's possible I wouldn't even put them in any layers and just have them floating and positioned with the top, left, width and height.
Thanks.
-jmsHere's some CSS image rollover code.However, since I'm more in the beginning stages it might take me a while to comprehend it. I also noticed that you used .png files. with the live, rollover, and visited images together. At first I thought that you had them in layers and CSS calls for the different layer (?), but now I see that 1,2, and 3 are vertically stacked and all saved in one png file. How does the css code know exactly what part of the png file is top, center and bottom?
background-position:left top;
background-position:left center;
background-position:left bottom;
blagodaria ...I guess you know what that means by now: I saw the pics from BG. And just by coincidence I am working on a site about BG and I was born in BG too.
-jmsI'm confused, what question are you asking me now?Well,
Each of the PNG files had the Normal state, Hover and Visited images stacked vertically; all states were in ONE PNG file, not separate files.
Up till now when I used JPG and GIF images for navigation I always had 3 files: one -- the Normal state, second -- the Roll Over state and third -- the Visited state. It surprised me that I saw all 3 states in ONE file, stacked vertically, while the shown image on the html file is only one of the states at a time. Photoshop can mask images, but I didn't know CSS has the code to do that as well.
What does CSS do to show the specific part of the image: top, middle, bottom?
Let's say you have an image file 25 X 25 pix. How does CSS know what is the top, middle and bottom part of that image?Well, you put the code in your last post:background-position:left top;
background-position:left center;
background-position:left bottom;Say that each of the states is 25x25, in total the image will be 25x75. But, if we specify dimentions for the link as 25x25 then it is only possible to see 25x25 of the background image. Therefore, just by moving the background image it is possible to show all of the states.
I am trying to achieve with CSS what I typically used to do in Dreamweaver with HTML: inserting an image (jpg and gif) and also image rollovers. Can you please post a external code css example of how I can insert an image in Div Layers that are created in Dreamweaver, but controlled with CSS.
The example basically should say where to call the file from, something like:
.div.image {url(images/logo.gif)}
and it should also say the positioning, where do I want the image to be positioned:
top: 0px;
left: 0px;
width: 33px;
height: 33px;
For the rollover images in addition to the url call and the positioning, I also want the following states:
.div.image:link
.div.image:active
.div.image:visited
.div.image:hover
If the link, active, visited and hover works with text, I'm guessing it ought to work with images too.
I don't even know if the images should be in Div layers, but that's what Dreamweaver gives me. If it's possible I wouldn't even put them in any layers and just have them floating and positioned with the top, left, width and height.
Thanks.
-jmsHere's some CSS image rollover code.However, since I'm more in the beginning stages it might take me a while to comprehend it. I also noticed that you used .png files. with the live, rollover, and visited images together. At first I thought that you had them in layers and CSS calls for the different layer (?), but now I see that 1,2, and 3 are vertically stacked and all saved in one png file. How does the css code know exactly what part of the png file is top, center and bottom?
background-position:left top;
background-position:left center;
background-position:left bottom;
blagodaria ...I guess you know what that means by now: I saw the pics from BG. And just by coincidence I am working on a site about BG and I was born in BG too.
-jmsI'm confused, what question are you asking me now?Well,
Each of the PNG files had the Normal state, Hover and Visited images stacked vertically; all states were in ONE PNG file, not separate files.
Up till now when I used JPG and GIF images for navigation I always had 3 files: one -- the Normal state, second -- the Roll Over state and third -- the Visited state. It surprised me that I saw all 3 states in ONE file, stacked vertically, while the shown image on the html file is only one of the states at a time. Photoshop can mask images, but I didn't know CSS has the code to do that as well.
What does CSS do to show the specific part of the image: top, middle, bottom?
Let's say you have an image file 25 X 25 pix. How does CSS know what is the top, middle and bottom part of that image?Well, you put the code in your last post:background-position:left top;
background-position:left center;
background-position:left bottom;Say that each of the states is 25x25, in total the image will be 25x75. But, if we specify dimentions for the link as 25x25 then it is only possible to see 25x25 of the background image. Therefore, just by moving the background image it is possible to show all of the states.