Hi! I have a background image that I am trying to link to. The problem is that it has a padding from the top, and I am trying to only link the actual image and not the whole div it sits in. How do I do that? top is where the logo is, the background image is below the top div in the header div. I hope this makes sense. HTML CODE <code> <div id="header" style="left: 0px; top: 0px; height: 366px"> <div class="top"> </code> CSS CODE <code> #header{ background:url("../images/gift_certificate2.png") bottom no-repeat; position:relative;} #header .top{ width:100%; overflow:hidden; height:79px;} </code>
Unfortunately, no, it doesn't make sense - nor does the code since I don't see any 'link' in the code. Can we see MORE code, the image in question, and what you want it to look like? I'm pretty sure you are overthinking your markup. (and certainly your CSS since top:0; left:0; are the default values, and you shouldn't be using positioning like that)
I agree the positioning is what is causing the mess and unfortunately it was someone that I hired that did it that way and I have to fix... ok. I have 3 files. layout.css <code> #header {height:422px;} </code> style.css <code> #header{ background:url("../images/gift_certificate2.png") bottom no-repeat; position:relative;} <----- trying to make this a link #header .top{ width:100%; overflow:hidden; height:79px;} <these are not relevant - just putting them in because of html> body{background:#ded8cb; text-align:center;} .top-tail{ background:url("../images/top-tail_w.gif") top repeat-x #f8f6f2;} .bot-tail{ background:url("../images/bot-tail1.gif") bottom repeat-x;} .extra-bg{ position:absolute; width:50%; right:0; height:454px; background:url("../images/extra-bg.jpg") no-repeat 490px 40px;} #header .small-menu{ margin:50px 0 0 -2px;} #header .small-menu li{ float:right; color:#9ed554; padding-left:11px;} #header .small-menu a{ color:#4C4C4C; text-decoration:none; display:inline-block; margin-right:10px;} #header .small-menu a:hover{ color:#009933;} #header .topmenu{ float:left; padding:60px 250px 0 0; background:url("../images/rt_logo6.png") no-repeat; margin-top:1.138em;} #header .topmenu a{ text-decoration:none; color:#009933; display:inline-block; margin-right:25px;} #header .righttopmenu{ float:right; padding:26px 10px 0 -2px;} #header .righttopmenu a{ text-decoration:none; color:#009933; display:inline-block; margin-right:10px;} #header .menu{ float:right; padding:20px 15px 0 0;} #header .menu li{ float:left; font-size:1.083em; background:url("../images/menu-border.gif") no-repeat 0 1px; padding-left:24px; padding-bottom:2px;} #header .menu .first{ background:none;} #header .menu a{ text-decoration:none; color:#fff; display:inline-block; margin-right:25px;} #header .menu a:hover{ color:#f09400;} #header .text{ padding:13px 0 0 9px; color:#fff; line-height:1.417em;} #header .text a{ display:inline-block; font-size:1.083em; background:url("../images/header-link-tail.gif") top repeat-x; color:#fff; text-decoration:none; margin-top:26px;} #header .text a strong{ display:block; background:url("../images/header-link-left-bg.gif") left top no-repeat;} #header .text a strong strong{ background:url("../images/header-link-right-bg.gif") right top no-repeat; padding:8px 11px 8px 12px;} #header .text a:hover{ background:url("../images/header-link-tail-act.gif") top repeat-x;} #header .text a:hover strong{ background:url("../images/header-link-left-bg-act.gif") left top no-repeat;} #header .text a:hover strong strong{ background:url("../images/header-link-right-bg-act.gif") right top no-repeat;} </code> ---- html ---- <code> <body id="page1" onload="new ElementMaxHeight();"> <div class="top-tail"> <div class="bot-tail"> <div id="main" style="width: 828px"> <!--header --> <div id="header" style="left: 0px; top: 0px; height: 366px"> <div class="top"> <a href="index.html"><div class="topmenu"> </div></a> <div class="righttopmenu"> <table style="width: 100%; float: right;" cellspacing="0" cellpadding="0" align="center"> <tr> <td style="color: #4C4C4C" align="right"><strong>1-800-444-7777</strong></td> </tr> <tr> <td style="color: #487C0E" align="right"><a href="login.asp"><strong>Member Login</strong></a></td> </tr> </table> </div> <ul class="small-menu"> <li><a href="contact_us.html" style="height: 18px"><strong>Contact Us</strong> </a></li> <li style="height: 18px"><a href="help.html"><strong>Help</strong></a></li> <li><a href="resume_testimonials.html"><strong>Testimonials </strong> </a></li> <li><a href="resume_blog.html"><strong>Blog</strong></a></li> <li><a href="resume_services.html"><strong>Resume Services </strong> </a></li> <li><a href="about_us.html"><strong>About Us</strong></a></li> </ul> </div> </div> <!--header end--> </code>
ooph, that's bad. See this: <a href="index.html"><div class="topmenu"> </div></a> Code (markup): Anchors cannot go around DIV's, that's invalid markup. Anchors are what are called 'inline level' tags, and can only contain other inline-level tags. DIV's are block-level tags, and can contain almost any other type of tag. I've seen like ten people doing that this past week... I'd have to see the appearance you WANT it to look like to say for certain, but I think you've got the wrong markup - I'd throw that away and start over as it's so bad there's nothing worth saving since about 2/3rds of those DIV look unnecessary, every single strong tag present IS unnecessary (and bad SEO), etc, etc. I suspect that this is probably all that should be REALLY in there for markup: </head><body> <div id="pagewrapper"> <h1> <a href="#"> Site Title <span></span> </a> </h1> <div id="headerInfo"> <span>1-800-444-7777</span> <a href="login.asp">Member Login</a> </div> <ul id="mainMenu"> <li><a href="contact_us.html">Contact Us</a></li> <li><a href="help.html">Help</a></li> <li><a href="resume_testimonials.html">Testimonials </a></li> <li><a href="resume_blog.html">Blog</a></li> <li><a href="resume_services.html">Resume Services </a></li> <li><a href="about_us.html">About Us</a></li> </ul> Code (markup): Though that will take an entirely new set of CSS, which I can't even start to guess at since the CSS and markup you provided shows different appearances in all four major browser engines... Not surprising given the overthought/invalid markup and broken layout methodologies. The logo and link (which is what I assume you are aiming for) would end up in that h1 - the logo image applied by the span using a technique known as gilder-levin.
actually topmenu wasn't what i was trying to link. I was trying to link #header{ background:url("../images/gift_certificate2.png") bottom no-repeat; position:relative;} <----- trying to make this a link I didn't put the link in because I can't figure out where to put it or how to put it.
Uhm, that's because you can't create links in CSS. Links are anchors, as such you need to create an ANCHOR that gets the link, then put the image inside the anchor. (A tag) Again, without seeing what it is you want it to look like, I don't think anyone here is going to be a whole lot of help - especially with THAT for code.