header {
background: blue;
color: white;
width: 100%;
}
.container {
background: green;
text-align: center;
width: 100%;
height: 100px;
transform: skew(0, -10deg);
color: white;
position: relative;
top: 55px;
}
.container .home{
position:absolute;
bottom:0;
}
<header class="header">
<div class="logo">
<i class="fab fa-accusoft"></i>
<span class="title">DreamCoding</span>
</div>
<section class="container">
<div class="home">
<div class="title">Alphabet</div>
<div class="text">
abcdefg
</div>
</div>
</section>
I have the box and the box.
I'm trying to cover the container box by the header box.
The problem is that the box was covered by the , box again and again.
I'm not sure I explained properly cause English is not my mother tongue.
Anyway, Thanks in advance.
Just add the z-index property to both the elements. Runnable code snippet below:
header {
background: blue;
color: white;
width: 100%;
z-index: 1;
}
.container {
background: green;
text-align: center;
width: 100%;
height: 100px;
transform: skew(0, -10deg);
color: white;
position: relative;
top: 55px;
z-index: -1;
}
.container .home {
position: absolute;
bottom: 0;
}
<html>
<body>
<header class="header">
<div class="logo">
<i class="fab fa-accusoft"></i>
<span class="title">DreamCoding</span>
</div>
<section class="container">
<div class="home">
<div class="title">Alphabet</div>
<div class="text">
abcdefg
</div>
</div>
</section>
</header>
</body>
</html>
**The z-index property is used to make elements overlap others.
You can set background in :before selector using position:absolute and z-index:-1
body{
margin: 0;
}
header {
background: blue;
color: white;
width: 100%;
}
.container {
text-align: center;
width: 100%;
height: 100px;
color: white;
position: relative;
top: 55px;
}
.container:before {
content:"";
transform: skew(0, -10deg);
background: green;
width: 100%;
height: 100%;
position:absolute;
top:-25px;
left: 0;
z-index: -1;
}
.container .home{
position:absolute;
bottom:0;
}
<header class="header">
<div class="logo">
<i class="fab fa-accusoft"></i>
<span class="title">DreamCoding</span>
</div>
<section class="container">
<div class="home">
<div class="title">Alphabet</div>
<div class="text">
abcdefg
</div>
</div>
</section>
</header>
Related
I would like to add a grey lines that will separated red divs, the final result should be:
enter image description here
I have a problem with eliminate the line after last red div, my code is:
<html>
<head>
<style>
.authorsContainer{
padding-right: 15px;
padding-left: 15px;
}
.authorIconVisibility, .authorName{
float:left;
}
.booksContainer{
display: flex;
clear: both;
}
.bookContainer{
float: left;
flex: 1;
}
.bookInfo{
position: relative;
background: green;
}
.bookInfo:after{
position: absolute;
content: "";
background: #ccc;
height: 2px;
left: 25%;
right: 25%;
margin-top: 5px;
}
.bookName, .bookYear{
text-align: center;
}
.bookDescription{
position: relative;
background: red;
min-height: 100px;
margin: 10px;
}
.bookDescription:after{
position: absolute;
content: "";
background: #ccc;
width: 2px;
top: 25%;
bottom: 25%;
right: -10px;
}
</style>
</head>
<body>
<div class="authorsContainer">
<div class="authorContainer">
<div class="authorInfo">
<div class="authorIconVisibility">icon</div>
<div class="authorName">name</div>
</div>
<div class="booksContainer">
<div class="bookContainer">
<div class="bookInfo">
<div class="bookName">n1</div>
<div class="bookYear">y1</div>
</div>
<div class="bookDescription">
</div>
</div>
<div class="bookContainer">
<div class="bookInfo">
<div class="bookName">n2</div>
<div class="bookYear">y2</div>
</div>
<div class="bookDescription">
</div>
</div>
<div class="bookContainer">
<div class="bookInfo">
<div class="bookName">n3</div>
<div class="bookYear">y3</div>
</div>
<div class="bookDescription">
</div>
</div>
</div>
</div>
</div>
</body>
</html>
I tried to change the last css selector to
.bookContainer .bookDescription:not(:last-child):after{
position: absolute;
content: "";
background: #111;
width: 2px;
top: 25%;
bottom: 25%;
right: -10px;
}
but it does not work (there is no lines at all).
What should I change?
HTML Code:
<div class="header">
<img src=".jpg" width="240" height="180" >
<h1>MY APPS</h1>
<p>TRY AND ERROR, CODING IS FUN</p>
</div>
CSS:
.header{
background-color: rgb(255,255,255,0.7);
}
.header img {
float: left;
width: 100px;
height: 100px;
background: #555;
}
.header h1 {
position: relative;
top: 18px;
left: 50%;
padding: 12.5px
}
.header p {
position: relative;
top: -25px;
left: 50%;
padding: 12.5px
}
How can I put <img> inline with my <h1> ?
You can do that very easily using flexbox:
header {
display: flex;
align-items: center;
justify-content: center;
}
header img {
width: 100px;
height: 100px;
background: #555;
margin-right: 20px;
}
<header>
<img>
<div>
<h1>MY APPS</h1>
<p>TRY AND ERROR, CODING IS FUN</p>
</div>
</header>
You can read more about flexbox here: https://internetingishard.com/html-and-css/flexbox/
Also, you could replace <div class="header"> with a <header> element here to make your HTML more semantic. I did that in the example already.
You can do with display property:
.header {
background-color: rgb(255, 255, 255, 0.7);
}
.header img {
width: 100px;
height: 100px;
background: #555;
display:inline-block;
vertical-align:middle;
}
.header-text{
display:inline-block;
vertical-align:middle;
padding-left:10px;
}
.header h1 {
margin:0 0 10px 0;
}
.header p {
margin:0
}
<div class="header">
<img src=".jpg" width="240" height="180">
<div class="header-text">
<h1>MY APPS</h1>
<p>TRY AND ERROR, CODING IS FUN</p>
</div>
</div>
Try this code
.header{
display:flex;
align-items:center;
justify-content:center;
}
.header img {
width: 100px;
height: 100px;
background: #555;
margin-right: 20px;
}
.header-content h1 {
margin-top: 0px;
}
.header-content p {
margin-bottom: 0px;
}
<div class="header">
<img src=".jpg" width="240" height="180" >
<div class="header-content">
<h1>MY APPS</h1>
<p>TRY AND ERROR, CODING IS FUN</p>
</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've got four columns (25% width each) that take up 100% width and height of the screen. The idea is to have one image associated with each column, and when a user hovers over each column, the image changes to correspond with the text/icon in the column (the image itself should take up 100% width/height).
Is something like this possible with only HTML + CSS? I'm assuming I'd need some JS.
So far, I've got it set up where everything 'works', except for the image spanning across all of the columns. I've tried changing:
.col:hover { width: 100%; }
This seems to work okay for the first column, but the others flicker and glitch upon hover.
Check out the code below (I'm just using color blocks as images for now) /
Or view on CodePen here: https://codepen.io/sdorr/pen/VqLzBQ
<!doctype html>
<head></head>
<body>
<div class="container">
<a class="button" href="#">learn more</a>
<div class="col col-1">
<div class="vertical-align">
<h1 class="hero-text">data</h1>
</div>
</div>
<div class="col col-2">
<div class="vertical-align">
<h1 class="hero-text">intelligence</h1>
</div>
</div>
<div class="col col-3">
<div class="vertical-align">
<h1 class="hero-text">experience</h1>
</div>
</div>
<div class="col col-4">
<div class="vertical-align">
<h1 class="hero-text">activation</h1>
</div>
</div>
</div>
</body>
<style>
* {
margin: 0;
padding: 0;
font-family: sans-serif;
}
.container {
width: 100%;
height: 100vh;
position: relative;
}
.col {
display: inline;
float: left;
width: 25%;
height: 100vh;
background-color: red;
position: relative;
text-align: center;
z-index: 0;
overflow: hidden;
}
.button {
padding: 20px 0;
width: 100%;
background-color: purple;
color: #ffffff;
text-decoration: none;
text-align: center;
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
z-index: 1;
}
.button:hover {
background-color: orange;
}
.col-1:hover {
background-color: pink;
}
.col-2:hover {
background-color: blue;
}
.col-3:hover {
background-color: green;
}
.col-4:hover {
background-color: yellow;
}
.vertical-align {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 100%;
}
</style>
</html>
Use an image instead of a color, and get it to cover the whole element:
.col-1:hover {
background-image: url(...);
background-repeat: no-repeat;
background-size: cover;
}
.col-1:hover {
background-color: pink;
background-image: url(...);
background-repeat: no-repeat;
width: 100%
}
How about this? It works on my side.
https://codepen.io/progr4mm3r/pen/maJBda
I've made some good progress on this issue and figured I'd post where I'm at so far. There's definitely still some kinks that need to be worked out, but it's coming along nicely.
The concept came from Joshua Johnson
Check out the CodePen or the source code below:
<!doctype html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="container">
<nav>
<ul>
<div class="col">
<li>
data
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSGTVf63Vm3XgOncMVSOy0-jSxdMT8KVJIc8WiWaevuWiPGe0Pm">
</li>
</div>
<div class="col">
<li>
intelligence
<img src="https://www.w3schools.com/w3css/img_lights.jpg">
</li>
</div>
<div class="col">
<li>
experience
<img src="https://www.gettyimages.ie/gi-resources/images/Homepage/Hero/UK/CMS_Creative_164657191_Kingfisher.jpg">
</li>
</div>
<div class="col">
<li>
activation
<img src="https://www.gettyimages.com/gi-resources/images/CreativeLandingPage/HP_Sept_24_2018/CR3_GettyImages-159018836.jpg">
</li>
</div>
</ul>
</nav>
<img src="https://helpx.adobe.com/nz/stock/how-to/visual-reverse-image-search/_jcr_content/main-pars/image.img.jpg/visual-reverse-image-search-v2_1000x560.jpg">
</div>
</body>
<style>
* {
margin: 0;
padding: 0;
font-family: sans-serif;
}
body {
background: #333;
}
.col {
width: 24.9%;
height: 100vh;
float: left;
display: inline;
border-right: 1px dashed #ffffff;
text-align: center;
}
.col:last-child {
border-right: none;
}
.container {
position: relative;
overflow: hidden;
width: 100%;
height: 100vh;
}
.container img {
position: absolute;
top: 0;
left: 0;
z-index: -60;
width: 100%;
height: 100vh;
}
.container li img {
position: absolute;
top: 0;
left: 100%;
z-index: -50;
/*transition: all 1s ease;*/
width: 100%;
height: 100vh;
}
nav {
width: 100%;
height: 100vh;
}
ul {
width: 100%;
height: 100vh;
list-style: none;
text-align: center;
}
li {
width: 100%;
height: 100vh;
display: flex;
padding-top: 100px;
}
li a {
z-index: 1;
color: #ffffff;
text-decoration: none;
font-size: 36px;
width: 100%;
height: 100vh;
}
li a:hover + img {
left: 0;
}
</style>
<script type="text/javascript">
</script>
</html>
I am trying to make a layout where #txt-bar and #main-content-area will overlap on #image. ( #txt-bar is overlapping on #image with following CSS ) but to achieve overlapping of #main-content-area on #image if I use top:-60px at #main-content-area then it will leave a gap between #main-content-area and #footer. I don't know how to solve this issue. Please help me.
/* CSS */
body {
position: absolute;
}
#top-bar {
background-color: black;
color: white;
}
#txt-bar {
height: 40px;
background-color: pink;
position: relative;
z-index: 4;
}
#link-bar {
background-color: red;
height: 40px;
z-index: 4;
}
#image {
position: relative;
z-index: 3;
}
.line {
width: 100%;
position: relative;
border-bottom: 4px solid black;
}
#main-content-area {
position: relative;
background-color: red;
top: -60px;
z-index: 4;
}
#footer {
background-color: green;
position: relative;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="row">
<div class="col-sm-6" id="txt-bar">
<h1>Greetings</h1>
</div>
<div class="col-sm-6" id="link-bar">
<h1>Link bar </h1>
</div>
</div>
<div class="row">
<div class="col-sm-12" id="image">
<img src="https://placeholdit.imgix.net/~text?txtsize=28&txt=300%C3%97300&w=300&h=300" class="img-responsive" />
</div>
</div>
<div class="line"></div>
<div class="row">
<div class="col-sm-2">
</div>
<div class="col-sm-8" id="main-content-area">
<h1>Main content area </h1>
</div>
<div class="col-sm-2">
</div>
</div>
<div class="row" id="footer">
<div class="col-sm-12">
<h1>Footer Element </h1>
</div>
</div>
</div>
Wrap all divs (#txt-bar #main-content-area and #image) in a parent div with position:relative then use position:absolute for #main-content-area and #txt-bar, this will solve your issues.
.wrap{position:relative;max-width:300px;}
#txt-bar {
height: 40px;
background-color: pink;
position: absolute;
top:10px;
width:100%;
}
#main-content-area {
position: absolute;
bottom:10px;
width:100%;
background-color: red;
}
<div class=wrap>
<div id=txt-bar>txt-bar</div>
<div id=image><img src=https://placeholdit.imgix.net/~text?txtsize=28&txt=300%C3%97300&w=300&h=300></div>
<div id=main-content-area>main-content-area</div>
</div>
More Info