I have a problem with the z-index. I have simulated my problem in this jsfiddle . I have two siblings div inside a container. one of them works as a background of the container and has a hover effect on its elements so when you hover on its elements , the color of the elements changes. to place it behinde the second div I used a negative z-index , but the hover effect doesn't work on it. any solutions to this proplem? I have seen some questions about this subject but without any valid answer...
Thanks in advance.
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
text-decoration: none;
font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
}
.container {
width: 1000px;
height: 600px;
position: relative;
}
.div1 {
position: absolute;
z-index: -10;
top: 0;
left: 0;
bottom: 0;
right: 0;
background-color: lightgreen;
}
.div2 {
width: 200px;
height: 200px;
background-color: rgb(245, 189, 116);
margin: 0 auto;
}
.div1 p:hover {
color: red;
}
.div2 p:hover {
color: red;
}
</style>
</head>
<body>
<div class="container">
<div class="div1"><p>div 1 doesn't work</p></div>
<div class="div2"><p>div 2 works</p></div>
</div>
</body>
</html>
See the edits I made to your CSS. It will work better if you set div1 with the background limegreen as z-index: 0; which is the default layer for elements and use z-index: 1; for div2 so it's on the first layer above the default one. See below.
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
text-decoration: none;
font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
}
.container {
width: 1000px;
height: 600px;
position: relative;
}
.div1 {
position: absolute;
z-index: 0;
top:0;
left: 0;
bottom: 0;
right: 0;
background-color: lightgreen;
}
.div2 {
position: relative;
width: 200px;
height: 200px;
background-color: rgb(245, 189, 116);
margin: 0 auto;
z-index: 1;
}
.div1 > p:hover{
color: red;
}
.div2 > p:hover{
color: red;
}
<div class="container">
<div class="div1"><p>div 1 works now</p></div>
<div class="div2"><p>div 2 works</p></div>
</div>
From your code, you are hovering over the container div, not the div1.
Z-index see as elevations in a building, and you watching it from birdseye.
To solve this, you should set both div1/div2 with positive z-index, and changing div2's position relative to parent div.
Get more information about div positioning:
https://tomelliott.com/html-css/css-position-child-div-parent
Edit: Here's a quick example simulating your desired hover effect.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
text-decoration: none;
font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
}
.grandparent {
width: 250px;
height: 250px;
background-color: lightgreen;
position: relative;
}
.parent {
width: 150px;
height: 150px;
/*position:absolute;*/
bottom: 0px;
}
.child {
width: 70px;
height: 70px;
background-color: rgb(245, 189, 116);
position: absolute;
right: 0px;
top: 0px;
}
.parent p:hover {
color: red;
}
.child p:hover {
color: red;
}
</style>
</head>
<body>
<div class="grandparent">
<div class="parent">
<p>div 1 does work now</p>
<div class="child"><p>div 2 works</p></div>
</div>
</div>
</body>
</html>
Related
I'm with a problem that i trying solve: i'm making a website, and i was going put the final part of the site, using a div, but this part can't stay glued in the bottom, no matters the code editing that i make
follow my site code below:
#font-face {
font-family: Open-Sauce-One;
src: url("OpenSauceOne-Bold.ttf") format("truetype");
}
#font-face {
font-family: Archivo-Black;
src: url("ArchivoBlack-Regular.ttf") format("truetype");
}
body {
display: flex;
background-image: linear-gradient(to bottom, rgb(255, 255, 255), rgb(153, 153, 153));
height: 100vh;
}
div.Idrv2v {
position: relative;
left: 5%;
bottom: 15px;
width: 250px;
}
div.Edrv1v {
position: absolute;
background-color: #B4ADAD;
max-width: 100%;
width: 1366px;
height: 95px;
padding: 1px;
top: 0px;
left: 0px;
right: 0px;
}
#titlelogo {
font-family: Open-Sauce-One, "Comic Sans MS", sans-serif;
font-size: 35px;
color: #301111;
}
#subtitlelogo {
font-family: Archivo-Black, "Arial Black", sans-serif;
font-size: 18px;
position: relative;
bottom: 28px;
color: #302e2e;
}
.svgmenu_dev {
background-color: gray;
width: 1366px;
max-width: 100%;
position: absolute;
height: 90px;
bottom: 0;
right: 0px;
left: 0px
}
.svgmenu_dev #svgmenudev1 #svgmenudev2 {
font-family: Open-Sauce-One, "Comic Sans MS", sans-serif;
font-size: 10px;
position: absolute;
}
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<title>CoinCot</title>
<link href="css-data/styles.css" rel="stylesheet">
<meta name=viewport content="width=device-width, initial-scale=1">
</head>
<body>
<div class="Edrv1v">
<div class="Idrv2v">
<h1 id="titlelogo"> CoinCot.com </h1>
<h2 id="subtitlelogo">A simple and efficient quotes website.</h2>
</div>
</div>
<div class="svgmenu_dev">
Menu Icon by Alex Martynov
</div>
</body>
</html>
I wait can solve this
I tryed change the position of the div, set the position as absolute, but not works, i too set the position as relative, it got worse, becuase that the div has sttoped on the top of page (and its need stays in bottom), i'm sets the values of bottom, left and right as 0 pixels, but nothing, continues hover the bottom part.
set "box-sizing: border-box" to " div.Edrv1v "
when trying to add a <div> inside another it results in the main container to be pushed down and equal amount to the added <div>. I can fix the issue by setting the position of the added to absolute but I am trying to understand which attribute is causing this behavior.
https://imgur.com/t9Q0ocm
for example Adding the red <div> inside the purple <div> caused the purple <div> to be pushed down
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link
href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght#0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap"
rel="stylesheet">
<link rel="stylesheet" href="styles.css">
<title>Blue</title>
</head>
<body>
<aside class="side-menu"></aside>
<main class="main-content">
<div class="c-content">
<div class="c-content-text">
</div>
</div>
<div class="r-content">
<div class="r-content-text">
</div>
</div>
<div class="video-container"></div>
</main>
</body>
</html>
CSS
html {
font-family: Roboto, san serif;
font-size: 16px;
font-weight: normal;
}
*,
*::before,
*::after {
box-sizing: border-box;
}
h1 {
font-size: 3.125rem;
line-height: 3.6875rem;
text-transform: uppercase;
color: #ffffff;
}
p {
font-size: 1rem;
font-family: Roboto;
color: #ffffff;
font-size: 16px;
line-height: 24px;
}
body {
background-color: #1458e4;
font-size: 0;
margin: 0;
padding: 0;
}
.side-menu {
width: 5%;
height: 100vh;
/* background-color: coral; */
position: sticky;
display: inline-block;
border-right: 1px solid rgba(255, 255, 255, 0.2);
}
.main-content {
background-color: cyan;
display: inline-block;
width: 95%;
}
.c-content {
background-color: rgb(184, 11, 184);
border-right: 1px solid rgba(255, 255, 255, 0.2);
display: inline-block;
width: 67%;
height: 100vh;
}
.r-content {
display: inline-block;
background-color: darkkhaki;
width: 33%;
height: 100vh;
padding: 25.4375rem 4.6875rem 19.1875rem 3.375rem;
}
.video-container {
background-color: lemonchiffon;
height: 68vh;
}
.c-content-text {
display: inline-block;
/* position: absolute; */
background-color: tomato;
width: 500px;
height: 500px;
}
.r-content-text {
background-color: turquoise;
width: 500px;
height: 500px;
}```
Remove display: inline-block in class c-content-text should also solved your issue.
I think this thread answer's your question Inline-block element height issue
AFAIK, the inline-block has relation with font-size and line-height, and you set the body to 0px, which makes lots of the issues hard to describe. E.g. Try to remove the font-size: 0px; from the body. And no matter you remove ('inline' or add absolute), the behavior is the same. Althought the page is still looks not good.
Last, i would suggest you to try the grid layout for your layout design, your scenario should be easy to implement with grid layout.
This question already has answers here:
How to remove the space between inline/inline-block elements?
(41 answers)
Closed 3 years ago.
So I'm trying to build a basic layout for my site and I've run into a problem. The problem is some margins that I can't figure out where they're coming from.
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<link href="/css/style.css?v=0.1" type="text/css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Noto+Serif|PT+Serif" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8">
<link rel="icon" href="/images/favicon.png" type="image/png">
</head>
<body>
<div class="wrapper">
<div class="sidebar">
<p>sidebar</p>
</div>
<div class="main">
<p>main</p>
</div>
</div>
</body>
</html>
style.css:
/* set defaults */
html, body, div {
background-color: white; /* Was #eee or #ccc */
/*font-size: 16px;*/
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
color: white;
font-family: 'PT Serif', serif;
/*font-family: 'Noto Serif', serif;*/
box-sizing: border-box;
}
.wrapper {
width: 100%;
max-width: 1200px;
height: auto;
padding: 0;
margin: 0;
border: 0;
outline: 0;
}
.main {
width: 80%;
height: 100px;
color: white;
margin: 0;
padding: 0;
border: 0;
outline: 0;
background-color: black;
display: inline-block;
}
.sidebar {
width: 20%;
height: 100px;
color: black;
margin: 0;
padding: 0;
border: 0;
outline: 0;
background-color: lightgrey;
display: inline-block;
}
p {
margin: 0;
padding: 0;
}
So when I render the page as shown I get:
But when I set the width on the sidebar to 19% I get:
As you can see I'm getting some margins to the right of both elements. I have no idea where this is coming from and the inspector is telling me I have no margins! Margin, padding, border and outline are all set to zero so I have no idea where this is coming from. Is there something I'm missing?
Edit: I should have said I'm trying to get the elements to display next to each other without wrapping.
Reason for this beacuse inline elements respect the word spacing between divs in the html. The space between first and second create an actual gap that you can see on the page.
You can easily remove this by removing the space between inline divs in the html.
div {
display: inline-block;
width: 50%;
}
<div style="background: green">Width: 50%</div><div style="background: red">Width: 50%</div>
But I hope this is not you are expecting, do not worry there are some otherways as well :)
font-size: 0;
gap between the two divs is due to word spacing therefore adding font-size: 0 to the parent container will remove the gap between the two divs.
.wrapper {
width: 100%;
font-size: 0
}
div {
display: inline-block;
width: 50%;
}
<div class='wrapper'>
<div style="background: green; font-size: 14px" class="sidebar">Width 50%</div>
<div style="background: red; font-size: 14px" class="main">Width 50% </div>
</div>
display: flex this method only suppport IE > 10 versions, you can apply display: flex to the parent container and apply relavent widths accordingly to child divs.
.wrapper {
display: flex;
}
.main {
width: 80%
}
.sidebar {
width: 20%
}
<div class='wrapper'>
<div style="background: green" class="sidebar">Width 20%</div>
<div style="background: red" class="main">Width 80% </div>
</div>
Actually here you are not getting the margin issue when you have two elements that has width:19% and width:80%, the remaining width:1% gets the gap that you mentioned as margin.
Simply set float:left; to both sidebar and main classes that avoid the margin issue. No need to change the width.
html,
body,
div {
background-color: white;
/* Was #eee or #ccc */
/*font-size: 16px;*/
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
color: white;
font-family: 'PT Serif', serif;
/*font-family: 'Noto Serif', serif;*/
box-sizing: border-box;
}
.wrapper {
width: 100%;
max-width: 1200px;
height: auto;
padding: 0;
margin: 0;
border: 0;
outline: 0;
}
.main {
width: 80%;
height: 100px;
color: white;
margin: 0;
padding: 0;
border: 0;
outline: 0;
background-color: black;
display: inline-block;
float: left;
}
.sidebar {
width: 20%;
height: 100px;
color: black;
margin: 0;
padding: 0;
border: 0;
outline: 0;
background-color: lightgrey;
display: inline-block;
float: left;
}
p {
margin: 0;
padding: 0;
}
<!DOCTYPE html>
<html lang="en">
<head>
<link href="/css/style.css?v=0.1" type="text/css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Noto+Serif|PT+Serif" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8">
<link rel="icon" href="/images/favicon.png" type="image/png">
</head>
<body>
<div class="wrapper">
<div class="sidebar">
<p>sidebar</p>
</div>
<div class="main">
<p>main</p>
</div>
</div>
</body>
</html>
You have forgot to add the float. Please add the following css to your css so that it wont take margin
.sidebar, .main{ float:left; }
if you usnig float:left instead of display: inline-block; your margin will remove
I'm trying to center a headline for a webinar signup page.
Here is what it's doing:
It's sliding off the left side...
Here is my html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="generator" content="CoffeeCup HTML Editor (www.coffeecup.com)">
<meta name="dcterms.created" content="Sat, 21 Nov 2015 22:11:09 GMT">
<meta name="description" content="">
<meta name="keywords" content="">
<link rel="stylesheet" type="text.css" href="style.css">
<title>Event Lander</title>
</head>
<body>
<div class="header-rectangle">
<h1 class="whiteheadline">Join Us for a Free Webinar!</h1>
</div>
</body>
</html>
And here is my CSS:
*{
margin:0px;
}
.whiteheadline {
font-size: 48px;
font-family: "Open Sans";
color: rgb(255, 255, 255);
font-weight: bold;
line-height: 1.2;
text-align: center;
position: absolute;
left: -55.656px;
top: 39.867px;
width: 682px;
height: 48px;
z-index: 4;
align:center;
display:inline;
}
.header-rectangle {
background-color: rgb(104, 115, 251);
height: 143px;
margin: 0px;
width: 100%;
text-align: center;
}
I've tried adding the inline markup to the html as well as adding different text-aligns multiple times to both css classes.
I want it to fill the width of the browser, no margin, and with the white text in the center of the page with the classes defined.
Can anyone help? Thanks!
HTML
<div class="header-rectangle">
<h1 class="whiteheadline">Join Us for a Free Webinar!</h1>
</div>
CSS
* {
margin:0px;
}
.whiteheadline {
font-size: 48px;
font-family: "Open Sans";
color: rgb(255, 255, 255);
font-weight: bold;
}
.header-rectangle {
background-color: rgb(104, 115, 251);
text-align: center;
line-height: 143px;
}
This center aligns your whiteheadline horizontally and vertically
Live Demo
Let me know if there is anything else I can do. If this doesn't work for you, I will revise it :)
* {
margin: 0px;
}
.whiteheadline {
font-size: 48px;
font-family: "Open Sans";
color: rgb(255, 255, 255);
font-weight: bold;
text-align: center;
width:100%;
}
.header-rectangle {
background-color: rgb(104, 115, 251);
margin: 0px;
width: 100%;
text-align: center;
width:100%;
padding-top:20px;
padding-bottom:20px;
}
<div class="header-rectangle">
<h1 class="whiteheadline">Join Us for a Free Webinar!</h1>
</div>
<link rel="stylesheet" type="text.css" href="style.css">
Use type="text/css" not type="text.css" or delete it all together because it's no longer needed.
The changes are annotated on the CSS. Basically you need to put your absolute positioned title inside a relative positioned header. That way when you apply left, right, bottom, and/or top positions, it'll be in relation to your header and not the whole page.
DEMO
CSS
html, body {
box-sizing: border-box;
font: 400 16px/1.5'Open Sans';
/* 100% of viewport width and height */
height: 100vh;
width: 100vw;
}
*, *:before, *:after {
box-sizing: inherit;
margin: 0;
padding: 0;
border: 0;
}
.wrap {
width: 100%;
height: auto;
margin: auto;
}
.whiteheadline {
font-size: 3em;
color: rgb(255, 255, 255);
font-weight: bold;
text-align: center;
position: absolute;
/* 50% of container (i.e. header) then subtract 50% of your title width (580px/2) */
left: calc(50% - 290px);
top: 39.867px;
width: 580px;
height: 48px;
z-index: 4;
/*align:center;<<<Not HTML5*/
/*display:inline;*/
}
.header-rectangle {
background-color: rgb(104, 115, 251);
height: 143px;
margin: 0px;
width: 100%;
text-align: center;
/* If using position: absolute, make the container (i.e. header) position: relative */
position: relative;
}
HTML
<div class="wrap">
<header class="header-rectangle">
<h1 class="whiteheadline">Join Us for a Free Webinar!</h1>
</header>
</div>
I am having trouble with finding my link. When I open up my html and css in the file, I cannot visibly see it (I believe it is stuck under my div, even though the z-index is higher?) I am not entirely sure why, any help would be greatly appreciated!
HTML:
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="Stylesheet" href="Stylesheet.css" />
<title>Derpycats.com</title>
</head>
<body>
<!--Background (Carbon Fibre)-->
<body background="background.jpg" alt="Background" />
<!--Header-->
<h1 id="header">DerpyCats.com</h1>
<div id="headerdiv"></div>
<!---Links-->
Home
</body>
</html>
CSS:
/* Sets the pixel density to "fill browser" */
* {
width: 100%;
height: 100%;
}
/* Heading */
#header {
float:left;
margin-left: 5px;
padding-top: 5px;
font-size: 16px;
font-family: Verdana, sans-serif;
color: #D9411E;
z-index: 2;
position: fixed;
font-size: 50px;
bottom: -50px;
}
/* CSS for the heading div */
#headerdiv {
border-radius: 5px;
z-index: 1;
position: fixed;
width: 99%;
margin-top: -20px;
height: 100px;
background-color: white;
margin-bottom: 10px;
}
/* Css for the links */
a {
z-index: 3;
font-family: Verdana, sans-serif;
}
/* CSS for the normal paragraphs */
.paragraph {
color: white;
font-family: Courier, serif;
}
P.S. I don't believe this matters, but I am on OSX using sublime text 2.
I didnt understand what are you trying to do but, #headerdiv overlays your link.
You can give z-index = -1 value to your #headerdiv to send it back.
little Change in css will work here
#headerdiv {
border-radius: 5px;
z-index: 1;
/*position: fixed; this is creating problem*/
width: 99%;
margin-top: -20px;
height: 100px;
background-color: white;
margin-bottom: 10px;
}