* Margin below photos

Questions regarding use of any Version of Family Historian. Please ensure you have set your Version of Family Historian in your Profile. If your question fits in one of these subject-specific sub-forums, please ask it there.
Post Reply
User avatar
craigmollekin
Famous
Posts: 247
Joined: 06 Mar 2009 00:28
Family Historian: V6.2
Location: Rotherham, South Yorkshire, England
Contact:
Contact craigmollekin

Margin below photos

Post by craigmollekin » 02 Feb 2013 21:43

Hi,

I am in the process of generating a website using Family Historian but there is a problem niggling at me.

How can I reduce the margin between the bottom of the photos and the text?  Such a deep margin seems pointless to me.  I have attached a photo to try and illustrate what I mean; I am wanting to reduce the space between the bottom of the photos and the text field where it begins, 'Name: Janet Kitson'

Kind Regards,

Craig MollekinImage

ID:6739
Top
User avatar
Jane
Site Admin
Posts: 8442
Joined: 01 Nov 2002 15:00
Family Historian: V7
Location: Somerset, England
Contact:
Contact Jane

Margin below photos

Post by Jane » 03 Feb 2013 11:03

I presume you have turned off the captions which normally appear in that space.

If so you should be able to adjust the CSS which FH generates to reduce the space down.
Top
User avatar
craigmollekin
Famous
Posts: 247
Joined: 06 Mar 2009 00:28
Family Historian: V6.2
Location: Rotherham, South Yorkshire, England
Contact:
Contact craigmollekin

Margin below photos

Post by craigmollekin » 03 Feb 2013 13:01

Thanks, Jane. I also adjusted the settings in 'picture gaps' options but what ever value is entered makes no different to the gaps generated on the site. I don't know if that is just a problem with my computer/browser.

But I had a feeling I'd end up having to tinker with the CSS. Or most likely, I'll just learn to live with the unusually large and untidy gaps [grin][grin]
Top
User avatar
tatewise
Megastar
Posts: 27088
Joined: 25 May 2010 11:00
Family Historian: V7
Location: Torbay, Devon, UK
Contact:
Contact tatewise

Margin below photos

Post by tatewise » 03 Feb 2013 13:55

Although I could eliminate the gaps using the following settings on the Report Options > Pictures tab:
Untick Show Captions with Pictures
Picture Gaps button Gap Below Picture (and Caption if any): 0 mm
The gaps still remained in the HTML page due to the CSS settings.

The solution is to use the Website Wizard Step 8: Final Details page Advanced button.
In the ...at the end of the <HEAD> section insert:

Code: Select all

<style type="text/css">
<!--
.fhimgwrap { text-align: center; margin-bottom: 0em; }
.fhimgrow p { min-height: 0em; }
-->
</style>
Use larger em values to increase the gap.
The values in fhstyle.css are 2em and 4em respectively.
Top
User avatar
craigmollekin
Famous
Posts: 247
Joined: 06 Mar 2009 00:28
Family Historian: V6.2
Location: Rotherham, South Yorkshire, England
Contact:
Contact craigmollekin

Margin below photos

Post by craigmollekin » 03 Feb 2013 14:01

Fantastic! That's great, tatewise, thanks; that's a big help.
Top
User avatar
tatewise
Megastar
Posts: 27088
Joined: 25 May 2010 11:00
Family Historian: V7
Location: Torbay, Devon, UK
Contact:
Contact tatewise

Margin below photos

Post by tatewise » 03 Feb 2013 15:02

See Make a Family Tree CD/DVD or Website for associated advice.
In particular Step 8 – Final Details and Set Page Background
where it explains how to employ a customised my.css file.

Your own my.css file would contain:

.fhimgwrap { text-align: center; margin-bottom: 0em; }
.fhimgrow p { min-height: 0em; }

then if you need to change or add any other CSS style, you only have to edit the my.css file and upload it to your website, instead of having to rebuild every page.
Top
User avatar
craigmollekin
Famous
Posts: 247
Joined: 06 Mar 2009 00:28
Family Historian: V6.2
Location: Rotherham, South Yorkshire, England
Contact:
Contact craigmollekin

Margin below photos

Post by craigmollekin » 04 Feb 2013 21:24

Thanks, Mike. I have managed to do this and the result looks good. However, I put the code into the '...at the end of the <HEAD> section' AND put the following into my.css (with corresponding 'em' values:-

Code: Select all

.fhimgwrap { text-align: center; margin-bottom: 0em; } 
.fhimgrow p { min-height: 0em; }
However, is it necessary to put the code in BOTH places?
Top
User avatar
tatewise
Megastar
Posts: 27088
Joined: 25 May 2010 11:00
Family Historian: V7
Location: Torbay, Devon, UK
Contact:
Contact tatewise

Margin below photos

Post by tatewise » 04 Feb 2013 22:23

If you employ your own my.css file, then place only the following code in the ...at the end of the <HEAD> section:

Code: Select all

<link rel=“stylesheet” type=“text/css” href=“my.css”>
This tells every web page to use your my.css file to supplement the fhstyle.css file.

Thereafter, simply changing the contents of that file will affect all your web pages, without needing to change any web pages.

I have added a new Knowledge Base page at Alter CSS Default Styles to explain this technique and provide a link to a CSS Tutorial.
Top
User avatar
craigmollekin
Famous
Posts: 247
Joined: 06 Mar 2009 00:28
Family Historian: V6.2
Location: Rotherham, South Yorkshire, England
Contact:
Contact craigmollekin

Margin below photos

Post by craigmollekin » 04 Feb 2013 22:26

Thanks, Mike. It works fine with the code in both places, but I'll tweek it a bit so it's set out as per your instructions.
Top
User avatar
tatewise
Megastar
Posts: 27088
Joined: 25 May 2010 11:00
Family Historian: V7
Location: Torbay, Devon, UK
Contact:
Contact tatewise

Margin below photos

Post by tatewise » 04 Feb 2013 22:42

As explained in the CSS Tutorial if you put styles in both the section and in an external .css file, then one overrides the other depending on their order.

Example 1:

Code: Select all

<style type="text/css">
<!--
.fhimgwrap { text-align: center; margin-bottom: 0em; }
.fhimgrow p { min-height: 0em; }
-->
</style>

<link rel="stylesheet" type="text/css" href="my.css">
Here the my.css file will take precedence.

Example 2:

Code: Select all

<link rel="stylesheet" type="text/css" href="my.css">

<style type="text/css">
<!--
.fhimgwrap { text-align: center; margin-bottom: 0em; }
.fhimgrow p { min-height: 0em; }
-->
</style>
Here the local styles will override the my.css file if they both define the same characteristics.

I would strongly advise only putting styles in the my.css file.
Top
User avatar
craigmollekin
Famous
Posts: 247
Joined: 06 Mar 2009 00:28
Family Historian: V6.2
Location: Rotherham, South Yorkshire, England
Contact:
Contact craigmollekin

Margin below photos

Post by craigmollekin » 05 Feb 2013 11:09

Thanks, Mike.  I think I’m tying myself in knots with this.  Css code isn’t really my bag, lol.  When I added code to the ’...at the end of the section’ and code to my.css, I got a nice narrow margin as below.

I cannot replicate what I did above though whilst trying to do this ‘properly’.  I add the following to the ’...at the end of the <head> section’:-

Code: Select all

<link rel="stylesheet" type="text/css" href="my.css">
AND then the following to my.css:-

Code: Select all

body { background: url(collage.jpg) }
<style type="text/css">
<!--
.fhimgwrap { text-align: center; margin-bottom: 0em; }
.fhimgrow p { min-height: 0em; }
-->
</style>
However, even though the margin is narrower than the default FH settings, it’s not as good as the first example.  Any ideas of on what I’m doing wrong?Image
Top
User avatar
tatewise
Megastar
Posts: 27088
Joined: 25 May 2010 11:00
Family Historian: V7
Location: Torbay, Devon, UK
Contact:
Contact tatewise

Margin below photos

Post by tatewise » 05 Feb 2013 12:30

The tutorial w3schools ~ Three Ways to Insert CSS is worth a look.

The format:

Code: Select all

<style type="text/css">
:   :   :
:   :   :
</style>
is only used to embed internal style CSS codes in the <head> section.

Your external style sheet my.css file should contain just the CSS codes:

Code: Select all

body { background: url("collage.jpg") }
.fhimgwrap { text-align: center; margin-bottom: 0em; }
.fhimgrow p { min-height: 0em; }
Top
User avatar
craigmollekin
Famous
Posts: 247
Joined: 06 Mar 2009 00:28
Family Historian: V6.2
Location: Rotherham, South Yorkshire, England
Contact:
Contact craigmollekin

Margin below photos

Post by craigmollekin » 05 Feb 2013 13:10

Thanks, Mike. When I inject

Code: Select all

<link rel="stylesheet" type="text/css" href="my.css">
into the ...at the end of the <head> section AND:-

Code: Select all

body { background: url("collage.jpg") }
.fhimgwrap { text-align: center; margin-bottom: 0em; }
.fhimgrow p { min-height: 0em; }
into the my.css, nothing happens.

I doubt 90% of the people who buy Family Historian have got a clue how to edit or create a style sheet. It would be nice if Calico Pie fixed the bug where 'gap between pictures' feature worked on html as well as in reports.
Top
User avatar
tatewise
Megastar
Posts: 27088
Joined: 25 May 2010 11:00
Family Historian: V7
Location: Torbay, Devon, UK
Contact:
Contact tatewise

Margin below photos

Post by tatewise » 05 Feb 2013 14:42

It is a problem with double string quotes characters.
There are two subtle variants " " and “ ” and the latter form is not recognised in HTML scripts:
This is OK:

Code: Select all

<link rel="stylesheet" type="text/css" href="my.css">
This is not!

Code: Select all

<link rel=“stylesheet” type=“text/css” href=“my.css”>
Unfortunately, the Forums default to the latter form and I had not spotted that.
So copy & paste from earlier in this thread will not work! Sorry!

The examples in the Knowledge Base pages are OK, as is the OK example above.

Regarding HTML Report formatting, unfortunately there are too many Options to mention that do NOT work in HTML.
None of the Layout tab Column Indents transfer to HTML.
etc, etc, etc.
Several have been reported to Calico Pie, but not fixed yet.
Top
User avatar
craigmollekin
Famous
Posts: 247
Joined: 06 Mar 2009 00:28
Family Historian: V6.2
Location: Rotherham, South Yorkshire, England
Contact:
Contact craigmollekin

Margin below photos

Post by craigmollekin » 05 Feb 2013 14:50

Brilliant, thanks again Mike; you've been a great help. I'll have another dabble tonight and hopefully finally crack it. I'm sure the quotes, when pasted into Family Historian, are in the correct format, so I'm not sure that this is going to work.
Top
User avatar
craigmollekin
Famous
Posts: 247
Joined: 06 Mar 2009 00:28
Family Historian: V6.2
Location: Rotherham, South Yorkshire, England
Contact:
Contact craigmollekin

Margin below photos

Post by craigmollekin » 05 Feb 2013 14:57

So, Mike, just to confirm; I put the following into the '....at the end of <HEAD> section':-

Code: Select all

<link rel="stylesheet" type="text/css" href="my.css">
AND then I place the following into my my.css file:-

Code: Select all

body { background: url("collage.jpg") }
.fhimgwrap { text-align: center; margin-bottom: 0em; }
.fhimgrow p { min-height: 0em; }
I will make sure the quotes okay of course.
Top
User avatar
tatewise
Megastar
Posts: 27088
Joined: 25 May 2010 11:00
Family Historian: V7
Location: Torbay, Devon, UK
Contact:
Contact tatewise

Margin below photos

Post by tatewise » 05 Feb 2013 15:15

Yes, that is perfect.

In the FH Wizard > ...at the end of <HEAD> section settings, the wrong quotes appear as vertical bars |.

Also in Internet Explorer and Firefox if you right-click on any FH web page and choose View [Page] Source the wrong quotes are shown as question marks ? (sometimes in a black diamond).
Top
User avatar
craigmollekin
Famous
Posts: 247
Joined: 06 Mar 2009 00:28
Family Historian: V6.2
Location: Rotherham, South Yorkshire, England
Contact:
Contact craigmollekin

Margin below photos

Post by craigmollekin » 05 Feb 2013 18:53

It's working fine now, thanks, Mike.  Many thanks for all your help with this.
Top
Post Reply

Return to “General Usage”