Guest AdamnSmith Posted February 10, 2008 Share Posted February 10, 2008 Okay, i have been working on this off and on for 2 months... I have tried every thread related to this and it seems when ever someone posts the same problem as me at the bottom of the thread - no one comes back and helps... So [l Please help to the end. #topHeader { text-align: right; height: 75px; background-image: url(../styleImages/backgrounds/topHeader.gif); background-repeat: no-repeat; } #sessionBox { text-align: left; width: 236px; height: 96px; float: right; } and <body> <div id="pageSurround"> <div id="topHeader"> <div id="sessionBox"> <div style="padding: 15px 8px 15px 15px; margin: 0px;"> {SEARCH_FORM} {SESSION} </div> </div> </div> <div class="topCats"> </div> Please dont refer me to another thread. I have done those and they simply do not work. the closest I got it was linking the logo HOWEVER the entire SESSION BOX falls down below the topCats bar. Quote Link to comment Share on other sites More sharing options...
Robsta Posted February 10, 2008 Share Posted February 10, 2008 You can't do it through using a CSS image. You need to insert the image into the template... Add the image... <img src="path_to_image.jpg"/> Add the link around the image... <a href="url_path.html"><img src="path_to_image.jpg"/></a> Then ensure the image doesn't show a border, add border="0": <a href="url_path.html"><img src="path_to_image.jpg" style="border:0;"/></a> To find this information, just google for 'HTML image link', it's not unique to CubeCart. Quote Link to comment Share on other sites More sharing options...
Guest AdamnSmith Posted February 10, 2008 Share Posted February 10, 2008 This causes the entire layout to go out of wack. Quote Link to comment Share on other sites More sharing options...
Robsta Posted February 10, 2008 Share Posted February 10, 2008 This causes the entire layout to go out of wack.Well of course it depends on where you put it, and the styling you have around the area you have added it. Quote Link to comment Share on other sites More sharing options...
Guest AdamnSmith Posted February 11, 2008 Share Posted February 11, 2008 I put it in the same place that it was suggested on all of the other threads. Within the topHeader div in the .TPL Quote Link to comment Share on other sites More sharing options...
bsmither Posted February 11, 2008 Share Posted February 11, 2008 Try this: layout.css: #topHeader { text-align: right; height: 110px; /* Probably should make this taller or equal to sessionBox height */ background-image: url(../styleImages/backgrounds/topHeader.gif); background-repeat: no-repeat; } #topLinkerBox { width: 236px; height: 110px; border: solid black 1px; float: left; } #sessionBox { text-align: left; background-image: url(../styleImages/backgrounds/sessionBg.gif); width: 236px; height: 96px; float: right; } index.tpl: <div id="topHeader"> <a href="http://www.cubecart.com"><div id="topLinkerBox"></div></a> <div id="sessionBox"> The width and height of the topLinkerBox should match the width and height of the background image "topHeader.gif". If it works, comment out the border line by wrapping it within /**/. Quote Link to comment Share on other sites More sharing options...
Guest AdamnSmith Posted February 11, 2008 Share Posted February 11, 2008 Awesome. Thank you. This worked out perfectly. I REAAALLLY appreciate it. I have been struggling for a long time. I had done the steps from the other threads about 50 times.. heh.. THANKSSSS!!!!! Quote Link to comment Share on other sites More sharing options...
Guest Posted February 19, 2008 Share Posted February 19, 2008 Try this: layout.css: #topHeader { text-align: right; height: 110px; /* Probably should make this taller or equal to sessionBox height */ background-image: url(../styleImages/backgrounds/topHeader.gif); background-repeat: no-repeat; } #topLinkerBox { width: 236px; height: 110px; border: solid black 1px; float: left; } #sessionBox { text-align: left; background-image: url(../styleImages/backgrounds/sessionBg.gif); width: 236px; height: 96px; float: right; } index.tpl: <div id="topHeader"> <a href="http://www.cubecart.com"><div id="topLinkerBox"></div></a> <div id="sessionBox"> The width and height of the topLinkerBox should match the width and height of the background image "topHeader.gif". If it works, comment out the border line by wrapping it within /**/. Try this: layout.css: The width and height of the topLinkerBox should match the width and height of the background image "topHeader.gif". If it works, comment out the border line by wrapping it within /**/.#topHeader { text-align: right; height: 110px; /* Probably should make this taller or equal to sessionBox height */ background-image: url(../styleImages/backgrounds/topHeader.gif); background-repeat: no-repeat; } #topLinkerBox { width: 236px; height: 110px; border: solid black 1px; float: left; } #sessionBox { text-align: left; background-image: url(../styleImages/backgrounds/sessionBg.gif); width: 236px; height: 96px; float: right; } index.tpl: <div id="topHeader"> <a href="http://www.cubecart.com"><div id="topLinkerBox"></div></a> <div id="sessionBox"> Cool Thanks.... What specifically do I need to wrap to get rid of the border? Quote Link to comment Share on other sites More sharing options...
bsmither Posted February 19, 2008 Share Posted February 19, 2008 Change: border: solid black 1px; to: /* border: solid black 1px; */ Quote Link to comment Share on other sites More sharing options...
Guest Posted February 20, 2008 Share Posted February 20, 2008 Change: border: solid black 1px; to: /* border: solid black 1px; */ Duhhhhh, it couldn't be that simple. You guys rock, thanks a bunch. Quote Link to comment Share on other sites More sharing options...
Guest Posted June 21, 2008 Share Posted June 21, 2008 I've been trying to figure this out! This worked like charm! (sigh of relief...) Thanks!!! :unsure: Quote Link to comment Share on other sites More sharing options...
Guest Posted February 3, 2009 Share Posted February 3, 2009 I've been trying to figure this out! This worked like charm! (sigh of relief...) Thanks!!! Sorry to bump an old thread folks. I've just followed through this, and it works - to a point. My logo is centered on my site, so I replaced the "float: left;" in the layout.css for "margin: auto;" which worked a treat for lining the box up with the topHeader.gif image. However it seems that the link is the full width of the screen, not the width of the box. This was the case even before I made the change. Anyone have any ideas why this might be happening? I'm a n00b when it comes to CSS btw. Quote Link to comment Share on other sites More sharing options...
bsmither Posted February 17, 2009 Share Posted February 17, 2009 What is your complete #topLinkerBox selector? Make sure width: 200px; /* or whatever you need */ is still there. Quote Link to comment Share on other sites More sharing options...
Guest Posted February 17, 2009 Share Posted February 17, 2009 What is your complete #topLinkerBox selector? Make sure width: 200px; /* or whatever you need */ is still there. Thanks for the reply. Where are you suggesting to put that? There is already a width set in the layout.css #topLinkerBox Quote Link to comment Share on other sites More sharing options...
bsmither Posted February 18, 2009 Share Posted February 18, 2009 OK, so width is still an element of the #topLinkerBox selector. I had asked what is the complete selector, that is, what else, including width, do you have for #topLinkerBox? Quote Link to comment Share on other sites More sharing options...
Guest Posted February 19, 2009 Share Posted February 19, 2009 OK, so width is still an element of the #topLinkerBox selector. I had asked what is the complete selector, that is, what else, including width, do you have for #topLinkerBox? Sorry, I must have missed the 'still' #topLinkerBox { width: 500px; height: 80px; /* border: solid black 1px; */ margin: auto } The site is www.legionenterprises.co.nz When the border was on it outlined the header image nicely. Quote Link to comment Share on other sites More sharing options...
bsmither Posted February 20, 2009 Share Posted February 20, 2009 OK, we need to constrain #topHeader... #topHeader { background-image:url(../styleImages/backgrounds/topHeader.gif); background-position:center; background-repeat:no-repeat; height:100px; margin-left:auto; margin-right:auto; width:500px; /*make same as topLinkerBox width or wider */ } Quote Link to comment Share on other sites More sharing options...
Guest Posted February 20, 2009 Share Posted February 20, 2009 OK, we need to constrain #topHeader... #topHeader { background-image:url(../styleImages/backgrounds/topHeader.gif); background-position:center; background-repeat:no-repeat; height:100px; margin-left:auto; margin-right:auto; width:500px; /*make same as topLinkerBox width or wider */ } Good work, that has done the trick perfectly. Thanks for your help, it's much appreciated! Quote Link to comment Share on other sites More sharing options...
Guest Planet28 Posted August 27, 2009 Share Posted August 27, 2009 This has been really helpful--but I have added an image with linked hotspots--but now there is a missing image box over the active image. Can someone help me find this error in my code? Here's the page: http://www.planetsoulinc.com/planetstore/index.php (nevermind that the rest of the page is a disaster...one thing at a time) Here's my code in Index.tpl: <div id="topHeader"> <img name="topnavhot" src="topnavhot.jpg" width="900" height="150" border="0" usemap="#m_topnavhot" alt=""><map name="m_topnavhot"> <area shape="rect" coords="40,13,140,136" href="http://www.planetsoulinc.com/main.html" target="_parent" title="Planet Soul Inc" alt="Planet Soul Inc" > <area shape="rect" coords="805,91,894,127" href="http://www.planetsoulinc.com/offering.html" target="_parent" title="Our Offering" alt="Our Offering" > <area shape="rect" coords="648,96,755,120" href="http://www.planetsoulinc.com/contact.html" target="_parent" title="Contact Us" alt="Contact Us" > <area shape="rect" coords="344,95,590,128" href="http://www.planetsoulinc.com/events.html" target="_parent" title="Planet Soul Events" alt="Planet Soul Events" > <area shape="rect" coords="151,95,288,131" href="http://www.planetsoulinc.com/inspiration.html" target="_parent" title="Be Inspired" alt="Be Inspired" > </map> <div id="topLinkerBox"></div></a> <div id="sessionBox"> <div style="padding: 15px 8px 15px 15px; margin: 0px;"> {SEARCH_FORM} {SESSION} </div> and in layout css: #topHeader { text-align: center; height: 150px; background-image: url(../styleImages/backgrounds/topnavhot.jpg); background-repeat: no-repeat; } } #topLinkerBox { width: 900px; height: 150px; border: 0px; float: left; Quote Link to comment Share on other sites More sharing options...
Guest degsey69 Posted August 27, 2009 Share Posted August 27, 2009 <img name="topnavhot" src="topnavhot.jpg" width="900" height="150" border="0" usemap="#m_topnavhot" alt=""><map name="m_topnavhot"> Should read <img name="topnavhot" src="http://www.yourdomamain/imagefolder/topnavhot.jpg" width="900" height="150" border="0" usemap="#m_topnavhot" alt=""><map name="m_topnavhot"> Replace yourdomamain/imagefolder/ with what ever it is. Quote Link to comment Share on other sites More sharing options...
Guest Planet28 Posted August 27, 2009 Share Posted August 27, 2009 <img name="topnavhot" src="topnavhot.jpg" width="900" height="150" border="0" usemap="#m_topnavhot" alt=""><map name="m_topnavhot"> Should read <img name="topnavhot" src="http://www.yourdomamain/imagefolder/topnavhot.jpg" width="900" height="150" border="0" usemap="#m_topnavhot" alt=""><map name="m_topnavhot"> Replace yourdomamain/imagefolder/ with what ever it is. Degsey--Im drawing hearts around your name. Thank you so much! Quote Link to comment Share on other sites More sharing options...
Guest degsey69 Posted August 27, 2009 Share Posted August 27, 2009 Your welcome :( Quote Link to comment Share on other sites More sharing options...
Guest Lovasimedve Posted January 21, 2012 Share Posted January 21, 2012 Thank you, worked super. Only 1 thing: how to get the hand-symbol for the link? Thanks Quote Link to comment Share on other sites More sharing options...
bsmither Posted January 21, 2012 Share Posted January 21, 2012 Add this to the CSS: cursor: pointer; Quote Link to comment Share on other sites More sharing options...
Guest Lovasimedve Posted January 21, 2012 Share Posted January 21, 2012 Thank you! Here the Code for: layout.css in cubecartskinsKillerstyleSheets #topHeader { text-align: right; height: 100px; background-image: url(../styleImages/backgrounds/topHeader.gif); background-repeat: no-repeat; } #topLinkerBox { width: 170px; height: 87px; border: solid blue 2px; cursor: pointer; float: left; } Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.