I'm trying to get the "footer" div to sit below the "main" div, except it keeps appearing next to it. I just want it to sit directly below the preceding div (not be forced to the bottom), except it always seems to sit below the header.
<body>
<div class="wrapper">
<div class="header">
Heading
</div>
<div class="main">
Content
</div>
<div class="footer">More details on how you can help coming soon.</div>
</div>
</body>
CSS:
body {
background-image: url("./../img/bg.jpg");
background-repeat: no-repeat;
background-size: 100%;
margin: 0;
padding: 0;
}
.header{
color: #FFFFFF;
font-size: 14vw;
text-align: center;
font-family: OSWALD;
font-style: normal;
text-transform: uppercase;
font-weight: 700;
letter-spacing: 2px;
width: 100%;
line-height: 1.2em;
}
.main{
display: inline-block;
width: 300px;
height: 380px;
overflow: hidden;
padding: 19px 22px 7px;
color: #fff;
font-size: 13px;
text-transform: uppercase;
font-weight: 700;
font-family: "futura-pt", sans-serif;
letter-spacing: 2px;
line-height: 45px;
position: absolute;
right: 0px;
}
.contact{
border-top: 6px solid #e2d056;
border-bottom: 6px solid #e2d056;
width: 250px;
margin: 25px 0 0;
padding: 10px 22px 10px;
text-align: center;
}
.footer {
color: #fff;
font-size: 13px;
text-transform: uppercase;
font-weight: 700;
font-family: "futura-pt", sans-serif;
letter-spacing: 2px;
line-height: 25px;
text-align: left;
padding-left: 30px;
}
You could just remove display: inline-block; altogether since it doesn't appear to have a purpose.
If you still need the display: inline-block; you can use .footer { clear: both; } or do .main { float: left; clear: both; }.
Just change postion:absolute to position:relative for .main as absolute takes the div element out of the layout flow.
.main {
position:relative;
}
Here's a jsfiddle with updated code: https://jsfiddle.net/AndrewL32/ewaLf4ct/
Use .footer { clear: both; }.
Related
This is my HTML and CSS code. If you run this, there will be a image of a macbook and a 'buy' button. When the browser is minimised, the image is alittle off from the center. When it is in full screen, it causes the image to move up and the 'buy' button gets pushed to the bottom. I tried to use position: fixed but it didnt work. How do you make the picture have fixed position in the middle
.new {
font-family: Arial;
color: rgb(202, 137, 15);
font-size: 18px;
margin-bottom: 15px;
}
.macbook {
font-family: Arial;
font-weight: bold;
font-size: 44px;
margin-top: 0px;
margin-bottom: 10px;
}
.supercharged {
font-family: Arial;
font-weight: bold;
font-size: 60px;
margin-top: 0px;
margin-bottom: 25px;
}
.price {
font-family: Arial;
font-size: 18px;
margin-top: 0px;
}
.button {
background-color: #007aff;
color: white;
border-radius: 100px;
font-weight: bold;
border: none;
padding-left: 16px;
padding-right: 16px;
padding-bottom: 10px;
padding-top: 10px;
position: 50px;
}
.button:hover {
opacity: 0.8;
}
.button:active {
opacity: 0.5;
}
.charged {
color: plum;
text-decoration: underline;
}
.picture {
margin-top: 50px;
}
<!DOCTYPE html>
<html align='center'>
<body>
<p class='new'>New</p>
<h2 class='macbook'>MacBook Pro</h3>
<h1 class='supercharged'><span class='charged'>Supercharged</span> for pros.</h1>
<p class='price'>From $1999</p>
<button class='button'>Buy</button>
<img src="https://images.macrumors.com/t/PV_LL2AlRJvaRvbuXCTUOuDpwzU=/800x0/smart/article-new/2013/09/16-inch-macbook-pro.jpg?lossy" alt="Macbook" class='picture'>
</body>
</html>
Just apply display: block to the <a>-element. When you use display: block on an element, it will try to take up as much width as possible. Seeing as it is not inside a parent container, it will take up 100% width of the <body>-element, as that is the elements closest parent. This way, it won't wrap around the image. The link will however stretch and fill the entire parent container as well. To combat this, apply max-width: fit-content, so the link's width is only relative to its content. Then you can apply margin: auto to center the element again.
For a responsive image, apply max-width: 100% and height: auto. This way it will automatically scale down, as the max-width: 100% property won't let it overflow its parent container (the <body>-element)
body {
text-align: center;
}
.new {
font-family: Arial;
color: rgb(202, 137, 15);
font-size: 18px;
margin-bottom: 15px;
}
.macbook {
font-family: Arial;
font-weight: bold;
font-size: 44px;
margin-top: 0px;
margin-bottom: 10px;
}
.supercharged {
font-family: Arial;
font-weight: bold;
font-size: 60px;
margin-top: 0px;
margin-bottom: 25px;
}
.price {
font-family: Arial;
font-size: 18px;
margin-top: 0px;
}
.button {
background-color: #007aff;
color: white;
border-radius: 100px;
font-weight: bold;
border: none;
padding-left: 16px;
padding-right: 16px;
padding-bottom: 10px;
padding-top: 10px;
position: 50px;
}
.button:hover {
opacity: 0.8;
}
.button:active {
opacity: 0.5;
}
.charged {
color: plum;
text-decoration: underline;
}
.picture {
margin-top: 50px;
max-width: 100%;
height: auto;
}
a {
display: block;
max-width: fit-content;
margin: auto;
}
<p class='new'>New</p>
<h2 class='macbook'>MacBook Pro</h3>
<h1 class='supercharged'><span class='charged'>Supercharged</span> for pros.</h1>
<p class='price'>From $1999</p>
<button class='button'>Buy</button>
<img src="https://images.macrumors.com/t/PV_LL2AlRJvaRvbuXCTUOuDpwzU=/800x0/smart/article-new/2013/09/16-inch-macbook-pro.jpg?lossy" alt="Macbook" class='picture'>
By default an image is displayed inline, which is causing your issue. You're on the right track, but instead of position fixed, position: block; would be a better choice.
(You can also centre your image and avoid it overflowing using a max-width and some margin)
.new {
font-family: Arial;
color: rgb(202, 137, 15);
font-size: 18px;
margin-bottom: 15px;
}
.macbook {
font-family: Arial;
font-weight: bold;
font-size: 44px;
margin-top: 0px;
margin-bottom: 10px;
}
.supercharged {
font-family: Arial;
font-weight: bold;
font-size: 60px;
margin-top: 0px;
margin-bottom: 25px;
}
.price {
font-family: Arial;
font-size: 18px;
margin-top: 0px;
}
.button {
background-color: #007aff;
color: white;
border-radius: 100px;
font-weight: bold;
border: none;
padding-left: 16px;
padding-right: 16px;
padding-bottom: 10px;
padding-top: 10px;
position: 50px;
}
.button:hover {
opacity: 0.8;
}
.button:active {
opacity: 0.5;
}
.charged {
color: plum;
text-decoration: underline;
}
.picture {
margin: 50px auto 0 auto;
display: block;
max-width: 100%;
}
<!DOCTYPE html>
<html align='center'>
<body>
<p class='new'>New</p>
<h2 class='macbook'>MacBook Pro</h3>
<h1 class='supercharged'><span class='charged'>Supercharged</span> for pros.</h1>
<p class='price'>From $1999</p>
<button class='button'>Buy</button>
<img src="https://images.macrumors.com/t/PV_LL2AlRJvaRvbuXCTUOuDpwzU=/800x0/smart/article-new/2013/09/16-inch-macbook-pro.jpg?lossy" alt="Macbook" class='picture'>
</body>
</html>
Basically I created one component which has just a title and a color for background that should cover the whole page (but it's not, apparently there's a top margin and I don't know how to remove it) and also I created a componenent to be the footer. This component should stay at the botom of the page and it should go down with the addition of content, but it doesn't, the content overlaps it and even crosses it. How can I fix it?
Background CSS:
<style scoped>
*{
margin: 0%;
padding: 0%;
}
.background{
position: relative;
height: 88vh;
background-color: #3B3B3B;
}
.title{
border: 1px solid #707070;
border-left: none;
border-right: none;
}
.title h2{
text-align: left;
color: #B16DFF;
padding-top: 0.8em;
font-size: 2em;
padding-bottom: 0.5em;
margin-left: 1.5em;
font-weight: 600;
}
Footer CSS:
<style scoped>
.container{
width: 100%;
margin: 0%;
position: absolute;
bottom: 0%;
background-color: #232323;
}
.container h2{
font-weight: bold;
color: #B16DFF;
font-size: 1.5rem;
padding-top: 1.1em;
}
.container #text{
position: relative;
float: left;
padding-left: 5em;
text-align: justify;
padding-bottom: 2em;
}
.container p{
font-weight: 600;
font-size: 0.8rem;
color: white;
}
.container #title{
padding-bottom: 0.4em;
}
.container #description{
padding-bottom: 1.3rem;
}
.container #images{
position: relative;
padding-top: 3em;
float: left;
padding-left: 5em;
}
.container ul li{
display: inline-block;
padding-left: 2em;
}
On your background css, you have a scoped style so it doesn't apply to everything.
Also when you use 0 as value for a css property, you don't need to specify units.
I have my code set up so I have the hero image at the bottom and the overlay on top with the text and button in overlay. I also have the navigation bar with a z-index but for some reason the button for my resume in overlay isn't working.
HTML
<div id="header">
<a href="index.html"><div id="leftHeader">
<img src="assets/logo2.jpg" alt="Logo" style="width:65px;height:65px">
<h1>Amanda Farrington</h1>
</div>
<div id="nav">
<ul>
<li>About</li>
<li>Work</li>
<li>Contact</li>
<li>Notes</li>
</ul>
</div>
</div>
<div id="hero">
<div id="heroImage">
<img src="assets/trees.jpg" alt="trees" style="width:100%;height:10%">
</div>
<div id="overlay">
<h2>Amanda Farrington</h2>
<h3>Graphic Artist | Web Designer</h3>
View Resume
</div>
</div>
CSS
#header {
color: #D7DADB;
font-family: 'Roboto', sans-serif;
font-weight: 300;
font-size : 15px;
text-align: left;
width: 100%;
padding-left: 3em;
position: relative;
height: 15%;
box-sizing: border-box;
padding-top: 1em;
}
#header img
{
float: left;
padding-left: 3em;
}
h1{
width: 9em;
float: left;
padding-left: 0.5em;
color: #45CCCC;
padding-bottom: 1px;
}
#nav {
width: 50%;
margin:0;
padding:0;
text-align: right;
color: red;
font-size:20px;
float: right;
padding-right: 2em;
z-index: 99;
}
#nav ul {
padding: 1px;
}
#nav li {
display: inline;
padding: 38px;
}
#nav li a {
color: #2C3E50;
text-decoration: none;
}
#nav li a:hover {
color: #45CCCC;
}
/*----------hero image styles-------------*/
#hero{
padding-top: 25em;
width: 100%;
height: 30em;
position: relative;
z-index: -1;
}
#heroImage
{
top: 9%;
width: 100%;
z-index: 1;
position: absolute;
}
#overlay{
width: 34em;
top: -15%;
margin-left: 30%;
z-index: 2;
position: relative;
clear: left;
}
h2{
width: 100%;
position: relative;
font-family: 'Roboto', sans-serif;
font-weight: 300;
font-size: 60px;
float: center;
color: white;
opacity: 1.0;
text-shadow: 2px 2px 3px #000000;
text-align: center;
}
h3{
width: 100%;
position: relative;
font-family: 'Roboto', sans-serif;
font-weight: 300;
font-size: 30px;
color: #e5e5e5;
opacity: 1.0;
text-shadow: 2px 3px 2px #000000;
text-align: center;
}
a.down{
z-index: 100;
font-family: 'Roboto', sans-serif;
font-weight: 400;
text-decoration: none;
color: #181b1e;
background: #45CCCC;
position: relative;
padding: 0.6em 0.2em;
font-size: 1.2em;
-webkit-border-radius: 6px;
width: 30%;
position: relative;
display: block;
margin-left: auto;
margin-right: auto;
text-align: center;
}
a.down:hover{
text-decoration: underline;
color: white;
}
Because z-index works only on elements which are NOT set asposition: static. Bear in mind that every element is set as default to position:static.
Try set to position:absolute; or relative your element.
Also all other types of positioning, like position:fixed, position:sticky.
So I've taken a look at your code and the reason your button doesn’t work is because the div with the ID of #hero (which contains the button) is below the body because it has a z-index of -1.
Set the z-index for #hero to 0 or higher and the button will work.
#hero {
padding-top: 25em;
width: 100%;
height: 30em;
position: relative;
z-index: 0;
}
Check out this JS Fiddle I've created for you:
https://jsfiddle.net/8fqwr6ca/
Edit: Oh, and I forgot to mention–since you want the image to be below, set the #hero 's z-index to 1, set #heroImage to 0, and overlay to 2. That should do the trick (if what I think you want is correct).
I'm trying to create a match div, which show match information. However they should all be different sizes and it does not seem like it wants to center properly. I want all these text to be centered in the middle of the div? how can this be done?
.saperator {
margin-right: 17px;
vertical-align: text-bottom;
color: #787878;
}
.result-in-month {
padding: 25px 20px;
background: #efefef;
margin-bottom: 10px;
border-radius: 4px;
border: none;
transition: all 0.45s ease-in-out 0s;
position: relative;
}
.result-in-month:hover {
background: #FFF;
box-shadow: 0px 0px 3px 1px #e5e5e5;
}
.result-in-month {
padding: 20px 30px;
font-size: 15px;
}
.result-date {
display: inline-block;
width: 12%;
margin-right: 2%;
font-size: 12px;
font-weight: 400;
text-transform: uppercase;
line-height: 40px;
}
.result-stream {
display: inline-block;
width: 12%;
text-transform: uppercase;
line-height: 40px;
text-align: right;
color: #212121;
font-size: 36px;
}
.result-stream a:hover {
text-decoration: none;
}
.result-match-team-wrapper {
display: inline-block;
width: 72%;
text-align: center;
text-transform: uppercase;
line-height: 40px;
font-weight: normal;
font-size: 18px;
}
.result-match-versus {
padding: 0px 3px;
font-weight: normal;
color: #999999;
}
.result-match-team.left {
margin-right: 2.5%;
text-align: right;
}
.result-match-team.right {
margin-left: 2.5%;
text-align: left;
}
.result-match-team {
display: inline-block;
width: 40%;
}
.result-match-separator {
margin: 0px 2.5%;
}
#nav {
margin-left:0px !important;
}
#nav li {
display: inline-block;
padding: 4px 11px;
background-color: #fff;
margin-right: 6px;
}
#nav li a {
color: #000;
text-decoration: none;
text-transform: uppercase;
font-size: 18px;
font-weight: 400;
font-family: Oswald, Impact, sans-serif !important;
}
#nav li.active {
background-color: #000;
}
#nav li.active a {
color: #fff;
}
<div class="result-in-month">
<div class="result-date">
SLUT
</div>
<div class="result-match-team-wrapper">
<span class="result-match-team left">
TEAM 3
</span>
<span class="result-match-versus">
VS
</span>
<span class="result-match-team right">
TEAM 1
</span>
</div>
<div class="result-stream">
<span class="result-match-score" >2</span><span class="result-match-separator">-</span><span class="result-match-score">1</span>
</div>
<div class="clear"></div>
</div>
You could let the inner divs behave like table cells and then vertical align them.
div {
border: 1px solid grey;
}
.match-header {
display: table;
width: 100%;
height: 300px;
}
.v-center {
vertical-align: middle;
display: table-cell;
}
.player-a {
font-size: 3em;
text-align: center;
}
.player-b {
font-size: 6em;
text-align: center;
}
.score {
font-size: 1em;
text-align: center;
}
<div class="match-header">
<div class="player-a v-center">
Ann
</div>
<div class="score v-center">
5 vs 6
</div>
<div class="player-b v-center">
Bob
</div>
</div>
I would probably change the structure of your HTML but this should see you on the right track with what you've got.
Updated fiddle
You can use absolute positioning on the children elements of your result-in-month class like so
.result-date{
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 12%;
margin-right: 2%;
font-size: 12px;
font-weight: 400;
text-transform: uppercase;
}
.result-match-team-wrapper {
position: absolute;
top: 50%;
transform: translateY(-50%);
display: inline-block;
width: 94%;
text-align: center;
text-transform: uppercase;
line-height: 40px;
font-weight: normal;
font-size: 18px;
}
.result-stream{
position: absolute;
top: 50%;
right: 5%;
transform: translateY(-50%);
display: inline-block;
width: 12%;
text-transform: uppercase;
line-height: 40px;
text-align: right;
color: #212121;
font-size: 36px;
}
Do you mean something like this ?
https://jsfiddle.net/wgrLfxg3/4/
Because you are using elements you only declared the font and size in nav but not the rest of elements
add the follow to the other elements and it will work fine. Take a look to the fiddle
font-size: 18px;
font-weight: 400;
font-family: Oswald, Impact, sans-serif !important;
http://i.imgur.com/Sc1NnFp.png
I need to create that with CSS. I can use an image if absolutely necessary, but either way it needs to be expandable (probably vertically is best for this one).
http://jsfiddle.net/VR2WF/
<div id="cta">
<div class="callus">Call us today!</div>
<div class="phonenumber">404-555-5555</div>
</div>
#cta {
font-family: Arial, sans-serif;
font-weight: bold;
font-size: 20px;
padding: 10px 20px;
color: #FFF;
text-align: center;
text-transform: uppercase;
background: #232323;
max-width: 400px;
margin: auto;
}
.callus, .phonenumber {
display: inline-block;
}
Here is my solution:
http://codepen.io/Chovanec/pen/temKh
<div class="rib"><div class="text">Call us today</div><div class="arrow"><!-- --></div></div>
.rib .text {
font-family: sans-serif;
color: #fff;
background: #000;
padding: 20px 50px 5px 50px;
width: 500px;
font-size: 20px;
text-transform: uppercase;
font-weight: bold;
text-align: center;
}
.rib .arrow {
display: block;
border-width: 20px 300px 0 300px;
border-color: transparent;
border-top-color: #000;
border-style: solid;
height: 0;
width: 0;
overflow: hidden;
}