This is a responsive layout using 4 cells (columns) which I am using as a footer.
Queries I cannot resolve are above in yellow, and, would appreciate your help on are:
How can I reduce the gaps between the lines to just 1 or 1.5
How do I get background colour in the white gap
Many thanks.
Reduce line space and fill gap in responsive layout
Reduce line space and fill gap in responsive layout
You do not have the required permissions to view the files attached to this post.
Newbie to MadCap Flare
Re: Reduce line space and fill gap in responsive layout
I managed to reduce the line spacing on the Stylesheet - amended the <p> tag with less spacing and that's resolved it.
The white gaps however continue to be an issue
The white gaps however continue to be an issue
Newbie to MadCap Flare
Re: Reduce line space and fill gap in responsive layout
Can you please help me resolve this issue with the gaps in my footer I've put a yellow rectangle around the issue.
Aim is for this footer to have a block of blue background colour but as you can see there are gaps in it.
Here is the coding:
<?xml version="1.0" encoding="utf-8"?>
<html xmlns:MadCap="http://www.madcapsoftware.com/Schemas/MadCap.xsd">
<head>
</head>
<body>
<MadCap:topicToolbarProxy class="" style="mc-topic-toolbar-items: ;" />
<MadCap:breadcrumbsProxy />
<div class="row">
<div class="large-1 columns">
<MadCap:menuProxy style="mc-context-sensitive: True;mc-include-parent: True;mc-include-siblings: True;mc-include-children: True;" />
</div>
<div class="large-9 large-offset-1 columns">
<MadCap:bodyProxy />
</div>
</div>
</body>
<div class="Tiles-3-3-3-3" style="background-repeat: no-repeat;background-image: none;">
<div style="background-image: none;padding-left: 0px;padding-right: 0px;padding-top: 0px;padding-bottom: 0px;">
<p style="color: #ffffff;font-size: 12pt;padding-left: 50px;">
<p style="font-size: 12pt;color: #ffffff;padding-left: 150px;padding-right: 90px;"><b class="bUnd" style="text-decoration: none;">Contact us</b>
</p>
<p>
<hr />
</p>
</p>
<p class="lesslinespace" style="padding-left: 150px;padding-right: 90px;"> hiddenwording</p>
<p class="lesslinespace" style="padding-left: 150px;padding-right: 90px;">hiddenwording </p>
<p class="lesslinespace" style="padding-left: 150px;padding-right: 90px;">hiddenwording </p>
<p class="lesslinespace" style="padding-left: 150px;padding-right: 90px;">hiddenwording</p>
<p class="lesslinespace" style="padding-left: 150px;padding-right: 90px;">hiddenwording</p>
<p class="lesslinespace" style="padding-left: 150px;padding-right: 90px;">Phone: hiddenwording</p>
<p> </p>
<p> </p></div>
<div style="background-image: none;padding-left: 0px;padding-right: 0px;padding-top: 0px;padding-bottom: 0px;">
<p style="color: #ffffff;font-size: 12pt;">
<p style="font-size: 12pt;color: #ffffff;padding-left: 150px;"><b class="bUnd" style="text-decoration: none;">Solutions</b>
</p>
<p>
<hr />
</p>
</p>
<p class="lesslinespace" style="padding-left: 150px;padding-right: 100px;">Radiology
</p>
<p class="lesslinespace" style="padding-left: 150px;padding-right: 100px;">Maternity
</p>
<p class="lesslinespace" style="padding-left: 150px;padding-right: 100px;">Electronic Health Records
</p>
<p class="lesslinespace" style="padding-left: 150px;padding-right: 100px;">Oncology
</p>
<p class="lesslinespace" style="padding-left: 150px;padding-right: 100px;">Pathology
</p>
<p class="lesslinespace" style="padding-left: 150px;padding-right: 100px;">
<p class="lesslinespace">
<p class="lesslinespace" style="padding-left: 150px;padding-right: 100px;">Data Management Services
</p>
<p> </p><p> </p></p>
<p> </p>
</p>
</div>
<div style="background-image: none;padding-left: 0px;padding-right: 0px;padding-top: 0px;padding-bottom: 0px;">
<p style="font-size: 12pt;color: #ffffff;">
<p style="font-size: 12pt;color: #ffffff;padding-left: 100px;"><b class="bUnd" style="text-decoration: none;">About us</b>
</p>
<p>
<hr />
</p>
</p>
<p class="lesslinespace" style="padding-left: 100px;padding-right: 100px;">About</p>
<p class="lesslinespace" style="padding-left: 100px;padding-right: 100px;">News</p>
<p class="lesslinespace" style="padding-left: 100px;padding-right: 100px;">Events</p>
<p class="lesslinespace" style="padding-left: 100px;padding-right: 100px;">Privacy policy</p>
<p class="lesslinespace" style="padding-left: 100px;padding-right: 100px;">
<p class="lesslinespace" style="padding-left: 100px;padding-right: 100px;">Support</p>
<p> </p>
<p> </p> <p> </p></p>
</div>
<div style="background-image: none;padding-left: 0px;padding-right: 0px;padding-top: 0px;padding-bottom: 0px;">
<p style="font-size: 12pt;color: #ffffff;">
<p style="font-size: 12pt;color: #ffffff;padding-left: 0px;padding-right: 200px;"><b class="bUnd" style="text-decoration: none;">Follow us</b>
</p>
<p>
<hr />
</p>
</p>
<p style="padding-left: 0px;padding-right: 200px;">
<img src="../Images/_Logo/48_tw.png" style="width: 47px;height: 47px;" /> <img src="../Images/_Logo/48_li.png" style="width: 47px;height: 47px;" /></p>
<p>
<p style="padding-left: 0px;padding-right: 200px;">
<img src="../Images/_Logo/ISO-9001-1019.png" style="height: 47px;width: 90px;" /> <img src="../Images/_Logo/ISOIEC-27001.png" style="width: auto;height: 47px;" /></p>
<p style="padding-left: 0px;padding-right: 200px;">
<img src="../Images/_Logo/Cyber-Essentials-Logo.png" style="width: auto;height: 47px;" /> <img src="../Images/_Logo/corips.png" style="width: auto;height: 47px;" /></p>
</p>
</div>
</div>
</html>
Aim is for this footer to have a block of blue background colour but as you can see there are gaps in it.
Here is the coding:
<?xml version="1.0" encoding="utf-8"?>
<html xmlns:MadCap="http://www.madcapsoftware.com/Schemas/MadCap.xsd">
<head>
</head>
<body>
<MadCap:topicToolbarProxy class="" style="mc-topic-toolbar-items: ;" />
<MadCap:breadcrumbsProxy />
<div class="row">
<div class="large-1 columns">
<MadCap:menuProxy style="mc-context-sensitive: True;mc-include-parent: True;mc-include-siblings: True;mc-include-children: True;" />
</div>
<div class="large-9 large-offset-1 columns">
<MadCap:bodyProxy />
</div>
</div>
</body>
<div class="Tiles-3-3-3-3" style="background-repeat: no-repeat;background-image: none;">
<div style="background-image: none;padding-left: 0px;padding-right: 0px;padding-top: 0px;padding-bottom: 0px;">
<p style="color: #ffffff;font-size: 12pt;padding-left: 50px;">
<p style="font-size: 12pt;color: #ffffff;padding-left: 150px;padding-right: 90px;"><b class="bUnd" style="text-decoration: none;">Contact us</b>
</p>
<p>
<hr />
</p>
</p>
<p class="lesslinespace" style="padding-left: 150px;padding-right: 90px;"> hiddenwording</p>
<p class="lesslinespace" style="padding-left: 150px;padding-right: 90px;">hiddenwording </p>
<p class="lesslinespace" style="padding-left: 150px;padding-right: 90px;">hiddenwording </p>
<p class="lesslinespace" style="padding-left: 150px;padding-right: 90px;">hiddenwording</p>
<p class="lesslinespace" style="padding-left: 150px;padding-right: 90px;">hiddenwording</p>
<p class="lesslinespace" style="padding-left: 150px;padding-right: 90px;">Phone: hiddenwording</p>
<p> </p>
<p> </p></div>
<div style="background-image: none;padding-left: 0px;padding-right: 0px;padding-top: 0px;padding-bottom: 0px;">
<p style="color: #ffffff;font-size: 12pt;">
<p style="font-size: 12pt;color: #ffffff;padding-left: 150px;"><b class="bUnd" style="text-decoration: none;">Solutions</b>
</p>
<p>
<hr />
</p>
</p>
<p class="lesslinespace" style="padding-left: 150px;padding-right: 100px;">Radiology
</p>
<p class="lesslinespace" style="padding-left: 150px;padding-right: 100px;">Maternity
</p>
<p class="lesslinespace" style="padding-left: 150px;padding-right: 100px;">Electronic Health Records
</p>
<p class="lesslinespace" style="padding-left: 150px;padding-right: 100px;">Oncology
</p>
<p class="lesslinespace" style="padding-left: 150px;padding-right: 100px;">Pathology
</p>
<p class="lesslinespace" style="padding-left: 150px;padding-right: 100px;">
<p class="lesslinespace">
<p class="lesslinespace" style="padding-left: 150px;padding-right: 100px;">Data Management Services
</p>
<p> </p><p> </p></p>
<p> </p>
</p>
</div>
<div style="background-image: none;padding-left: 0px;padding-right: 0px;padding-top: 0px;padding-bottom: 0px;">
<p style="font-size: 12pt;color: #ffffff;">
<p style="font-size: 12pt;color: #ffffff;padding-left: 100px;"><b class="bUnd" style="text-decoration: none;">About us</b>
</p>
<p>
<hr />
</p>
</p>
<p class="lesslinespace" style="padding-left: 100px;padding-right: 100px;">About</p>
<p class="lesslinespace" style="padding-left: 100px;padding-right: 100px;">News</p>
<p class="lesslinespace" style="padding-left: 100px;padding-right: 100px;">Events</p>
<p class="lesslinespace" style="padding-left: 100px;padding-right: 100px;">Privacy policy</p>
<p class="lesslinespace" style="padding-left: 100px;padding-right: 100px;">
<p class="lesslinespace" style="padding-left: 100px;padding-right: 100px;">Support</p>
<p> </p>
<p> </p> <p> </p></p>
</div>
<div style="background-image: none;padding-left: 0px;padding-right: 0px;padding-top: 0px;padding-bottom: 0px;">
<p style="font-size: 12pt;color: #ffffff;">
<p style="font-size: 12pt;color: #ffffff;padding-left: 0px;padding-right: 200px;"><b class="bUnd" style="text-decoration: none;">Follow us</b>
</p>
<p>
<hr />
</p>
</p>
<p style="padding-left: 0px;padding-right: 200px;">
<img src="../Images/_Logo/48_tw.png" style="width: 47px;height: 47px;" /> <img src="../Images/_Logo/48_li.png" style="width: 47px;height: 47px;" /></p>
<p>
<p style="padding-left: 0px;padding-right: 200px;">
<img src="../Images/_Logo/ISO-9001-1019.png" style="height: 47px;width: 90px;" /> <img src="../Images/_Logo/ISOIEC-27001.png" style="width: auto;height: 47px;" /></p>
<p style="padding-left: 0px;padding-right: 200px;">
<img src="../Images/_Logo/Cyber-Essentials-Logo.png" style="width: auto;height: 47px;" /> <img src="../Images/_Logo/corips.png" style="width: auto;height: 47px;" /></p>
</p>
</div>
</div>
</html>
You do not have the required permissions to view the files attached to this post.
Newbie to MadCap Flare
Re: Reduce line space and fill gap in responsive layout
Put the footer content inside a container like a <div> or <footer> tag, and set the background colour on that.
HTML:
CSS:
Also, the entire footer <div> is outside of the closing </body> tag, which means it's invalid HTML - it needs to be inside the body tag.
HTML:
Code: Select all
<footer>
<div class="Tiles-3-3-3-3" style="background-repeat: no-repeat;background-image: none;">
...
</footer>
Code: Select all
footer { background-color: #0000ff; }Re: Reduce line space and fill gap in responsive layout
I tried the footer inside the body tag but my footer was as wide as the body content (for obvious reasons). I need my footer to be as wide as the browser window and not as wide as the body please?Dave Lee wrote:.....Also, the entire footer <div> is outside of the closing </body> tag, which means it's invalid HTML - it needs to be inside the body tag.
Newbie to MadCap Flare