Perhaps both are a side effect of using flexbox (which I'm new at). I'm trying to fiddle with HTML first before going to a PHP template design. Right now, I have some issues:
1.) My UL in my #left ID is not full height and height: 100% only makes it worse. (It's not bad the way it is now, just that I wish it could be full height.)
2.) When zooming in enough, the horizontal scroll fails to appear (I CAN get one at the very bottom by adding overflow: auto; to the body style, but that will put it at the very bottom, where you have to scroll to the very bottom to see it, which is not very user friendly.)
(Also, now that I think of it, for some of my other pages, I may end up adding content to the ul area via JS. That might affect the height thing for all I know.. Wish I could put this after the code block below, but I can't figure out how to move past it without accidentally adding to it.)
Here is what I have:
<html>
<head>
<title> First Baptist Church of LaSalle </title>
<!-- You can use Open Graph tags to customize link previews.
Learn more: https://developers.facebook.com/docs/sharing/webmasters -->
<meta property="og:url" content="http://firstbaptistchurchoflasalle.com/" />
<meta property="og:type" content="website" />
<meta property="og:title" content="First Baptist Church of LaSalle" />
<meta property="og:description" content="The website of First Baptist Church of LaSalle" />
<meta property="og:image" content="http://sprbc.org/images/banner1.jpg" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" href="./churchImage.png">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
</head>
<body>
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.8";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<style>
.headerDiv
{
background-color: rgb(90, 7, 31);
width: 1000px;
height: 200px;
color: white;
}
body
{
//background-color: beige;
//overflow: auto;
//background-image:url(./Crumpled_Paper_-_White.gif);
background-image:url(./forest.jpg);
background-size: cover;
}
ul
{
height: auto;
//width: auto;
//background-color: #122213;
border-style: solid;
border-color: brown;
border-width: 10px;
list-style-type: none;
background-image:url(./greenFelt.jpg);
//border-image-source: url(./wood.jpg);
border-image-width: 10px;
border-image: url(./wood.jpg) 30 stretch;
margin: 0;
//float: left;
//height: 100%;
//height: 100%;
width: 100%;
}
li
{
font-weight: bold;
font-style: italic;
width: auto;
// background-size: 100%;
text-align: center;
font-family: "Palatino Linotype", Serif;
position: relative;
background-image:url(./Crumpled_Paper_-_White.gif);
background-position:center;
background-repeat:no-repeat;
opacity: 1.0;
font-size: 7px;
padding-top: 5px;
padding-right: 3px;
padding-bottom: 5px;
padding-left: 8px;
margin: 10px;
text-align: center;
//background-size: 100% 100%;
background-size: 100%;
white-space: nowrap;
}
li a
{
text-decoration: none;
color: black;
}
li a:hover:after
{
content:"\A";
//width:92%;
width: 97%;
// height:88%;
height: 100%;
background:rgba(143, 158, 208, 0.5);
position:absolute;
top:0;
// top: 2.5;
right: 0.0;
// left: 2.0;
left: 1.7;
bottom: 0;
}
li:before
{
content: url(./pin.png);
display: block;
position: absolute;
left: 0px;
top: 0px;
}
li a:hover
{
//background-color: #2233dd;
// opacity: .9;
}
.flex-container {
display: -webkit-inline-flex;
display: -ms-inline-flexbox;
display: inline-flex;
width: auto;
height: auto;
}
.flex-item {
width: auto;
height: auto;
margin: 2px;
padding: 2px 2px 2px 2px;
// margin: 0px;
}
#middle
{
font-family: "Palatino Linotype";
font-size: 14px;
font-style: italic;
}
#right
{
background-color: grey;
font-family: Arial, Helvetica, adobe-helvetica, Arial Narrow;
font-size: 13px;
background-image: url(./stone.jpg);
}
#container
{
max-width: 1000px;
overflow: auto;
width: 1000px;
height: auto;
margin: 0 auto;
}
</style>
<div id="container">
<div class="headerDiv"> <center><h1> First Baptist Church of LaSalle </h1></center>
</div>
<div style="margin: 0; border: 1px solid blue; width: 1000px; height: auto; background-color: tan;" class="flex-container">
<div style="margin: 0;" class="flex-item w3-card-4" id="left">
<ul>
<li> <a href="http://www.firstbaptistchurchoflasalle.com/index.html"> Home</a></li><br/>
<li> <a href="http://www.firstbaptistchurchoflasalle.com/AboutUs.html">About Us</a></li><br/>
<li> <a href="http://www.firstbaptistchurchoflasalle.com/AboutUs.html">Pastoral Staff</a> </li><br/>
<li> <a href="http://www.firstbaptistchurchoflasalle.com/AboutUs.html">Sunday School </a></li><br/>
<li> <a href="http://www.firstbaptistchurchoflasalle.com/AboutUs.html">Services & Directions</a></li><br/>
<li> <a href="http://www.firstbaptistchurchoflasalle.com/AboutUs.html">Calendar </a></li><br/>
<li> <a href="http://www.firstbaptistchurchoflasalle.com/AboutUs.html">Activities</a> </li><br/>
<li> <a href="http://www.firstbaptistchurchoflasalle.com/AboutUs.html">Contact Us </a></li><br/>
<li> <a href="http://www.firstbaptistchurchoflasalle.com/AboutUs.html">Sermons </a></li><br/>
<li> <a href="http://www.firstbaptistchurchoflasalle.com/AboutUs.html">Weekly Bulletin </a></li><br/>
</ul>
</div>
<div class="flex-item" id="middle">
<p> For over 175 years, First Baptist Church has been a testament of God's grace, faithfulness, and blessings. We give God the praise for all He has done in and through our church. Since 1839, First Baptist Church has been through many trials, but God has been faithful. </p>
<br>
<p>First Baptist Church has been through fires, two major depressions, burglaries, and war. But through it all, God has been faithful. We have seen souls saved, people baptized, men going into the ministry, men and women going to the mission field, and men, women and children taught to faithfully serve their Lord. As members, we can all say, "To God Be the Glory!" </p>
<br>
<center><img src="./bible.jpg" style="width: 100px; height: 50px;"></img></center><br>
<h1 style="text-decoration: underline; font-weight: bold;"> Our Objective </h1>
<p> We believe that First Baptist Church is here to carry on the Lord's work. The church is His church and it is here for His cause and His glory. We have the obligation to faithfully preach the Word of God. We have the privilege of telling others about our wonderful Savior. We have the opportunity to help other believers in their Christian lives. We have the responsibility to carry out the ordinances of the Lord's Supper and Believer's Baptism. It is a wonderful thing to be given the opportunity to be a part of His work.</p> <br>
<h1 style="text-decoration: underline; font-weight: bold;"> Our Beliefs</h1>
<h2 style="font-weight: bold;">The Scriptures</h2>
*We believe that the Bible is the infallible, inherent, verbally, plenary, inspired Word of God.
*We believe that God has promised to preserve His Word and that He has.
*We believe that the King James Version is accurate and is the only English text we accept and use.
*The Bible is our sole authority.
(II Timothy 3:16, 17; II Peter 1:21; Matthew 5:18)
</div>
<div style="margin: 0;" class="flex-item w3-card-4" id="right">
<U>Contact Information </U><br>
<B> PHONE: </B> 815.223.1333 <br>
<B> FAX: </B> 815.223.1334 <br>
<br>
<B>ADDRESS: </B> 200 - 24th Street <br>
P. O. Box 1043 <br>
LaSalle, IL 61301 <br>
<br>
<b>EMAIL: </b> <a target="_self" style="color: blue;" href="mailto:fbclasalle@gmail.com">fbclasalle@gmail.com</a><br>
<br>
<br>
<b> LaSalle-Peru Christian School </b> <br>
is a ministry of <br>
First Baptist Church <br>
Visit the school's website at <br>
<a target="_blank" style="color: blue;" href="http://www.lpchristian.org/"> www.lpchristian.org</a> <br>
<br>
<center><a target="_blank" href="https://www.facebook.com/First-Baptist-Church-of-LaSalle-106794612807864/"><img style="width: 90px; height: 38px;" src="./fb_follow.png"></img></a></center><br><br>
<center><img style="width: 100px; height: 100px;" src="./pastorwaddle.jpg"></img></center><br>
<center>Pastor Wesley Waddle</center>
</div>
</div>
<footer style="background-color: gold; width: 1000px; height: 200px; margin: 0;">
<center> <div style="font-weight: bold;"> © 2017 - First Baptist Church of LaSalle </div> </center>
<center><div class="flex-container">
<div class="fb-like flex-item" data-href="https://www.facebook.com/First-Baptist-Church-of-LaSalle-106794612807864/" data-width="80" data-layout="standard" data-action="like" data-size="small" data-show-faces="true" data-share="true"></div>
<!-- Place this tag where you want the share button to render. -->
<div class="g-plus flex-item" data-action="share" data-width="150" data-href="http://firstbaptistchurchoflasalle.com/"></div>
<!-- Place this tag after the last share tag. -->
<script type="text/javascript">
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/platform.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script>
<div style="color: black;" class="flex-item"><a href="https://twitter.com/share" class="twitter-share-button" data-text="Come visit our church!" data-size="small">Tweet</a> <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
</div>
</div> </center>
</footer>
</div>
</body>
</html>
UPDATE:
I was going to say that my trick of removing the div around the ul and applying the class flex styles to the ul instead worked to get it full height. However, I am wondering how I can deal with it otherwise, in the event that I ever had two or more direct children in there instead of just a ul.
I suppose I can have a flex item that holds a flex container that would hold two or more direct children. Any other ideas?