I'm having a hard time explaining this. But, basically, in Google Chrome I have an issue where I placed an image to the bottom of a div and there is a 1px border or "buffer at the bottom that I can't remove.
Here's what I see!
Chrome:
Opera:
I want the Chrome one to look like the Opera one.
Here is the code!
This is the CSS
Mind the sloppiness. This website is in a rough draft right now.
#media screen and (max-width: 450px) {
* {
padding: 0;
margin: 0;
outline: none;
}
.mmenu {
z-index: -1;
position: absolute;
width: 100%;
height: 100%;
background-color: #aaa;
}
.mobileBody {
z-index: 1;
background-color: #fff;
}
.mhead {
background-image: url(../img/head.jpg);
background-size: cover;
background-position: center;
margin: 0;
padding: 0;
position: relative;
}
.logo {
margin: auto;
}
img.logoImg {
width: 175px;
height: auto;
margin: auto;
margin-top: 15px;
}
.mhead img.cut {
margin: 0;
margin-top: 1px;
padding: 0;
width: 100%;
height: auto;
position: absolute;
bottom: 0;
left: 0;
vertical-align: bottom;
}
.card {
background-color: #fff;
width: 100%;
height: auto;
}
.final {
display: flex;
}
.flavImg {
display: flex;
justify-content: center;
align-items:center;
width: 45%;
}
.flavImg img {
height: 80%;
width: auto;
}
.flavDesc {
display: flex;
justify-content: center;
align-items: center;
flex-flow: column;
}
.flavDesc h1 {
font-size: 21pt;
text-align: left;
font-family: 'Dancing Script', cursive;
-webkit-font-smoothing: subpixel-antialiased;
margin-bottom: 5px;
}
.flavDesc p {
font-size: 11pt;
text-align: left;
font-family: 'Ledger', serif;
line-height: 125%;
-webkit-font-smoothing: subpixel-antialiased;
margin-top: 5px;
}
.edit {
display: none;
}
}
This is in Jade.
Mind the sloppiness. This website is in a rough draft right now.
doctype html
html
head
title Conecopia Gelato - Ice Cream The Italian Way!
meta(name="description" content="Conecopia Gelato LLC. is a small family owned Italian ice cream (gelato) stand located within the Springfield Town Center Smart Market in Springfield VA. At Conecopia we strive to make the most flavorful ice cream possible for our customers to enjoy.")
meta(name="keywords" content="Gealto,Ice cream,Farmers market,Italian,flavor,fruit,juice,summer,virginia,VA,springfield,springfield town center,saturday,smart market")
meta(name="author" content="Anthony F. DeSante")
meta(name="viewport" content="width=device-width, initial-scale=1.0")
link(href="https://fonts.googleapis.com/css?family=Dancing+Script|Ledger" rel="stylesheet")
link(rel="stylesheet" type="text/css" href="ast/css/index.css")
body
.computer
.mobile
.mmenu
ul.mmainNav
a(href="#")
li Home
a(href="#")
li Flavors
a(href="#")
li Contact Us
a(href="#")
li About
ul.mlowerNav
a(href="#")
li Home
.msocialmedia
//Social Media Icons Go Here.
.mobileBody
.mhead
.logo
img(src="./ast/img/logo.png").logoImg
img(src="./ast/img/cut.png").cut
.mWeekFlavs.dispHor
.row
.card
.final
.flavImg
img(src="./ast/img/icecream.png")
.flavDesc
.flavName
h1 Flavor Name
.flavText
p Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis aliquam vulputate diam, nulla mattis, sed dictum velit vulputate. Praesent sed justo eu odio laoreet ornare. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
.edit.ifAdmin
form(method="post" action="#")
input(type="file" name="image" accept="image/*")
input(name="flavName" type="text" placeholder="Flavor Name" value="")
textarea(row="5" col="auto")
input(type="reset")
input(name="save" type="submit" value="Save")
.statusBar
span#head
.mAllFlavs.dispHor
br
br
br
br
br
br
br
br
br
br
br
br
br
br
br
br
br
br
br
br
br
br
br
br
br
br
br
br
br
This is the HTML (Processed through PrePros)
It's here for those who don't like Jade?
<!DOCTYPE html>
<html>
<head>
<title>Conecopia Gelato - Ice Cream The Italian Way!</title>
<meta name="description" content="Conecopia Gelato LLC. is a small family owned Italian ice cream (gelato) stand located within the Springfield Town Center Smart Market in Springfield VA. At Conecopia we strive to make the most flavorful ice cream possible for our customers to enjoy.">
<meta name="keywords" content="Gealto,Ice cream,Farmers market,Italian,flavor,fruit,juice,summer,virginia,VA,springfield,springfield town center,saturday,smart market">
<meta name="author" content="Anthony F. DeSante">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css?family=Dancing+Script|Ledger" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="ast/css/index.css">
</head>
<body>
<div class="computer"></div>
<div class="mobile">
<div class="mmenu">
<ul class="mmainNav"><a href="#">
<li>Home</li></a><a href="#">
<li>Flavors</li></a><a href="#">
<li>Contact Us</li></a><a href="#">
<li>About</li></a></ul>
<ul class="mlowerNav"><a href="#">
<li>Home</li></a></ul>
<div class="msocialmedia">
<!--Social Media Icons Go Here.-->
</div>
</div>
<div class="mobileBody">
<div class="mhead">
<div class="logo"><img class="logoImg" src="./ast/img/logo.png"></div><img class="cut" src="./ast/img/cut.png">
</div>
<div class="mWeekFlavs dispHor">
<div class="row">
<div class="card">
<div class="final">
<div class="flavImg"><img src="./ast/img/icecream.png"></div>
<div class="flavDesc">
<div class="flavName">
<h1>Flavor Name</h1>
</div>
<div class="flavText">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis aliquam vulputate diam, nulla mattis, sed dictum velit vulputate. Praesent sed justo eu odio laoreet ornare. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
</div>
</div>
</div>
<div class="edit ifAdmin">
<form method="post" action="#">
<input type="file" name="image" accept="image/*">
<input name="flavName" type="text" placeholder="Flavor Name" value="">
<textarea row="5" col="auto"></textarea>
<input type="reset">
<input name="save" type="submit" value="Save">
</form>
</div>
</div>
</div>
<div class="statusBar"><span id="head"></span></div>
</div>
<div class="mAllFlavs dispHor"></div>
</div>
</div>
</body>
</html><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
So if anybody has a way to remove the 1px "buffer" please send it in!
To ensure no extra default padding/margins are added (and it does vary from browser to browser) put this at the TOP of your css
* {
margin: 0;
padding: 0;
}
This will get rid of any default auto-added margins and padding. I added this to your css (i removed the extra 1px margin also, and some excess html/css)
Got this and don't see any issue (I'm using the latest Chrome)
Hope this helps
Apparently, I found a solution...
It took me a while to realize that I was just flat out doing bad code.
For those who are wondering, In order to fix this I just wrapped my whole "body" section of my body in a div called <div class="MobileBody">
(Everything except the head) </div>. Then I used the pseudo-element ::before and set the background to the image. After that, all I had to do was mess around with the alignment and the background position and size to make it work out!
I hope that was understandable.
Related
I have the page which has section, nav, article. The section contains nav and article. As of now the nav and article occupy the full page. But what I need is the article and nav should be in the center of the page.
What I referred to is https://www.w3schools.com/html/html_layout.asp and developed the web page.
My html code looks like this
<header class="header header-default header">
<div class="container-fluid">
<div class="header-header">
<a class="header-brand" href="#">
<img></img></a>
</a>
<h1>My application</h1>
</div>
</div>
</header>
<section>
<nav>
<label for='Date'>Choose the booking date:</label>
<input type='text' name='datefield' id='datepicker' readonly='true' placeholder="Select the booking date...">
<input class="btn btn-success" type='button' id='submit' value='Submit'>
</nav>
<article>
<div>
<p></p>
</div>
</article>
</section>
My css looks like this
/* Create two columns/boxes that floats next to each other */
nav {
float: left;
width: 30%;
height: 300px; /* only for demonstration, should be removed */
background: #ccc;
padding: 20px;
}
article {
float: left;
padding: 20px;
width: 70%;
background-color: #f1f1f1;
height: 300px; /* only for demonstration, should be removed */
}
/* Clear floats after the columns */
section:after {
content: "";
display: table;
clear: both;
}
/* Responsive layout - makes the two columns/boxes stack on top of each other instead of next to each other, on small screens */
#media (max-width: 600px) {
nav, article {
width: 100%;
height: auto;
}
}
By refering this CSS Getting The Article Center have included margin-left: auto; margin-right: auto; in the 'section'
section:after {
content: "";
display: table;
clear: both;
margin-left: auto;
margin-right: auto;
It didnt give me the expected output what i want.
The expected output is:
The nav and article should be in the middle of the page.
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="C:Users/annap/code/interview-scheduler/qxf2_scheduler/static/css/qxf2_scheduler.css" rel="stylesheet">
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Abel|Open+Sans:400,600" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<style>
/* Create two columns/boxes that floats next to each other */
nav {
float: left;
width: 30%;
height: 300px; /* only for demonstration, should be removed */
background: #ccc;
padding: 20px;
}
article {
float: left;
padding: 20px;
width: 70%;
background-color: #f1f1f1;
height: 300px; /* only for demonstration, should be removed */
}
/* Clear floats after the columns */
section:after {
content: "";
display: table;
clear: both;
}
/* Responsive layout - makes the two columns/boxes stack on top of each other instead of next to each other, on small screens */
#media (max-width: 600px) {
nav, article {
width: 100%;
height: auto;
}
}
</style>
</head>
<body>
<header class="header header-default header">
<div class="container-fluid">
<div class="header-header">
<a class="header-brand" href="#">
<img></img></a>
</a>
<h1>My application</h1>
</div>
</div>
</header>
<section>
<nav>
<label for='Date'>Choose the booking date:</label>
<input type='text' name='datefield' id='datepicker' readonly='true' placeholder="Select the booking date...">
<input class="btn btn-success" type='button' id='submit' value='Submit'>
</nav>
<article>
<div>
<p></p>
</div>
</article>
</section>
</body>
</html>
What I need is the choose the booking date(nav) and the article should be in middle leaving the space in the left and right. As of now, you can see it's the full width of the page
You did right, just one mistake - you didn't account padding in your width. Please try.
/* Create two columns/boxes that floats next to each other */
nav {
float: left;
width: calc(30% - 40px);
height: 300px; /* only for demonstration, should be removed */
background: #ccc;
padding: 20px;
}
article {
float: left;
padding: 20px;
width: calc(70% - 40px);
background-color: #f1f1f1;
height: 300px; /* only for demonstration, should be removed */
}
/* Clear floats after the columns */
section:after {
content: "";
display: table;
clear: both;
}
/* Responsive layout - makes the two columns/boxes stack on top of each other instead of next to each other, on small screens */
#media (max-width: 600px) {
nav, article {
width: 100%;
height: auto;
}
}
<header class="header header-default header">
<div class="container-fluid">
<div class="header-header">
<a class="header-brand" href="#">
<img></img></a>
</a>
<h1>My application</h1>
</div>
</div>
</header>
<section>
<nav>
<label for='Date'>Choose the booking date:</label>
<input type='text' name='datefield' id='datepicker' readonly='true' placeholder="Select the booking date...">
<input class="btn btn-success" type='button' id='submit' value='Submit'>
</nav>
<article>
<div>
<p></p>
</div>
</article>
</section>
I'm sure that you do need the padding, so I'd suggest just removing the float: left; and width: 70%; in your article and let it fill the rest of the place automatically :
section {
max-width: 100%;
}
nav {
float: left;
width: 30%;
height: 300px;
/* only for demonstration, should be removed */
background: #ccc;
padding: 20px;
}
article {
padding: 20px;
background-color: #f1f1f1;
height: 300px;
/* only for demonstration, should be removed */
}
/* Clear floats after the columns */
section:after {
content: "";
display: table;
clear: both;
}
/* Responsive layout - makes the two columns/boxes stack on top of each other instead of next to each other, on small screens */
#media (max-width: 600px) {
nav,
article {
width: 100%;
height: auto;
}
}
<header class="header header-default header">
<div class="container-fluid">
<div class="header-header">
<h1>My application</h1>
</div>
</div>
</header>
<section>
<nav>
<label for='Date'>Choose the booking date:</label>
<input type='text' name='datefield' id='datepicker' readonly='true' placeholder="Select the booking date...">
<input class="btn btn-success" type='button' id='submit' value='Submit'>
</nav>
<article>
<div>
<p></p>
</div>
</article>
</section>
Thanks I have found the solutions for it. I have added the margin-left and margin-right auto in section after. But Now what I tried is I have added these two lines in the sections.
section {
max-width: 80%;
margin-right: auto;
margin-left: auto;
}
I didn't do any changes other than this and it worked.
I've added a separate variant with a flexbox. It's easy to implement and you need to worry about width and paddings.
/* Create two columns/boxes that floats next to each other */
section {
display: flex;
flex-direction: row;
}
nav {
/* only for demonstration, should be removed */
background: #ccc;
padding: 20px;
min-width: 30%;
}
article {
padding: 20px;
background-color: #f1f1f1;
flex-grow: 1;
}
/* Responsive layout - makes the two columns/boxes stack on top of each other instead of next to each other, on small screens */
#media (max-width: 600px) {
section {
flex-direction: column;
}
}
<header class="header header-default header">
<div class="container-fluid">
<div class="header-header">
<a class="header-brand" href="#">
<img src="" alt="">
</a>
<h1>My application</h1>
</div>
</div>
</header>
<section>
<nav>
<label for='Date'>Choose the booking date:</label>
<input type='text' name='datefield' id='datepicker' readonly='true' placeholder="Select the booking date...">
<input class="btn btn-success" type='button' id='submit' value='Submit'>
</nav>
<article>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et ligula orci. Quisque in diam quis risus pellentesque sagittis sed sit amet mauris. Nullam ante nulla, pulvinar sit amet efficitur vitae, porttitor et est. Donec bibendum massa feugiat aliquet rutrum. Maecenas et ante vitae dolor dapibus luctus. Sed eget risus nisi. Praesent ultrices velit eu nisi faucibus ultrices. Suspendisse in facilisis odio.
</p>
<p> Donec at odio sit amet nulla bibendum ornare pulvinar vitae nulla. Curabitur eu erat et nulla vehicula porta. Curabitur quis luctus magna. Nullam vestibulum pretium risus eget accumsan. Nullam commodo turpis massa, tincidunt tempus lacus maximus non. Pellentesque facilisis finibus urna ut volutpat. Etiam placerat urna at venenatis bibendum.</p>
</div>
</article>
</section>
I got this issue that a portrait is overlapping my nav bar.
And I've been looking around and trying to find a fix, but no luck.
I have tried z-index, but sadly didn't work at all.
My code for the section:
/*Navbar CSS*/
.topNavMain,
.topNavMain ul {
margin: 0;
padding: 0;
background: rgba(227, 232, 237, 0.40);
color: #5f6f81;
list-style: none;
text-transform: none;
text-decoration: none;
width: 100%;
font-weight: 300;
font-family: 'Lato', Arial, sans-serif;
line-height: 60px;
z-index: 999 !important;
}
/*img class CSS*/
.imgPortrait {
width: 80%;
z-index: -999;
overflow: hidden;
}
<section id="aboutMe" class="contentS">
<div class="container">
<div class="row">
<div class="col slideIn margin-fix">
<h2 class="contentT">About me</h2>
<p class="shortText">Lorem ipsum dolor sit amet, consectetur adipiscing elit. <br> Fusce mollis pretium felis id ultricies. Sed libero risus, volutpat vel rhoncus et, auctor non ipsum. <br> Praesent sollicitudin nibh nisl, et sagittis nulla ornare at.</p>
</div>
<div class="col slideIn2">
<img src="img/portrait.jpg" alt="" class="imgPortrait img-fluid"></img>
</div>
</div>
</div>
</section>
Screenshot of my issue:
Click here.
Just a simple fix, you need to apply a z-index to the div containing the nav, not just the ul.
#navDiv {
z-index: 1;
}
In my case the arrows of the carousal overlapped with the navbar. As the arrow icons already had z-index as 1 so in my case I had to make the z-index of the navbar div as 2 and it worked.
This question already has answers here:
CSS margin terror; Margin adds space outside parent element [duplicate]
(7 answers)
Closed 4 years ago.
I am trying to create a space above "Affordable Professional Web Design" in the image below, so that it creates a space which is occupied by the image
However when I do so, it only seems to push the image down and leaves white space (indicated in red). I am trying to do this by applying margin-top although cannot find a resolution. Any ideas how to resolve?
Web Page Image
/* Global */
.container {
width: 80%;
margin: auto;
overflow;
hidden;
}
body {
font-family: Arial, Helvetica, sans-serif;
margin: 0;
}
ul {
margin: 0;
padding: 0;
}
/* Header */
header {
background-color: #35424a;
border-bottom: orange solid;
min-height: 70px;
padding-top: 30px;
color: #ffffff;
}
header #branding {
float: left;
}
header #branding h1 {
margin: 0;
}
header li {
float: left;
list-style: none;
padding: 0 10px 0 10px;
}
header nav {
float: right;
text-transform: uppercase;
}
header a {
text-decoration: none;
color: #ffffff;
}
#highlight,
#current a {
color: #e8491d;
}
nav a:hover {
color: orange;
}
/* Showcase */
#showcase {
min-height: 400px;
background: url('../countryside.jpg') no-repeat;
background-size: cover;
text-align: center;
color: #ffffff;
}
#showcase h1 {
margin-top: 100px;
padding: 30px;
text-align: center;
color: #ffffff;
font-size: 50px;
}
#showcase p {
text-align: center;
color: #ffffff;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>My Website</title>
<link rel="stylesheet" href="styles.css" />
<meta name="viewport" width="device-width" />
</head>
<body>
<header>
<div class="container">
<div id="branding">
<h1><span id="highlight">Test</span> Web Design</h1>
</div>
<nav>
<ul>
<li id="current">Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
</div>
</header>
<section id="showcase">
<div class="container">
<h1>Affordable Professional Web Design</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eget nulla molestie, dictum purus vel, dapibus turpis. Aliquam malesuada laoreet ante. Integer dictum ipsum sed arcu commodo laoreet ultrices ac est. Nullam sagittis eget arcu nec
mollis.
</p>
</div>
</section>
<section id="newsletter">
<div class="container">
<form>
<h2>Subscribe to our newsletter</h2>
<input type="email" placeholder="Enter email..." />
<button type="submit">Submit</button>
</form>
</div>
</section>
<section class="boxes">
<div class="container">
<div class="box">
<img src="HTML.png" alt="" />
<h3>HTML Markup</h3>
<p>In a orci nec nunc posuere placerat. Etiam imperdiet libero ac enim faucibus, ac commodo lacus mollis.</p>
</div>
<div class="box">
<img src="css.png" height="200px" alt="" />
<h3>CSS3 Styling</h3>
<p>In a orci nec nunc posuere placerat. Etiam imperdiet libero ac enim faucibus, ac commodo lacus mollis.</p>
</div>
<div class="box">
<img src="graphic_design.svg" height="300px" alt="" />
<h3>Graphic Design</h3>
<p>In a orci nec nunc posuere placerat. Etiam imperdiet libero ac enim faucibus, ac commodo lacus mollis.</p>
</div>
</div>
</section>
</body>
Instead of margin try using padding:
#showcase h1{
padding:100px 30px 30px 30px;
text-align:center;
color:#ffffff;
font-size:50px;
}
So I have been searching everywhere for different solutions to this issue, and I am now not sure whether it is the way I have written out my HTML. I am using PHP to include the navigation file and the footer file into all other files, on the index.php page (Homepage), the sticky footer works and stays at the bottom of the page regardless of content, however every other page, the footer is at the bottom but when content is added, it remains in the same place and just covers the content instead of getting pushed down.
Header HTML
<?php echo '
<html>
<head>
<script src="/*/*/jquery-3.3.1.min.js"></script>
<script src="/*/*/jquery-ui.min.js"></script>
<link href="/*/*/bootstrap.min.css" rel="stylesheet">
<link href="/*/*/jquery-ui.min.css" rel="stylesheet">
<link href="css/stylesheet.css" rel="stylesheet">
<link href="css/media.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Amaranth" rel="stylesheet">
<title> * </title>
</head>
<body>
<div id="wholeNav">
<div class="navBar">
Videos
</div>
<div class="navBar">
<h2 class="headerMain"><a id="pageTitle" href="index.php">*</a></h2>
</div>
<div class="navBar">
Photos
</div>
<div id="leftNav" class="socialNav">
Instagram <span class="displayNoneMobile">nameHere</span>
</div>
<div id="middleNav" class="socialNav">
YouTube <span class="displayNoneMobile">nameHere</span>
</div>
<div id="rightNav" class="socialNav">
Twitter <span class="displayNoneMobile">nameHere</span>
</div>
</div>
</body>
</html>
';?>
Footer HTML
<?php include 'headnav.php' ;?>
<?php echo '
<div id="footer">
<div class="footerInfo topTwo">
About
</div>
<div class="footerInfo topTwo">
Legal
</div>
<div class="footerInfo bottomFour">
Contact
</div>
<div class="footerInfo bottomFour">
Instagram
</div>
<div class="footerInfo bottomFour">
YouTube
</div>
<div class="footerInfo bottomFour">
Twitter
</div>
<div id="copyrightInfo">
<p>© All Content Owned By * - Website Designed By *</p>
</div>
</div>
';?>
Other Page HTML
<?php include 'headnav.php' ;?>
<div id="container">
<div class="headerDiv">
<h3 class="headerMainTwo">Terms & Conditions</h3>
</div>
<div class="infoBox">
<p class="legalTerms">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Egestas fringilla phasellus faucibus scelerisque. Donec ultrices tincidunt arcu non. Quis ipsum suspendisse ultrices gravida dictum fusce. Luctus venenatis lectus magna fringilla urna porttitor rhoncus.
</p>
</div>
<?php include 'footer.php' ;?>
</div>
Footer CSS
html{
position: relative;
min-height: 100% !important;
}
body{
margin: 0;
padding: 0;
font-family: 'Amaranth', sans-serif !important;
overflow-x: hidden;
}
#footer{
height: 200px;
background-color: #d8445e;
width: 100%;
position: absolute;
left: 0;
bottom: 0;
right: 0;
display: flex;
justify-content: center;
align-items: center;
}
Other Page CSS
.headerDiv{
margin-top: 15vh;
width: 100%;
background-color: #d8445e;
height: 10vh;
position: absolute;
display: flex;
justify-content: center;
align-items: center;
color: #FFF;
border-top: 2px solid #FFF;
}
.infoBox{
margin-left: 15%;
width: 67.7vw;
height: 50vh;
position: absolute;
margin-top: 28vh;
font-size: 16px;
}
Thank you for taking the time to read this, I understand it may be a duplicate post however I have looked at so many posts about this issue and none of those fixes seemed to help my site, so thought it best to ask myself.
This is one of the projects from free coding camp on the frontend certficate.
I'm trying to align the bullet points of the li elements as well as make a footer at the bottom of the page using bootstrap.
Codepen Link
Codepen html:
<html>
<head>
<title>Mark Dean Tribute Page</title>
<link href="https://fonts.googleapis.com/css?family=Keania+One" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Crimson+Text" rel="stylesheet">
</head>
<body>
<div class="container-fluid">
<h1 class="text-center main-header"> The Mark Dean <br /> Tribute Page</h1>
<hr />
<div class="row header ">
<div class="col-md-4">
<a><img class="header-image img-fluid" src="http://res.cloudinary.com/digg1kcz8/image/upload/v1496080685/20170529_121539_foudov.jpg"></a>
</div>
<div class="col-md-4">
<a><img class="header-image img-fluid" src="http://res.cloudinary.com/digg1kcz8/image/upload/v1496080684/20170529_121729_p74ux7.jpg"></a>
</div>
<div class="col-md-4">
<a><img class="header-image img-fluid"src="http://res.cloudinary.com/digg1kcz8/image/upload/v1496080685/20170529_121615_rpox2c.jpg"></a>
</div>
<div class="list-div" style="width = 25%; margin-left: auto; margin-right: auto; ">
<ul class="facts">
<li><p>Mark Dean was born 1957 in jefferson city</p></li>
<li><p>1982 Dean earned his master's degree in electrical engineering from Florida Atlantic university</p></li>
<li><p>1992 Dean graduated and completed his doctorate from Stanford university</p></li>
<li><p>1996 he was the first African American ever to rexeive the honor as an ibm fellow</p></li>
<li><p>1997 he was honered with the black engineer of the year presidents award and was inducted into the hall of national inventors</p></li>
<li><p>1999 Mark Dean lead a team of engineers to develop a gigahertZ chip</p></li>
<li><p> Working closely with a colleague, Mark Dean developed USA industry standard architecture system bus</p></li>
<li><p>Facts preview Nulla consequat purus velit, vitae lobortis nibh tempus at. Donec sollicitudin vitae lobortis nibh tempus at. et sem id placerat.</p></li>
<li><p>Facts preview Nulla consequat purus velit, vitae lobortis nibh tempus at. vitae lobortis nibh tempus at. Donec sollicitudin et sem id placerat.</p></li>
<li><p>Facts preview vitae lobortis nibh tempus at. Nulla consequat purus velit, vitae lobortis nibh tempus at. Donec sollicitudin et sem id placerat.</p></li>
<li><p>Visit here to read more about Mark Dean</p></li>
</div>
</ul>
</div>
<footer class="footer navbar-default navbar-fixed-bottom">
<div class="container-fluid">
<p>This was coded and Created by <em>Terrell Wright</em></p>
</div>
</footer>
</div>
</body>
</html>
codepen css:`
body {
background-color: rgb(41, 41, 41);
margin-left: 30px;
margin-right: 30px;
}
.main-header {
font-family: 'Keania one', serif;
color: rgb(82, 68, 50);
font-size: 64px;
margin-bottom: 100px;
}
.header-image {
width: 300px;
height: 300px;
border-radius: 20px;
border: 5px solid #3D3124;
margin-top: 10px;
margin-left: 15px;
}
.header {
background-color: #3D3730;
border-radius: 30px;
}
hr {
background-color: #524432;
margin-bottom: 80px;
height: 1px;
border-radius: 20px;
}
.facts {
text-align: center;
}
.facts li {
display: list-style;
list-style: circle;
font-family: "Crimson Text", serif;
font-size: 24px;
color: black;
/* bootstrap floats to left - for override
*/
}
.facts li:first-child {
margin-top: 40px;
} `
Using bootstrap 4 (per your codepen), you can add .d-flex.text-center.flex-column.align-items-center to .facts and remove text-align: center from your css. That will put the contents of .facts in a flex column, center align the children and center align the text. That will put the bullets beside each flex child.
Then to fix the footer to the bottom of the screen, add .navbar.fixed-bottom.justify-content-center; to the footer to fix it to the bottom of the screen and vertically align the contents. Then assign a height to it, and use that height value as padding-bottom on body to make room for the menu.
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<html>
<head>
<title>Mark Dean Tribute Page</title>
<link href="https://fonts.googleapis.com/css?family=Keania+One" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Crimson+Text" rel="stylesheet">
<style>
body {
background-color: rgb(41, 41, 41);
margin-left: 30px;
margin-right: 30px;
padding-bottom: 50px;
}
.main-header {
font-family: 'Keania one', serif;
color: rgb(82, 68, 50);
font-size: 64px;
margin-bottom: 100px;
}
.header-image {
width: 300px;
height: 300px;
border-radius: 20px;
border: 5px solid #3D3124;
margin-top: 10px;
margin-left: 15px;
}
.header {
background-color: #3D3730;
border-radius: 30px;
}
hr {
background-color: #524432;
margin-bottom: 80px;
height: 1px;
border-radius: 20px;
}
.facts li {
display: list-style;
list-style: circle;
font-family: "Crimson Text", serif;
font-size: 24px;
color: black;
/* bootstrap floats to left - for override
*/
}
.facts li:first-child {
margin-top: 40px;
}
.footer {
color: #fff;
background: rgba(0,0,0,0.5);
height: 50px;
}
footer p {
margin: 0;
}
</style>
</head>
<body>
<div class="container-fluid">
<h1 class="text-center main-header"> The Mark Dean <br /> Tribute Page</h1>
<hr />
<div class="row header ">
<div class="col-md-4">
<a><img class="header-image img-fluid" src="http://res.cloudinary.com/digg1kcz8/image/upload/v1496080685/20170529_121539_foudov.jpg"></a>
</div>
<div class="col-md-4">
<a><img class="header-image img-fluid" src="http://res.cloudinary.com/digg1kcz8/image/upload/v1496080684/20170529_121729_p74ux7.jpg"></a>
</div>
<div class="col-md-4">
<a><img class="header-image img-fluid"src="http://res.cloudinary.com/digg1kcz8/image/upload/v1496080685/20170529_121615_rpox2c.jpg"></a>
</div>
<div class="list-div" style="width = 25%; margin-left: auto; margin-right: auto; ">
<ul class="d-flex text-center facts flex-column align-items-center">
<li><p>Mark Dean was born 1957 in jefferson city</p></li>
<li><p>1982 Dean earned his master's degree in electrical engineering from Florida Atlantic university</p></li>
<li><p>1992 Dean graduated and completed his doctorate from Stanford university</p></li>
<li><p>1996 he was the first African American ever to rexeive the honor as an ibm fellow</p></li>
<li><p>1997 he was honered with the black engineer of the year presidents award and was inducted into the hall of national inventors</p></li>
<li><p>1999 Mark Dean lead a team of engineers to develop a gigahertZ chip</p></li>
<li><p> Working closely with a colleague, Mark Dean developed USA industry standard architecture system bus</p></li>
<li><p>Facts preview Nulla consequat purus velit, vitae lobortis nibh tempus at. Donec sollicitudin vitae lobortis nibh tempus at. et sem id placerat.</p></li>
<li><p>Facts preview Nulla consequat purus velit, vitae lobortis nibh tempus at. vitae lobortis nibh tempus at. Donec sollicitudin et sem id placerat.</p></li>
<li><p>Facts preview vitae lobortis nibh tempus at. Nulla consequat purus velit, vitae lobortis nibh tempus at. Donec sollicitudin et sem id placerat.</p></li>
<li><p>Visit here to read more about Mark Dean</p></li>
</div>
</ul>
</div>
<footer class="footer navbar fixed-bottom justify-content-center">
<div class="container-fluid">
<p>This was coded and Created by <em>Terrell Wright</em></p>
</div>
</footer>
</div>
</body>
</html>