Trying to use a CSS sprite navigation
Permalink
Hello,
i have built a nav bar, using the CSS sprite method. Using an unordered list and appropriate CSS code. I have inserted the HTML code into an HTML block , then saved the html block into the global scrapbook (so that i can modify it and it will update throughout site).the list item code for each link is like this for each li element:
It works fine until i do a search with the search block. Once and search is initiated, if i hover over the links and look in the bottom left hand corner of the browser at the link path, it seems to have altered the link path, Example:
What was before:
and of course if clicked will return page not found..
not sure what is going on , im sure its something simple
any ideas????
Thanks
Colby
i have built a nav bar, using the CSS sprite method. Using an unordered list and appropriate CSS code. I have inserted the HTML code into an HTML block , then saved the html block into the global scrapbook (so that i can modify it and it will update throughout site).the list item code for each link is like this for each li element:
<li id="oppNewsLink"><a href="news">news</a></li>
It works fine until i do a search with the search block. Once and search is initiated, if i hover over the links and look in the bottom left hand corner of the browser at the link path, it seems to have altered the link path, Example:
What was before:
http://localhost/opposition_c5/news is now: http://localhost/opposition_c5/index.php/news/news
and of course if clicked will return page not found..
not sure what is going on , im sure its something simple
any ideas????
Thanks
Colby
i tried this , however it did not work......isnt there a way to force it to get the themes path??
i've seen this work in different circumstances, where the src of an img is preceded by this:
would putting this in the href attribute make sense??
i cant be the first person to have had this problem
i've seen this work in different circumstances, where the src of an img is preceded by this:
<?php echo $this->getThemePath()?>
would putting this in the href attribute make sense??
i cant be the first person to have had this problem
Aha! I see what's going on here. Sorry, I was assuming that you were using the autonav block, not hard-coding links to pages.
Okay, the problem is that by not starting the "href" with a slash, you're telling the browser that it's a relative path to the current location. That's probably why it's adding an extra "news" to the URL.
The best way to do these navigation menus is really to create a custom template for the autonav block (search the docs and forums, there are tons of resources on how to do this). This has the advantage of automatically ouputting the correct URL's to all pages of your site, and automatically updating the links when pages are added, moved, changed or deleted.
If you just want to get this done the way you have it now, though, then you're correct -- there is a function you use, which I believe is this:
This function converts the relative path into an absolute URL that will always go to the correct page.
Hope that helps!
-Jordan
Okay, the problem is that by not starting the "href" with a slash, you're telling the browser that it's a relative path to the current location. That's probably why it's adding an extra "news" to the URL.
The best way to do these navigation menus is really to create a custom template for the autonav block (search the docs and forums, there are tons of resources on how to do this). This has the advantage of automatically ouputting the correct URL's to all pages of your site, and automatically updating the links when pages are added, moved, changed or deleted.
If you just want to get this done the way you have it now, though, then you're correct -- there is a function you use, which I believe is this:
View::url('news');
This function converts the relative path into an absolute URL that will always go to the correct page.
Hope that helps!
-Jordan
That didnt quite work , however you pointed me in the right direction. The HTML block wouldnt parse the PHP code when i put it in the href tag; so i recreated the ul in a PHP block , and used echo to bring in the html i needed. Then used DIR_REL to get the root, and then appended it with /news , for ever li item. that did the trick....
like this:
This will work for this project b/c its for the top nav bar and will not change to much
i did consider using the auto-nav block, but i am not yet to familiar with creating custom templates; i have only done one before for the core search block, seemed pretty easy though. Creating a custom auto-nav template may be a little more complex b/c when using CSS sprite for graphical rollovers, you have to specify a unique ID for every li element; so that you can have the CSS position the graphic correctly. I may try to tackle that another day.
Thanks for the help
like this:
This will work for this project b/c its for the top nav bar and will not change to much
i did consider using the auto-nav block, but i am not yet to familiar with creating custom templates; i have only done one before for the core search block, seemed pretty easy though. Creating a custom auto-nav template may be a little more complex b/c when using CSS sprite for graphical rollovers, you have to specify a unique ID for every li element; so that you can have the CSS position the graphic correctly. I may try to tackle that another day.
Thanks for the help
That forces C5 to always output "pretty URL's" instead of url's with the "index.php" in it.
Although it's weird that it's doubling up the output of "news/news" in the second url -- so this solution may not fix the problem, but it's worth a shot.
Good luck.
-Jordan