I am trying to hover a text in an image. If I set a background color for the text it is not working. It will work if I use position: absolute; but it is hovering my header too.
.comimg {
width: 100%;
height: 75%;
}
.tren {
margin-top: -250px;
margin-bottom: -300px;
text-align: center;
margin-left: auto;
margin-right: auto;
background-color: aqua;
overflow: none;
}
.trust p {
margin-top: -19;
font-size: 10px;
font-weight: bolder;
color: #424242;
}
.comimg p {
font-family: 'Open Sans', sans-serif;
width: auto;
height: auto;
font-size: 2em;
color: aliceblue;
background-color: aqua;
font-weight: 900;
}
.comimg img {
width: 100%;
height: 100%;
}
<div class="comimg">
<img src="img/6042013705_eb32ce58fa_o.jpg" />
<div class="tren">
<p>#trending</p>
</div>
</div>
Based on my understanding you can achieve that effect using CSS and HTML.
I'm using :hover selector on the .wrapper div, in order to apply different styles based on the result I want to achieve.
EXAMPLE
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
font-family: Helvetica, sans-serif;
}
main {
width: 600px;
margin: 0 auto;
}
.wrapper {
height: 100vh;
width: 100%;
background: url('http://lorempixel.com/500/500/abstract') no-repeat;
background-size: cover;
display: table;
}
.wrapper:hover {
background: #fda;
}
.wrapper:hover p {
background: #345;
display: block;
}
p {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: #fff;
font-size: 2.4em;
display: none;
}
<main>
<div class="wrapper">
<p>
#trending
</p>
</div>
</main>
Related
Im making a pricing page for my website but as I'm making my website responsive, (only when the page is less than 110 pixels wide),
* {
margin: 0;
padding: 0;
font-family: "Poppins", sans-serif;
}
#pricing {
height: 95vh;
width: 100vw;
background-color: #E5EDFB;
margin-top: none;
}
h1 {
color: #0E0A24;
padding-left: 8.75%;
padding-top: 5vh;
font-size: 300%;
}
h2 {
color: #0E0A24;
text-align: center;
margin-top: 4vh;
font-weight: 600;
font-size: 175%;
}
p {
color: #0E0A24;
text-align: center;
font-weight: 300;
}
span {
font-size: 120%;
font-weight: 400;
}
.smallTile {
background-color: white;
width: 23vw;
height: 65%;
border-radius: 15px;
}
.largeTile {
background-color: white;
width: 28vw;
height: 70%;
border-radius: 15px;
}
#photo {
margin-left: 8.75%;
position: relative;
top: 27%;
transform: translateY(-27%);
float: left;
}
#video {
margin-right: 8.75%;
position: relative;
top: 27%;
transform: translateY(-27%);
float: right;
}
#combo {
margin-right: 8.75%;
position: absolute;
left: 50%;
top: 60%;
transform: translate(-50%, -60%);
}
hr {
margin-top: 6%;
margin-bottom: 6%;
width: 20%;
position: relative;
left: 50%;
transform: translateX(-50%);
background-color: #0E0A24;
border: none;
height: 0.1px;
;
}
.topHR {
width: 50%;
margin-top: 4vh;
margin-bottom: 4vh;
height: 2px;
border-radius: 1px;
;
}
#comboHeader {
font-weight: 900;
font-size: 200%;
}
#media screen and (max-width: 1100px) {
body {
background-color: red;
}
.smallTile {
display: block;
position: relative;
width: 86vw;
height: 95vh;
}
.largeTile {
display: block;
position: relative;
width: 86vw;
}
#photo {}
#video {
margin-top: 100vh;
}
#combo {
margin-top: 100vh;
position: relative;
}
h1 {
margin-bottom: 20px;
}
}
<div id=p ricing>
<h1>Our Pricing:</h1>
<div class="smallTile" id="photo">
<h2>Photography<br>Plan</h2>
<hr class="topHR">
<p><span>0 - 10 Pictures</span><br>$100</p>
<hr>
<p><span>10 - 20 Pictures</span><br>$175</p>
<hr>
<p><span>20+ Pictures</span><br>$250</p>
</div>
<div class="smallTile" id="video">
<h2>Videography<br>Plan</h2>
<hr class="topHR">
<p><span>0 - 5 Videos</span><br>$100</p>
<hr>
<p><span>5 - 10 Videos</span><br>$150</p>
<hr>
<p><span>Edited Video</span><br>Additional $50</p>
</div>
<div class="largeTile" id="combo">
<h2 id="comboHeader">Combo<br>Plan</h2>
<hr class="topHR">
<p><span>Combined price of both plans</span><br>$50 Reduced</p>
<hr>
</div>
</div>
I noticed that the combo package text is at the bottom of the page instead of in the div where I placed it. Additionally, is it possible to change the order of the divs so that the combo package is last on the responsive site only? Thanks for your help in advance!
I noticed you did not specify the float value for the combo div. Add float to the combo styles as such:
#combo{
margin-right: 8.75%;
position: absolute;
left: 50%;
top: 60%;
transform: translate(-50%, -60%);
float: left;
}
I am currently working on a website and I have an element that I have explicitly declared: display: inline-block and visibility: visible however, the element is still invisible. This is only occurring on mobile devices. The invisible element is <div id="clock">.
#font-face {
font-family: 'bitwise';
src: url('bitwise.ttf');
font-display: swap;
}
* {
font-family: 'bitwise', monospace;
margin: 0;
padding: 0;
outline: 0;
}
:root {
background-color: #008080;
}
body,
html,
.wrapper {
width: 100%;
height: 100%;
}
span {
color: #FFFFFF;
font-size: 18pt;
text-align: center;
display: inline-block;
}
h1 {
color: #FFFFFF;
text-align: center;
display: inline-block;
}
input {
font-family: 'bitwise', monospace;
background-color: #535353;
color: #FFFFFF;
font-size: 18pt;
overflow: hidden;
text-align: center;
line-height: inherit;
height: inherit;
}
img:not(.noresize) {
width: 35%;
height: 35%;
}
video {
width: 35%;
height: 35%;
}
a:link {
color: #EFCF7C;
}
a:visited {
color: #105733;
}
button {
background-color: #105733;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 18px;
margin: 4px 2px;
}
#back {
background-color: #660000;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 18px;
margin: 4px 2px;
}
#taskbar {
position: absolute;
overflow: hidden;
bottom: 0;
width: 100%;
height: 27px;
background-color: silver;
box-shadow: inset 0px 1px #dfdfdf, inset 0px 2px #ffffff;
}
.center {
display: flex;
flex-wrap: wrap;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
text-align: center;
align-items: center;
justify-content: center;
}
#start {
float: left;
}
#clock {
float: right;
position: relative;
text-align: center;
}
#clocktime {
font-family: 'Arial', serif;
font-size: 13px;
color: #000000;
position: relative;
bottom: 23px;
left: 17px;
}
#icons {
padding-top: 8px;
}
#content {
padding-top: 10px;
}
.break {
flex-basis: 100%;
height: 0;
}
#content {
width: 675px;
height: 300px;
}
#media screen and (max-width: 1079px) {
html,
body {
overflow: hidden;
}
#clock {
float: right;
position: relative;
bottom: 100px;
text-align: center;
display: inline-block;
visibility: visible;
}
#clocktime {
font-family: 'Arial', serif;
font-size: 13px;
color: #000000;
position: relative;
bottom: 23px;
left: 17px;
}
}
<div id="taskbar">
<div id="start"><img class="noresize" src="/assets/start.png"></div>
<div id="clock"><img class="noresize" src="/assets/clock.png">
<div id="clocktime"></div>
</div>
</div>
<div id="icons"><img class="noresize" src="/assets/icons.png"></div>
<div class="center"><img class="noresize" src="/assets/ie.png"></div>
<div class="center" id="content">
Content here.
</div>
Screenshot 1 - What the page should look like. Note the clock in the lower-right corner.
Screenshot 2 - What the page actually looks like on mobile.
Screenshot 3 - Chrome DevTools showing the element as being in a visible spot, but still not being visible.
I see that that css is only appliable when max-width is equal to 1079px.
Try to increase that number in inspector element to see what happens.
So it turns out I had overflow: hidden set on #taskbar and this means that any children inside of the taskbar will not display, even if they are in a "visible" area. Adding bottom: 32px to set it inside of the taskbar worked.
Updated CSS:
#taskbar {
position: absolute;
overflow: hidden;
bottom: 0;
width: 100%;
height: 27px;
background-color: silver;
box-shadow: inset 0px 1px #dfdfdf, inset 0px 2px #ffffff;
}
<snip>
#media screen and (max-width: 1079px) {
#clock {
bottom: 32px;
}
}
As the title mentions, this problem is quite specific and I can't seem to find an answer for it anywhere. I'm trying to add the text "2017 Indie" to the very bottom of the page. When I do margin-top to some pixel value, the text will remain the same and nothing changes, but when I do margin-bottom it creates extra white space above the division I'm in which is the opposite of what I want. I'm not sure what the problem is.
html,
body {
height: 100%
}
* {
margin: 0;
}
.sect1 h1 {
font-size: 100px;
color: white;
margin-top: 150px;
padding: 0;
display: inline-block;
}
.sect1-1 {
text-align: center;
}
.sect1-text {
text-align: center;
}
.sect1 p {
font-size: 40px;
color: white;
margin-top: 250px;
padding: 0;
display: inline-block;
}
.text3-1 {
text-align: center;
margin-top: 100px;
display: block;
}
.text3-1 p {
font-size: 100px;
color: white;
background: blue;
padding: 50px;
display: inline-block;
}
#p1 {
top: 540px;
padding-left: 520px;
color: white;
font-size: 42px;
}
#p2 {
top: 840px;
padding-left: 220px;
color: white;
font-size: 24px;
}
#p3 {
color: black;
top: 2935px;
padding-left: 665px;
}
iframe {
position: absolute;
}
.sect {
height: 100%;
background-size: cover;
background-attachment: fixed;
}
.subSect {
height: 51.75%;
background-color: orange;
margin: 0;
}
.sect1 {
background-image: url("images/image4.jpg");
}
.sect2 {
background-image: url("images/image5.jpg");
}
.sect3 {
height: 100%;
background-size: cover;
background-image: url("images/image2.jpg");
}
script {
padding-left: 250px;
}
<div class="sect sect1">
<div class="sect1-1">
<h1>Indie</h1>
</div>
<div class="sect1-text">
<p>What music</p>
</div>
</div>
<div class="subSect">
<div class="text">
<p>This is about....</p>
</div>
</div>
<div class="sect sect2">
</div>
<div class="subSect"></div>
<div class="sect3">
<div class="text3-1">
<p>2017 Indie</p>
</div>
</div>
From my point of view the margin works as expected. The problem is the containing div.
You set sect3 to a height of 100%. Using this style causes the div to appear with the height of the parent element wich is the body tag. Removing the height style will fix the problem if i understood the problem right.
If it is necessary to keep the height of 100% you must add some additional styling to position the text right at the end.
Add position: relative to the container sect3
then position the text3-1 div at the bottom e.g.
.text3-1 {
position: absolute;
width: 100%;
bottom: 0;
text-align: center;
margin-top: 100px;
display: block;
}
html,
body {
height: 100%
}
* {
margin: 0;
}
.sect1 h1 {
font-size: 100px;
color: white;
margin-top: 150px;
padding: 0;
display: inline-block;
}
.sect1-1 {
text-align: center;
}
.sect1-text {
text-align: center;
}
.sect1 p {
font-size: 40px;
color: white;
margin-top: 250px;
padding: 0;
display: inline-block;
}
.text3-1 {
position: absolute;
width: 100%;
bottom: 0;
text-align: center;
margin-top: 100px;
display: block;
}
.text3-1 p {
font-size: 100px;
color: white;
background: blue;
padding: 50px;
display: inline-block;
}
#p1 {
top: 540px;
padding-left: 520px;
color: white;
font-size: 42px;
}
#p2 {
top: 840px;
padding-left: 220px;
color: white;
font-size: 24px;
}
#p3 {
color: black;
top: 2935px;
padding-left: 665px;
}
iframe {
position: absolute;
}
.sect {
height: 100%;
background-size: cover;
background-attachment: fixed;
}
.subSect {
height: 51.75%;
background-color: orange;
margin: 0;
}
.sect1 {
background-image: url("images/image4.jpg");
}
.sect2 {
background-image: url("images/image5.jpg");
}
.sect3 {
position: relative;
height: 100%;
background-size: cover;
background-image: url("images/image2.jpg");
}
script {
padding-left: 250px;
}
<div class="sect sect1">
<div class="sect1-1">
<h1>Indie</h1>
</div>
<div class="sect1-text">
<p>What music</p>
</div>
</div>
<div class="subSect">
<div class="text">
<p>This is about....</p>
</div>
</div>
<div class="sect sect2">
</div>
<div class="subSect"></div>
<div class="sect3">
<div class="text3-1">
<p>2017 Indie</p>
</div>
</div>
I've tried everything and can't seem to get the footer to stick to the bottom.
I've been moving things around, might have messed up the codes a bit.
I'm fine with how it is on longer (more content) pages. But it's giving me to much white space on pages with less content.
Help would be appreciated!
#charset "UTF-8";
* {
margin: 0;
}
/* Body */
html, body {
font-family: 'Questrial', sans-serif;
background-image: url('mila_background_btm.png');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: bottom;
margin: 0;
padding: 0;
min-height: 100%;
}
/* Text */
h1 {
text-align: center;
margin-top: 30px;
margin-bottom: 30px;
color: #3A3366
}
h2 {
text-align: center;
margin-top: 20px;
color: #2D4B5B;
margin-bottom: 20px;
}
p {
margin-top: 1;
text-align: center;
line-height: 150%;
}
/* Container */
.container {
width: 90%;
margin-top: 10px;
margin-left: auto;
margin-right: auto;
text-decoration: none;
height: 100%;
padding-bottom: 50px;
}
/* Navigation */
header {
font-family: 'Questrial', sans-serif;
width: 90%;
height: 9%;
background-color: #fff;
border-bottom: 2px solid #312f47;
text-decoration: none;
margin-left: auto;
margin-right: auto;
}
nav {
float: right;
width: 70%;
text-align: right;
margin-right: 0px;
margin-top: 35px;
}
nav a {
font-size: 1rem;
padding: .5rem;
text-decoration: none;
color: #312f47;
}
a:hover {
background: #312f47;
color: white;
}
nav a:first-child {
display: none;
}
.current {
color: #9390A6;
}
/* Images */
.gallery {
margin-bottom: 100px;
height: 100%;
}
.photos {
max-width: 50%;
}
.contact {
display: block;
margin: auto;
margin-top: 50px;
}
/* Google Maps */
.google-maps {
position: relative;
padding-bottom: 16.6%;
height: 0;
overflow: hidden;
margin-top: 50px;
}
.google-maps iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.video
{
position: relative;
padding-bottom: 56.25%;
padding-top: 80px;
height: 0;
overflow: hidden;
margin-top: 50px;
}
.video iframe
{
position: absolute;
top: 0;
left: 15%;
width: 70%;
height: 70%;
}
/* Footer */
footer {
font-size: 8pt;
color: #707070;
text-align: center;
height: 50px;
margin-top: 50px;
position: relative;
}
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<div class="container">
<header>
<nav>
</nav>
</header>
</div>
<footer>
</footer>
</body>
</html>
You have no text between the footer tags that is why you do not see the footer and if you add background color it will be much more clear.
For example you should add class="site-footer" to the html footer tag.
<footer class="site-footer">
The Footer.
</footer>
And the class definitions in the CSS file:
.site-footer{
height: 120px;
background: red;
}
You can also use the link for reference.
I'm using this for footer and its working perfect with me :
html,body,ul,a,li{
margin:0;
padding:0;
border:0;
outline:none;
vertical-align:top;
height:100%;
text-decoration:none;
}
.wrap{width:100%;
min-height:100%;
height: auto !important;
height:100%;margin:0 auto;
display:block;
background:lightblue;}
footer{
bottom:0px;
display:block;
width:100%;
height:auto;}
#fo-wrap{width:100%;
height:100px;
background-color:#FF2E99;}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class='wrap'>
here every thing in page
</div>
<footer>
<div id='fo-wrap'>
here footer content
</div>
</footer>
</body>
</html>
Add a min-height for .content relative to the viewport.
Decremented 110px from it (padding-bottom: 50px; margin-top: 10px; footer height: 50px)
footer {
font-size: 8pt;
color: #707070;
text-align: center;
height: 50px;
margin-top: 50px;
position: fixed;
bottom: 0;
width: 100%;
background-color: #ccc;
}
#charset "UTF-8";
* {
margin: 0;
}
/* Body */
html, body {
font-family: 'Questrial', sans-serif;
background-image: url('mila_background_btm.png');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: bottom;
margin: 0;
padding: 0;
min-height: 100%;
}
/* Text */
h1 {
text-align: center;
margin-top: 30px;
margin-bottom: 30px;
color: #3A3366
}
h2 {
text-align: center;
margin-top: 20px;
color: #2D4B5B;
margin-bottom: 20px;
}
p {
margin-top: 1;
text-align: center;
line-height: 150%;
}
/* Container */
.container {
width: 90%;
margin-top: 10px;
margin-left: auto;
margin-right: auto;
text-decoration: none;
height: 100%;
padding-bottom: 50px;
}
/* Navigation */
header {
font-family: 'Questrial', sans-serif;
width: 90%;
height: 9%;
background-color: #fff;
border-bottom: 2px solid #312f47;
text-decoration: none;
margin-left: auto;
margin-right: auto;
}
nav {
float: right;
width: 70%;
text-align: right;
margin-right: 0px;
margin-top: 35px;
}
nav a {
font-size: 1rem;
padding: .5rem;
text-decoration: none;
color: #312f47;
}
a:hover {
background: #312f47;
color: white;
}
nav a:first-child {
display: none;
}
.current {
color: #9390A6;
}
/* Images */
.gallery {
margin-bottom: 100px;
height: 100%;
}
.photos {
max-width: 50%;
}
.contact {
display: block;
margin: auto;
margin-top: 50px;
}
/* Google Maps */
.google-maps {
position: relative;
padding-bottom: 16.6%;
height: 0;
overflow: hidden;
margin-top: 50px;
}
.google-maps iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.video
{
position: relative;
padding-bottom: 56.25%;
padding-top: 80px;
height: 0;
overflow: hidden;
margin-top: 50px;
}
.video iframe
{
position: absolute;
top: 0;
left: 15%;
width: 70%;
height: 70%;
}
.container {
min-height: calc(100vh - 110px)
}
/* Footer */
footer {
font-size: 8pt;
color: #707070;
text-align: center;
height: 50px;
width: 100%;
background-color: #ccc;
}
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<div class="container">
<header>
<nav>
</nav>
</header>
</div>
<footer>
My footer
</footer>
</body>
</html>
I have a container I want to make a h2 appear aligned to the center with a slight line behind it. What I can't do is to make the line go behind the h2 box. No matter what I try, it keeps crossing over the h2 box.
Here goes a sample of what I need to accomplish:
Any help appreciated.
<div class="wrapper">
<div class="section-header">
<h2>H2 needs to be centered</h2>
<div class="line-section-header"></div>
</div>
</div>
The css I'm using is:
h2 {
font-family: 'Open Sans', Arial, sans-serif;
font-family: 20px;
font-weight: 700;
text-transform: uppercase;
width: 140px;
color: #3F3F3F;
background-color: white;
padding: 5px 10px;
border: 1px solid #D3D3D3;
text-align: center;
margin: 0 auto;
z-index: 999;
}
.wrapper {
margin: 0 auto;
width: 980px;
height: 1000px;
background-color: #white;
}
.section-header {
width: 100%;
height: auto;
background-color: white;
float: left;
position: relative;
}
.line-section-header {
width: 100%;
height: 1px;
background-color: #D3D3D3;
margin-top: 15px;
position: absolute;
}
I made a sample. check my jsfiddle http://jsfiddle.net/amitv1093/r3arp2m8/
html
<div class="container">
<h2> h2 </h2>
<div class="line"> </div>
</div>
css
.container
{
position:relative;
text-align:center;
background:#d9d9d9;
z-index:-99;
padding:12px 0px;
}
h2
{
width:100px;
background:grey;
height:50px;
text-align:center;
margin:0px auto;
line-height:50px;
}
.line
{
position:absolute;
width:100%;
height: 1px;
background: red;
top:50%;
margin:1px 0px;
z-index:-9;
}
h2 { //other props position: relative; }
alignment will be dynamic as container height
.wrapper {
margin: 0 auto;
width: 980px;
height: 1000px;
background-color: #white;
}
.section-header {
width: 100%;
height: auto;
background-color: white;
float: left;
position: relative;
}
h2 {
font-family: 'Open Sans', Arial, sans-serif;
font-family: 20px;
font-weight: 700;
text-transform: uppercase;
width: 140px;
color: #3F3F3F;
background-color: white;
padding: 5px 10px;
border: 1px solid #D3D3D3;
text-align: center;
margin: 0 auto;
z-index: 999;
position: relative;
}
.line-section-header {
width: 100%;
height: 1px;
background-color: #D3D3D3;
top: 50%;
position: absolute;
z-index: 1;
}
<div class="wrapper">
<div class="section-header">
<h2>H2 needs to be centered</h2>
<div class="line-section-header"></div>
</div>
</div>
Try adding this:
h2 {
position: absolute;
left:0;
right:0;
margin:auto;
}
.line-section-header {
margin-top: 50px;
position: absolute;
}
Try changing this in css:
h2 {
font-family: 'Open Sans', Arial, sans-serif;
font-family: 20px;
font-weight: 700;
text-transform: uppercase;
width: 140px;
color: #3F3F3F;
background-color: white;
padding: 5px 10px;
border: 1px solid #D3D3D3;
text-align: center;
margin: 0 auto;
margin-left: 420px;
z-index: 2;
position: absolute;
}
.wrapper {
margin: 0 auto;
width: 980px;
height: 1000px;
background-color: #white;
position: relative;
}
.section-header {
width: 100%;
height: auto;
background-color: white;
float: left;
position: relative;
}
.line-section-header {
width: 100%;
height: 1px;
background-color: #D3D3D3;
margin-top: 70px;
position: absolute;
z-index: 1;
}