/    Sign up×
Community /Pin to ProfileBookmark

Image in CSS file as link

Hello everybory!

Can anybody give me mind how to do the image in under part of CSS file as link to a site?

[CODE]DIV#ticker_block {
BORDER-TOP: #fff 1px solid; MARGIN-TOP: 0px; BACKGROUND:url(/nak.jpg) # no-repeat right bottom; WIDTH: 597px; PADDING-TOP: 2px; HEIGHT: 25px[/CODE]

Thanks, Victor

to post a comment
CSS

11 Comments(s)

Copy linkTweet thisAlerts:
@redhatlookJun 05.2007 — I am not sure if it's possible to make a link from background image ?
Copy linkTweet thisAlerts:
@CentauriJun 05.2007 — Depends on the size of the image in question - it is not clear from what has been presented here as to whether the background image is the same size as the div. If the image is the same size, then apply the id to an <a> tag instead of a div, and add display: block to the css. If the image is a small one within the div, then aN <a> link within the div can easily be styled to be the same size as, and positioned over, the background image.

Really need to know how big the image is.
Copy linkTweet thisAlerts:
@p_rvictorauthorJun 05.2007 — Thank you Centauri


The image is 180x30

Can you remake upper code because I am not very clear about with it.

Indeed thank you very much

Victor
Copy linkTweet thisAlerts:
@ray326Jun 05.2007 — I'd start with something like so since you want it to be a link.
[code=html]
a#ticker_block {
display:block;
BORDER-TOP: #fff 1px solid;
MARGIN-TOP: 0;
BACKGROUND: url(/nak.jpg) no-repeat right bottom;
WIDTH: 597px;
PADDING-TOP: 2px;
HEIGHT: 25px
}
...
<a id="ticker_block" href="somewhere.com"></a>
...
[/code]
Copy linkTweet thisAlerts:
@p_rvictorauthorJun 05.2007 — Thank you ray326,

But with your code the picture not show.

Maybe I don't structuring it correctly.

Here is the all CSS file. If you like, please help me to structure it correctly.

Thanks


[CODE]
BODY {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN:0px; PADDING-TOP:0px; BACKGROUND-COLOR: #fff
}
DIV#top_nav {
LEFT: 10px; POSITION: absolute; TOP: 0px
}
DIV#login_block {
LEFT: 576px; POSITION: absolute; TOP:0 px
}
DIV#cart_block {
LEFT: 10px; POSITION: absolute; TOP: 0px
}


DIV#ticker_block {
LEFT: 180px; POSITION: absolute; TOP:0px
}
DIV#left_nav {
MARGIN-TOP:10 px; FLOAT: left; MARGIN-LEFT: 3px; HEIGHT: 100%
}
DIV#subpage_block {
MARGIN-TOP: 13px; FLOAT: left; MARGIN-LEFT: 115px; WIDTH: 500px
}
DIV#top_nav {
BACKGROUND: url() #fff no-repeat 50% top; WIDTH: 768px; HEIGHT: 87px
}
DIV#logo {
BACKGROUND: url() #fff no-repeat left top; WIDTH: 250px; HEIGHT: 87px
}
DIV#login_block {
PADDING-RIGHT: 10px; PADDING-LEFT: 10px; FONT-WEIGHT: bold; FONT-SIZE: 11px; PADDING-BOTTOM: 10px; WIDTH: 160px; COLOR: #66000; PADDING-TOP: 10px; FONT-FAMILY: arial; HEIGHT: 37px
}
A.login_block {
FONT-WEIGHT: normal; FONT-SIZE: 11px; COLOR: #660000; TEXT-DECORATION: none
}
A.login_block:hover {
COLOR: #660000
}
A.nav {
FONT-WEIGHT: bold; FONT-SIZE: 11px; COLOR: #660000; FONT-FAMILY: arial; TEXT-ALIGN: center; TEXT-DECORATION: none
}
A.nav:hover {
COLOR: #660000
}
DIV#bar_block {
LEFT: 0px; WIDTH: 769px; POSITION: absolute; TOP: 0px; HEIGHT: 48px
}
DIV#cart_block {
BORDER-TOP: #fff 1px solid; PADDING-LEFT: 0px; BACKGROUND:url() # no-repeat left bottom; LEFT: 0px; WIDTH: 192px; PADDING-TOP: 5px; HEIGHT: 22px
}
DIV#sub_page_move_up {
LEFT: 0px; POSITION: absolute; TOP: 0px
}


[COLOR="Red"]DIV#ticker_block {
BORDER-TOP: #fff 1px solid; MARGIN-TOP: 0px; BACKGROUND:url(nak.jpg) # no-repeat right bottom; WIDTH: 597px; PADDING-TOP: 2px; HEIGHT: 25px[/COLOR]


}
.container {
OVERFLOW: hidden; WIDTH: 470px; POSITION: relative; HEIGHT: 28px; BACKGROUND-COLOR: #
}
.ticker {
LEFT: 50px; VISIBILITY: hidden; WIDTH: 570px; COLOR: #000000; POSITION: relative; TOP: 7px; HEIGHT: 50px
}
.banner {
FONT: bold 8pt verdana; CURSOR: pointer; COLOR: #fff
}
.banner A:link {
FONT: bold 8pt verdana; COLOR: #fff; TEXT-DECORATION: none
}
.banner A:visited {
FONT: bold 8pt verdana; COLOR: #fff; TEXT-DECORATION: none
}
.banner A:hover {
COLOR: #ff0000
}[/CODE]







I'd start with something like so since you want it to be a link.
[code=html]
a#ticker_block {
display:block;
BORDER-TOP: #fff 1px solid;
MARGIN-TOP: 0;
BACKGROUND: url(/nak.jpg) no-repeat right bottom;
WIDTH: 597px;
PADDING-TOP: 2px;
HEIGHT: 25px
}
...
<a id="ticker_block" href="somewhere.com"></a>
...
[/code]
[/QUOTE]
Copy linkTweet thisAlerts:
@ray326Jun 06.2007 — I don't see any indication you did what i suggested.
Copy linkTweet thisAlerts:
@CentauriJun 06.2007 — If you can also post up the html for the page in question, it would better enable us to see what you are doing, and offer a specific answer instead of guessing.
Copy linkTweet thisAlerts:
@Major_PayneJun 06.2007 — Looks like he used DIV#ticker_block instead of ray326's suggestion of a#ticker_block for link he wanted.

Ron
Copy linkTweet thisAlerts:
@p_rvictorauthorJun 06.2007 — Looks like he used DIV#ticker_block instead of ray326's suggestion of a#ticker_block for link he wanted.

Ron[/QUOTE]


Hi, thank you for help

I used the suggestion of Ron, but &#1090;he picture disappear.

Here is the HTML where must show it:

[CODE]<HTML><HEAD> <META http-equiv=Content-Type content="text/html; charset=windows-1251"><TITLE>&#1063;&#1083;&#1077;&#1085;&#1086;&#1074;&#1077;</TITLE>

<STYLE type=text/css>@import url(ushpw.css );
@import url(ovrN.css );</STYLE>

<!--[if IE]>
<STYLE type=text/css>@import url(ieN.css );
</STYLE>

<LINK id=csslink href="blu.css" type=text/css rel=stylesheet>

<!--
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->

</HEAD>
<BODY>

<DIV class="pagew region9" id=wrapper>
<DIV id=head>
<DIV class="parent chrome6 single1" id=peelback>
<DIV class="child c1 first" id=ptag>

[COLOR="Red"]<LINK href="styles1.css" type=text/css rel=stylesheet>

<DIV id=cart_block
style="BORDER-TOP: #ffffff 1px solid; PADDING-LEFT: 0px; BACKGROUND: url(123.jpg) # WIDTH: 92px; PADDING-TOP: 3px; HEIGHT:31px" >[/COLOR]

<script type="text/javascript">

Date.ONE_SECOND = 1000
Date.ONE_MINUTE = Date.ONE_SECOND * 60
Date.ONE_HOUR = Date.ONE_MINUTE * 60
Date.ONE_DAY = Date.ONE_HOUR * 24

myLinks = new Array()

myLinks.push ({text: '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&#1040;&#1056;&#1059;&#1041;&#1040;' , image: '&nbsp;<img src="http://flagspot.net/images/a/aw.gif" width="36px"height="24px" title="" border=0></img> ', url: ' 263aruba.html'})

myLinks.push ({text: '&#1041;&#1077;&#1088;&#1084;&#1091;&#1076;&#1089;&#1082;&#1080; &#1086;&#1089;&#1090;&#1088;&#1086;&#1074;&#1080;' , image: '&nbsp;<img src="http://flagspot.net/images/b/bm.gif" width="48px"height="24px" title="" border=0></img> ', url: 'http://www.apostolicservice.com/264bermudi.html'})
.......
thisLink = myLinks[Math.floor((new Date().getTime() / Date.ONE_DAY) % myLinks.length)]

document.write ('<div><a href="#">', thisLink.image + thisLink.text, '</a></div>')
document.links[document.links.length-1].href = thisLink.url
document.links[document.links.length-1].onmouseover = function () {
window.status = thisLink.text
return true
}
</script> </DIV>

<DIV id=ticker_block>
<SCRIPT>
<!--
function Ticker(name, id, shiftBy, interval){this.name = name;this.id = id;this.shiftBy = shiftBy ? shiftBy : 1;this.interval = interval ? interval : 1000;this.runId = null;this.div = document.getElementById(id);var node = this.div.firstChild;var next;while (node){next = node.nextSibling;if (node.nodeType == 3)this.div.removeChild(node);node = next;}this.left =636;this.shiftLeftAt = this.div.firstChild.offsetWidth;this.div.style.height = this.div.firstChild.offsetHeight;this.div.style.width = 2 * screen.availWidth;this.div.style.visibility = 'visible';}
function startTicker(){this.stop();this.left -= this.shiftBy;if (this.left <= -this.shiftLeftAt){this.left = 636;this.div.appendChild(this.div.firstChild);this.shiftLeftAt = this.div.firstChild.offsetWidth;}this.div.style.left = (this.left + 'px');this.runId = setTimeout(this.name + '.start()', this.interval);}
function stopTicker(){if (this.runId)clearTimeout(this.runId);this.runId = null;}
function changeTickerInterval(newinterval){if (typeof(newinterval) == 'string')newinterval = parseInt('0' + newinterval, 10);if (typeof(newinterval) == 'number' && newinterval > 0)this.interval = newinterval;this.stop();this.start();}
Ticker.prototype.start = startTicker;Ticker.prototype.stop = stopTicker;Ticker.prototype.changeInterval = changeTickerInterval;var ticker = null;
function init(){ticker = new Ticker('ticker', 'tickerID', 1, 15);ticker.start();}
onload = init
ns4 = (document.layers)? true:false
if (ns4 = "false"){
document.write('<div align="left" class="container">');
document.write('<div class="ticker" id="tickerID" onMouseOver="ticker.stop();" onMouseOut="ticker.start();">');
document.write(' <span class="banner"><nobr>');
document.write('...'); document.write('......');document.write('....');
document.write('</nobr></span>');
document.write('</div>');
document.write('</div>');
}
//-->
</SCRIPT></DIV></LINK>

</DIV>
<DIV class="child c3 last">
</DIV></DIV>

<DIV class="child c2">
<UL class="linklist21 cf">

<LI class=first><A href="....">..</A></LI>
<LI class=last><A href="">...</A></LI></UL></DIV>

<BR class=b3>
<DIV class="child c3">
<UL class="linklist9 cf">
<LI class="first selected">

<a href=pm.cgi?session=%%session%%>&#1053;&#1040;&#1063;&#1040;&#1051;&#1054;</A></LI>
<LI><a href=pm.cgi?session=%%session%%&action=display>&#1052;&#1086;&#1103; &#1087;&#1088;&#1086;&#1092;&#1080;&#1083;</A></LI>
<LI><a href=pm.cgi?session=%%session%%&action=modify>&#1054;&#1073;&#1085;&#1086;&#1074;&#1103;&#1074;&#1072;&#1085;&#1077;</A></LI>
<LI><a href=pm.cgi?session=%%session%%&action=browse>&#1057;&#1072;&#1084;&#1086; &#1079;&#1072; &#1095;&#1083;&#1077;&#1085;&#1086;&#1074;&#1077;</A></LI>
</UL></DIV>

<BR>
<DIV class="child c4 last">
<FORM class=simple6 id=srchfrm action=search.cgi method=get method=get><input type=hidden name=action value=search>
<select name=infield> <option selected value=any>&#1050;&#1083;&#1102;&#1095;&#1086;&#1074;&#1072; &#1076;&#1091;&#1084;&#1072; <option value=login>&#1048;&#1084;&#1077;</a> <option value=email>&#1048;&#1084;&#1077;&#1081;&#1083;</a>
<option value=age>&#1042;&#1098;&#1079;&#1088;&#1072;&#1089;&#1090;</a> <option value=state>&#1054;&#1073;&#1083;&#1072;&#1089;&#1090;</a> <option value=country>&#1044;&#1098;&#1088;&#1078;&#1072;&#1074;&#1072;</a></select>

<input type=text name=words size=46 value="">&nbsp;<INPUT class=button type=submit value="&#1058;&#1098;&#1088;&#1089;&#1080; &#1095;&#1083;&#1077;&#1085;&#1086;&#1074;&#1077;">
</DIV></FORM></DIV></DIV>

<DIV class="parent chrome6 quad2 cf" id=toolbar>
<DIV class="child c1 first" id=welcome>
<DIV class=abs><SPAN>&#1044;&#1086;&#1073;&#1088;&#1077; &#1076;&#1086;&#1096;&#1098;&#1083; %%firstname%%, </SPAN></DIV></DIV>
<DIV class="child c2" id=msgcount></DIV><BR class=b3>
<DIV class="child c3" id=signin></DIV>
<DIV class=link></DIV></DIV>
<blockquote>[/CODE]
Copy linkTweet thisAlerts:
@Major_PayneJun 22.2007 — Had this topic in pending. Late getting back to it. Did you get this solved by now?

Ron
Copy linkTweet thisAlerts:
@WebJoelJun 24.2007 — I'm alittle lost in this thread, but noticed this:

....<DIV class="[B]child c2[/B]">

<UL class="[B]linklist21 cf[/B]">....[/QUOTE]


Are these four classes, or two?

That is, as written, the DIV has TWO classes called "child" and "c2",

and as written, the UL has TWO classes called "linklist21" and "cf".

"classnames" I believe, need to not have 'whitespace' in the name else it is considered to be TWO words thus, TWO classes.

[I][B]If[/B][/I] these are one class each, try writing them thus:

"child_c2"

and

"linklist21_cf"

There might actually BE 'two classes' for each of DIV and UL, but that is redundant coding imho, and confusing to do so. ?
×

Success!

Help @p_rvictor spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 6.2,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,
)...