so i am trying to get an overlay to work on my website, i've been watching a tutorial, but now i have gotten to a point where i don't know what i'm doing wrong.
<head>
<link rel="stylesheet" href="css/venues.css">
</head>
<section class="alt-section">
<h2> Places we've played.</h2>
<div class="thumb-container">
<a href ="" class="thumb-unit">
<div class="thumb-overlay">
<strong>Bar 42</strong>
<div class="zoom-icon">
</div>
</div>
</a>
<a href ="" class="thumb-unit">
<div class="thumb-overlay">
<strong>The Prince Albert</strong>
<div class="zoom-icon">
</div>
</div>
</a>
</div>
</section>
and the css is..
.alt-section{
background-color: #e6e6e6;
margin: 0 auto;
}
.alt-section h2{
padding:50px;
color: #e1c184;
font-family: Spliffs;
text-align: center;
font-size: 35;
}
.alt-section a{
font-family: sans-serif;
padding:10px;
font-size: 18px;
text-decoration: none;
color: #cd9732;
}
.alt-section a:hover{
color: #e1c184;
}
.thumb-container{
max-width: 960px;
margin: 0px auto;
padding-bottom: 100px;
overflow: hidden;
}
.thumb-unit{
display:block;
width: 150px;
float:left;
position: relative;
height: 150px;
background-image: url(http://i.imgur.com/3VTqQ8M.jpg);
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
}
.thumb-overlay{
position:absolute;
top:100%;
left:0px;
right:0px;
bottom:null;
height:100%;
background:rgba(205,151,50,0.5);
}
.thumb-overlay:hover{
position:absolute;
top:0%;
left:0px;
right:0px;
bottom:null;
background:rgba(205,151,50,0.5);
transition: linear;
transition-duration: 0.5s;
}
The youtube video has got me up to a point where they have completed it but i am still stuck on this. https://www.youtube.com/watch?v=ygvo1_kqVUg
So my actuall problem is to do with the size of a hitbox on an anchor tag i cant seem to increase the size so when i hover over it the overlay will pop up.
I have turned the overflow back to visible so you can see my problem, but when i scroll over the photo the overlay will not pop up its only when i hover over the writing will it then come up.
#element-with-background-image {
background-image:
linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)),
url("https://s-media-cache-ak0.pinimg.com/564x/b9/ea/bd/b9eabd96be305e1ee9fe5b6ca3fea673.jpg");
}
#color-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: black;
opacity: 0.6;
<div id="element-with-background-image">
<div id="color-overlay"></div>
...
</div>
Related
I am a beginner working on a front end project with HTML and CSS where on my website I have a welcoming picture which I include below :
I try to adjust the brightness of the image for better contrast using filter:brightness() on my image
However when I apply filter:brightness(50%); the brightness of the image obviously decreases but I lose the display of my logo on the left and my navbar on the right. I do not understand why this is happening and I would appreciate your help. My code :
.html,.body{
background-size: cover;
}
body{
overflow-x: hidden;
margin:0;
background: rgba(0, 0, 0, 0.1);
font-family: Arial, Helvetica, sans-serif;
}
.welcome-container{
position: relative;
top:0px;
left: 0px;
width:100%;
height:550px;
margin:0px;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.welcome-pic{
position: relative;
}
.welcome-pic h5{
position: absolute;
top:0%;
left:6%;
}
#fly{
font-size: 55px;
}
.welcome-pic img{
background: linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5) ), url('file:///Volumes/Animus/Jon/Dropbox/website/hellcity.jpg');
}
#welcome-plane{
filter: brightness(50%);
}
#book{
position: relative;
background-color: white;
border: none;
color: black;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
top:50%;
left:30%;
cursor: pointer;
}
.square-container{
position: absolute;
top: 2px;
left: 2%;
}
.ds-square{
background-color: red;
height: 50px;
width:50px;
opacity:1;
}
.ds-square span{
position: relative;
top:30%;
left:27%;
color:white;
font-size:20px;
}
.welcome-pic img {
width:100%;
height:550px;
opacity: 1;
}
.inside-pic{
position:absolute;
top:30%;
left:50%;
font-size: 60px;
transform: translate(-50%, -50%);
}
.welcome-pic ul{
position: absolute;
top:2px;
right:0%;
margin:0;
padding:0;
overflow:hidden;
background-color: transparent;
}
.welcome-pic li{
float:left;
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size:20px;
}
.inside-pic h3{
font-size:18px;
}
<div class = "welcome-container">
<div class = "welcome-pic">
<h5>DS <br/> AIRLINES</h5>
<div class="square-container">
<div class="ds-square">
<span id = "DS">DS</span>
</div>
</div>
<ul>
<li><a class="active" href = "#home">Home</a></li>
<li>News</li>
<li>About</li>
<li>Contact</li>
</ul>
<img src = "IMAGES/welcome_pic.jpg" alt="#" id = "welcome-plane">
<div class = "inside-pic">
<span id = "fly">FLY WITH DS <br/> AIRLINES</span>
<h3>Flights from or towards Athens ! Fly secure and comfortable with us! </h3>
<button id = "book">Book flight</button>
</div>
</div>
</div>
Thank you in advance.
You can use below code in your css (made image as background of div)
.welcome-pic{
background-image: linear-gradient(rgba(0,0,0,0.4),rgba(0,0,0,0.4)), url("IMAGES/welcome_pic.jpg") no-repeat center;
background-size: cover;
}
Make sure you remove img tag from your html.
You can adjust rgba values (alpha values) to specify brightness level.
It looks like you have a z-index layering issue. Use this css:
.welcome-pic{
z-index:0;
}
.square-container {
z-index: 1;
}
.welcome-pic ul {
z-index: 1;
}
Here is the codepen: https://codepen.io/ladywebhawk/pen/NWNPNzN
So far, I have managed to get my footer to always stick to the bottom, however, I have been struggling to get the content or images on my webpage to push the footer down. I have been trying absolute, fixed, relative positions for the footer but to no avail as the content in the class "container2" continues to go under the footer. It also shouldn't be sticky footer similar to the nav bar but like a natural footer where it is pushed down by content.
HTML/CSS: https://jsfiddle.net/jof0hzhc/2/
HTML
<!DOCTYPE html>
<html lang="en" class="app">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>ResponsiveNav</title>
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script type="text/javascript" src="js/script.js"> </script>
</head>
<body class="bg2">
<div class="wrapper">
<header>
<nav>
<div class="menu-icon">
<i class="fa fa-bars fa-2x"></i>
</div>
<div class="logo">
ResponsiveNav
</div>
<div class="menu">
<ul>
<li>Home</li> <!--Classifying the button as "activepage" will allow the button to be red when the user is on the page.-->
<li>Current page</li>
<li>About Us</li>
<li>Contact</li>
</ul>
</div>
</nav>
</header>
<section class="content">
<p class="apphead">Heading</p>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<div class="container2">
<p class="apptext">Sub-heading</p>
<div class="games">
<img src="images/1.png">
<img src="images/2.jpg">
<img src="images/3.jpg">
<img src="images/4.jpg">
<img src="images/5.jpg">
<img src="images/6.jpg">
</div>
<br><br><br><br><br><br><br><br>
</div>
</section>
</div>
<footer>
<p class="foot">
Footer text. <br>
__________________________________________________________________________________________________ <br> <br>
About us
|
Contact us <br>
__________________________________________________________________________________________________
<section>
<p class="foot">Social Media</p>
<span class="social">
<img src="images/mail.png" alt="Mail" width="50px" height="50px"/>
<img src="images/facebook.png" alt="Facebook" width="50px" height="50px"/>
<img src="images/twitter.png" alt="Twitter" width="50px" height="50px"/>
</span>
</section>
<section>
<h3>All rights reserved<br></h3>
</section>
</p>
</footer>
</body>
</html>
CSS
html, body {
margin: 0;
padding: 0;
width: 98%;
background-color: black;
min-height: 100%;
}
body {
font-family: "Helvetica Neue",sans-serif; /*Keep this font or hamburger disappears*/
font-weight: lighter;
}
header {
width: 98%;
height: 13vh;
}
li>a{display:;}
li>a:hover, /*li hover makes the area around the list of text have a block of color around it when you hover over the text*/
li>a:focus{color:red;text-decoration:underline;} /*li focus is when you select the element, the element gets into a focus*/
footer { /*How do I even make the footer always stick at the very bottom no wonder the dimensions of the browser?*/
width:100%;
position:absolute;
height:300px;
font-size: 15px;
margin-left:auto;
margin-right:auto;
text-align:center;
background-color:black;
border-width: 10px;
color: white;
}
p {
color: black;
position: relative;
margin: 5px;
padding: 10px;
}
a { /*General styling for links to other pages or websites*/
text-decoration:none;
position:relative;
font-family: Trebuchet MS, sans-serif;
}
h2 { /*Styling for site title*/
font-size: 50px;
text-align:left;
color:white;
margin: 20px;
font-family: courier;
}
h3 {
font-size:20px;
padding-left:20px;
color: white;
}
.content { /*the main container that consists of most of the existing content*/
margin-top:5px;
width:100%;
height: 1400px;
margin-left: auto;
margin-right: auto;
}
.logo {
line-height: 60px;
position: fixed;
float: left;
margin: 16px 46px;
color: #fff;
font-weight: bold;
font-size: 20px;
letter-spacing: 2px;
}
nav {
position: fixed;
width: 100%;
line-height: 60px;
z-index: 1; /*Allows for the navigation bar to stack on top of content and not appear as it overlaps*/
}
nav ul {
line-height: 60px;
list-style: none;
background: black;
overflow: hidden;
color: #fff;
padding: 0;
text-align: right;
margin: 0;
padding-right: 40px;
transition: 1s;
}
nav.black ul {
background: orange;
opacity: 10;
}
nav ul li {
display: inline-block;
padding: 16px 40px;;
}
nav ul li a {
text-decoration: none;
color: white;
font-size: 16px;
}
.menu-icon {
line-height: 60px;
width: 100%;
background: #000;
text-align: right;
box-sizing: border-box;
padding: 15px 24px;
cursor: pointer;
color: orange;
display: none;
}
.activepage {
font-size: 25px;
color: red;
text-decoration: underline;
}
.welcome {
font-family: courier;
}
.inquiry {
font-size: 17px;
color: white;
}
.container2 {
background-color: darkgrey;
padding: 10px;
margin: 0;
width: 97.8%;
height: 1000px;
z-index: 0;
position:absolute;
overflow:hidden;
}
p.heading {
font-size: 25px;
font-weight: bold;
font-family: courier;
}
.foot {
color: white;
}
.bg2 {
background-image:url("hex.jpg");
height: 550px;
width: 102%;
}
.apphead {
color: white;
font-size: 100px;
font-family: courier;
}
.apptext {
color:white;
font-size: 45px;
font-weight: bold;
font-family: courier;
}
.games {
margin:0;
position:relative;
border:solid white;
}
.games img {
width: 640px;
height:250px;
padding: 5px;
transition: 1s;
}
.games img:hover {
transform: scale(1.1);
}
.item img{
display:block;
}
#media(max-width: 786px) {
.logo {
position: fixed;
top: 0;
margin-top: 16px;
}
nav ul {
max-height: 0px;
background: #000;
}
nav.black ul {
background: #000;
}
.showing {
max-height: 34em;
}
nav ul li {
box-sizing: border-box;
width: 100%;
padding: 24px;
text-align: center;
}
.menu-icon {
display: block;
}
}
First off, I am a bit confused why you are using the <br> tag so much, but it almost looks like you are trying to space the elements with them. You may want to use padding or margin to do that.
Lastly, I think what you are looking for is position: fixed. Try this:
footer {
width:100%;
position: fixed; /* use fixed instead of absolute */
bottom: 0; /* set bottom to 0 */
height:300px;
font-size: 15px;
margin-left:auto;
margin-right:auto;
text-align:center;
background-color:black;
border-width: 10px;
color: white;
}
You have several problems in your css. The main problem for your content not to appear is that you're using overflow: hidden; in container2 and height: 1000px; this causes everything that exceeds 1000px won't be show. Try removing overflow: hidden or overflow: x-scroll.
This is the documentation for the overflow property, I suggest you read it for a better understanding of your problem. https://developer.mozilla.org/en-US/docs/Web/CSS/overflow
There are some things that you should change 1. you are using absolute position outside relative 2. using absolute values for hight is not good practice 3. is always better use padding and margin to make space ect. Keep fixed position only for header nav and comment out all fixed hight values(px)and absolute and relative positioning to start with. Absolute position should be inside relative if there is not special reason not to do that. To get out from main problem start with footer and container2. But there is lot more to fix.
You need set a min-height for html, body {min-height: 100vh;}
Set footer as position: fixed; bottom: 0; left: 0;
Hopefully this will help you.
I know people been asked similar questions but I couldn't find the right answer for my issue. So I am asking public to help with my issue. I have a img folder and i have a search.png image in it. Its a search icon that I am trying to use it for my youtube search API page. So the problem that I am having is when I put the search.png to my background: url(../img/search.png) its not showing up at all, instead its empty square box. I will attach my code below. Please dont dislike my issue question I really need an answer.
*{
padding:0;
margin:0;
}
body{
font-family:"Segoue",sans-serif;
line-height:2em;
color:#000000;
background:#e1e1e1 url(../img/red.jpg) fixed;
background-repeat: no-repeat;
/*background-position: cover;*/
background-size: cover;
font-size:13px;
}
a{
color:#333;
text-decoration:none;
}
#container{
/*height: 100px;*/
width:740px;
background:#f4f4f4;
opacity: 0.9;
margin:auto;
margin-top: 300px;
/*border: 2px solid black;*/
}
.clearfix{
clear:both;
}
header{
padding:30px 20px;
background:#f4f4f4;
}
header h1{
color:#001373;
margin-bottom:5px;
}
header span{
color:#000000;
border: 1px solid black;
border-radius: 5%;
background-color: #007EFF;
padding: 8px;
}
section{
padding:30px 20px 20px 20px;
}
footer{
padding:20px;
background:#f4f4f4;
text-align:center;
}
#search{
display: block;
margin-bottom: 15px;
}
.fieldcontainer{
display: block;
position: relative;
width: 90%;
margin: 0 auto;
}
#search-btn{
position: absolute;
right: 360px;
top: 5px;
height: 32px;
width: 32px;
border: 0;
cursor: pointer;
zoom: 1;
filter: alpha(opacity=65);
opacity: 0.65;
background-image: transparent url(../img/search.png) top-left no-repeat;
}
#search-btn:hover{
filter: alpha(opacity=90);
opacity: 0.9;
}
.search-field{
box-sizing: border-box;
display: block;
width: 45%;
padding: 7px 17px;
padding-right: 43px;
background-color: #BBB3F7;
color: #75026C;
font-weight: bolder;
border-radius: 1px solid black;
font-size: 1.6em;
border-color: #00B5ED;
border-radius: 1px;
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
cursor: default;
}
<script src="js/script.js"></script>
</head>
<body>
<div id="container">
<header>
<h1>Search<span>Vidz</span></h1>
<p>Search all Youtube videos</p>
</header>
<section>
<form id="search-form" name="search-form" onsubmit="return search()">
<div class="fieldcontainer">
<input type="search" id="query" class="search-field" placeholder="Search YouTube...">
<input type="submit" name="search-btn" id="search-btn" value="">
</div>
</form>
<ul id="results"></ul>
<div id="buttons"></div>
</section>
<footer>
<p>Copyright © 2014, All Rights Reserved</p>
</footer>
</div>
</body>
</html>
check the image file extension!
You write "search.jpg" in your code. Change to "search.png"
The issue is syntax, you have background-image: transparent url(../img/search.png) top-left no-repeat;, but all properties should be assigned to the shorthand background:, background-image expects only the image (url). Additionally, the position should not be "top-left" but "top left" (two words)
Correct version of that line should be:
background: transparent url(../img/search.png) top left no-repeat;
Hope this helps
The webpage is this: http://www.peliculadicto.tk/
Every time i resize my window, the text inside the color grey bar with position: fixed at the upper, moves to sides. It never stays centered. How can i prevent this?
HTML
<div class="headbar">
<h1 id="logo">
Películas buenas
</h1>
<div id="menu">
<ul>
<li>Inicio</li>
<li>Peliculas</li>
<li>Estrenos</li>
<li>Ranking</li><li>Proximamente</li>
<li>Más vistas</li>
</ul>
(search) <div id="uwpqsf_idsr"><form id="uwpqsffrom_641" method="get" action="url"><div class="uform_titlesr"></div><input type="hidden" name="unonce" value="4b52cced4e"><input type="hidden" name="uformid" value="641"><input type="hidden" name="s" value="uwpsfsearchtrg"><div class="uwpqsf_classsr"><input id="uwpqsf_id_keysr" type="text" name="skeyword" class="uwpqsftext" placeholder="Busca por título, actor, director, género..." value=""></div></form></div>
</div>
</div>
CSS
.uwpqsf_classsr {
margin-bottom: 1px;
clear: both;
position: absolute;
bottom: 2.5px;
left: 57px;
}
.headbar {
position:fixed;
top: 0px;
left: 0px;
height: 42px;
width: 100%;
background-color: #9B9595;
background-image: -moz-linear-gradient(#B6AAAA,#000000);
background-image: -webkit-gradient(linear,0% 0,0% 100%,from(#B6AAAA),to(#000000));
background-image: -webkit-linear-gradient(rgb(177, 185, 185),rgb(73, 68, 73));
background-image: -o-linear-gradient(#B6AAAA,#000000);
border-bottom: 1px solid #A29A9A;
z-index: 3000;
opacity: 0.65;
}
#menu {
position: absolute;
min-width: 700px;
left: 221px;
}
#menu>ul>li {
float:left;
position:relative;
height:27px;
left:370px;
}
It's the
#menu {
left: 221px;
}
that's doing it.
this is happened because of left:221px in a #menu. you can use a float:right for to fix a div at right side.
It is because the left is set to fixed px. When the Window resizes, the space looks larger but in fact the space stays the same and it's the window that becomes smaller. Try using percent.
Well, maybe i didn't explain myself.
However, i've already fixed, took a very large time to figure out. Time for me and anyone who wants to compare:
CSS
.headbar {
position:fixed;
width: 100%;
height: 42px;
margin: 0px auto;
background-color: #9B9595;
background-image: -moz-linear-gradient(#B6AAAA,#000000);
background-image: -webkit-gradient(linear,0% 0,0% 100%,from(#B6AAAA),to(#000000));
background-image: -webkit-linear-gradient(rgb(177, 185, 185),rgb(73, 68, 73));
background-image: -o-linear-gradient(#B6AAAA,#000000);
border-bottom: 1px solid #A29A9A;
z-index: 3000;
opacity: 0.65;
}
#menu {
margin: 0px 332px 0px auto;
width: 48%;
position: relative;
right: 178px;
}
#menu>ul>li {
float:left;
height:27px;
margin-top:13px;
}
.uwpqsf_classsr {
}
input#uwpqsf_id_keysr {
color: #FFFFFF;
width:277px;
height:30px;
padding-left: 32px;
background: rgba(56, 53, 53, 0.12) url(/lupa.png) no-repeat;
border: 1px solid rgba(0,0,0,0.2);
-webkit-border-radius: 3px; -moz-border-radius: 3px;
}
HTML
<div class="headbar">
<h1 id="logo">
Películas buenas
</h1>
<div id="menu">
<ul>
<li>Inicio</li>
<li>Peliculas</li>
<li>Estrenos</li>
<li>Ranking</li><li>Proximamente</li>
<li>Más vistas</li>
</ul>
</div>
<div id="uwpqsf_idsr"><form id="uwpqsffrom_641" method="get" action="http://www.peliculadicto.tk/"><div class="uform_titlesr"></div><input type="hidden" name="unonce" value="4b52cced4e"><input type="hidden" name="uformid" value="641"><input type="hidden" name="s" value="uwpsfsearchtrg"><div class="uwpqsf_classsr"><input id="uwpqsf_id_keysr" type="text" name="skeyword" class="uwpqsftext" placeholder="Busca por título, actor, director, género..." value=""></div></form></div>
</div>
As the title suggests my website, www.contrabang.com doesn't seem to function in Moxilla. But it functions fine in Google Chrome, and a bit less fine in IE. This is the first time I've made a website before so apologies in advance if I've made any beginner errors. But I cant seem to find a solution.
HTML is as follows:
<div class="icons">
<a class="twitter" href="http://www.twitter.com/kadeemlaurie"></a>
<a class="facebook" href="http://www.facebook.com/pages/Contrabang/127379984089682"></a>
<a class="googleplus" href="http://googleplus.com/pages"></a>
</div>
<div id="wrap">
<div id="featured">
<div class="wrap">
<div class="textwidget">
<div class="cup">
<img src="..\Contrabang\img\red-cup.png" height="200">
</div>
</div>
</div>
</div>
<div id="theFixed"><h1>CONTRABANG</h1></div>
<div class="bg1">
<hgroup class="billboard second">
<h2 style="font-size: 33px; opacity: 1; font-family: 'dosis'">
We are an events management agency based in London. We create memorable experiences. Check out our upcoming event.</h2>
</hgroup>
<br>
<br>
<br>
<div class="pad">
<img src="..\Contrabang\img\Contrabang.jpg" width="300" height="400">
</div>
<h2 style="font-size: 33px; opacity: 1; font-family: 'dosis'">
Buy Tickets: 07949747971</h2>
</div>
</div>
</section>
& the main CSS
.main{text-align:center;}
#featured {
background: #E94F78 url(http://www.creativityfluid.com/wp-content/themes/creativityfluid/images/img-bubbles-red.png) no-repeat top;
background-size: 385px 465px;
color: #fff;
height: 535px;
overflow: hidden;
position: relative;
z-index: -2;
}
#featured .wrap {
overflow: hidden;
clear: both;
padding: 70px 0 30px;
position: fixed;
z-index: -1;
width: 100%;
}
#featured .wrap .widget {
width: 80%;
max-width: 1040px;
margin: 0 auto;
}
.textwidget{
padding: 0;
}
#wrap {
margin: 0 auto;
padding: 0;
}
.cup{
margin-top:210px;
}
body, h1, h2, h3, p {
margin: 0;
padding: 0;
}
a {
text-decoration: none;
}
#theFixed{
position:fixed;
background-image:url(http://s10.postimg.org/wyyotlk15/krystalrae_2012_fall_print_leopard_sketch.jpg);
width:100%;
text-align:center;
overflow: hidden;
background-position: center;
}
h1{
font: 800 1.313em "proxima-nova", sans-serif;
font-size:3.125em;
text-align:center;
padding:10px 10px;
margin:20px 20px;
background-color:#E94F78;
padding-left: 0.15em;
text-decoration:none;
display:inline-block;
color:yellow;
}
h1 a{
text-decoration: none;
letter-spacing: 8px;
padding-left: 0.15em;
color:yellow;
}
.bg1{
background-image:url(http://www.coalmarch.com/sites/all/themes/coalmarch/images/paper-background-coalmarch-website-design.jpg);
width: 100%;
height:900px;
background-color: #e94f78;}
h2{
font-family: georgia;
font-size:3em;
color:black;
}
.billboard {
overflow: hidden;
width: 960px;
margin-left: auto;
margin-right: auto;
text-align: center;
}
.pad{
padding:20px;
}
}
.billboard a {
color: #000000;
}
.billboard {
padding-top:230px;
}
Try removing this extra brace. FF might not be as forgiving as Chrome here:
.pad{
padding:20px;
}
}
Links to your stylesheets are set the wrong way and I can imagine browsers handles this differently. also, you're trynig to load a file from your c:\drive, which is obviously not going to work