nav gif position

[moodesign]

How do i get the hover arrow gif to line up just OUTSIDE the flush right margin of the list items? Right now it’s causing the items to indent left on hover.

Code:

• Home
• Bio
• Design
• Logos
• Illustration
• Fine Art
• Contact

[birdrockdesigns]

Link?

Also, looking at your code – don’t use align="right" – use your CSS to align text to the right.

Also, you could use list-style-image, and position it outside.

[moodesign]

thnx. here’s link: http://www.rondewilde.com/index-dots.html (see my earlier post tonite on "external sheets…"

so… instead of background: url you’re saying use list-style-image? for example: list-style-image: 100% .8em;

and when i use css only to align the li right it hasn’t worked. i’ve had to use html to get to work.

thnx again, i do def appreciate it!

[virtual]

Try adding the last line of padding to these 2

Code:

a {
color:#60608f;
text-decoration:none;
padding-right: 20px}

a:hover {
color:#fff;
text-decoration:none;
background-image: url(images/next.gif);
background-repeat: no-repeat;
background-position:100% .2em;
padding-right:20px;
}

And as Bird Rock said, remove align="right" from the html and add text-align: right; to your #navcontainer in the CSS.

[moodesign]

yeah baby! way cool. thnx a million virt!

the arrow works great here (embedded): http://www.rondewilde.com/index-shadow.html

although it’s weird, on my mac everything works fine in safari 5. but on the pc, same version safari no bueno with the repeat bkg and transparent png.

and..any ideas on why my external css isn’t working here: http://www.rondewilde.com/index-linked.html

the hover nav, transparent shadow png and repeating bkg png aren’t showing up in this version for any browser. obviously missing something here

[virtual]

Your first link doesn’t work. I’d like to make a suggestion, your whole site is very difficult to read because there is not enough contrast between the background and the text colour. The footer is totally illegible, it’s hard to see it’s even there.

You shouldn’t have inline styling and external stylesheets together, they can cause conflict. You should take out all the inline styling and put it in your external stylesheet. The only time you should put styling in the html code is if there is just one minor thing that needs a different look on one page.

You should also run your site through the validator and correct the errors, oftentimes that clears up problems.

[moodesign]

Thnx for your input.

Can’t control what monitor settings are used out there. All the same, I do need to take this into consideration since you’re having difficulty reading. The footer for sure is meant to be minimized but the main paragraph should read fine. Does on my calibrated monitor.

Will break all the CSS into external sheets then. But I’d have to do a separate css sheet for each page though because there are subtle placement differences with some of the block elements. This kinda defeats beauty of css efficiency doesn’t it?

I did notice that when I simply pulled the main.css file out of css folder and put it in root folder then the browser recognized it. Why doesn’t it recognize my path setting when set to a nested folder?

I will validate. Realized that was half my prob.

Thanx again.

[virtual]

I have 2 calibrated monitors on a Mac, one lighter to compensate for PC’s and also a PC laptop for testing purposes.On all of them the footer is extremely hard to read and the contrast between the regular text and background is not enough. As you so aptly said you cannot control the monitor settings out there and also remember that not all your customers are going to be young with 20/20 vision.

As to your issue with multiple stylesheets for the little tweaks for the different pages, that is not a good idea. There should be consistency throughout your site. There should be no reason that the different elements in your site should not sit comfortably within the main structure.

[moodesign]

Points well taken. I appreciate them. In fact, have been grinding all day and tonite to come up with an almost finished product. Please have a look. I welcome your feedback.

http://www.rondewilde.com

A few issues I’ve noticed: Renders nicely in Safari but Firefox and IE don’t render the dot background (behind wrapper). I suppose re-setting it up in xhtml, as Bird Rock suggested, is my only option here ? Especially with IE8, it doesn’t float the wrapper div at all, although it does show a 50px peek of the dot background now at top.

And so I have the external sheet set up to link right now but I ran into prob with the way I have the nav a href’s set up to show arrow gif at hover. Now with the rest of the pages all the thumbnail images have 11 px padding as well. I welcome suggestions to rectify yet still maintain the nav hover function.

Again, thanks.

[virtual]

Quote:

And so I have the external sheet set up to link right now but I ran into prob with the way I have the nav a href’s set up to show arrow gif at hover. Now with the rest of the pages all the thumbnail images have 11 px padding as well. I welcome suggestions to rectify yet still maintain the nav hover function.

This is because the information with the arrow is on the a and a:hover tags. To have them show only on the navigation and not on all the a tags you will need to call them by a specific name like #navcontainer li a and #navcontainer li a:hover

[moodesign]

i’ll tackle that next but first trying to find the way to include active page coloring with the page links (at bottom underneath images).

here is without active page coding: http://rondewilde.com/design1.html

and here i’m attempting to activate the page numbers: http://rondewilde.com/design1a.html and this version works okay on my mac with safari and firefox. but on the pc the lines are shifted in safari and firefox. curiously, it works sorta okay with IE. I mean, at least the lines aren’t shifted. but IE makes all the page numbers showing as active. how do i set this up properly?

here is my external css link: http://rondewilde.com/css/main.css

and why doesn’t the background dot2.png show up in firefox? and only partially in IE? (on either mac or pc)

[Author]

Posts