1

I'm creating one page at my work intranet Sharepoint site. I'm trying to customize the navigation only for my one page. My navigation bar looked good in preview mode, with the background images appearing and hoover working, but when I publish, my background images for my navigation disappears. When I go back to html code after publishing, I find the inline code for my images has disappeared. This happens every time I try to publish. I'm new at this so would appreciate any help. Thanks!

Improve this question
8
  • post some html code, how are you referencing the image files..
    – Arsalan Adam Khatri
    Dec 12, 2012 at 15:39
  • Hi Arsalan, icant.co.uk/articles/flexible-css-menu/step1.html
    – sharpointNewbie
    Dec 12, 2012 at 18:59
  • No.. you referred to background images right? Show the code you have written for the page..?
    – Arsalan Adam Khatri
    Dec 12, 2012 at 19:03
  • So from the homepage, I go to add page, then edit html, edit source, and i paste my html with the css above it. When I click ok, the images and everything appear correctly. The images have already been uploaded and I just link to the folder they are in. Like this: #nav{ clear:both; font-weight:bold; color:#666; margin-left:4px; float:left; list-style-type:none; background:url(PublishingImages/navshadow.gif) no-repeat 8px 100% #fff; padding-bottom:21px;
    – sharpointNewbie
    Dec 12, 2012 at 19:05
  • yes, background image, but for the navigation bar, so it can look different when my mouse hoovers over it. like the link i sent. I basically followed this for the code icant.co.uk/articles/flexible-css-menu/step2.html
    – sharpointNewbie
    Dec 12, 2012 at 19:22

1 Answer 1

Reset to default
0

How to get url of the image in CSS, your problem is with relative URL of the image! either put the images in Style Library and css in style library too, and then try giving relative path according to css file path... or put the images in 14 hive folder and give path like '/_layouts/images/imagename.png'

If this works for you, mark as answer!

Improve this answer
3
  • Okay, so I've put the CSS and the images in the Style Library. Now the images are referenced like this background:url("/Style%20Library/Images/BenTabActive.gif") transparent top right no-repeat ; but the navigation images are still not showing up. It's listed out as a bulleted list, or it shows up in preview and disappears again when I publish I came across this isurinder.com/blog/post/2011/02/03/… and tried referencing that way, but it's still not working...
    – sharpointNewbie
    Dec 12, 2012 at 21:50
  • Seems like you have htttp which should be http, also if images and css both are in Style Library root - just use the image names... no need for any path!
    – Arsalan Adam Khatri
    Dec 12, 2012 at 21:52
  • Thanks for your help Arsalan but I still can't figure this out. I tried putting the CSS and the images in Style Library, and putting the following reference at the top of my html: <link href="portal/Style%20Library/sitename/Nav.css" rel="stylesheet" type="text/css"/> When I do that, again the navigation shows up correctly in preview, but once I publish, it reverts to list mode and the images disappear. When I go back into html mode, the link reference to the css has disappeared.
    – sharpointNewbie
    Dec 13, 2012 at 19:58

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.