Guest JeannieM Posted February 10, 2011 Share Posted February 10, 2011 I've been trying to follow the directions given elsewhere in this forum to create a Clickable Logo and now I have TWO Logos, and neither one is Clickable! So rather than make this worse, I thought I'd come here for some expert advice. (Actually, I did have the clickable part done at one point, but it wasn't positioned correctly over the Logo.) This is what I've got. ****** /skins/KitaBlue/styleTemplates/global/index.tpl <body onload="initialiseMenu();{EXTRA_EVENTS}"> <div id="topHeader"> <a class="topHeaderImg" href="index.php"></a> <div>{SEARCH_FORM}</div> </div> <div>{SITE_DOCS}</div> <div id="pageSurround"> <div id="topHeader"> ****** In /skins/KitaBlue/styleTemplates/global/cart.tpl <body onload="initialiseMenu();"> <div id="topHeader"> <div>{SEARCH_FORM}</div> </div> <div>{SITE_DOCS}</div> <div id="pageSurround"> <div> ****** In /skins/KitaBlue/styleSheets/layout.css .topHeaderImg { float: center; margin-top: -68px; width: 756px; height: 116px; outline: none; } Can you help me please? Thanks so much. JeannieOh yeah, my URL is http://RedSunJewelry.com :whistle: Quote Link to comment Share on other sites More sharing options...
Guest JeannieM Posted February 10, 2011 Share Posted February 10, 2011 Anyone?? Quote Link to comment Share on other sites More sharing options...
leeofaccy Posted February 11, 2011 Share Posted February 11, 2011 Hi Jeannie The reason the logo is showing twice is because you have got 2 <div id="topHeader"> in your code. You need to remove the second one (Inside pageSurround), but the closing div (</div>), for it is after the closing table tag (</table>). If your logo was still to the left, a float:left style added to the topHeaderImg class style would have worked to make the logo clickable. Beacuse your logo is now centred, you would need to create a div that 'floats' with the logo, if the page is made smaller. i.e putting a margin-left would always keep the 'clickable' bit xx amount of pixels away from the left, where as the logo would always be in the centre. Lee Quote Link to comment Share on other sites More sharing options...
Guest JeannieM Posted February 11, 2011 Share Posted February 11, 2011 Hi Jeannie The reason the logo is showing twice is because you have got 2 <div id="topHeader"> in your code. You need to remove the second one (Inside pageSurround), but the closing div (</div>), for it is after the closing table tag (</table>). If your logo was still to the left, a float:left style added to the topHeaderImg class style would have worked to make the logo clickable. Beacuse your logo is now centred, you would need to create a div that 'floats' with the logo, if the page is made smaller. i.e putting a margin-left would always keep the 'clickable' bit xx amount of pixels away from the left, where as the logo would always be in the centre. Lee Lee, Great advice! I managed to remove the extra logo. Now, I understand what you are saying about creating a div that 'floats', but I don't know exactly how do do that. Can you help? Anyone? Thanks so much, Jeannie Quote Link to comment Share on other sites More sharing options...
Guest JeannieM Posted February 11, 2011 Share Posted February 11, 2011 Here is an update on what I've got now. My logo is still centered, but there is still no sign of it being clickable. in /styleSheets/layout.css .topHeaderImg { float:center; margin-top: 125px; width: 756px; height: 116px; outline: none; } in /styleTemplates/global/cart.tpl <body onload="initialiseMenu();"> <div>{SEARCH_FORM}</div> </div> <div>{SITE_DOCS}</div> <div id="pageSurround"> <div id="topHeader"> <a class="topHeaderImg" href="index.php"></a> <div> in /styleTemplates/global/index/tpl <body onload="initialiseMenu();"> <div>{SEARCH_FORM}</div> </div> <div>{SITE_DOCS}</div> <div id="pageSurround"> <div id="topHeader"> <a class="topHeaderImg" href="index.php"></a> <div> This was all from following advice on this forum, but something is missing I guess. Not clickable. Thanks Quote Link to comment Share on other sites More sharing options...
Guest Posted March 30, 2011 Share Posted March 30, 2011 Here is an update on what I've got now. My logo is still centered, but there is still no sign of it being clickable. in /styleSheets/layout.css .topHeaderImg { float:center; margin-top: 125px; width: 756px; height: 116px; outline: none; } in /styleTemplates/global/cart.tpl <body onload="initialiseMenu();"> <div>{SEARCH_FORM}</div> </div> <div>{SITE_DOCS}</div> <div id="pageSurround"> <div id="topHeader"> <a class="topHeaderImg" href="index.php"></a> <div> in /styleTemplates/global/index/tpl <body onload="initialiseMenu();"> <div>{SEARCH_FORM}</div> </div> <div>{SITE_DOCS}</div> <div id="pageSurround"> <div id="topHeader"> <a class="topHeaderImg" href="index.php"></a> <div> This was all from following advice on this forum, but something is missing I guess. Not clickable. Thanks Jeannie, try this: <div id="topHeader"> <div class="logo"><br /> <a href="/index.php"><img src="skins/{VAL_SKIN}/YOURSKIN/logo/logo.jpg" alt="YOUR STORE NAME" /></a> </div><!--end logo--> </div><!--endTopHeader--> Where: YOURSKIN is replaced by your skin name, assuming that is the location of your logo. and the bits inbetween <!-- --> are comments to help you with the code.Just to add, in your stylesheet: 'float:center' is not a valid CSS control. Floats are either left, or right. I suspect your image is centered because pageSurround has something like: width:990px; margin:0px auto; in the stylesheet, and that is what is centering the whole site to the centre. Quote Link to comment Share on other sites More sharing options...
Guest JeannieM Posted March 31, 2011 Share Posted March 31, 2011 Here is an update on what I've got now. My logo is still centered, but there is still no sign of it being clickable. in /styleSheets/layout.css .topHeaderImg { float:center; margin-top: 125px; width: 756px; height: 116px; outline: none; } in /styleTemplates/global/cart.tpl <body onload="initialiseMenu();"> <div>{SEARCH_FORM}</div> </div> <div>{SITE_DOCS}</div> <div id="pageSurround"> <div id="topHeader"> <a class="topHeaderImg" href="index.php"></a> <div> in /styleTemplates/global/index/tpl <body onload="initialiseMenu();"> <div>{SEARCH_FORM}</div> </div> <div>{SITE_DOCS}</div> <div id="pageSurround"> <div id="topHeader"> <a class="topHeaderImg" href="index.php"></a> <div> This was all from following advice on this forum, but something is missing I guess. Not clickable. Thanks Jeannie, try this: <div id="topHeader"> <div class="logo"><br /> <a href="/index.php"><img src="skins/{VAL_SKIN}/YOURSKIN/logo/logo.jpg" alt="YOUR STORE NAME" /></a> </div><!--end logo--> </div><!--endTopHeader--> Where: YOURSKIN is replaced by your skin name, assuming that is the location of your logo. and the bits inbetween <!-- --> are comments to help you with the code. Just to add, in your stylesheet: 'float:center' is not a valid CSS control. Floats are either left, or right. I suspect your image is centered because pageSurround has something like: width:990px; margin:0px auto; in the stylesheet, and that is what is centering the whole site to the centre. Hi, thanks for your help, but that didn't help. I think I'm just going to live with it as it is, because I've spent way to much time on this detail. CubeCart really could make a bunch more money if they'd only write a manual for us. A lot of wasted time for a great many of us. I'd pay! Anyway, could you tell me now how I could get my SEARCH box back to the right side? Thanks Quote Link to comment Share on other sites More sharing options...
Guest JeannieM Posted March 31, 2011 Share Posted March 31, 2011 Here is an update on what I've got now. My logo is still centered, but there is still no sign of it being clickable. in /styleSheets/layout.css .topHeaderImg { float:center; margin-top: 125px; width: 756px; height: 116px; outline: none; } in /styleTemplates/global/cart.tpl <body onload="initialiseMenu();"> <div>{SEARCH_FORM}</div> </div> <div>{SITE_DOCS}</div> <div id="pageSurround"> <div id="topHeader"> <a class="topHeaderImg" href="index.php"></a> <div> in /styleTemplates/global/index/tpl <body onload="initialiseMenu();"> <div>{SEARCH_FORM}</div> </div> <div>{SITE_DOCS}</div> <div id="pageSurround"> <div id="topHeader"> <a class="topHeaderImg" href="index.php"></a> <div> This was all from following advice on this forum, but something is missing I guess. Not clickable. Thanks Jeannie, try this: <div id="topHeader"> <div class="logo"><br /> <a href="/index.php"><img src="skins/{VAL_SKIN}/YOURSKIN/logo/logo.jpg" alt="YOUR STORE NAME" /></a> </div><!--end logo--> </div><!--endTopHeader--> Where: YOURSKIN is replaced by your skin name, assuming that is the location of your logo. and the bits inbetween <!-- --> are comments to help you with the code. Just to add, in your stylesheet: 'float:center' is not a valid CSS control. Floats are either left, or right. I suspect your image is centered because pageSurround has something like: width:990px; margin:0px auto; in the stylesheet, and that is what is centering the whole site to the centre. Hi, thanks for your help, but that didn't help. I think I'm just going to live with it as it is, because I've spent way to much time on this detail. CubeCart really could make a bunch more money if they'd only write a manual for us. A lot of wasted time for a great many of us. I'd pay! Anyway, could you tell me now how I could get my SEARCH box back to the right side? Thanks 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.