I am having trouble with my HTML and CSS.
I have two containers that are directly over top of one another.
I am trying to make it so when the user hovers the top most container, it hides the top one to reveal the one behind it. This is all done through changing the viability on :hover.
However, I am finding that while it works, it often just results in rapid flickering between the two states.
I have no idea why this is happening and can't seem to figure it out. I tried changing the z-index and
position as suggested by other similar posts and couldn't get anything to work.
Code on codepen: https://codepen.io/michaelnicol/pen/jOqYbGo
HTML:
<html>
<head>
</head>
<body>
<main>
<div class="image_container">
<div class="text_div">
<h1>Mona Lisa</h1>
<p>Lorem lipsum dolor sit amat</p>
</div>
</div>
</main>
</body>
</html>
CSS:
/* Formatting Code */
main {
width: 90%;
height: 90%;
min-height: 900px;
border: 1px solid black;
background-color: #efefef;
margin: 5%;
border-radius: 20px;
box-shadow: 2px 2px 5px black;
display: flex;
justify-content: center;
align-items: center;
}
body {
display: flex;
justify-content: center;
background-color: rgb(147, 165, 207);
}
.text_div > h1, .text_div > p {
color: white;
text-shadow: 2px 2px 5px black;
}
/* image hover code */
.image_container {
height: 300px;
width: 400px;
border: 1px solid black;
background-color: rgb(156, 48, 48);
background-image: url("https://i.pinimg.com/474x/c6/90/48/c69048072a6d77dfb0a317db98ef145d.jpg")
}
.text_div {
visibility: visible;
opacity: 0.85;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
height: 100%;
width: 100%;
transition: 0.5s ease-in-out;
}
.text_div:hover {
visibility: hidden;
}
Try to replace this:
.text_div:hover {
visibility: hidden;
}
With this:
.image_container:hover .text_div {
opacity: 0;
pointer-events: none;
}
Related
There are several answers on StackOverflow, but the code structure of each is too different to directly understand.
My question is to know why the blue background does not take all the block? I still have white spaces.
my example
dashboard.html
<nav>
<div class="sidebar-button">
<div class="menu-container">
<i class="bx bx-menu sidebarBtn"></i>
<span class="dashboard">Dashboard</span>
</div>
<div class="menu-summary-container">
<span class="user">Utilisateur : Toto </span>
</div>
</div>
</nav>
style.css
.home-section nav .sidebar-button {
display: flex;
align-items: center;
font-size: 24px;
font-weight: 500;
width: 100%;
background-color: #0a2558;
color: #fff;
}
.menu-container {
display: flex;
align-items: center;
}
.menu-container i {
font-size: 35px;
margin-right: 10px;
}
.menu-summary-container {
display: grid;
margin: auto;
text-align: center;
}
The code is available also on this following link.
I do not see what is missing?
Assuming I've understood your question, you've applied the background-color to the .homesection nav .sidebar-button rather than .home-section nav.
I've adjusted your styles.css as below:
.home-section nav {
display: flex;
justify-content: space-between;
height: 80px;
background: #fff;
align-items: center;
position: fixed;
width: calc(100% - 330px);
left: 330px;
z-index: 100;
background-color: #0a2558;
padding: 0px;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
transition: all 0.5s ease;
}
Great first question by the way! Very well structured and the stackblitz is very useful!
The source of the problem is the align-items: center; and padding: 0 20px; styles defined in the .home-section nav section. The issue is resolved when the specified styles are removed.
The problem is that you are applying the color to a element that is inside the nav, not the whole nav. The element inside the nav is not taking up all the space. You can either change the color of the nav itself:
nav{
background: blue;
}
Or make the child fill up all the space in the nav:
.child{
height: 100%;
width: 100%;
}
I've created a bit of custom code, as my friends wanted a cool hovering effect on their homepage. Since I'm quite the newbie, I was really proud I could create this flexbox-based container from scratch (granted, with a bit of help from a youtube tutorial). Now I'm struggling to integrate this in the existing blockstructure of my theme. I'm running neve as a theme, and want to replace the uppermost block (which is now simply holding a background image) with my custom HTML, styled with my custom CSS. I'm certain this should be possible, and am convinced that it's something rather simple that I'm just not getting at the moment. Please haelp a brother out. For reference, this is the site i'm trying to customize: www.thenewport.org (it's just about the frontpage picture I'm trying to replace, the one with the 5 buildings).
Here's the element I made myself: https://codepen.io/janstanna/pen/VwmKNNJ
html:
<div class ="box-zeeland" > Zeeland </div>
<div class ="box-normandie" > Normandy </div>
<div class ="box-roffa" > Rotterdam </div>
<div class ="box-Valencia" > Valencia </div>
<div class ="box-Adam" > Amsterdam </div>
<div class ="overlay" > </div>
</div> </span>
CSS:
*{
padding: 0px;
margin: 0px;
box-sizing:border-box;
}
.container{
width: 100%;
height: 1066px;
padding: 0px;
margin-top: 100px auto;
display: flex;
background; #ddd;
font-family: Helvetica;
color: white;
vertical-align: bottom;
justify-content: bottom;
align-self: flex-end;
}
.overlay {
border: 2px #ddd;
z-index: 10;
font-size: 90px;
position: absolute;
left: 300; top: 300; right: 300; bottom: 300;
/* top: 0; left: 0; */
/* width: 100%; height: 100%; */
/* display: -webkit-flex; */
/* flex-align: center; flex-pack: center; */
/* display: block; */
/* clear: both; */
background: rgba(0,0,0,0.0);
text-align: center;
color: white;
font-family: Helvetica;
font-weight: 600px;
}
.box-zeeland {
height: 100%;
padding: 0px;
background-image: url(https://elnuevopuerto.org/wp-content/uploads/2021/01/Zeeland_header_The_New_Port_Verdonkerd.jpg);
border: 3px solid #ddd;
font-size: 30px;
flex:1;
transition: 1s;
text-align: center;
align-self: flex-end;
order: 3;
}
.box-zeeland:hover{
flex:3;
background-image: url(https://elnuevopuerto.org/wp-content/uploads/2021/01/Zeeland_648x1066_DARK.jpg);
order: 3;
}
.box-normandie {
height: 100%;
padding: 0px;
background-image: url(https://elnuevopuerto.org/wp-content/uploads/2021/01/LNP_648_DARK.jpg);
border: 3px solid #ddd;
font-size: 30px;
flex:1;
transition: 1s;
text-align: center;
align-self: flex-end;
order: 1;
}
.box-normandie:hover{
flex:2;
background-image: url(https://lenouveauport.org/wp-content/uploads/2021/02/IMG_0037.jpg)
order: 1;
}
.box-roffa{
height: 100%;
padding: 0px;
background-image:url(https://elnuevopuerto.org/wp-content/uploads/2021/01/rotterdam_Website_warmer_324_Verdonkerd.jpg);
border: 3px solid #ddd;
font-size: 30px;
flex:1;
transition: 1s;
text-align: center;
order:2;
}
.box-roffa:hover {
flex:3;
background-image: url(https://elnuevopuerto.org/wp-content/uploads/2021/01/rotterdam_Website_warmer_648_DARK.jpg);
order: 2;
}
.box-Valencia{
height: 100%;
padding: 0px;
background-image: url(https://elnuevopuerto.org/wp-content/uploads/2021/01/ElNuveopuerto_Header_Valencia_324_Verdonkerd.jpg);
border: 3px solid #ddd;
font-size: 30px;
flex:1;
transition: 1s;
text-align: center;
order: 4;
}
.box-Valencia:hover {
flex:3;
background-image: url(https://elnuevopuerto.org/wp-content/uploads/2021/01/ElNuveopuerto_Header_Valencia_648_DARK.jpg);
order: 4;
}
.box-Adam{
height: 100%;
padding: 0px;
background-image:url(https://elnuevopuerto.org/wp-content/uploads/2021/01/DNPAMS001_324x1066_header_Verdonkerd.jpg);
border: 3px solid #ddd;
font-size: 30px;
flex:1;
transition: 1s;
text-align: center;
order: 5;
}
.box-Adam:hover{
flex:3;
background-image: url(https://elnuevopuerto.org/wp-content/uploads/2021/01/DNPAMS001_648_Header_DARK.jpg);
order: 5;
}
</style>```
I hope someone can help me, I've been stuck for a couple of days now! Thank in advance!
I have just tried running your code on a fresh WordPress install with the Neve theme installed.
Its all working correctly, except do not use .container as a class for the flex box, instead use something like .container-flex.
.container is already assigned to some HTML in the Neve theme.
I was unable to gain access to the site you want to use this on. But if you just need to add this onto a page, use the Custom HTML block, paste in your HTML code and save the page.
<span> <div class ="container-flex">
<div class ="box-zeeland" > Zeeland </div>
<div class ="box-normandie" > Normandy </div>
<div class ="box-roffa" > Rotterdam </div>
<div class ="box-Valencia" > Valencia </div>
<div class ="box-Adam" > Amsterdam </div>
<div class ="overlay" > </div>
</div> </span>
Then click on Customize > Additional CSS, and paste your CSS code in there and click Publish. Then your code should work as intended.
I created a custom 'searchbox'. The 'searchbox' actually built by a div and input text inside it.
Later on I will add a 'search' icon on the left and 'clear' button on the right.
The issue is, the input inside the div already sized based on it's container and when I'm focusing the input text, I couldn't find a way to expand the parent div (instead of the input itself). It's important the div will expand so the icons and buttons I will later add - will expand with the input.
Couldn't find a way doing it with CSS only (without JS).
Will appreciate your assistance!
<!DOCTYPE html>
<html>
<head>
<style>
* {
box-sizing: border-box;
}
.App {
width: 100%;
height: 200px;
background-color: tan;
}
.fieldcontainer {
display: flex;
padding-left: 8px;
background-color: #CCCCCC;
border-color: grey;
width: 300px;
min-height: 35px;
align-items: center;
justify-content: space-between;
border-radius: 8px;
cursor: default;
transition: 'background-color' 0.4s;
}
.fieldcontainer:hover {
background-color: #C3C3C3;
}
.searchfield {
background-color: inherit;
font-size: 1em;
border: 0;
flex-grow: 8;
transition: all 0.4s linear;
}
.searchfield:focus {
outline: none;
width: 100%;
}
</style>
</head>
<body>
<div class="App">
<div class="fieldcontainer">
<input class="searchfield" type="text" placeholder="search" />
</div>
</div>
</body>
</html>
Use focus-within (https://developer.mozilla.org/fr/docs/Web/CSS/:focus-within)
* {
box-sizing: border-box;
}
.App {
height: 200px;
background-color: tan;
}
.fieldcontainer {
display: flex;
padding-left: 8px;
background-color: #CCCCCC;
border-color: grey;
width: 300px;
min-height: 35px;
align-items: center;
justify-content: space-between;
border-radius: 8px;
cursor: default;
transition: 0.4s;
}
.fieldcontainer:hover {
background-color: #C3C3C3;
}
.searchfield {
background-color: inherit;
font-size: 1em;
border: 0;
flex-grow: 8;
transition: all 0.4s linear;
outline:none;
}
.fieldcontainer:focus-within {
width: 100%;
}
<div class="App">
<div class="fieldcontainer">
<input class="searchfield" type="text" placeholder="search" />
</div>
</div>
Code: https://hastebin.com/otemiveduh.xml
Problem Description: There are two problems being that when another element, such as p-tag, is added underneath the section for the navigation bar. It'll be hidden underneath the navigation bar. In addition, the second error is that when highlighting over the image it doesn't change the background-colour of the whole entire height and if I change any of the other code in different sections, it ruins the vertical aligning of the image. I've been stuck with this error(s) for awhile and have to turn to the community for aid.
<HTML>
<Head>
<style>
body {
margin: 0;
}
div.Header {}
div.Navigation {
padding: 0;
margin: 0;
list-style: none;
line-height: 50px;
height: 50px;
width: 100%;
background-color: #001a33;
position: absolute;
overflow: hidden;
z-index: 2;
flex-direction: row;
display: flex;
align-items: center;
justify-content: space-around;
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
}
div.Navigation>a {
display: block;
flex-grow: 1;
text-align: center;
}
div.Navigation a img {
height: 22.1;
width: 44;
vertical-align: middle;
}
div.Navigation a:visited,
div.Navigation a:active,
div.Navigation a:link {
color: white;
text-decoration: none;
}
div.separator {
margin-left: 60%;
}
div.Navigation a:hover {
background-color: #000d1a;
}
</style>
</Head>
<Body>
<div class="Header">
<div class="Navigation">
<img src="icons/home-button.png" />
Ongoing Projects
Purchase Service
<div class="separator"></div>
Employment
Portfolio
About
</div>
</div>
<div class="Main">
</div>
<div class="Footer">
</div>
</Body>
</HTML>
You are using absolute position on the navigation so you need to add padding to main content in order to be able to add content without going under the navigation. You have also a useless element to make the separation between both parts of the navigation. Instead you can simply use margin-left:auto.
You are also missing units in the height/width of the image :
body {
margin: 0;
}
div.Navigation {
padding: 0;
margin: 0;
list-style: none;
line-height: 50px;
height: 50px;
width: 100%;
background-color: #001a33;
position: absolute;
overflow: hidden;
z-index: 2;
flex-direction: row;
display: flex;
align-items: center;
justify-content: space-around;
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
}
div.Navigation>a {
display: block;
text-align: center;
padding:0 10px;
}
div.Navigation>a:nth-child(4) {
margin-left: auto;
}
div.Navigation a img {
height: 22.1px;
width: 44px;
vertical-align: middle;
}
div.Navigation a:visited,
div.Navigation a:active,
div.Navigation a:link {
color: white;
text-decoration: none;
}
div.Navigation a:hover {
background-color: #000d1a;
}
.Main {
padding-top:55px;
}
<div class="Header">
<div class="Navigation">
<img src="https://lorempixel.com/100/100/" />
Ongoing Projects
Purchase Service
Employment
Portfolio
About
</div>
</div>
<div class="Main">
<p>Content</p>
</div>
<div class="Footer">
</div>
I have the following CSS and HTML:
body { background-color: #c0c0c0; }
.title-bar, { background-color: #999; color: white; float: left; overflow: hidden; }
.title-bar {
border-bottom: 1px solid white;
height: 128px;
width: 100%;
}
.logo, .user-info { box-sizing: content-box; height: 100%; width: 128px; }
.logo{
align-items: center;
background-color: #369;
border-right: 1px solid white;
display: flex;
float: left;
font-size: 2em;
font-kerning: none;
justify-content: center;
}
.user-info {
align-items: center;
border-left: 1px solid white;
display: flex;
float: right;
justify-content: space-between;
flex-flow: column nowrap;
}
.user-info .circle {
border: 2px solid #369;
border-radius: 50%;
display: inline-block;
flex: 0 0 auto;
height: 32px;
margin: 8px 8px;
overflow: hidden;
transition: border 0.15s ease-out;
width: 32px;
}
.user-info .circle:hover { border-width: 4px; }
.user-info .container {
border-top: 1px solid white;
display: flex;
justify-content: center;
margin-top: 6px;width: 100%;
}
.hor-nav { background-color: #404040; }
.option { display: inline-block; position: relative; }
.hor-nav .option:hover {background-color: #369; }
.option a {
color: white;
display: inline-block;
font-size: 1em;
padding: 14px;
text-align: center;
transition: background-color 0.15s ease-out;
}
.option .dropdown { display: none; position: absolute; }
.option:hover .dropdown{ display: block; }
.dropdown a {
display: block;
text-align: left;
width: 100%;
}
<div class="title-bar">
<a class="logo" href="#">
</a>
<div class="user-info">
<span>User name</span>
<div class="container">
</div>
</div>
<div class="hor-nav">
<div class="option">
OPTION 1
<div class="dropdown">
ITEM 1
</div>
</div>
</div>
</div>
as you can see, the hor-nav bar's color spills onto the user-info area.
I have researched this and found that if I set overflow-x: hidden; it will not do this (see this article).
I have tried that and it is true - the nav bar does not spill into the user-info but, when you hover over one of the nav bar options, the dropdown does not come down but instead the vert-nav gives you a scroll bar (see this jsfiddle).
Additionally, if you do overflow-y: hidden; there is no scroll bar at all.
I am trying to get it so that the background-color of the hor-nav does not spill into other div's, but also allows the dropdown to be activated and work
thank you.
The easiest way to to this with least code change is to just give the user-info area a background color. Since the hor-nav section is lower on the z-index this will give the visual affect you want although the bar will still be under the user-info section it won't appear to be and the drop down will funtion as it does now.
Per your inquiry, you could do this another way by using percentage based widths for all 3 elements so they don't overlap eachother. Please see this fiddle for code change (note I change the markup order slightly, widths, and added box sizing css property)
The way I see it, you have 3 options
You can try adding margin-left/right to the hor-nav.
.hor-nav {
margin: auto 128px;
}
Another option is to set a certain width to the .hor-nav. Or practically cut the width of it.
.hor-nav {
width: calc(100% - 128px);
}
And third, is to add a background color to the .user-info