I’m designing the bottom section for a website that should contain three lists, arranged horizontally, each with its own points, which are links or text.
I tried to create an unordered list, with 3 other unordered lists as points, each having its own <li> points.Then the outer list use flexbox to display other lists titles and it work, but link1,link2,etc are still horizontal.
<code>.endpage {
width: 100%;
background-color: #333;
position: fixed;
height: 100px;
bottom: 0;
}
.endpage ul {
display: flex;
}
.endpage-titles {
list-style: none;
padding-left: 10%;
padding-right: 10%;
padding-top: 2%;
font-family: djr-banner-bold;
font-size: 28px;
letter-spacing: 2px;
text-shadow: 1px #000;
color: #ffffff;
}</code>
<code>.endpage {
width: 100%;
background-color: #333;
position: fixed;
height: 100px;
bottom: 0;
}
.endpage ul {
display: flex;
}
.endpage-titles {
list-style: none;
padding-left: 10%;
padding-right: 10%;
padding-top: 2%;
font-family: djr-banner-bold;
font-size: 28px;
letter-spacing: 2px;
text-shadow: 1px #000;
color: #ffffff;
}</code>
.endpage {
width: 100%;
background-color: #333;
position: fixed;
height: 100px;
bottom: 0;
}
.endpage ul {
display: flex;
}
.endpage-titles {
list-style: none;
padding-left: 10%;
padding-right: 10%;
padding-top: 2%;
font-family: djr-banner-bold;
font-size: 28px;
letter-spacing: 2px;
text-shadow: 1px #000;
color: #ffffff;
}<code><div class="endpage">
<ul class="endpage-titles">
<ul class="endpage-subtitles">CONTACTS</ul>
<li>link1</li>
<li>link2</li>
<li>link3</li>
<ul class="endpage-subtitles">LINKS</ul>
<li>link1</li>
<li>link2</li>
<ul class="endpage-subtitles">MAPS</ul>
<li>link1</li>
</ul>
</div></code>
<code><div class="endpage">
<ul class="endpage-titles">
<ul class="endpage-subtitles">CONTACTS</ul>
<li>link1</li>
<li>link2</li>
<li>link3</li>
<ul class="endpage-subtitles">LINKS</ul>
<li>link1</li>
<li>link2</li>
<ul class="endpage-subtitles">MAPS</ul>
<li>link1</li>
</ul>
</div></code>
<div class="endpage">
<ul class="endpage-titles">
<ul class="endpage-subtitles">CONTACTS</ul>
<li>link1</li>
<li>link2</li>
<li>link3</li>
<ul class="endpage-subtitles">LINKS</ul>
<li>link1</li>
<li>link2</li>
<ul class="endpage-subtitles">MAPS</ul>
<li>link1</li>
</ul>
</div>
New contributor
Luca Biagini is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.