So I've been battling with this conumdrum for a while now and can't figure out what's going on
I've been tasked with replicating this layout: At first, I created this using a <p> class for "Table of Contents" before the menuProxy but I ended up with a gap between the heading and the menuProxy: I couldn't figure out how to remove the gap between the two. This is my CSS:
Code: Select all
p.InternalTOC
{
border-left-color: #aaa;
border-left-style: solid;
border-left-width: 1px;
border-right-color: #aaa;
border-right-style: solid;
border-right-width: 1px;
border-top-color: #aaa;
border-top-style: solid;
border-top-width: 1px;
color: #000000;
font-size: 1.2em;
padding-left: 10px;
padding-right: 10px;
padding-top: 10px;
margin-top: 10px;
text-align: center;
}
Code: Select all
/* Internal TOC Title */
ul.menu._Skins_InternalTOC.mc-component::before
{
content: "Table of Contents";
color: #000000;
font-size: 1.2em;
display: block;
padding-top: 40px;
padding-bottom: 40px;
text-align: center;
}/
Code: Select all
/* Internal TOC Title */
ul.menu._Skins_InternalTOC.mc-component::before
{
content: "Table of Contents";
color: #000000;
font-size: 1.2em;
display: block;
}
.padding
{
padding-top: 40px;
padding-bottom: 40px;
text-align: center;
}/
I think my problem is a lack of understanding for the content property. Is there a way to fully format the text in "content" rather than just colour, size, and so on? Or am I barking up the wrong tree and it's something (glaringly obvious) else I should use? TIA.