rugrotts Posted November 6, 2016 Share Posted November 6, 2016 (edited) I am an amateur when it comes to css tec but am trying to make my club's website responsive. I first made the site about 12 years ago with an editor but am having trouble with the pop ups. I have tables with all the placements of entries for each show with a pop up photo of each winner. There are anywhere from 15 to 25 pop ups per page. I finally found a scrript that works the pop ups inside tables and I am pleased with it but I have two other problems. 1. I also have a few other ordinary hyperlinks on a page that will not work now as they keep trying to load an image and 2. I attached my header with nav bar and the nav bar is squeezed up. It is not so visible on desktop but on mobile view is very squeezed. I have not up loaded the revised site yet as the old website is in use and the new one is only partially finished. Can anyone help out an old woman? Thanks so much. Have just uploaded the partially completed site. You can see the problem with the links and the nav bar here http://www.wcrc.org.au/Events/Past/14.htm The pupups, (Camera icons) are fine and just the way I want but the script seems to be over powering the regular hyperlinks. Any help would be greatly appreciated. Edited November 6, 2016 by rugrotts Link to comment Share on other sites More sharing options...
dsonesuk Posted November 6, 2016 Share Posted November 6, 2016 You can't have a responsive site using tables, mainly because a table cannot break down from 3 column layout to a 1 column required layout for smaller devices such as phones. This $(function(){ $('#portfolio').magnificPopup({ delegate: 'a', type: 'image', image: { cursor: null, titleSrc: 'title' }, gallery: { enabled: true, preload: [0,1], // Will preload 0 - before current, and 1 after the current image navigateByImgClick: true } }); }); with '#portfolio' will target parent element, and this 'delegate: 'a', will target all anchor elements within parent '#portfolio' and attempt to open image url in href. So you need to remove all actual links within '#portfolio' container element or be more specific parent element that will only affect links within it for instance <span style="font-family: Verdana,sans-serif">DIZIZ ACTIONS SPEAK LOUDER <a href="../../images/0414/Inter-in-show.jpg"> <img width="20" height="20" border="0" src="../../images/camera.gif"> </a> </span> Give parent span class name and reference that instead <span class="portfolio" style="font-family: Verdana,sans-serif">DIZIZ ACTIONS SPEAK LOUDER <a href="../../images/0414/Inter-in-show.jpg"> <img width="20" height="20" border="0" src="../../images/camera.gif"> </a> </span> and change magificpopup code $(function(){ $('.portfolio').magnificPopup({ delegate: 'a', type: 'image', image: { cursor: null, titleSrc: 'title' }, gallery: { enabled: true, preload: [0,1], // Will preload 0 - before current, and 1 after the current image navigateByImgClick: true } }); }); You must lose tables and the use of <font size="2" color="#FF0000"> has been dead and buried for ages now. Link to comment Share on other sites More sharing options...
dsonesuk Posted November 6, 2016 Share Posted November 6, 2016 (edited) You have a lot of misplaced closing tags including span, font, a, div check out https://validator.w3.org/nu/?doc=http%3A%2F%2Fwww.wcrc.org.au%2FEvents%2FPast%2F14.htm 643 errors Edited November 6, 2016 by dsonesuk Link to comment Share on other sites More sharing options...
rugrotts Posted November 7, 2016 Author Share Posted November 7, 2016 Hi, Thanks very much, that works great for the links. Have you any idea why my nav bar squeezed up when I attached it? It is squeezed evn worse on mobile view. Have looked through the css but haven't seen anything that might relate to it. Regards Robin Link to comment Share on other sites More sharing options...
dsonesuk Posted November 7, 2016 Share Posted November 7, 2016 You have a restricted height of 26px on anchor element, then a all-round padding of 10px, the text is being pushed down from top because of this, so text is being pushed outside its anchor boundary at bottom, and being cropped by 26px height restriction and bottom edge of td cell. Remove padding from top and bottom edges. Link to comment Share on other sites More sharing options...
rugrotts Posted November 8, 2016 Author Share Posted November 8, 2016 Hi Worked, took me a while to find it but all ok now. Thanks very much Robin Link to comment Share on other sites More sharing options...
dsonesuk Posted November 8, 2016 Share Posted November 8, 2016 What you coud do, is use jquery to add classname to anchor elements whose href references a image type $("a[href*='.jpg'],a[href*='.png'],a[href*='.gif']").parent().addClass('portfolio'); Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now