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>
Related
Basically, I am trying to centre the Contact Form and its Submit button. I've tried a couple CSS suggestions but they do not change it's placement, still being stuck to the left as the button is oddly to the far right of the form. All advice and tips will be appreciated. Just know I am still new to coding so my skills are quite limited as I'm still learning.
Here's a picture of the Contact Us page:
#font-face {
Src: url(customfont/Futuristic.ttf);
font-family: Future;
}
.Contact-box {
position: static;
transform: none;
}
h1 {
margin-bottom: 1rem;
color: red;
text-align: center;
font-size: 40px;
font-family: Future;
}
form {
display: inline-block;
flex-direction: column;
width: 24rem;
gap: 1rem;
margin-left: auto;
margin-right: auto;
}
input,
textarea {
padding: 1.5rem;
background: transparent;
border: 2px solid white;
border-radius: 15px;
width: 400px;
}
textarea {
height: 7rem;
}
button {
width: 8rem;
padding: 1rem;
cursor: pointer;
background: blue;
color: black;
}
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div class="logo">
<img src="https://via.placeholder.com/95" width="95" />
</div>
<div class="coolname">
<img src="https://via.placeholder.com/105" width="105" />
</div>
<nav>
<ul>
<li class="current-page">Home</li>
<li>About Us</li>
<li>Services</li>
<li>Consultation & Quotes</li>
<li>Contact Us</li>
<li>Client Referrals</li>
<li>Blog</li>
</ul>
</nav>
<br><br>
<h1>Contact Us!</h1>
<div class="Contact-box">
<br><br>
<form style="align:center;">
<input type="text" name="Name" placeholder="First and Last Name" required>
<input type="text" name="Email" placeholder="example#email.com" required>
<input type="text" name="Subject" placeholder="Subject Line" required>
<textarea name="Message" placeholder="Message" required></textarea>
<br><br>
<button type="submit">Send</button>
<br><br>
</form>
</div>
<footer>
<div class="bottom-content">
<h3>Geek Yourself Out</h3>
<p>To get some behind-the-scenes action to staying updated on the latest projects, check out these social media links! All follows, likes, comments, and shares are appreciated. </p>
<div class="socials">
<li>
<img src="facebook-box-fill.png" alt="Facebook" </li>
<li>
<img src="instagram-fill.png" alt="Instagram" </li>
</div>
</div>
<div class="bottom-page">
<p>copyright ©2022 Geek Yourself Out. Designed by Kimmy Vo</p>
</div>
</footer>
</body>
Just update your Contact-box class like this:
.Contact-box {
position: static;
transform: none;
display: flex;
justify-content: center;
align-items: center;
}
You had set the form to inline-block. I simply removed that and added center text alignment to center the button.
#font-face {
Src: url(customfont/Futuristic.ttf);
font-family: Future;
}
.Contact-box {
position: static;
transform: none;
}
h1 {
margin-bottom: 1rem;
color: red;
text-align: center;
font-size: 40px;
font-family: Future;
}
form {
/* display: inline-block; <--------------------------------------- HERE */
flex-direction: column;
width: 24rem;
gap: 1rem;
margin-left: auto;
margin-right: auto;
text-align: center; /* <----------------------------------------HERE */
}
input,
textarea {
padding: 1.5rem;
background: transparent;
border: 2px solid white;
border-radius: 15px;
width: 400px;
}
textarea {
height: 7rem;
}
button {
width: 8rem;
padding: 1rem;
cursor: pointer;
background: blue;
color: black;
}
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div class="logo">
<img src="https://via.placeholder.com/95" width="95" />
</div>
<div class="coolname">
<img src="https://via.placeholder.com/105" width="105" />
</div>
<nav>
<ul>
<li class="current-page">Home</li>
<li>About Us</li>
<li>Services</li>
<li>Consultation & Quotes</li>
<li>Contact Us</li>
<li>Client Referrals</li>
<li>Blog</li>
</ul>
</nav>
<br><br>
<h1>Contact Us!</h1>
<div class="Contact-box">
<br><br>
<form style="align:center;">
<input type="text" name="Name" placeholder="First and Last Name" required>
<input type="text" name="Email" placeholder="example#email.com" required>
<input type="text" name="Subject" placeholder="Subject Line" required>
<textarea name="Message" placeholder="Message" required></textarea>
<br><br>
<button type="submit">Send</button>
<br><br>
</form>
</div>
<footer>
<div class="bottom-content">
<h3>Geek Yourself Out</h3>
<p>To get some behind-the-scenes action to staying updated on the latest projects, check out these social media links! All follows, likes, comments, and shares are appreciated. </p>
<div class="socials">
<li>
<img src="facebook-box-fill.png" alt="Facebook" </li>
<li>
<img src="instagram-fill.png" alt="Instagram" </li>
</div>
</div>
<div class="bottom-page">
<p>copyright ©2022 Geek Yourself Out. Designed by Kimmy Vo</p>
</div>
</footer>
</body>
text-align: center; only has an effect on text, but it won't center blocks:
div {
max-width: 50%;
text-align: center;
background: yellow;
padding: 10px;
}
p {
text-align: center;
}
<div>Lorem ipsum dolor.</div>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui.</p>
If you want to center blocks, you could use flexbox (see this guide) in combination with justify-content:
div {
width: 100%;
display: flex;
justify-content: center;
}
span {
width: 100px;
background: aqua;
display: block;
}
<div><span> center this </span></div>
So I think it's best to wrap the form in a full-width <div> and setting a maximal width on the form:
div.form-container {
display: flex;
justify-content: center;
}
form {
max-width: 50%
}
/* For smaller devices, 50% is too small. Doing this prevents the form from being "crushed": */
#media (max-width: 800px) {
form {
max-width: 90%;
}
}
And to center the button, you can simply do text-align: center;.
I am trying to write a responsive footer. The footer items are separated by vertical bar (|). When we decrease the screen size, the footer items are wrapping to second line. Vertical bar (|) needs to be only between the footer items. Also facebook logo needs to be on the same line with the footer items for bigger screen sizes and on the center for smaller screen sizes. I used float:right but now they wrap from the beginning. How can I make them wrap from the end and hide vertical bar (|) if it is not between the footer items?
Here is my source code: https://jsfiddle.net/6kcdvteo/
body {
font-family: 'Calibri';
}
.text {
font-size: 1rem;
padding: 1rem 1rem 2rem 2rem;
color: #666666;
background-color: #f4f4f4;
}
.footer {
font-size: 0.85rem;
padding: 2rem 1rem 2rem 2rem;
background-color: #303741;
color: white;
}
.footer_company {
float: right;
padding-right: 2rem;
}
.footer_links {
font-size: 0.85rem;
background-color: #303741;
color: white;
padding-bottom: 2rem;
padding-right: 2.5rem;
}
.footer_links_span span {
background-color: #303741;
padding-right: 0.5rem;
float: right;
}
img {
height: 3rem;
width: 3rem;
}
.img {
padding-left: 1rem;
display: inline-block;
}
<div class="text">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ac cursus felis, ut egestas lacus. Sed nec elementum ipsum. Morbi metus est, venenatis at libero pharetra, suscipit posuere dolor. Proin a auctor nulla, sed tincidunt tellus. Nullam bibendum
luctus elit, sed porttitor lectus varius in. Cras venenatis rutrum urna at ultrices. Sed in luctus ligula.
</p>
</div>
<div class="footer">
<span class="footer_company">© My Company Name</span>
</div>
<div class="footer_links">
<div class="img">
<img src="https://image.flaticon.com/icons/png/512/124/124010.png">
</div>
<div class="footer_links_span">
<span>Sed metus</span>
<span>|</span>
<span>Aenean ultricies</span>
<span>|</span>
<span>Praesent vitae</span>
<span>|</span>
<span>Donec auctor</span>
<span>|</span>
<span>Vestibulum lobortis</span>
</div>
</div>
As part of your question you can use this
<div class="footer_links">
<div class="img">
<img src="https://image.flaticon.com/icons/png/512/124/124010.png" alt="">
</div>
<div class="footer_links_span">
<span><b>|</b> Sed metus</span>
<span><b>|</b> Aenean ultricies</span>
<span><b>|</b> Praesent vitae</span>
<span><b>|</b> Donec auctor</span>
<span><b>|</b> Vestibulum lobortis <b>|</b></span>
</div>
</div>
with this css
/* container */
.footer_links {
padding: 0.75rem 1.5rem;
font-size: 0.85rem;
background-color: #303741;
color: white;
}
/* clearfix floats */
.footer_links::after {
display: block;
clear: both;
content: "";
}
/* facebook img */
.img {
float: left;
}
.img img {
width: 3rem;
height: auto;
border: 0;
}
/* links */
.footer_links_span {
float: right;
width: calc(100% - 3.5rem);
text-align: right;
}
.footer_links_span span {
display: inline-block;
white-space: nowrap;
background-color: #303741;
}
.footer_links b {
padding: 0 0.2rem;
font-weight: inherit;
}
.footer_links_span span:first-child b {
padding-left: 0;
}
.footer_links_span span:last-child b {
padding-right: 0;
}
Maybe it will help you in the right direction.
This will solve your problem, but it's Bootstrap :) All your responsive screenshotes are implemented in this code. No extra css for the layout required.
EDIT: The included style is for the width of the links block and for hiding the pipe symbool on small screens.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Page</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<style type="text/css">
#footerSocial img { width: 3rem; margin-bottom: 0.5rem; }
#footerLinks > div { max-width: 350px; margin: auto; }
#footerLinks .dv { font-weight: inherit; display: none; }
#media (min-width: 576px) {
#footerSocial img { margin-bottom: 0; }
#footerLinks > div { max-width: none; padding-left: 100px; }
}
#media (min-width: 768px) {
#footerLinks > div { padding-left: 0; }
#footerLinks .dv { display: inline; }
}
</style>
</head>
<body>
<div class="container-fluid bg-secondary text-white">
<div class="row py-3">
<div class="col-12 text-center">
<h1 class="mb-2">Company Name</h1>
</div>
</div>
</div>
<div class="container">
<div class="row py-3">
<div class="col-12 ">
<h2>Article</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ac cursus felis, ut egestas lacus.
Sed nec elementum ipsum. Morbi metus est, venenatis at libero pharetra, suscipit posuere dolor.
Proin a auctor nulla, sed tincidunt tellus. Nullam bibendum luctus elit, sed porttitor lectus
varius in. Cras venenatis rutrum urna at ultrices. Sed in luctus ligula.</p>
</div>
</div>
</div>
<div class="container-fluid bg-dark text-white">
<div class="row px-2 py-3">
<div id="footerSocial" class="col-12 col-sm-2 text-center text-sm-left">
<img class="img-fluid bg-white" src="https://image.flaticon.com/icons/png/512/124/124010.png" alt="FB">
</div>
<div id="footerLinks" class="col-12 col-sm-10 text-center text-sm-right">
<div>
© Company Name<br>
<span class="text-nowrap">Sed metus</span>
<span class="text-nowrap">| Aenean ultricies</span>
<span class="text-nowrap">| Praesent vitae</span>
<span class="text-nowrap"><b class="dv">| </b>Donec auctor</span>
<span class="text-nowrap">| Vestibulum lobortis</span>
</div>
</div>
</div>
</div>
</body>
</html>
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;
}
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.
I currently have a site I'm working on ( copying another site as Practice )
This is the site I am trying to re-create
http://www.north2.net/
.
I am almost done, however I cannot position the two side sections(left and right of main image) correctly.
Can anyone help me out?
I have 3 "sections" left, middle, right, all are in a wrapper
I've tried
margin-top,
removing inline-block on the wrappers
...
MY GOAL :
Is to be able to raise the two side bars to my liking, but I don't see how to raise them in any way.
north2.net to see what I mean.
JSFIDDLE
http://jsfiddle.net/abXk4/
Not Important ::
Also, when I position anything, my background image moves and there is a white gap on the bottom of the page, my screen is 1920 x 1080, so any adjustment makes a white space,
I've been fixing this with
padding-bottom: X%;
Is this just something I have to do? Or is it because I coded incorrectly.
HTML
<title> ENTER TITLE </title>
</head>
<body>
<div id='page'>
<!--All of Left Side Bar Contents -->
<div class="swrap">
<div id="logo">
<img src="img/logo_green.png">
</div>
<div id="about">
<aside class="tlb"><p>About Us</p></aside>
<p>Welcome. We are Author, nulla mauris odio, vehicula in, condimentum sit amet, tempus id, metus. Donec at nisi sit amet felis blandit posuere. Aliquam erat volutpat.</p>
</div>
<div id="services">
<aside class="tlb"><p>Services</p></aside>
<ul>
<li>Web Site Dev and Applications </li>
<div class='hr'></div>
<li>CMS</li>
<div class='hr'></div>
<li>Digital Branding and Industry</li>
<div class='hr'></div>
<li>UI Design</li>
<div class='hr'></div>
<li>Social Media</li>
<div class='hr'></div>
<li>User Experience</li>
<div class='hr'></div>
<li>Creative Ingenuity</li>
</ul> </div>
</div>
<!-- Center Content ( main header, main image ) -->
<div class="mwrap">
<!-- Main Nav Above Slider -->
<nav class='mnav'>
<ul>
<li class="m1"><a href='#'>home</a></li>
<li class="m2"><a href='#'>Author</a></li>
<li class="m3"><a href='#'>work</a></li>
<li class="m4"><a href='#'>clients</a></li>
<li class="m5"><a href='#'>contact</a></li>
</ul>
</nav>
<div id="fimg">
<img src="img/fumic_naslovna.jpg">
</div>
<div id="featart">
<article>
<h1>Lorem Ipsum</h1>
<p> Nulla mauris odio, vehicula in, condimentum sit amet, tempus id, metus. Donec at nisi sit amet felis blandit posuere. Aliquam erat volutpat. Cras lobortis orci in quam porttitor cursus. Aenean dignissim. Curabitur facilisis sem at nisi laoreet placerat. Duis sed ipsum ac nibh mattis feugiat. Proin sed purus. Vivamus lectus ipsum, rhoncus sed, scelerisque sit amet, ultrices in, dolor. Aliquam vel magna non nunc ornare bibendum. Sed libero. Maecenas at est. Vivamus ornare, felis et luctus dapibus, lacus leo convallis diam, eget dapibus augue arcu eget arcu.</p>
</article>
</div>
</div>
<div id="rwrap">
<div class="rfc">
<aside class="tlb">Featured Clients</aside>
<p> Nulla mauris odio, vehicula in, condimentum sit amet, tempus id, metus. Donec at nisi sit amet felis blandit posuere. Aliquam erat volutpat. Cras lobortis orci in quam porttitor cursus.</p>
<div class='hr'></div>
<p> Nulla mauris odio, vehicula in, condimentum sit amet, tempus id, metus. Donec at nisi sit amet felis blandit posuere. Aliquam erat volutpat.</p>
</div>
</div>
</div>
</body>
</html>
CSS
body {
background-image: url(img/brown.jpg);
background-repeat:no-repeat;
-webkit-background-size:cover;
-moz-background-size:cover;
-o-background-size:cover;
background-size:cover;
background-position:center;
padding-bottom:12%;
color: #fff;
font-weight: bold;
font-size: large;
text-align: left;
}
* {
border-radius: 1px;
}
#page {
margin: 30px 25%;
width: auto;
/* width should be 50% ... 25% on each side, 50% in middle, centered!*/
border: 2px solid black;
}
/*Left Content Begins ------------------ */
.swrap {
width: 23%;
display:inline-block;
/*1% margin on each side */
margin-top: 100px;
}
#logo {
background-color: rgba(0,0,0,.7);
}
#about {
margin: 3px 0;
background-color: rgba(89, 194, 141, 1);
padding: 5%;
}
#about aside {
margin-left: -6% !important;
}
#services {
background-color:rgba(66, 161, 75, .96);
padding: 2%;
margin: 3px 0;
}
.tlb {
background-color: rgba(0,0,0,.6);
width: 75%;
margin: -10px 0 0 -2% !important;
padding-left: 4%;
}
/*Middle Content Begins ------------------ */
.mwrap {
width: 48%;
margin: 0 auto;
/*1% margin on each side for .mwrap*/
display:inline-block;
}
.mnav ul {
list-style:none;
}
.mnav ul li {
display: inline;
font-size: large;
font-weight:bold;
padding: 2px 2%;
border-radius: 1px;
}
.mnav ul li a {
text-decoration: none;
color: #fff;
}
.m1 {background-color:rgba(46, 206, 87, 1); }
.m2 {background-color: rgba(39, 197, 80, 1); }
.m3 {background-color: rgba(70, 182, 99, 1); }
.m4 {background-color: rgba(64, 164, 90, 1);}
.m5 {background-color: rgba(63, 140, 83, 1); }
.mnav ul li:active {
background-color:none !important;
}
.mnav li:hover {
background-color: rgba(0,0,0,.3);
}
#fimg {
width: 100%;
}
#fimg img {
width: 100%;
}
#featart {
margin-top: -10px;
background-color: rgba(64, 164, 90, .9);
padding: 1% 1%;
}
/*Right Content Begins ------------------ */
#rwrap {
width: 23%;
display:inline-block;
/*1% margin on each side */
}
.rfc {
background-color:rgba(66, 161, 75, .96);
padding: 2%;
}
.rfc .tlb {
margin-top: 9px !important;
margin-left: -2.3% !important;
border-top-right-radius: 2px;
border-bottom-right-radius: 2px;
}
The easy way is to use position relative position: relative; bottom: [how ever many pixels]
A better (and later much more flexible) way is to change you HTML structure a little bit.
If I were building this site I'd break it into two wrapping divs with three column divs under each of them like here:
<div class="header">
<div class="left-column">
<img id="logo" src="img/logo.png" />
</div>
<div class="middle-column">
<ul class="nav"></ul>
</div>
<div class="right-column">
Put content here if you want it
</div>
</div>
<div class="content">
<div class="left-column">
Content in left column
</div>
<div class="middle-column">
Content in middle
</div>
<div class="right-column">
Content on right
</div>
</div>
Now, use CSS to float those columns just like you did before. The difference with this is you can define a height for the header and the logo and navigation will be much easier to align as they are separate from the other columns.
If you want to get more technical check out CSS Flexbox, it would work well here.
http://philipwalton.github.io/solved-by-flexbox/demos/holy-grail/
set
a position: relative;
bottom: X px;