Tell me more ×
SharePoint Stack Exchange is a question and answer site for SharePoint enthusiasts. It's 100% free, no registration required.
up vote 1 down vote favorite

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!

share|improve this question
post some html code, how are you referencing the image files.. – Arsalan Adam Khatri Dec 12 '12 at 15:39
No.. you referred to background images right? Show the code you have written for the page..? – Arsalan Adam Khatri Dec 12 '12 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 '12 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 '12 at 19:22
show 3 more comments

1 Answer

up vote 0 down vote

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!

share|improve this answer
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 '12 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 '12 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 '12 at 19:58

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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