Jump to content
Sign in to follow this  
Caitlin-havener

Graphics To Resize With Window

Recommended Posts

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!

Share this post


Link to post
Share on other sites
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?

Share this post


Link to post
Share on other sites
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. Edited by Ingolme

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites
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?

Share this post


Link to post
Share on other sites
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

Share this post


Link to post
Share on other sites
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?

Share this post


Link to post
Share on other sites
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}

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

×
×
  • Create New...