Solved

Correct code for image url

Posted on 2012-12-28

2 solutions

Medium Priority

261 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!

Comment

Question by:samiam41

[X]

Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

Help others & share knowledge
Earn cash & points
Learn & ask questions

Join The Community

5 Comments

LVL 19

Expert Comment

by:Melih SARICA

ID: 387288272012-12-29

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

LVL 53

Accepted Solution

by:COBOLdinosaur

COBOLdinosaur earned 1000 total points

ID: 387291842012-12-29

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&

LVL 9

Author Comment

by:samiam41

ID: 387313302012-12-30

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.

LVL 19

Assisted Solution

by:Melih SARICA

Melih SARICA earned 1000 total points

ID: 387313542012-12-30

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');

LVL 9

Author Comment

by:samiam41

ID: 387317262012-12-30

10-4 Thanks non_zero. Testing it now.

Featured Post

Question has a verified solution.

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

5 Most Important Things You Need to Know About DevOps

Article by: Anush

Originally, this post was published on Monitis Blog, you can check it here . It goes without saying that technology has transformed society and the very nature of how we live, work, and communicate in ways that would’ve been incomprehensible 5 ye…

Website Security Monitoring by Monitis

Article by: Anush

When it comes to security, close monitoring is a must. According to WhiteHat Security annual report, a substantial number of all web applications are vulnerable always. Monitis offers a new product - fully-featured Website security monitoring and pr…

Rounded Corner Effect in CSS

Video by: Sarah

In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …

Introduction to CSS (Part 2)

Video by: Jason

The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…