Graphics To Resize With Window

[Caitlin-havener]

I changed it to Strict and corrected errors. Check to see if it is working now. If it is not, I'm thinking it has to be the server!

[Caitlin-havener]

I changed it to Strict and corrected errors. Check to see if it is working now. If it is not, I'm thinking it has to be the server!

I just checked it in Safari, and it looks RETARDED! Why is the browser screwing up my layout?

[Ingolme]

I just checked it in Safari, and it looks RETARDED! Why is the browser screwing up my layout?

It uses a different rendering engine. Google Chrome uses the same rendering engine as Safari. You might want to start fixing up your site if you want your site to look good for all your viewers.I usually discourage layouts based on absolute positioning because it's very difficult to get it to look correctly on all systems.

[thescientist]

the point is now that you have switched DTD and corrected errors, the things you change to make it look good now will appear more consistently in all (most other) browsers. Switching DTD's often highlights just these kind of issues, but it's more apt to show just how important having a strict DTD is. Start with that when you code, and you will have more consistent results in the future.

[thescientist]

and Ingolme brings up a good point about positioning, which is why I was trying to suggest more of a nested div approach with percentages to make things a bit more flexible when browser window size's change.

[Caitlin-havener]

and Ingolme brings up a good point about positioning, which is why I was trying to suggest more of a nested div approach with percentages to make things a bit more flexible when browser window size's change.

Thanks guys, I still do need to know how to do those hovers and be able to activate my animation.

[thescientist]

css hover

[Caitlin-havener]

css hover

I've looked at that. It doesn't tell me how to reference my animation when hovering over the link.

[thescientist]

I've looked at that. It doesn't tell me how to reference my animation when hovering over the link.

what do you mean? are you using animated gif's?

[Caitlin-havener]

what do you mean? are you using animated gif's?

Yes when you hover over the link it goes from a regular image to an animated gif. chavener.com Should load now

[thescientist]

Yes when you hover over the link it goes from a regular image to an animated gif. chavener.com Should load now

it loads, but it's still using JS. What did you try for code with the psuedo-class?

[Caitlin-havener]

it loads, but it's still using JS. What did you try for code with the psuedo-class?

I seriously do not understand how to make a hover reference another object. For example, there is the link "portfolio." I want to hover over it and activate the fish animation.a:hover:{whatttt}

[thescientist]

so for your portfolio for instance, this is what you might wantcreate a class and assign it a background image when you use it as a link

.portfolio_imageRollover_container a{background-image: url(image_off.gif);}

then, create a hover state, which will change the background of that div on hover

.portfolio_imageRollover_container a:hover{background-image: url(image_on.gif);}

then your HTML would look like this (nested within the general #portfolio div)

<div class="protfolio_imageRollover_container"><a href="#"></a></div>

written on the fly, but should get you going in the right direction. Maybe a little confusing because you'll probably be using nested divs to achieve the flexibility you want, but google can help you out too.

[Caitlin-havener]

so for your portfolio for instance, this is what you might wantcreate a class and assign it a background image when you use it as a link

.portfolio_imageRollover_container a{background-image: url(image_off.gif);}

then, create a hover state, which will change the background of that div on hover

.portfolio_imageRollover_container a:hover{background-image: url(image_on.gif);}

then your HTML would look like this (nested within the general #portfolio div)

<div class="protfolio_imageRollover_container"><a href="#"></a></div>

written on the fly, but should get you going in the right direction. Maybe a little confusing because you'll probably be using nested divs to achieve the flexibility you want, but google can help you out too.

Because I want the animation to turn on above "portfolio" when you hover over the word "portfolio" how is that going to work? It is just tiling the image and the animation behind the the word "portfolio" not putting it above it.

[thescientist]

well im sure by now you can figure this out. The background image wont repeat (look up background images to make it stop), so content could go on another line below it... thus you would have your text below the image, and hover over portfolio would make it change the background-image.