I want my HTML/CSS to match what it does in the following picture:
This is currently what my HTML/CSS looks like:
There are four things that I am having issues with in my HTML/CSS that the picture is currently doing:
Align the text to the right of the checkbox in such a way that no text appears directly below the checkbox
Make the two buttons in the picture the same size
Make the two buttons centered according to the white text paragraph above
I can't seem to do #2 and #3 at the same time.
Any other discrepancies between the two pictures can be ignored.
How do I accomplish items 1-4 as mentioned above?
This is the plunker link: http://plnkr.co/edit/dfZg2C1ZrqdeSdoBa21t?p=preview
This is the HTML code:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<div id="LoadingDiv">
<div class="LoadingText">
<p style="color:red"><strong>Attention! You must agree to continue with Online Forms</strong></p>
<p><input type="checkbox"/>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<div class="btn-group">
<button class="btn btn-dont-allow">DON'T ALLOW</button>
<button class="btn btn-consent-ok">OK</button>
</div>
</div>
</div>
</body>
</html>
This is the CSS:
#LoadingDiv .btn {
min-width: 30%;
}
#LoadingDiv .btn-group {
margin-left:35%;
position: relative;
}
#LoadingDiv .LoadingText {
position: relative;
left: 25%;
top: 25%;
width: 50%;
color: white;
}
#LoadingDiv .btn-dont-allow {
background-color: #808083;
color: #ffffff;
padding: 3px 50px;
font-size: 16px;
margin-left: 3px;
margin-right: 3px;
}
#LoadingDiv .btn-consent-ok {
background-color: #1aa8de;
color: #ffffff;
padding: 3px 50px;
font-size: 16px;
margin-left: 3px;
margin-right: 3px;
}
#LoadingDiv {
margin: 0px 0px 0px 0px;
position: fixed;
padding: 0;
margin: 0;
top: 0;
left: 0;
height: 100%;
z-index: 9999;
width: 100%;
clear: none;
background-color: rgba(68, 176, 129, 0.9);
}
P.S: The markup in this picture was not created using HTML/CSS, but a prototyping app, so I can't just extract it from its source.
See this fiddle https://jsfiddle.net/DIRTY_SMITH/avocyf33/7/
added this
p {
display: block;
padding-left: 15px;
text-indent: -15px;
}
input {
width: 13px;
height: 13px;
padding: 0;
margin:0;
vertical-align: bottom;
position: relative;
top: -1px;
}
and added min-width: 400px; to btn-group to keep buttons from wrapping.
Jsfiddle
#LoadingDiv .btn {
min-width: 30%;
}
#LoadingDiv .btn-group {
display: inline-block;
}
#LoadingDiv .LoadingText {
position: relative;
left: 25%;
top: 25%;
width: 50%;
color: white;
}
#LoadingDiv .btn-dont-allow {
background-color: #808083;
color: #ffffff;
padding: 3px 50px;
font-size: 16px;
margin-left: 3px;
margin-right: 3px;
}
#LoadingDiv .btn-consent-ok {
background-color: #1aa8de;
color: #ffffff;
padding: 3px 50px;
font-size: 16px;
margin-left: 3px;
margin-right: 3px;
}
#LoadingDiv {
margin: 0px 0px 0px 0px;
position: fixed;
padding: 0;
margin: 0;
top: 0;
left: 0;
height: 100%;
z-index: 9999;
width: 100%;
clear: none;
background-color: rgba(68, 176, 129, 0.9);
}
.check {
width: 15px;
height: 15px;
padding: 0;
margin: 0;
vertical-align: bottom;
position: relative;
top: -3px;
}
.agree {
display: inline-block;
margin-left: 30px;
margin-top: -22px;
vertical-align: top;
}
<body>
<div id="LoadingDiv">
<div class="LoadingText">
<p style="color:red"><strong>Attention! You must agree to continue with Online Forms</strong>
</p>
<input type="checkbox" class="check">
<p class="agree">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<div class="btn-group">
<button class="btn btn-dont-allow">DON'T ALLOW</button>
<button class="btn btn-consent-ok">OK</button>
</div>
</div>
</div>
</body>
</html>
Related
Im trying to add box-shadow to both header and footer. Im trying to make it look like the content area is in the background while header and footer is "jumping out" a bit.
The code for footer and header is the same, yet only footer applies it like i want to.
/* All pages layout */
html {
background-color: #0294ea;
}
body {
font-family: helvetica, sans-serif;
margin: 0;
padding: 0;
background-color: #0294ea;
}
.container {
max-width: 100%;
margin: 0 auto;
}
header {
background-color: transparent;
color: #FFF;
margin-top: 20px;
}
header h1 {
text-align: center;
}
header p {
text-align: center;
}
.main-head {
display: block;
border-bottom: 2px solid #414141;
box-shadow: 0 5px 5px rgba(0, 0, 0, .5);
max-width: 100%;
box-sizing: border-box;
}
.main-body {
background-color: #FFF;
}
.content-area {
background-color: #FFF;
margin-left: 60px;
margin-right: 60px;
}
.main-foot {
background-color: transparent;
display: block;
border-top: 2px solid #414141;
box-shadow: 0 -5px 5px rgba(0, 0, 0, .5);
max-width: 100%;
box-sizing: border-box;
}
footer {
font-size: 60%;
text-align: center;
color: #fff;
}
/* Site navigation */
.navigation {
margin-top: 20px;
}
.navigation ul {
margin: 0;
padding: 0;
text-align: center;
}
.navigation li {
display: inline-block;
list-style: none;
margin-right: 5px;
}
.navigation a {
display: block;
text-decoration: none;
font-weight: normal;
font-size: 87%;
color: #FFF;
padding: 5px 10px;
border: 2px solid #414141;
border-bottom: none;
background-color: #a14b56;
}
.navigation a:hover {
color: #FFF;
border: 2px solid #414141;
border-bottom: none;
background-color: #414141;
}
/* Universal float fix */
.fix {
clear: both;
}
.group:before,
.group:after {
content: "";
display: table;
}
.group:after {
clear: both;
}
.group {
zoom: 1;
}
/* Index specific */
.sidebar {
max-width: 33.33%;
}
.main-body {
max-width: 66.66%;
}
<header>
<div class="container">
<div class="main-head">
<h1>Welcome to My Page</h1>
<p>For a Viking lifestyle</p>
<nav class="navigation">
<ul class="fix">
<li>Home</li>
<li>Placeholder</li>
<li>Placeholder</li>
<li>Placeholder</li>
<li>Placeholder</li>
<li>Placeholder</li>
</ul>
</nav>
</div>
</div>
</header>
<div class="content-area group">
<div class="container">
<div class="main-body">
<h1>Article 1</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<aside class="sidebar">
<h1>This is the sidebar</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</aside>
</div>
</div>
<footer>
<div class="main-foot">
<p>Copyright © 2019 - Marcus Tarang | Learning HTML/CSS</p>
</div>
</footer>
Force the header to be painted above the main area by changing it's position to relative (see this answer):
/* All pages layout */
html {
background-color: #0294ea;
}
body {
font-family: helvetica, sans-serif;
margin: 0;
padding: 0;
background-color: #0294ea;
}
.container {
max-width: 100%;
margin: 0 auto;
}
header {
position: relative;
background-color: transparent;
color: #FFF;
margin-top: 20px;
}
header h1 {
text-align: center;
}
header p {
text-align: center;
}
.main-head {
display: block;
border-bottom: 2px solid #414141;
box-shadow: 0 5px 5px rgba(0, 0, 0, .5);
max-width: 100%;
box-sizing: border-box;
}
.main-body {
background-color: #FFF;
}
.content-area {
background-color: #FFF;
margin-left: 60px;
margin-right: 60px;
}
.main-foot {
background-color: transparent;
display: block;
border-top: 2px solid #414141;
box-shadow: 0 -5px 5px rgba(0, 0, 0, .5);
max-width: 100%;
box-sizing: border-box;
}
footer {
font-size: 60%;
text-align: center;
color: #fff;
}
/* Site navigation */
.navigation {
margin-top: 20px;
}
.navigation ul {
margin: 0;
padding: 0;
text-align: center;
}
.navigation li {
display: inline-block;
list-style: none;
margin-right: 5px;
}
.navigation a {
display: block;
text-decoration: none;
font-weight: normal;
font-size: 87%;
color: #FFF;
padding: 5px 10px;
border: 2px solid #414141;
border-bottom: none;
background-color: #a14b56;
}
.navigation a:hover {
color: #FFF;
border: 2px solid #414141;
border-bottom: none;
background-color: #414141;
}
/* Universal float fix */
.fix {
clear: both;
}
.group:before,
.group:after {
content: "";
display: table;
}
.group:after {
clear: both;
}
.group {
zoom: 1;
}
/* Index specific */
.sidebar {
max-width: 33.33%;
}
.main-body {
max-width: 66.66%;
}
<header>
<div class="container">
<div class="main-head">
<h1>Welcome to My Page</h1>
<p>For a Viking lifestyle</p>
<nav class="navigation">
<ul class="fix">
<li>Home</li>
<li>Placeholder</li>
<li>Placeholder</li>
<li>Placeholder</li>
<li>Placeholder</li>
<li>Placeholder</li>
</ul>
</nav>
</div>
</div>
</header>
<div class="content-area group">
<div class="container">
<div class="main-body">
<h1>Article 1</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<aside class="sidebar">
<h1>This is the sidebar</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</aside>
</div>
</div>
<footer>
<div class="main-foot">
<p>Copyright © 2019 - Marcus Tarang | Learning HTML/CSS</p>
</div>
</footer>
Just put the box shadow on the header and give it position: relative;:
header {
box-shadow: 0 5px 5px rgba(0, 0, 0, .5);
position: relative;
}
/* All pages layout */
html {
background-color: #0294ea;
}
body {
font-family: helvetica, sans-serif;
margin: 0;
padding: 0;
background-color: #0294ea;
}
.container {
max-width: 100%;
margin: 0 auto;
}
header {
background-color: transparent;
color: #FFF;
margin-top: 20px;
box-shadow: 0 5px 5px rgba(0, 0, 0, .5);
position: relative;
}
header h1 {
text-align: center;
}
header p {
text-align: center;
}
.main-head {
display: block;
border-bottom: 2px solid #414141;
max-width: 100%;
box-sizing: border-box;
}
.main-body {
background-color: #FFF;
}
.content-area {
background-color: #FFF;
margin-left: 60px;
margin-right: 60px;
}
.main-foot {
background-color: transparent;
display: block;
border-top: 2px solid #414141;
box-shadow: 0 -5px 5px rgba(0, 0, 0, .5);
max-width: 100%;
box-sizing: border-box;
}
footer {
font-size: 60%;
text-align: center;
color: #fff;
}
/* Site navigation */
.navigation {
margin-top: 20px;
}
.navigation ul {
margin: 0;
padding: 0;
text-align: center;
}
.navigation li {
display: inline-block;
list-style: none;
margin-right: 5px;
}
.navigation a {
display: block;
text-decoration: none;
font-weight: normal;
font-size: 87%;
color: #FFF;
padding: 5px 10px;
border: 2px solid #414141;
border-bottom: none;
background-color: #a14b56;
}
.navigation a:hover {
color: #FFF;
border: 2px solid #414141;
border-bottom: none;
background-color: #414141;
}
/* Universal float fix */
.fix {
clear: both;
}
.group:before,
.group:after {
content: "";
display: table;
}
.group:after {
clear: both;
}
.group {
zoom: 1;
}
/* Index specific */
.sidebar {
max-width: 33.33%;
}
.main-body {
max-width: 66.66%;
}
<header>
<div class="container">
<div class="main-head">
<h1>Welcome to My Page</h1>
<p>For a Viking lifestyle</p>
<nav class="navigation">
<ul class="fix">
<li>Home</li>
<li>Placeholder</li>
<li>Placeholder</li>
<li>Placeholder</li>
<li>Placeholder</li>
<li>Placeholder</li>
</ul>
</nav>
</div>
</div>
</header>
<div class="content-area group">
<div class="container">
<div class="main-body">
<h1>Article 1</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<aside class="sidebar">
<h1>This is the sidebar</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</aside>
</div>
</div>
<footer>
<div class="main-foot">
<p>Copyright © 2019 - Marcus Tarang | Learning HTML/CSS</p>
</div>
</footer>
add the position: relative; into .main-head css class
this is fixed result
/* All pages layout */
html {
background-color: #0294ea;
}
body {
font-family: helvetica, sans-serif;
margin: 0;
padding: 0;
background-color: #0294ea;
}
.container {
max-width: 100%;
margin: 0 auto;
}
header {
background-color: transparent;
color: #FFF;
margin-top: 20px;
}
header h1 {
text-align: center;
}
header p {
text-align: center;
}
.main-head {
display: block;
border-bottom: 2px solid #414141;
box-shadow: 0 5px 5px rgba(0, 0, 0, .5);
max-width: 100%;
box-sizing: border-box;
position: relative;
}
.main-body {
background-color: #FFF;
}
.content-area {
background-color: #FFF;
margin-left: 60px;
margin-right: 60px;
}
.main-foot {
background-color: transparent;
display: block;
border-top: 2px solid #414141;
box-shadow: 0 -5px 5px rgba(0, 0, 0, .5);
max-width: 100%;
box-sizing: border-box;
}
footer {
font-size: 60%;
text-align: center;
color: #fff;
}
/* Site navigation */
.navigation {
margin-top: 20px;
}
.navigation ul {
margin: 0;
padding: 0;
text-align: center;
}
.navigation li {
display: inline-block;
list-style: none;
margin-right: 5px;
}
.navigation a {
display: block;
text-decoration: none;
font-weight: normal;
font-size: 87%;
color: #FFF;
padding: 5px 10px;
border: 2px solid #414141;
border-bottom: none;
background-color: #a14b56;
}
.navigation a:hover {
color: #FFF;
border: 2px solid #414141;
border-bottom: none;
background-color: #414141;
}
/* Universal float fix */
.fix {
clear: both;
}
.group:before,
.group:after {
content: "";
display: table;
}
.group:after {
clear: both;
}
.group {
zoom: 1;
}
/* Index specific */
.sidebar {
max-width: 33.33%;
}
.main-body {
max-width: 66.66%;
}
<header>
<div class="container">
<div class="main-head">
<h1>Welcome to My Page</h1>
<p>For a Viking lifestyle</p>
<nav class="navigation">
<ul class="fix">
<li>Home</li>
<li>Placeholder</li>
<li>Placeholder</li>
<li>Placeholder</li>
<li>Placeholder</li>
<li>Placeholder</li>
</ul>
</nav>
</div>
</div>
</header>
<div class="content-area group">
<div class="container">
<div class="main-body">
<h1>Article 1</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<aside class="sidebar">
<h1>This is the sidebar</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</aside>
</div>
</div>
<footer>
<div class="main-foot">
<p>Copyright © 2019 - Marcus Tarang | Learning HTML/CSS</p>
</div>
</footer>
I'm about to finish my first web project and when I'm checking the browsers I find that firefox causes me the following error in the footer.
view Chrome:
view Firefox:
As you can see in other browsers it works and it looks perfectly in firefox, it is the only one that creates that space for me, if you can help me I would appreciate it. Here is the code:
footer
{
position: absolute;
top: 2050px;
height: 330px;
}
footer div#aboutme
{
width: 50%;
height: 300px;
margin: 0px;
padding-bottom: 0px;
}
footer div#aboutme h3
{
width: 80%;
margin-left: 10%;
padding-top: 20px;
}
footer div#aboutme p
{
width: 80%;
margin-left: 10%;
padding-top: 15px;
}
footer div.rrss
{
position: relative;
width: 50%;
height: 150px;
margin: 0px;
top: -300px;
left: 50%;
padding-bottom: 0px;
}
footer div.rrss p
{
padding-top: 30px;
}
footer div.rrss a
{
padding-top: 15px;
}
footer div.suscription
{
position: relative;
width: 50%;
height: 150px;
margin: 0px;
top: -300px;
margin-left: 50%;
padding-bottom: 0px;
text-align: center;
}
footer div.suscription p
{
display: block;
padding-top: 0px;
padding-bottom: 30px;
}
footer div.suscription input:nth-of-type(1)
{
max-width: 175px;
}
footer div.suscription input:nth-of-type(2)
{
max-width: 125px;
border: none;
border-bottom: 1px solid white;
}
footer div#derechos
{
position: relative;
top: -299px;
}
footer div#derechos p
{
position: relative;
top: 15px;
}
<footer>
<div id="aboutme">
<h3>Acerca de mí...</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="rrss">
<p><strong>Encuentrame en:</strong></p>
</div>
<div class="suscription">
<p>Recibe nuestras publicaciones en tu email.</p>
<input type="mail" name="email" placeholder="Ingresa tu email" id="input_registro">
<input type="button" id="button_registro" name="button_registro" value="Registrar">
</div>
<div id="derechos">
<p>© 2018 All rights reserved | Privacity Policy</p>
</div>
</footer>
this is where comes from your trouble :
footer div.rrss
{
position: relative;
width: 50%;
height: 150px;
margin: 0px;
top: -300px;
left: 50%;
padding-bottom: 0px;
}
Firefox moves it up at screen but does not free that space.
add overflow:hidden to footer to keep it 300px of height
footer
{
position: absolute;
top: 2050px;
height: 330px;
overflow:hidden; /* will not keep space used by the relative element */
}
footer div#aboutme
{
width: 50%;
height: 300px;
margin: 0px;
padding-bottom: 0px;
}
footer div#aboutme h3
{
width: 80%;
margin-left: 10%;
padding-top: 20px;
}
footer div#aboutme p
{
width: 80%;
margin-left: 10%;
padding-top: 15px;
}
footer div.rrss
{
position: relative;
width: 50%;
height: 150px;
margin: 0px;
top: -300px;
left: 50%;
padding-bottom: 0px;
}
footer div.rrss p
{
padding-top: 30px;
}
footer div.rrss a
{
padding-top: 15px;
}
footer div.suscription
{
position: relative;
width: 50%;
height: 150px;
margin: 0px;
top: -300px;
margin-left: 50%;
padding-bottom: 0px;
text-align: center;
}
footer div.suscription p
{
display: block;
padding-top: 0px;
padding-bottom: 30px;
}
footer div.suscription input:nth-of-type(1)
{
max-width: 175px;
}
footer div.suscription input:nth-of-type(2)
{
max-width: 125px;
border: none;
border-bottom: 1px solid white;
}
footer div#derechos
{
position: relative;
top: -299px;
}
footer div#derechos p
{
position: relative;
top: 15px;
}
<footer>
<div id="aboutme">
<h3>Acerca de mí...</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="rrss">
<p><strong>Encuentrame en:</strong></p>
</div>
<div class="suscription">
<p>Recibe nuestras publicaciones en tu email.</p>
<input type="mail" name="email" placeholder="Ingresa tu email" id="input_registro">
<input type="button" id="button_registro" name="button_registro" value="Registrar">
</div>
<div id="derechos">
<p>© 2018 All rights reserved | Privacity Policy</p>
</div>
</footer>
You may also consider grid for the layout of the footer :
footer {
position: absolute;
top: 2050px;
height: 350px;
display: grid;
grid-template-columns: 1fr 1fr;
background: #444;
color: white;
}
footer div#aboutme {
grid-column: 1;
grid-row: 1 / span 2;
}
footer div#aboutme h3 {
width: 80%;
margin-left: 10%;
padding-top: 20px;
}
footer div#aboutme p {
width: 80%;
margin-left: 10%;
padding-top: 15px;
}
footer div.rrss {
grid-column: 2;
grid-row: 1;
}
footer div.rrss p {
padding-top: 30px;
}
footer div.rrss a {
padding-top: 15px;
}
footer div.suscription {
grid-column: 2;
grid-row: 2;
}
footer div.suscription p {
display: block;
padding-top: 0px;
padding-bottom: 30px;
}
footer div.suscription input:nth-of-type(1) {
max-width: 175px;
}
footer div.suscription input:nth-of-type(2) {
max-width: 125px;
border: none;
border-bottom: 1px solid white;
}
footer div#derechos {
grid-row: 3;
grid-column: 1 / span 2;
margin: auto;
}
footer div#derechos p {}
<footer>
<div id="aboutme">
<h3>Acerca de mí...</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="rrss">
<p><strong>Encuentrame en:</strong></p>
</div>
<div class="suscription">
<p>Recibe nuestras publicaciones en tu email.</p>
<input type="mail" name="email" placeholder="Ingresa tu email" id="input_registro">
<input type="button" id="button_registro" name="button_registro" value="Registrar">
</div>
<div id="derechos">
<p>© 2018 All rights reserved | Privacity Policy</p>
</div>
</footer>
I have a example exercise with a Sidebar Navigation that is fixed left of the screen.
I said that the content-div should have a position of absolute to the body and also a padding-left with the width of the sidebar, so that i can center my content in the visible area (width without the sidebar).
Now when I try to add a media query that says "when the screen is smaller than 1000px the Sidebar should disappear and the the padding of the content area should go to 0 (so that it gets centered in the normal screen width area)" it doesnt work.
I'm a beginner in html and css
Here is my code:
body {
font-family: 'Oswald', sans-serif;
padding: 0;
margin: 0;
background-color: #35af7e;
}
#media screen and (max-width: 1000px) {
.Sidebar {
left: -10rem;
}
.body {
padding-left: 0;
padding: 0;
}
}
#flex {
display: flex;
}
/* MEDIA QUERY FIX: NAVIC ; BODY-paddingleft ; */
.NavIc {
left: 1rem;
top: 1rem;
height: 30px;
width: 30px;
background-color: red;
border-radius: 3px;
z-index: 4;
position: fixed;
cursor: pointer;
}
.NavIc:hover .Sidebar {
background-color: red;
}
.Sidebar {
position: fixed;
width: 10rem;
height: 100%;
background: #E9D758;
color: white;
z-index: 3;
display: flex;
flex-direction: column;
transition: 200ms ease-in-out;
}
.space {
flex-grow: 1;
width: auto;
}
.Nav {
list-style-type: none;
display: block;
width: 100%;
padding: 0;
font-size: 1.5rem;
z-index: 2;
flex-grow: 18;
}
ul li {
box-sizing: border-box;
padding: 0.7rem 0 0.7rem 1rem;
position: relative;
transition: 150ms ease-in-out;
}
ul li:hover {
background-color: white;
color: black;
transform: scale(1.07) translate(0.3rem);
cursor: pointer;
}
.footnotes {
flex-grow: 1;
box-sizing: border-box;
padding: 0 1rem 0 1rem;
}
hr {
border-style: solid;
color: white;
}
.body {
position: absolute;
width: 100%;
padding-left: 10rem;
box-sizing: border-box;
top: 0;
color: white;
transition: 200ms ease-in-out;
}
.mid {
position: relative;
width: 60%;
left: 50%;
transform: translate(-50%);
font-size: 1.5rem;
}
.img {
position: relative;
max-width: 500px;
height: auto;
left: 50%;
transform: translate(-50%);
transition: 200ms ease-in-out;
}
.Logo {
position: relative;
left: 50%;
transform: translate(-50%);
max-width: 100%;
height: auto;
padding: 5rem 0 5rem 0;
}
.mid > hr {
width: 80%;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Sidebar</title>
<link rel="stylesheet" style="text/css" href="sidebar.css">
<link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet">
</head>
<body>
<div class="NavIc">
</div>
<div class="Sidebar">
<div class="space">
</div>
<ul class="Nav">
<li>Home</li>
<li>Gallery</li>
<li>Our Team</li>
<li>Contact</li>
</ul>
<div class="footnotes">
<hr>
<p>blablabla<br>
All rights reserved</p>
<p>blablabla</p>
</div>
</div>
<div class="body">
<div class="mid">
<div class="img">
<img src="Logo.svg" alt="Logo" class="Logo">
</div>
<hr>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea.Commodo consequat.</p><p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident.Sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.</p><p>Incididunt ut labore et dolore magna aliqua Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</br>
<hr>
</div>
</div>
</body>
</html>
Because your .body rule in #media (max-width: 1000px) is being override. Use !important or learn some CSS specificity/precedence.
body {
font-family: 'Oswald', sans-serif;
padding: 0;
margin: 0;
background-color: #35af7e;
}
#media screen and (max-width: 1000px) {
.Sidebar {
left: -10rem;
}
.body {
padding-left: 0 !important;
padding: 0;
}
}
#flex {
display: flex;
}
/* MEDIA QUERY FIX: NAVIC ; BODY-paddingleft ; */
.NavIc {
left: 1rem;
top: 1rem;
height: 30px;
width: 30px;
background-color: red;
border-radius: 3px;
z-index: 4;
position: fixed;
cursor: pointer;
}
.NavIc:hover .Sidebar {
background-color: red;
}
.Sidebar {
position: fixed;
width: 10rem;
height: 100%;
background: #E9D758;
color: white;
z-index: 3;
display: flex;
flex-direction: column;
transition: 200ms ease-in-out;
}
.space {
flex-grow: 1;
width: auto;
}
.Nav {
list-style-type: none;
display: block;
width: 100%;
padding: 0;
font-size: 1.5rem;
z-index: 2;
flex-grow: 18;
}
ul li {
box-sizing: border-box;
padding: 0.7rem 0 0.7rem 1rem;
position: relative;
transition: 150ms ease-in-out;
}
ul li:hover {
background-color: white;
color: black;
transform: scale(1.07) translate(0.3rem);
cursor: pointer;
}
.footnotes {
flex-grow: 1;
box-sizing: border-box;
padding: 0 1rem 0 1rem;
}
hr {
border-style: solid;
color: white;
}
.body {
position: absolute;
width: 100%;
padding-left: 10rem;
box-sizing: border-box;
top: 0;
color: white;
transition: 200ms ease-in-out;
}
.mid {
position: relative;
width: 60%;
left: 50%;
transform: translate(-50%);
font-size: 1.5rem;
}
.img {
position: relative;
max-width: 500px;
height: auto;
left: 50%;
transform: translate(-50%);
transition: 200ms ease-in-out;
}
.Logo {
position: relative;
left: 50%;
transform: translate(-50%);
max-width: 100%;
height: auto;
padding: 5rem 0 5rem 0;
}
.mid > hr {
width: 80%;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Sidebar</title>
<link rel="stylesheet" style="text/css" href="sidebar.css">
<link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet">
</head>
<body>
<div class="NavIc">
</div>
<div class="Sidebar">
<div class="space">
</div>
<ul class="Nav">
<li>Home</li>
<li>Gallery</li>
<li>Our Team</li>
<li>Contact</li>
</ul>
<div class="footnotes">
<hr>
<p>blablabla<br>
All rights reserved</p>
<p>blablabla</p>
</div>
</div>
<div class="body">
<div class="mid">
<div class="img">
<img src="Logo.svg" alt="Logo" class="Logo">
</div>
<hr>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea.Commodo consequat.</p><p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident.Sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.</p><p>Incididunt ut labore et dolore magna aliqua Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</br>
<hr>
</div>
</div>
</body>
</html>
Inside your media query use display: none;to hide the sidebar and then set padding: 0px;of your content. that's it.
#media only screen and (max-width: 1000px) {
.Sidebar{
display: none;
}
.body{
display: block;
padding: 0px;
}
}
I'm aware that there does exist solutions for vertical alignment but the issue is there are all sorts of ways to accomplish this but I haven't found one which deals with a flex container. And many solutions revolve around having a fixed height which doesn't help me at all since my height is always unknown.
I would like to vertically align the element inside of my left floating div which is the .about_container .welcome div block. How can I figure this out, and feel free to point out any bad practices that I may have used in my code.
If you want to see what the output of the follow two files look like, I've added a screen shot of the output on the bottom.
Contents of my HTML file
<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS Maddness</title>
<link rel="stylesheet" type="text/css" href="floatHelp.css">
</head>
<body>
<div class="about_container">
<div class="welcome">
<h1>Welcome<br>to my<br>Webpage!</h1>
</div>
<div class="welcome_content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>
</div>
</div>
<div id="projects">
<h2>Some lonely text down here to test against overflow.</h2>
</div>
</div>
<body>
</html>
Contents of my CSS file
.about_container {
color: snow;
display: flex;
border-bottom: 1px solid black;
}
.about_container .welcome {
background-color: #DCC7AA;
float: left;
margin 0;
width: 50%;
-webkit-flex: 1;
-moz-flex: 1
-ms-flex: 1;
flex: 1;
}
.about_container .welcome_content {
background-color: #F7882F;
margin: 0px;
top: 0;
float: right;
width: 50%;
-webkit-flex: 1;
-moz-flex: 1
-ms-flex: 1;
flex: 1;
}
.about_container .welcome_content p{
padding: 15px;
}
.about_container .welcome h1 {
border: 3px solid snow;
border-radius: 10px;
font-family: 'Julius Sans One', sans-serif;
margin-left: 10%; margin-right: 10%;
padding: 10px;
text-align: center;
}
#projects{
clear: both;
}
Output:
The element in my left div is not vertically centered as you can see from this screenshot
Add the following parameters to .about_container .welcome h1
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
margin: 0;
and add position: relative to .about_container .welcome
.about_container {
color: snow;
display: flex;
border-bottom: 1px solid black;
}
.about_container .welcome {
background-color: #DCC7AA;
float: left;
position: relative;
margin: 0;
width: 50%;
-webkit-flex: 1;
-moz-flex: 1 -ms-flex: 1;
flex: 1;
}
.about_container .welcome_content {
background-color: #F7882F;
margin: 0px;
top: 0;
float: right;
width: 50%;
-webkit-flex: 1;
-moz-flex: 1 -ms-flex: 1;
flex: 1;
}
.about_container .welcome_content p {
padding: 15px;
}
.about_container .welcome h1 {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
margin: 0;
border: 3px solid snow;
box-sizing: border-box;
border-radius: 10px;
font-family: 'Julius Sans One', sans-serif;
padding: 10px;
text-align: center;
}
#projects {
clear: both;
}
<div class="about_container">
<div class="welcome">
<h1>Welcome<br>to my<br>Webpage!</h1>
</div>
<div class="welcome_content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
<div id="projects">
<h2>Some lonely text down here to test against overflow.</h2>
</div>
</div>
Just make .about_container .welcome a flex container too. Add this to the .about_container .welcome rule:
display: flex;
flex-direction: column;
justify-content: center;
I am sorry for not beeing able to produce much code, otherwise my assignment could be detected as plagiarism. Following this tutorial I was able to create a sticky footer when having no sidebars. Trying to do the same with 2 divs -> "left-sidebar" and "right-sidebar" I got this:
html,
body {
margin: 0;
padding: 0;
height: 100%;
}
#wrapper {
min-height: 100%;
position: relative;
}
header {
padding: 10px;
}
footer {
position: absolute;
left: 0;
bottom: 0;
height: 40px;
width: 100%;
text-align: center;
color: #fff;
background: #333;
}
#main-content {
position: absolute;
width: 60%;
margin-left: 15%;
padding-bottom: 40px;
/* Height of the footer */
}
#left-sidebar {
width: 15%;
position: absolute;
left: 0;
word-wrap: break-word;
padding-bottom: 40px;
}
#right-sidebar {
right: 0;
position: absolute;
width: 15%;
word-wrap: break-word;
padding-bottom: 40px;
}
<body>
<div id="wrapper">
<header>
</header>
<div id="left-sidebar">
</div>
<div id="main-content">
</div>
<div id="right-sidebar">
</div>
<footer>
</footer>
</div>
</body>
My technique is based on declaring the wrapper's position as relative, and the inside elements' as absolute. I know there is another technique when declaring the footers position relative as well, and then writing it outside of wrapper. If one could provide both solutions, I would be really happy! Thanks!
#I am exploring possibilities, so I'm trying to solve this without the "push" div
#What I actually want to achieve is this mockup
And I don't wanna used fixed position for footer, because its gonna stick to the bottom of my window and not of the "page"
I just dont understand these dumb haters downvoting for nothing, at least you could comment and give a critic!
You could achieve that like this:
html {
position: relative;
min-height: 100%;
}
body {
margin: 0 0 40px; /* bottom = footer height */
}
footer {
position: absolute;
left: 0;
bottom: 0;
height: 40px;
width: 100%;
background: #333;
}
header {
padding: 10px;
background: #333;
}
#wrapper {
min-height: 100%;
position: relative;
font-size: 0px;
}
#main-content {
width: 60%;
margin-right: 10%;
padding-bottom: 40px;
display: inline-block;
vertical-align: top;
font-size: 16px;
}
#left-sidebar {
width: 15%;
padding-bottom: 40px;
display: inline-block;
vertical-align: top;
font-size: 16px;
}
#right-sidebar {
width: 15%;
padding-bottom: 40px;
display: inline-block;
vertical-align: top;
font-size: 16px;
}
<header></header>
<div id="wrapper">
<div id="left-sidebar"></div>
<div id="main-content">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
<div id="right-sidebar"></div>
</div>
<footer></footer>
http://plnkr.co/edit/roZhOyMUxkFmpsYr9tKW?p=preview
html,
body {
box-sizing: border-box;
font: 400 16px/1.5'Palatino Linotype';
height: 100vh;
width: 100vw;
overflow: hidden;
}
*,
*:before,
*:after {
box-sizing: inherit;
margin: 0;
padding: 0;
border: 0;
}
body {
background-color: #222;
color: #EFE;
font-variant: small-caps;
overflow: hidden;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.shell {
position: relative;
padding: 1.5em .75em;
margin: 0 auto;
height: 100%;
width: 100%;
}
.content {
position: absolute;
left: 17vw;
top: 10vh;
outline: 3px dashed yellow;
width: 66vw;
height: 100vh;
overflow-y: auto;
padding: 15px;
}
header,
footer {
width: 100%;
height: 10vh;
position: fixed;
left: 0;
outline: 2px solid cyan;
padding: 12px;
z-index: 100;
background-color: hsla(160, 0%, 181%, .4);
}
footer {
margin-top: 1.5em;
bottom: 0;
}
header {
margin-bottom: 1.5em;
top: 0;
}
article {
outline: 3px dashed white;
height: 100%;
}
section {
width: 100%;
outline: 1px solid lime;
height: 20vh;
}
.left,
.right {
outline: 2px solid red;
position: absolute;
top: 10vh;
width: 23vh;
height: 80vh;
padding: 5px;
}
.left {
left: 0;
}
.right {
right: 0;
}
<!doctype html>
<html>
<head>
<link href="style.css" rel="stylesheet">
</head>
<body>
<div class="shell">
<header>
<h1>H1 - Header</h1>
</header>
<nav class="left">
<h4>H4 - Nav</h4>
</nav>
<main class="content">
<h1>H1 - Main</h1>
<article class="blog">
<h2>H2 - Article</h2>
<section id="intro">
<h3>H3 - Section - Introduction</h3>
</section>
<section id="part1">
<h3>H3 - Section - Part 1</h3>
</section>
<section id="part2">
<h3>H3 - Section - Part 2</h3>
</section>
<section id="part3">
<h3>H3 - Section - Part 3</h3>
</section>
</article>
</main>
<aside class="right">
<h4>H4 - Aside</h4>
</aside>
<footer>
<h3>H3 - Footer</h3>
</footer>
</div>
</body>
</html>
There is a simple solution.
You want the header to stay at the top of you page, the footer at the bottom, and the sidebars/content will scroll
Add this to your CSS header:
position: fixed;
width: 100%;
z-index: 999;
Just change your CSS footer from 'absolute' positioning, to 'fixed' like so:
position: fixed;