Jump to content

problems with css


rugrotts

Recommended Posts

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 by rugrotts
Link to comment
Share on other sites

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

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

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

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...