Solved

Correct code for image url

Posted on 2012-12-28
5
257 Views
Last Modified: 2013-01-31
Hey Experts.  I am trying to add a new feature to my website but I can't seem to get this code right (line #13, 18 and 24 below).  

/* This css requires Moving Boxes v2.02+ */

/* Inside slider shadow */
.mb-left-shadow, .mb-right-shadow {
	background: repeat-y scroll 0 0;
	height: 100%;
	position: absolute;
	top: 0;
	width: 10px;
}

.mb-left-shadow {
	background-image: url("files/webslider/demo/leftshadow.png");
	left: 0;
}

.mb-right-shadow {
	background-image: url("files/webslider/demo/rightshadow.png");
	right: 0;
}

/*** Left & Right Navigation Arrows ***/
a.mb-scrollButtons {
	background: url("files/webslider/demo/arrows.gif") no-repeat;
	margin: 0;
	top: 40%;
	/*  the margin-top below may be causing problems, so adjust the % above... */
	/*  margin-top: -29px; if you change the arrow images, you may have to adjust this (1/2 height of arrow image) */
	zoom: 1;
}

Open in new window


This one works for another section of the web page but I'm not sure how to use this portion of code to ref the location of the file for the one above.
img src="files/webslider/demo/1.jpg" alt="picture"

Open in new window


Thanks Experts!
0
Comment
Question by:samiam41
  • 2
  • 2
5 Comments
 
LVL 19

Expert Comment

by:Melih SARICA
ID: 38728827
in css trying using ' instead of "

/* This css requires Moving Boxes v2.02+ */

/* Inside slider shadow */
.mb-left-shadow, .mb-right-shadow {
	background: repeat-y scroll 0 0;
	height: 100%;
	position: absolute;
	top: 0;
	width: 10px;
}

.mb-left-shadow {
	background-image: url('files/webslider/demo/leftshadow.png');
	left: 0;
}

.mb-right-shadow {
	background-image: url('files/webslider/demo/rightshadow.png');
	right: 0;
}

/*** Left & Right Navigation Arrows ***/
a.mb-scrollButtons {
	background: url('files/webslider/demo/arrows.gif') no-repeat;
	margin: 0;
	top: 40%;
	/*  the margin-top below may be causing problems, so adjust the % above... */
	/*  margin-top: -29px; if you change the arrow images, you may have to adjust this (1/2 height of arrow image) */
	zoom: 1;
}

Open in new window

0
 
LVL 53

Accepted Solution

by:
COBOLdinosaur earned 250 total points
ID: 38729184
Actually there should not be any quotes at all.  If removing them does not work then the problem is the path.  depending on the hierarchy of your file system you may have to do an absolute url right from the root, or a full url including the http:// or possibly ../files/

Without seeing the actual file system structure it is a guess, but clearly it is just a incorrect path that the browser can resolve that is the problem.

Cd&
0
 
LVL 9

Author Comment

by:samiam41
ID: 38731330
Thanks for the response experts.

Here is my question.  Is there a way to use the "img src" command in the top portion of code?
.mb-left-shadow {
	background-image: url('files/webslider/demo/leftshadow.png');
	left: 0;
}

.mb-right-shadow {
	background-image: url('files/webslider/demo/rightshadow.png');
	right: 0;

Open in new window


I would rather not use the the whole URL because the webhost makes it tricky.
0
 
LVL 19

Assisted Solution

by:Melih SARICA
Melih SARICA earned 250 total points
ID: 38731354
css style url gets under css files path

so .. if ur css file is under

/css then
ur

background-image: url('files/webslider/demo/leftshadow.png');

code means

/css/files/webslider .... etc

as u see if ur files/webslider is under root path try adding / infront of files

like this


background-image: url('/files/webslider/demo/leftshadow.png');
0
 
LVL 9

Author Comment

by:samiam41
ID: 38731726
10-4  Thanks non_zero.  Testing it now.
0

Featured Post

Master Your Team's Linux and Cloud Stack

Come see why top tech companies like Mailchimp and Media Temple use Linux Academy to build their employee training programs.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Any business that wants to seriously grow needs to keep the needs and desires of an international audience of their websites in mind. Making a website friendly to international users isn’t prohibitively expensive and can provide an incredible return…
FAQ pages provide a simple way for you to supply and for customers to find answers to the most common questions about your company. Here are six reasons why your company website should have a FAQ page
This video teaches users how to migrate an existing Wordpress website to a new domain.
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

820 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question