I am using relative and absolute position but it doesn't work. what's my mistake?
My HTML code:
.slide-item {
text-align: center;
height: 400px;
position: relative;
}
.slide-item img {
display: block;
}
.slide-item .sale {
position: absolute;
top: -20px;
right: 20px;
display: block;
}
<div class="slide-item">
<div class="sale">
<img src="https://via.placeholder.com/50" alt="">
</div>
<img src="https://via.placeholder.com/150" class="arr-img" alt="">
</div>
Try this code...
<!DOCTYPE html>
<html>
<head>
<style>
.slide-item {
text-align: center;
height: 400px;
position: relative;
}
.slide-item img:nth-child(2){
position: relative;
width: 1150px;
height: 600px;
left: 65px;
top: 25px;
}
.slide-item img {
display: block;
}
.slide-item .sale img {
position: absolute;
top: 0px;
right: 150px;
z-index: 1;
}
</style>
</head>
<body>
<div class="slide-item">
<div class="sale">
<img src="img/icons8-round-128.png" alt="">
</div>
<img src="img/111713927-green-screen-green-background-green-screen-stock-footage-video.jpg" class="arr-img" alt="">
</div>
</body>
</html>
Related
Want to add horizontal line after image and it should be responsive.Right now it has 5 images in future i can add 6th image dynamically.So lines should be responsive to take 6th image.
Sample Of Image:
a {
display: block;
text-align: center;
position: relative;
}
a:after {
content: "";
width: 80%;
position: absolute;
left: 0;
top: 50%;
height: 1px;
background: green;
}
img{
width: 50px;
height: 50px;
border-radius: 50%
}
<a href="">
<img src="https://www.w3schools.com/w3images/bandmember.jpg" alt="error">
</a>
a {
display: block;
text-align: center;
position: relative;
}
hr {
border: 1px solid green;
width: 100%;
}
<a href="">
<img src="https://www.w3schools.com/w3images/bandmember.jpg" alt="error">
</a>
<hr>
<a href="">
<img src="https://www.w3schools.com/w3images/bandmember.jpg" alt="error">
</a>
<hr>
Your code doesn't work because you've set the <a> tag to display: block; which means that it occupies the entire line. This means that the line you've added will be 80% of the available space for the <a> tag.
If possible, consider adding an inline wrapper <div> and attach your line to that instead.
.link-wrapper {
position: relative;
display: inline-flex;
align-items: center;
}
.link-wrapper:after {
content: "";
position: absolute;
top: 50%;
z-index: -1;
left: 0;
height: 1px;
width: 100%;
background: green;
}
.link-wrapper a:not(:last-child) {
margin-right: 2em;
}
.link-wrapper img {
display: block
}
<div class="link-wrapper">
<a href="">
<img src="https://i.stack.imgur.com/9mWMO.png?s=48">
</a>
<a href="">
<img src="https://i.stack.imgur.com/9mWMO.png?s=48">
</a>
<a href="">
<img src="https://i.stack.imgur.com/9mWMO.png?s=48">
</a>
<a href="">
<img src="https://i.stack.imgur.com/9mWMO.png?s=48">
</a>
</div>
Well it depends but something like this could do the job.
.bar {
position: relative;
height: 50px;
display: flex;
justify-content: space-between;
}
.bar:before {
content: "";
display: block;
position: absolute;
width: 100%;
top: 50%;
transform: translateY(-50%);
height: 1px;
background-color: green;
}
.image-wrapper {
position: relative;
}
.image-wrapper img {
width: 50px;
border-radius: 50%;
}
#media (max-width: 425px) {
.bar {
flex-direction: column;
height: auto;
align-items: center;
}
.bar:before {
width: 1px;
top: 0;
bottom: 0;
transform: none;
height: 90%;
}
.image-wrapper {
margin-bottom: 10px;
}
}
<div class="bar">
<div class="image-wrapper">
<a href="#">
<img src="https://www.w3schools.com/w3images/bandmember.jpg" alt="Alternative Text">
</a>
</div>
<div class="image-wrapper">
<a href="#">
<img src="https://www.w3schools.com/w3images/bandmember.jpg" alt="Alternative Text">
</a>
</div>
<div class="image-wrapper">
<a href="#">
<img src="https://www.w3schools.com/w3images/bandmember.jpg" alt="Alternative Text">
</a>
</div>
</div>
to add new line here :
add a new div
adjust the left property for the elements between start and end to fit all ... I give 2st 30% and 3rd 60% because I have 2 element ... so when you add new on decrease this.
finally I added background to all from .tline div for demo but you can specify a new background to each div
body {
padding-top: 100px;
}
.tline {
border-top: 2px solid gray;
position: relative;
}
.tline div {
display: inline-block;
width: 50px;
height: 50px;
border: px solid;
position: absolute;
border-radius: 35px;
text-align: center;
top: -25px;
background: url("https://www.w3schools.com/w3images/bandmember.jpg") center;
background-size: cover;
}
.tline div:nth-child(2) {
left: 30%;
}
.tline div:nth-child(3) {
left: 60%;
}
.tline div:last-child {
right: 0;
}
<div class="tline">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
I want to announce on the top and header in the bottom but this is the output in every browser what am I doing wrong here
https://pasteboard.co/I67sPCe.png
this is my HTML code: https://hastebin.com/bocacehoka.js
this is my CSS code: https://hastebin.com/zapegulomu.css
.announce {
height: 45px;
width: 100%;
position: relative;
}
.header {
position: absolute;
height: 130px;
background: blue;
width: 100%;
bottom: 0;
}
<div class="announce">
<div class="header">
<img src="img/logo.png">
</div>
</div>
since you had bottom:0 to .header, the height of it was getting increased towards the top. Hope this helps thanks
.announce {
height: 45px;
width: 100%;
position: relative;
}
.header {
position: absolute;
height: 130px;
background: blue;
width: 100%;
/* bottom: 0; */
}
<div class="announce">
<div class="header">
<img src="img/logo.png" alt="image">
</div>
</div>
nested divs cannot be placed independently. Have two separate elements. consider the following.
announce {
height: 45px;
width: 100%;
position: relative;
}
.header {
position: absolute;
height: 130px;
background: blue;
width: 100%;
bottom: 0;
}
<div class="announce">
This is some announcement
</div>
<div class="header">
<img src="img/logo.png">
</div>
I have added the code as per your reference image. You can adjust the announce and header height optionally.
.announce {
height: 45px;
width: 100%;
position: relative;
}
.header {
background: blue;
width: 100%;
height: 50px;
}
.header img {
max-width: 100%;
max-height: 50px;
}
<div class="announce">
<div class="header">
<img src="https://via.placeholder.com/300x100">
</div>
</div>
You have to give the margin to .header img
.announce {
position: relative;
height: 45px;
width: 100%;
}
.header {
position: absolute;
height: 130px;
background: blue;
width: 100%;
bottom: 0;
}
.header img {
margin: 82px 5px 0;
}
<div class="announce">
<div class="header">
<img src="img/logo.png">
</div>
</div>
i have a div that i want to place below another div.But i think its getting overlapped and is not visible. I'm trying to get a div below the div that split into 2.
<body>
<div class="split left">
<div class="centered">
<img src="assets/img/tms1.png" alt="Avatar woman" />
<h2>our solution</h2>
</div>
</div>
<div class="split right">
<div class="centered">
<img src="assets/img/logo.jpg" alt="Avatar man" />
<h2>our cause</h2>
</div>
</div>
<div class="page2"><img src="assets/img/logo.png" /></div>
the <div class="page2"><img src="assets/img/logo.png" /></div> is not visible.
css:
body {
font-family: sans-serif;
font-size: 30px;
color: white;
height: 100%;
}
.split {
height: 100%;
width: 50%;
position: fixed;
z-index: 1;
top: 0;
overflow-x: hidden;
padding-top: 20px;
}
.left {
left: 0;
background-color: #111;
}
.right {
right: 0;
background-color: white;
color: black;
}
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}
.centered img {
width: 250px;
border-radius: 50%;
}
css for the div that is not getting displayed.
.page2 {
position: relative;
margin-top: 100%;
top: 100%;
width: 100%;
background-color: #111;
}
https://jsfiddle.net/uxfynrmj/
There are a few issues. Most importantly, you need to remove the position: fixed if you want another element statically positioned below your .split divs.
Most notably I removed the fixed position and absolute positioned child and added a wrapping div width display: flex.
Code snippet below:
html {
scroll-behavior: smooth;
/*height: 100%;*/
}
body {
font-family: sans-serif;
font-size: 30px;
color: white;
height: 100%;
}
.splits {
display: flex;
}
.split {
flex: 1 1 50%;
background: black;
}
.right {
right: 0;
background-color: white;
color: black;
}
.centered {
position: relative;
top: 50%;
transform: translateY(-50%);
text-align: center;
}
.centered img {
width: 100px;
height: 100px;
border-radius: 50%;
}
.page2 {
width: 100%;
background-color: pink;
}
.page2 img {
width: 100%;
background-color: pink;
}
<html>
<head>
<title>THS</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div class="splits">
<div class="split">
<div class="centered">
<img src="http://lorempixel.com/400/200" alt="Avatar woman" />
<h2>our solution</h2>
</div>
</div>
<div class="split right">
<div class="centered">
<img src="http://lorempixel.com/400/400" alt="Avatar man" />
<h2>our cause</h2>
</div>
</div>
</div>
<div class="page2"><img src="http://lorempixel.com/400/400" /></div>
</body>
</html>
I am creating the homepage of a website for a school assignment, but my webpage doesn't scroll so the offscreen divs are not visible. I have browsed this forum and the web studying the solutions proposed to other relevant questions, but they don't seem to work for me.
I put my code below (I have removed those parts which are not relevant)... please, can somebody tell me what is wrong?
Thanks in advance for any help.
*{margin: 0; box-sizing: border-box}
body {
height: 100vh;
overflow-y: scroll;
}
.wrap {
width: 59em;
margin: 0 auto;
height: 100%
}
img.resize {
width: 944px;
}
#header {
background: url("...") 100% no-repeat;
background-position: center center;
position: fixed;
right: 0;
left: 0;
top:0;
display: block;
width: 100%;
height: 14.37em;
}
#testo-header{
background-color: white;
height: 4.375em;
width: 50%;
position: absolute;
top: 5em;
left: 0;
text-align: center;
line-height: 4.375em;
z-index: 2;
padding-left: 8em;
}
#testo-header:before {
content: '\0020';
background-image: url(...);
background-repeat: no-repeat;
width: 100%;
height:5.625em;
display:block;
position: absolute;
left: 11.25em;
z-index: -1;
}
ul#nav {
background-color: white;
height: 70px;
width: 50%;
position: absolute;
top: 80px;
right: 0;
font-family: 'Hind', sans-serif;
font-size: 1em;
font-weight: bold;
list-style-type: none;
line-height: 35px;
display: block;
z-index: 5;
}
ul#nav li {
float: left;
text-align: center;
vertical-align: text-top;
padding: 20px;
}
#main {
background-color: white;
position: relative;
top:1em;
}
#title {
height: 15em;
position: relative;
border-top: 1px solid #888888;
width: 944px;
margin: 0 auto;
line-height: 36px;
padding-top: 20px;
padding-bottom: 20px;
}
ul#social {
list-style: none;
display: block;
position: absolute;
top: 20px;
right: 0;
}
ul#social li {
padding: 3px;
float: left;
}
#content {
background-color: white;
display: block;
position: relative;
width: 600px;
height: 400px;
top: 120px;
}
#ingredienti {
height: 300px;
position: relative;
}
#footer {
position: absolute;
bottom: 0;
}
<!DOCTYPE html>
<html>
<head>
<title>My site</title>
<link rel="stylesheet" type="text/css" href="style2.css"/>
<link href="https://fonts.googleapis.com/css?family=Hind|Play" rel="stylesheet">
</head>
<body>
<div id="header">
<div class="wrap">
<div id="testo-header">
<h1>Tomatoes</h1>
</div>
<ul id="nav">
<li>Home</li>
<li>Ricette</li>
<li>Categorie</li>
<li>Blog</li>
<li>Contatti</li></li>
</ul>
</div>
<div id="main">
<div class="wrap">
<div id="title">
Starters
<ul id="social">
<li><img src="..." width="25" height="25"></li>
<li><img src="..." width="25" height="25"></li>
<li><img src="..." width="25" height="25"></li>
</ul>
<h2>salad</h2>
<img class="resize" src="...">
</div>
<div id="content">
<div id="ingredients">
<h3>Ingredients</h3>
</div>
<div id="comments"></div>
</div>
<div id="aside">
</div>
</div>
</div>
<footer>
<div class="wrap">
<div class="column">
<h4>Informazioni</h4>
</div>
<div class="column">
<h4>Categorie</h4>
</div>
<div class="column">
<h4>Mangiare fuori</h4>
</div>
<div id="bottom">
<h5>Newsletter</h5>
</div>
</div>
</footer>
</body>
</html>
You are missing a close div starting from where you opened the <div id="header">, add that and the scroll bar will appear
How do I center a text over an image in css?
Here I'm attaching the code, I'm a newbie in css
<div class="image">
<img src="sample.png"/>
<div class="text">
<h2>Some text</h2>
</div>
</div>
<style>
.image {
position: relative;
}
h2 {
position: absolute;
top: 200px;
left: 0;
width: 100%;
margin: 0 auto;
width: 300px;
height: 50px;
}
</style>
How about something like this:
Its done by using position:absolute and z-index to place the text over the image.
#container {
height: 400px;
width: 400px;
position: relative;
}
#image {
position: absolute;
left: 0;
top: 0;
}
#text {
z-index: 100;
position: absolute;
color: white;
font-size: 24px;
font-weight: bold;
left: 150px;
top: 350px;
}
<div id="container">
<img id="image" src="http://www.noao.edu/image_gallery/images/d4/androa.jpg" />
<p id="text">
Hello World!
</p>
</div>
You can use something like the following:
JS Fiddle
.image {
position: relative;
}
img {
width: 100%;
height: 200px;
}
.text {
position: absolute;
bottom:0;
left: 0;
width: 100%;
}
.text h2 {
text-align: center;
color: #FFF;
}
<div class="image">
<img src="https://cdn.photographylife.com/wp-content/uploads/2015/10/Wadi-Rum-5-650x434.jpg" alt="My Image" />
<div class="text">
<h2>Some text</h2>
</div>
</div>