This may be a really simple solution, but I cannot seem to find it.
I basically would like the second green div to show as well under the first brown one, so as you scroll down the page the green one will pop up as well.
<!doctype html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.content {
height: 1500px;
background-color: brown;
}
.parallax-bg {
padding: 400px 0;
background-image: url(skyline.jpg);
background-size: cover;
background-attachment: fixed;
-webkit-transition: all .02s ease;
-moz-transition: all .02s ease;
transition: all .02s ease;
z-index: 1;
}
.parallax-bg h1 {
text-align: center;
font-size: 100px;
font-family: Arial;
color: white;
}
#seconddiv {
background-color: green;
height: 1000px;
padding: 100px 0;
}
#media screen and (max-width: 568px) {
.parallax-bg h1 {
color: blue;
font-size: 50px;
position: relative;
top: -100px;
color: white;
}
}
</style>
</head>
<body>
<div class="content">
<div class="parallax-bg">
<h1>First Section</h1>
</div>
<div class="parallax-bg" id="seconddiv">
<h1>Second Section</h1>
</div>
</div>
</body>
</html>
Related
a week ago I started to learn html and css and to practice I decided to emulate an old web page with what I learned so far. The page is the following: http://in3.org/info/reading.htm
I am having difficulty making the blue vertical line appear that is on the right side of the page.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>ELECTRIC PAGES Reading Notes</title>
<link rel="stylesheet" href="css/style.css" />
</head>
<body>
<main>
<header>
<img src="assets/ga.gif" alt="" />
<br>
<img src="assets/eptype2.gif" alt="" />
</header>
<aside class="aside1">
<img src="/assets/epnav5.gif" alt="" />
</aside>
<h2>Reading Notes</h3>
<aside class="aside2"></aside>
</main>
</body>
</html>
head,
body {
background-color: lightcyan;
margin: auto;
}
header {
width: 100%;
padding-left: 4.85%;
margin: auto;
}
.aside1 {
position: absolute;
width: 4.85%;
left: 0;
top: 0;
bottom: 0;
background-color: rgb(35, 168, 221);
}
.aside2 {
position: absolute;
width: 4.85%;
padding-right: 30%;
left: 0;
top: 0;
bottom: 0;
background-color: rgb(35, 168, 221);
}
img {
padding: 10px;
}
h2 {
color: red;
padding-left: 5.5%;
}
To make that blue vertical line I thought of using an empty aside tag with a width of 4.85% with a padding-right of 30%, but instead of having a distance of 30% to the right and occupying a 4.85% width, the aside is placed to the left of the page occupying 30% of the page.
I'd just give the wrapper/body-element your desired background-color, make a new container inside of that wrapper-element, give that your other desired background-color, and then center it. This way you don't have to make 2 new elements.
* {
margin: 0;
padding: 0;
}
body {
background-color: lightcyan;
}
.wrapper {
background-color: rgb(35, 168, 221);
height: 100vh;
max-width: 75%;
}
.container {
background-color: lightcyan;
max-width: 80%;
height: 100%;
margin-left: auto;
margin-right: auto;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>ELECTRIC PAGES Reading Notes</title>
<link rel="stylesheet" href="css/style.css" />
</head>
<body>
<main>
<div class="wrapper">
<div class="container">
<h2>Reading Notes</h3>
</div>
</div>
</main>
</body>
</html>
I'm trying to make an image with an caption on the left-middle. The caption should be always at the left-middle or anywhere on the left side of the image and it's size should be vary with browser size simultaneously.
The problem is that when I resize the window than size of the caption won't change and It's position is also not fixed w.r.t the image.
.page-overview{
width: 100%;
border: 1px solid black;
}
.overview-content img{
width: 100%;
}
.caption{
position: absolute;
top: 20%;
left: 18px;
font-size: 80%;
font-family: 'Source Sans Pro', sans-serif;
z-index: 1;
}
.caption span{
display: block;
margin: 8px 0;
padding: 10px 17px;
border-radius: 3px;
background-color: #00000033;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>test YOU</title>
</head>
<body>
<!--Here can have other content too-->
<div class="page-overview">
<div class="overview-content"><img src="https://images5.alphacoders.com/481/481903.png" alt="Delilious & Yum" height="auto">
<div class="caption">
<span>Test your best here</span>
<span>It's Yum 😋</span>
</div>
</div>
</div>
Remove position: absolute; and use relative instead. absolute will not account for browser shrinkage, it will just still stay in the specified area.
.page-overview {
width: 100%;
border: 1px solid black;
}
.overview-content img {
width: 100%;
}
.caption {
position: relative;
width: fit-content;
margin: auto 0;
top: 20%;
left: 18px;
font-size: 80%;
font-family: 'Source Sans Pro', sans-serif;
z-index: 1;
}
.caption span {
display: block;
margin: 8px 0;
padding: 10px 17px;
border-radius: 3px;
background-color: #00000033;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>test YOU</title>
</head>
<body>
<!--Here can have other content too-->
<div class="page-overview">
<div class="overview-content">
<img src="https://images5.alphacoders.com/481/481903.png" alt="Delilious & Yum" height="auto">
<div class="caption">
<span>Test your best here</span>
<span>It's Yum 😋</span>
</div>
</div>
</div>
The main thing is to wrap a position:absolute divs with a position:relative div, so the absolute div will be relative that that parent.
Besides that, I used flexbox to center the content.
That is assuming you want the caption ON the image...
.page-overview{
width: 100%;
border: 1px solid black;
}
.overview-content img{
width: 100%;
}
.caption{
position: absolute;
top: 20%;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
width: 100%;
font-size: 80%;
font-family: 'Source Sans Pro', sans-serif;
z-index: 1;
}
.caption span{
display: block;
margin: 8px 0;
padding: 10px 17px;
border-radius: 3px;
background-color: #00000033;
}
.image-wrapper {
position: relative;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>test YOU</title>
</head>
<body>
<!--Here can have other content too-->
<div class="page-overview">
<div class="overview-content">
<div class="image-wrapper">
<a href="#">
<img src="https://images5.alphacoders.com/481/481903.png" alt="Delilious & Yum" height="auto"/>
</a>
<div class="caption">
<span>Test your best here</span>
<span>It's Yum 😋</span>
</div>
</div>
</div>
</div>
I am trying to place quote1.jpg next to yoda.png, but no matter where I place the div class it ends up somewhere else. First it was on top of the header now it is covering up Yoda. When you hover your mouse over Yoda it is supposed to show his quote but instead it shows the quote.jpg. All I am trying to do is place the quote.jpg next to Yoda.
.header {
background: black;
color: white;
font-family: cursive, Haettenschweiler, 'Arial Narrow Bold',
sans-serif ;
margin: 20px;
padding: 20px;
text-align: center;
}
p {
background-color: blanchedalmond;
font-size: 26px;
color: black;
opacity: 1;
}
.container {
position: relative;
width: 50%;
}
.image {
opacity: 1;
display: block;
width: 100%;
height: auto;
transition: .5s ease;
backface-visibility: hidden;
}
.middle {
transition: .5s ease;
opacity: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%)
}
.container:hover .image {
opacity: 0.3;
}
.container:hover .middle {
opacity: 2;
}
.text {
background-color: rgb(13, 53, 228);
color: white;
font-size: 25px;
padding: 16px 32px;
}
/* No matter what I do I cannot
place the quote1.jpg in the correct place */
<!DOCTYPE html>
<html lang="en">
<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>Here We Go!</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class = "header">
<h1>I Am Tying Hard To Learn Html</h1>
<p>"Do Or Do Not There Is No Try"</p>
</div>
<div class= "container">
<img src="yoda.png" alt="Yoda"
class= "image" style = "width:50%">
<div class="text">That right, you got.
Herh herh herh.
<div class ="middle">
<img src="quote1.jpg" alt="quote">
</div>
</body>
</html>
It is easier to use javascript or jquery to implement what you intend.
Here is a sample code:
.header {
background: black;
color: white;
font-family: cursive, Haettenschweiler, 'Arial Narrow Bold',
sans-serif ;
margin: 20px;
padding: 20px;
text-align: center;
}
p {
background-color: blanchedalmond;
font-size: 26px;
color: black;
opacity: 1;
}
.image {
opacity: 1;
display: block;
width: 100%;
height: auto;
transition: .5s ease;
backface-visibility: hidden;
}
.text {
display:block;
opacity: 0;
background-color: rgb(13, 53, 228);
color: white;
font-size: 25px;
padding: 16px 32px;
}
.flex-container {
display: flex;
flex-flow:row wrap;
}
.block{
display: block;
background: red;
margin: 10px;
padding: 10px;
width:100px;
}
<!DOCTYPE html>
<html lang="en">
<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>Here We Go!</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script>
function show() {
var element = document.getElementsByClassName("text")[0];
element.classList.toggle("open");
}
function hide() {
var element = document.getElementsByClassName("text")[0];
element.classList.toggle("open");
}
</script>
</head>
<body>
<div class="header">
<h1>I Am Tying Hard To Learn Html</h1>
<p>"Do Or Do Not There Is No Try"</p>
</div>
<div class="parent">
<div class="flex-container">
<div class="block yoda-div" id="yoda">
<img src="yoda.png" alt="Yoda" class="image" onmouseover="show()">
<div class="text" onmouseout="hide()">That right, you got.
Herh herh herh.
</div>
</div>
<div class="block" id="quote">
<img src="quote1.jpg" alt="quote">
</div>
</div>
</div>
</body>
</html>
Hello if I understood your question, this might be of help.
.container {
display: flex;
flex-direction: row
flex-wrap: wrap;
}
.custom-img {
height: 45vh;
width: 100%;
object-fit: cover
}
.sections {
position: relative;
margin: 2px;
border: 1px solid green
}
.section-text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: #fff;
background-color: #000;
padding: 2px;
font-size: 18px
}
<div class="container">
<div class="sections">
<div class="section-text">This is the left section</div>
<img class="custom-img" src="https://slicedinvoices.com/wp-content/uploads/edd/2015/12/better-urls.jpg" />
</div>
<div class="sections">
<div class="section-text">This is right section</div>
<img class="custom-img" src="https://yazoogle.com.au/wp-content/uploads/2017/04/urls.jpg" />
</div>
</div>
Hope this helps
Move your quote1 div below the yoda img tag.
2.Modify your following css classes
.middle {
transition: .5s ease;
opacity: 0;
display: inline;
transform: translate(-50%, -50%);
}
.image {
opacity: 1;
display: inline;
height: auto;
transition: .5s ease;
backface-visibility: hidden;
}
I am currently working on an image gallery where I have different sections that have multiple images. I am currently trying to set up each section of images to be a single row and scoll horizontally similar to what netflix does. Right now I've been unable to get the container to overflow in the x to work and instead goes to a second row.
I've tried using
white-space: nowrap
overflow-x: auto;
overflow-y:hidden;
display: inline-block;
I've also tried taking a containing div for the list and rotating it 90 deg and allow vertical scrolling and then rotating a child div back.
The best I've been able to get for the effect I'm trying to acheive is the second example but I've been unable to get the width correct on the containing wrapper. I'm trying to get the row all the way across.
First example.
<!DOCTYPE html>
<html lang="en">
<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>list testing</title>
<style>
body {
background-color: #2e2e2e;
margin: 0px;
padding: 0px;
color: white;
}
.galleryContainer {
width: 100%;
margin: 0px;
text-align: center;
}
.gallery {
width: 90%;
text-align: center;
margin: 0% 5% 0% 5%;
}
.sectionWrapper {
width: 100;
height: 100%;
overflow-y: auto;
overflow-x: auto;
}
.section {
height: 100%;
width: 100%;
display: inline-block;
text-align: center;
margin: 0px;
padding: 0.75% 0 0.75% 0;
}
ul > .gallery {
float: left;
white-space: nowrap;
overflow-x: auto;
}
ul > li {
list-style-type: none;
display: inline;
}
li {
float: left;
width: 250px;
height: 200px;
margin-left: 1%;
margin-top: 1%;
border: 1px solid #999999;
background-color: #203d68;
display: inline;
}
li:hover {
filter: grayscale(100%);
transform: scale(1.1);
box-shadow: 4px 4px 4px #222222;
transition: 0.5s ease;
}
h2 {
display: inline-block;
font-family: Arial, Helvetica, sans-serif;
}
</style>
</head>
<body>
<div class="galleryContainer">
<div class="gallery">
<div class="sectionWrapper">
<div class="section">
<h2>section 1</h2>
<ul>
<li>test_1</li>
<li>test_2</li>
<li>test_3</li>
<li>test_4</li>
<li>test_5</li>
<li>test_6</li>
<li>test_1A</li>
<li>test_2A</li>
</ul>
</div>
</div>
<div class="sectionWrapper">
<div class="section">
<h2>section 2</h2>
<ul>
<li>test_7</li>
<li>test_8</li>
<li>test_9</li>
<li>test_10</li>
<li>test_11</li>
<li>test_12</li>
</ul>
</div>
</div>
<div class="sectionWrapper">
<div class="section">
<h2>section 3</h2>
<ul>
<li>test_13</li>
<li>test_14</li>
<li>test_15</li>
<li>test_16</li>
<li>test_17</li>
<li>test_18</li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>
Second Example
<!DOCTYPE html>
<html lang="en">
<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>list testing</title>
<style>
body {
background-color: #2e2e2e;
margin: 0px;
padding: 0px;
color: white;
}
.galleryContainer {
width: 100%;
margin: 0px;
text-align: center;
}
.gallery {
width: 90%;
text-align: center;
margin: 0% 5% 0% 5%;
}
.sectionWrapper {
width: 100;
height: 100%;
overflow-y: auto;
overflow-x: auto;
transform: rotate(-90deg);
/* transform-origin: right top; */
}
.section {
height: 100%;
width: 100%;
display: inline-block;
text-align: center;
margin: 0px;
padding: 0.75% 0 0.75% 0;
transform: rotate(90deg);
/* transform-origin: right top; */
}
ul > .gallery {
width: 100%;
height: 100%;
float: left;
display: inline;
}
ul > li {
list-style-type: none;
display: inline;
}
li {
float: left;
width: 250px;
height: 200px;
margin-left: 1%;
margin-top: 1%;
border: 1px solid #999999;
background-color: #203d68;
display: inline;
}
li:hover {
filter: grayscale(100%);
transform: scale(1.1);
box-shadow: 4px 4px 4px #222222;
transition: 0.5s ease;
}
h2 {
display: inline-block;
font-family: Arial, Helvetica, sans-serif;
width: 100%;
margin-top: 0;
margin-bottom: 0;
}
</style>
</head>
<body>
<div class="galleryContainer">
<div class="gallery">
<div class="sectionWrapper">
<div class="section">
<h2>section 1</h2>
<ul>
<li>test_1</li>
<li>test_2</li>
<li>test_3</li>
<li>test_4</li>
<li>test_5</li>
<li>test_6</li>
<li>test_1A</li>
<li>test_2A</li>
</ul>
</div>
</div>
<!-- <div class="section">
<h2>section 2</h2>
<ul>
<li>test_7</li>
<li>test_8</li>
<li>test_9</li>
<li>test_10</li>
<li>test_11</li>
<li>test_12</li>
</ul>
</div>
<div class="section">
<h2>section 3</h2>
<ul>
<li>test_13</li>
<li>test_14</li>
<li>test_15</li>
<li>test_16</li>
<li>test_17</li>
<li>test_18</li>
</ul>
</div> -->
</div>
</div>
</body>
</html>
In the second exampe I'm getting the scolling I'm looking to get but not the width. Any help would be much appreciated.
You can add a fixed width to your .section wrapper instead of 100%
example: 1000px
Both display:inline-block and float:left will detect if there are spaces beside them so you should set a fixed width container.
Im working on a code and I would like to make the space between "Szafranowka" and "Apartaments & Restaurant" smaller. Here's how it looks like now: https://gyazo.com/d6843d8857e954acbae5c1da748c044b
I really cannot find the answer that would perfectly fit my expectations. Please, could any1 help me? :)
Also, I would like to make a small square around "Wejscie/Entrance", but when im trying to do it with the border, it looks like this: https://gyazo.com/f84fedc7a78854773b287e01ebd3a21f
Here's a part of code that im using to make a border:
<h5 style="border:3px; border-style:solid; border-color:#000000; padding: 1em;">Wejscie/Entrance</h5>
and here's my code:
HTML:
<!DOCTYPE HTML>
<head>
<title>Szafranowka - Apartments & Restaurant </title>
<meta name="viewport" content="width=device-width", initial-scale=1">
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<link rel="stylesheet" href="style.css" type="text/css" />
<link href="https://fonts.googleapis.com/css?family=Tangerine" rel="stylesheet">
</head>
<body>
<!-- Główny DIV całej strony -->
<div id="container">
<!-- Lewa część tła strony, zamknięta w divie -->
<div id="background">
<img src="background.jpg"> </img>
</div>
<div id="header">
<h2>Szafranowka</h2> <p>Apartments & Restaurant </p>
<br></br> <h5 id="entrance">Wejscie/Entrance</h5>
</div>
</div>
</body>
</html>
CSS:
body {
padding: 0;
margin: 0;
height: 100vh;
width: 100vw;
}
#container
{
width: 100%;
height: 100%;
}
#background
{
width: 100%;
height: 100%;
position: absolute;
opacity: 0.5;
filter: blur(3px);
filter: contrast(50%);
filter: brightness(30%);
}
#background img
{
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
#header
{
position: absolute;
z-index: 1;
font-family: 'Tangerine', cursive;
text-align: center;
color: #9F5F9F;
font-size: 70px;
display: table-cell;
vertical-align: middle;
width: 100%;
text-shadow: 2px 2px #660055;
}
to your #entrance, try this :
#entrance {
width: 8rem; //or another size
margin auto; // to center
border: 2px solid;
}
<div id="header">
<h2>Szafranowka</h2> <p>Apartments & Restaurant </p>
<br></br> <span id="entrance">Wejscie/Entrance</span>
</div>
CSS:
h2{
margin:5px;
line-height:15px
}
#entrance{
border:1px solid;
}
<!DOCTYPE HTML>
<head>
<title>Szafranowka - Apartments & Restaurant </title>
<meta name="viewport" content="width=device-width", initial-scale=1">
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<link rel="stylesheet" href="style.css" type="text/css" />
<link href="https://fonts.googleapis.com/css?family=Tangerine" rel="stylesheet">
<style>
body {
padding: 0;
margin: 0;
height: 100vh;
width: 100vw;
}
#container
{
width: 100%;
height: 100%;
}
#background
{
width: 100%;
height: 100%;
position: absolute;
opacity: 0.5;
filter: blur(3px);
filter: contrast(50%);
filter: brightness(30%);
}
#background img
{
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
#header
{
position: absolute;
z-index: 1;
font-family: 'Tangerine', cursive;
text-align: center;
color: #9F5F9F;
font-size: 70px;
display: table-cell;
vertical-align: middle;
width: 100%;
text-shadow: 2px 2px #660055;
}
#header h2
{
margin-bottom: -30px;
}
#entrance span
{
border: 1px solid;
padding: 15px;
}
</style>
</head>
<body>
<!-- Główny DIV całej strony -->
<div id="container">
<!-- Lewa część tła strony, zamknięta w divie -->
<div id="background">
<img src="background.jpg"> </img>
</div>
<div id="header">
<h2>Szafranowka</h2> <p>Apartments & Restaurant </p>
<br></br> <h5 id="entrance"><span>Wejscie/Entrance</span></h5>
</div>
</div>
</body>
</html>