I'm currently making a project which consists of a website that streams movies and tv shows, in the tv show section I want to insert a image to illustrate each episode. My idea is making a second image that shows which episode that image corresponds to and I'm having a little trouble putting the second image above the first one.
.episode-slidebackground {
width: 950px;
height: 220px;
background: rgba(162, 162, 162, 0.24);
float: left;
margin-left: 15px;
margin-top: 20px;
margin-bottom: 15px;
}
.episode-slidebackground img {
width:182px;
height:136px;
float: left;
margin-left: 7px;
margin-top: 7px;
margin-bottom: 5px;
border-radius: 15px;
}
.episode-slideimgbackground{
width: 925px;
margin-left:10px;
margin-right:10px;
height:145px;
background: rgba(128, 128, 128, 0.24)
}
h1{
font-size: 30px;
color: #f2a223;
font-weight: bold;
margin-bottom: 30px;
margin-top: 10px;
}
h2 {
font-size: 15px;
color: #f2a223;
font-weight: bold;
}
h3 {
font-size: 14px;
color: #fff;
font-weight: bold;
}
h4 {
font-size: 14px;
color: #f3b12b;
font-weight: bold;
}
h5 {
font-size: 12px;
color: white;
}
h6 {
font-size: 20px;
color: white;
padding-left: 5px;
padding-top: 5px;
}
<div class="episode-slidebackground">
<h6>Temporada:1 2 3 4 5 6</h6> <br>
<h2>Episódios:</h2>
<div class="episode-slideimgbackground">
<img src="img/1.jpg">
<img src="img/2.jpg">
<img src="img/3.jpg">
</div>
</div>
This is the page without the second image:
You need to try and work with CSS's position attribute. This will enable you to have more control over your elements.
The two position attribute's you need to make use of are absolute and relative.
Basically, if you have a div that is set to position: relative that means that you can adjust that div's position without changing the layout of your webpage. It also means that any children elements of that div with the position: absolute can be positioned anywhere inside of that relative div.
.videoContainer {
position: relative;
height: 200px;
width: 200px;
}
.videoImage, .videoCaption {
position: absolute;
color: white;
}
.videoCaption {
bottom: 0;
height: 50px;
background: Gray;
width: 100%;
}
<div class="videoContainer">
<img class="videoImage" src="http://placehold.it/200x200"/>
<div class="videoCaption">Some Caption</div>
</div>
You need to set the z-index this is an css attribute that determines which element is on top
https://developer.mozilla.org/en-US/docs/Web/CSS/z-index
Related
I am trying to make a footer for a div element, with a <p> tag, however, depending on the font size, the footer would be outside of the box.
How can I make it align at the bottom of the page, with correct padding?
Here's the HTML & CSS file:
#import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');
body {
background-color: #202020;
font-family: 'Montserrat', sans-serif;
color: #ffffff;
}
#list {
width: 70%;
height: 250px;
padding: 10px;
overflow: auto;
background-color: #303030;
color: white;
}
.currency {
background-color: #202020;
height: 20%;
color: white;
}
.currency-flag {
float: left;
padding: 5px;
}
.currency-name {
text-align: left;
font-size: 120%;
/* padding-top: 5px; */
}
.currency-value {
text-align: left;
font-size: 50%;
}
<center>
<div id="list">
<div class="currency">
<img class="currency-flag" src="flags/eur.svg"></img>
<p class="currency-name">European Euro</p>
<p class="currency-value">1 R$ = 2 EUR</p>
</div>
</div>
</center>
The problem is that you have set fixed height to .currency insted of height:20% use height:auto;
.currency {
background-color: #202020;
height: auto;
color: white;
}
to fixed it at botton use positions like
#list {
width: 70%;
height: 250px;
padding: 10px;
overflow: auto;
background-color: #303030;
color: white;
position: absolute;
bottom: 0;
}
.currency {
background-color: #202020;
height: auto;
color: white;
}
Set the height property to auto instead of fixing it it will make your p tag inside the div
One suggestion :- Do not use the center dag as its outdated instead try to do similar thing with css property of text-align center
I've been through some CSS practice lately. Let's say I have the following HTML/CSS code of a calendar web app you can see in my Codepen.
What I need is to have the ".day_body" element and the "+" pseudo element along with its white circle container horizontally aligned. Furthermore, I need that "+" to fit in the centre of the white circle. Unfortunately editing the HTML or using flexbox is not an option for now.
Any ideas on how to accomplish that?
<div class="calendar_plan">
<div class="day_title">Today</div>
<div class="day_body">19 May 2020</div>
<div class="day_add">
<span class="plus_sign"></span>
</div>
<div>
.calendar_plan {
background-color: teal;
color: #fff;
margin-top: 2rem;
margin-bottom: 4rem;
padding: 3rem;
clear: both;
overflow: hidden;
}
.day_title {
font-size: 2.2em;
font-weight: 800;
}
.day_body {
font-size: 2em;
float: left;
}
.day_add {
margin-left: 20px;
float: left;
}
.day_add:after {
display: block;
width: 4rem;
height: 4rem;
content: "\002B";
font-size: 4rem;
color: #999;
background-color: #fff;
border-radius: 50%;
line-height: 4rem;
}
.day_add:hover:after {
cursor: pointer;
}
Like already mentioned in the comment, adding text-align: center; to .day-add helps to align the plus sign.
To horizontally align the the date with the circle, you could increase the line-height of the .day_body to the half of the line-height of the circle (4em): line-height: 2em;. Nevertheless this moves the date a little bit 'down'. Is that fine?
Alternatively you could use absolute positioning of the circle.
.calendar_plan {
background-color: teal;
color: #fff;
margin-top: 2rem;
margin-bottom: 4rem;
padding: 3rem;
clear: both;
overflow: hidden;
}
.day_title {
font-size: 2.2em;
font-weight: 800;
}
.day_body {
font-size: 2em;
float: left;
line-height: 2em;
}
.day_add {
margin-left: 20px;
float: left;
text-align: center;
}
.day_add:after {
display: block;
width: 4rem;
height: 4rem;
content: "\002B";
font-size: 4rem;
color: #999;
background-color: #fff;
border-radius: 50%;
line-height: 4rem;
}
.day_add:hover:after {
cursor: pointer;
}
<div class="calendar_plan">
<div class="day_title">Today</div>
<div class="day_body">19 May 2020</div>
<div class="day_add">
<span class="plus_sign"></span>
</div>
<div>
I am trying to make a full width hero image with an h1 header, boxed text with 2 sizes of text inside plus a button. I have been wrestling with this all day and it just doesnt seem to work the way i'd like it to. Any help would be really appreciated.
thanks
Images:
How it looks at the moment with code
If you notice it is not going full width (gap on the left).
This is how i would like it to look or close enough
//css//
.hero-image {
background-image: url("image.jpg");
background-position: 100%;
background-repeat: no-repeat;
background-size: cover;
width: 100%;
padding: 50px;
}
.hero-text {
position: relative;
color: #154774;
}
.hero-text button {
border-radius: 5px;
padding: 10px 20px;
color: white;
background-color: #00adee;
text-align: center;
cursor: pointer;
font-size: 20px;
font-weight: bold;
bottom: 50px;
}
.hero-text button:hover {
background-color: #0597c4;
color: white;
}
.herotext2 {
border-radius: 5px;
padding: 10px 10px 10px 10px;
color: white;
background-color: red;
font-size: 20px;
width: 200px;
line-height: 1.4;
}
</style>
//html//
<div class="hero-image">
<div class="hero-text">
<h1 style="font-size:40px">IT support for<br>your business<br>as easy as<br>child’s play</h1>
<p class="herotext2">All inclusive IT GDPR service packages from £33 p/m</p>
<button>Try it for free today</button>
</div>
</div>
Updated image:
Updated image
.hero-image {
background-image: url("https://beerdeluxe.com.au/hawthorn/wp-content/uploads/sites/4/2017/05/hero-placeholder.png");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
padding: 50px;
}
.hero-text {
position: relative;
color: #154774;
text-align:right;
}
.hero-text h1 {
font-size:40px;
margin-right:15%;
}
.hero-text h1 .italic {
font-style: italic;
}
.hero-text button {
border-radius: 5px;
padding: 10px 20px;
color: white;
background-color: #00adee;
text-align: center;
cursor: pointer;
font-size: 20px;
font-weight: bold;
bottom: 50px;
max-width: 150px;
margin-top: 25px;
}
.hero-text button:hover {
background-color: #0597c4;
color: white;
}
.herotext2 {
position:relative;
border-radius: 5px;
padding: 10px 10px 10px 10px;
color: white;
background-color: red;
font-size: 20px;
width: 200px;
line-height: 1.4;
margin: 0 0 0 auto;
text-align:left;
}
.herotext2 .no {
font-size: 135px;
line-height: 130px;
font-weight: 600;
}
.herotext2 .tag {
position: absolute;
bottom: 26px;
right: 30px;
font-size: 12px;
color: red;
}
<div class="hero-image">
<div class="hero-text">
<h1>IT support for your<br> business - <span class="italic">as easy as<br>child’s play</span></h1>
<p class="herotext2">All inclusive IT GDPR service packages from <span class="no">£33</span><span class="tag">p/m</span></p>
<button>Try it for free today</button>
</div>
</div>
https://jsfiddle.net/Sampath_Madhuranga/pwxf73z8/16/
I have updated your html format and added new styles..Now it appears as your design but you need to apply relevant font family.
It works nice. Let me know if there is any issue.
Thanks.
You are missing absolute positioning the elements inside the hero image. This way, you can force them to stay at certain point inside it, by setting top, right, bottom and left of each one.
Don't forget to set parent hero div to position: relative.
I'd like to make a message-alert box in my web app. I created the main style but I have problems on small screen sizes.
Here's the image for the regular 1366x768 computer screen:
And here is for a typical mobile device:
Problems:
The X button has tagled with the message.
The main message wrapper has fixed and wasn't expand when the message came out of the wrapper.
How to fix the two above problems? Do I have to follow another path? I use position: fixed; property-value to keep my message on top.
Here are my HTMl and CSS code:
HTML:
<div class="top-msg">
<div class="top-msg-ico">
!
</div>
<div class="top-msg-inner">
<p>Only letters and nubers are allowed for email. See security for more info.</p>
</div>
<div class="top-msg-close" style=" cursor: pointer;">✕</div>
</div>
CSS:
.top-msg {
width: 100%;
height: 55px;
position: fixed;
background-color: rgba(42,45,50,0.6);
color: rgba(250,251,255,0.95);
font-family: "Lato", sans-serif;
font-size: 18px;
}
.top-msg-close {
float: right;
padding-top: 17px;
padding-right: 30px;
//border: 1px solid white;
//height: 100%;
width: 3%;
}
.top-msg-inner {
top: 15px;
position: absolute;
display: inline-block;
padding-left: 10px;
width: 80%;
//border: 1px solid white;
}
.top-msg-ico {
min-width: 65px;
height: 100%;
background-color: #fff;
display: inline-block;
background-color: rgba(0,0,0,0.7);
text-align: center;
font-size: 45px;
}
FIDDLE:
https://jsfiddle.net/4oLvyajo/
UPDATE -SOLUTION!-
After some help from LGSon answer I manage to finish all the design, so I accepts his answer but the hole solution is in the fiddle below.
FIDDLE:
https://jsfiddle.net/4oLvyajo/4/
Images:
Here is a start for you
.top-msg {
width: 100%;
position: fixed;
background-color: rgba(42,45,50,0.6);
color: rgba(250,251,255,0.95);
font-family: "Lato", sans-serif;
font-size: 18px;
}
.top-msg-close {
float: left;
box-sizing: border-box;
padding-top: 17px;
padding-right: 30px;
width: 45px;
}
.top-msg-inner a {
text-decoration: none;
color: RGBA(0, 0, 0, 0.6);
font-weight: bold;
}
.top-msg-inner a:hover {
color: RGBA(0, 0, 0, 0.5);
}
.top-msg-inner {
float: left;
box-sizing: border-box;
padding: 0 10px;
width: calc(100% - 110px);
}
.top-msg-ico {
float: left;
width: 65px;
height: 57px;
background-color: #fff;
background-color: rgba(0,0,0,0.7);
text-align: center;
font-size: 45px;
}
<div class="top-msg">
<div class="top-msg-ico">
!
</div>
<div class="top-msg-inner">
<p>Only letters and nubers are allowed for email. See security for more info.</p>
</div>
<div class="top-msg-close" style="cursor: pointer;">✕</div>
</div>
replace the width: 80% with margin-right: 40px, and you'll have to play around with the top: 15px as well (at -11 I had it looking right, but you can play around with that)
Here is the updated Fiddle
If you want everything scalable you'll need a completely different approach. First of all, if you place a right floating element under a block element it will float right, but underneath it. You'll need to define the floating close button element first.
Anyway, here's the updated Fiddle
It needs some minor tweaks in the padding and margins, but I think this is very close to what you're looking for
Can anyone please let me know why the following code produces white space between the div "content-main', and the two introduction divs, which sit above the main content?
.header {
width: inherit;
background-color: #58614E;
height: 8em;
position: relative;
z-index: 2;
}
.header-logo {
float: left;
display: inline-block;
}
#header-home-link {
color: white;
font-weight: bold;
margin-left: 3em;
position: relative;
top: 1em;
}
.header a:link {
color: #C5EBF9;
position: relative;
top: 1em;
padding-left: 1em;
}
.introduction-left {
background-color: #EEEEEE;
width: 55%;
padding-bottom: 1em;
padding-right: 1.0em;
padding-top: 1em;
border-right-style: dotted;
border-right-width: 1px;
float: left;
overflow: auto;
}
.introduction-left h2 {
color: #57614E;
padding-left: 13em;
}
.introduction-left p {
color: #626262;
padding-left: 2.0em;
z-index: 2;
}
.introduction-right {
background-color: #EEEEEE;
width: 40%;
float: right;
z-index: 0;
padding-right: 3.3em;
padding-top: 2em;
padding-bottom: 3.7em;
}
.introduction-right h2 {
color: #57614E;
font-style: italic;
position: relative;
left: 3em;
bottom: 0.5em;
margin: 0;
}
.introduction-right p {
padding-left: 1em;
color: #57614E;
}
.content-main {
background-color: #E2E2E2;
border-style: solid;
border-width: 1em;
border-color: white;
width: 100%;
overflow: auto;
}
.content-main h3 {
color: #728063;
font-style: italic;
padding-left: 15em;
}
<div class="header">
</div>
<div class="introduction-left">
<h2>Today's News</h2>
<p>This website template has been designed by Free Website Templates for you, for free. You can replace all this text with your own text. You can remove any link to our website from this website template, you're free to use this website template without
linking back to us. If you're having problems editing this website template, then don't hesitate to ask for help on the Forums.</p>
</div>
<div class="introduction-right">
<h2>Testimonials</h2>
<p>"You can remove any link to our website from this website template, you're free to use this website template without linking back to us.”
</p>
</div>
<div class="content-main">
<h3>Main Articles.</h3>
</div>
I think because,you use
.content-main{
border-style: solid;
border-width: 1em;
Try to use
.content-main{
background-color: #E2E2E2;
border-style: none;
width: 100%;
overflow:auto;
In your css, I see (last Chrome in Linux)
when I use border-style: none, I get (second div with main-context without space):
It's what you want?
Quick answer - not necessarily right:
Try removing all padding statements in CSS temporarily and see how it looks...
Then add them back in as desired.
The spaces between your elements are causing the white space to appear. Put in some sort of wrapper and give it font-size: 0, then give the divs with text a font-size: initial, or if you care about making it IE compatible give it font-size: 16px or whatever, since font-size: initial doesn't work on IE.