I am trying to get a topbar to expand on Hover to show hidden text which could be social media icons, nav links etc.
However I am unsure of how to hide the text as it is appearing on and over the div below.
This is my (simple) code
html
<div class = "top"> This is the top
<div class = "invisible">can you see me</div>
</div>
<div class = "container">
<div class = "left">left</div>
<div class = "right">right</div>
</div>
This is my css
.top {
width : 100%;
background : blue;
padding-bottom : 25px;
position : relative;
}
.invisible {
position : absolute;
overflow: hidden;
top : 90%;
}
.top:hover {
padding-bottom : 150px;
background : yellow;
}
.container {
display : flex;
}
.left {
width : 50%;
background : red;
}
.right {
width : 50%;
background : green;
}
As you can see the Can you see me is appearing over the "left" text before hovering
You need to move overflow: hidden; to the parent element (.top) because it is the child, .invisible that is overflowing outside of .top.
.top {
width: 100%;
background: blue;
padding-bottom: 25px;
position: relative;
overflow: hidden;
}
.invisible {
position: absolute;
top: 90%;
}
.top:hover {
padding-bottom: 150px;
background: yellow;
}
.container {
display: flex;
}
.left {
width: 50%;
background: red;
}
.right {
width: 50%;
background: green;
}
<div class="top"> This is the top
<div class="invisible">can you see me</div>
</div>
<div class="container">
<div class="left">left</div>
<div class="right">right</div>
</div>
Related
I want to keep header height constant while box on the right side of the header should get expanded as a I keep adding multi line content. Please see attached image
My Code
.parent {
width: 100%;
height: 200px;
background: #fff;
position: relative;
background: #1c1d1f;
}
.rightbar {
position: absolute;
width: 40%;
height: 500px;
background: #efefef;
}
.content {
width: 40%;
height: auto;
}
.footer {
width: 100%;
}
<div class="header">
<div class="rightbar">content inside box</div>
<div class="content">
some content goes here
</div>
</div>
<div class="footer">
footer content goes here
</div>
If you want a scrollbar appear in your right-side bar then you should try to use overflow-y:auto;
Like below:
.rightbar {
position: absolute;
width: 40%;
height: 500px;
background:#efefef;
overflow-y:auto;
}
I will try to create a slider(move to left or right), but when I set outer Container(.wrapper) width over 100vw and set the height to 100vh with every child div, It will overflow on vertical, how can I avoid it?
Open the detailed description of the picture
body{
padding : 0;
margin:0;
}
.wrapper {
width : 200vw;
}
.section {
width : 100vw;
height : 100vh;
position:relative;
float:left;
}
.section1 {
background-color : red;
}
.section2{
background-color : yellow;
}
<div class="wrapper">
<div class="section section1">1</div>
<div class="section section2">2</div>
</div>
if you want to edit with online editor, you can try it
and I don't know why if When I only have one child div(.section), the height doesn't vertical overflow(move up and down)
body{
padding : 0;
margin:0;
}
.wrapper {
width : 100vw;
}
.section {
width : 100vw;
height : 100vh;
position:relative;
float:left;
}
.section1 {
background-color : red;
}
/*
.section2 {
background-color : yellow;
}
*/
<div class="wrapper">
<div class="section section1">1</div>
<!--<div class="section section1">1</div>-->
</div>
Although your question says you're looking to hide the horizontal scrollbar (left and right), your image indicates that you're actually looking to hide the vertical scrollbar (up and down).
You're looking to add overflow-y: hidden to body in order to hide the vertical scrollbar:
body {
padding: 0;
margin: 0;
overflow-y: hidden;
}
.wrapper {
width: 200vw;
}
.section {
width: 100vw;
height: 100vh;
position: relative;
float: left;
}
.section1 {
background-color: red;
}
.section2 {
background-color: yellow;
}
<div class="wrapper">
<div class="section section1">1</div>
<div class="section section2">2</div>
</div>
Alternatively, if you are indeed looking to hide the horizontal scrollbar, this can be done with overflow-x: hidden, though note that your content won't actually be too tall to escape the bounds vertically with the horizontal scrollbar removed. Setting a height of 110vh demonstrates this working:
body {
padding: 0;
margin: 0;
overflow-x: hidden;
}
.wrapper {
width: 200vw;
}
.section {
width: 100vw;
height: 110vh;
position: relative;
float: left;
}
.section1 {
background-color: red;
}
.section2 {
background-color: yellow;
}
<div class="wrapper">
<div class="section section1">1</div>
<div class="section section2">2</div>
</div>
Hope this helps! :)
There are a few answers out there about how to skew the single side of a div both empty and with images:
CSS3 Transform Skew One Side
Skew one side only of an element
But using these answers, I cannot figure out the rest of my issue.
I am attempting to create a 2 column row with an image background for the second column and a skewed or angled left side. The problem I have is filling the space with the containers after they have been skewed.
I am using Foundation 6 as the primary framework behind my site.
I have attached an image of how it should look completed
The closest I have got so far is this:
I have posted the code I have so far below.
Codepen
HTML:
<section class="lan_primary">
<div class="container-full">
<div class="row wide">
<div class="columns small-12 medium-6 lan_primary--select">
CONTENT LEFT
</div>
<div class="columns small-12 medium-6 lan_primary--img">
CONTENT
</div>
</div>
</div>
</section>
CSS:
div {
border: 1px red solid;
}
.lan_primary {
width: 100%;
height: 80vh;
margin-top: 10vh;
overflow: hidden;
.row {
flex-flow: row !important;
overflow: hidden;
}
&--select,
&--img {
padding: 100px 0;
overflow: hidden;
position: relative;
}
&--select {
background-color: aqua;
}
&--img {
background-color: blue;
transform-origin: top left;
transform: skew(-20deg);
//margin-left: 80px;
}
}
UPDATE - from first answer
Adding a pseudo element to solve causes problems with variable heights. If I were to set 100vh, it would give a different result to if I were to set height: 700x;.
See image below:
Use the triangle border trick with a pseudo. With viewport units it will scale with the height
To make the skew centered, I sized the right 25px (half of the skewed
area) wider than the left.
html, body {
margin: 0;
}
.wrapper {
display: flex;
}
.left, .right {
height: 100vh;
}
.left {
flex-basis: calc(50% - 25px);
position: relative;
background: lightgray;
display: flex;
align-items: center;
}
.left::after {
content: '';
position: absolute;
top: 0;
left: 100%;
height: 0;
width: 0;
border-top: 100vh solid lightgray;
border-right: 50px solid transparent;
}
.right {
flex-basis: calc(50% + 25px);
background: url(http://lorempixel.com/500/500/people/10/) left center no-repeat;
background-size: cover;
}
<div class="wrapper">
<div class="left">
<h1>Some text</h1>
</div>
<div class="right"></div>
</div>
You can Make use of the pseudo elements to make the look skewed one side
CSS(SCSS)
div {
border: 1px red solid;
}
.lan_primary {
width: 100%;
height: 80vh;
margin-top: 10vh;
overflow: hidden;
.row {
flex-flow: row !important;
overflow: hidden;
}
&--select,
&--img {
padding: 100px 0;
overflow: hidden;
position: relative;
}
&--select {
background-color: aqua;
position: relative;
overflow:visible;
&::after{
content:"";
position: absolute;
z-index:1;
top:0;
bottom:0;
height:100%;
width:20%;
background-color: cyan;
right:-40px;
transform:skew(-20deg);
}
}
&--img {
background-color: blue;
transform-origin: top left;
//margin-left: 80px;
}
}
link for reference
hope this helps
Here's a simplified version of my homepage:
<div class="main">
<div class="content"> all the content of my website </div>
<div class="nav"> fixed on the screen and always visible </div>
</div>
And here's the corresponding css:
.main {
max-width: 500px;
height: 2000px;
margin: auto;
background-color: grey;
}
.nav {
width: 100px;
height: 100px;
background-color: blue;
position:fixed;
right: 0; /* that's the issue */
}
I'd like the fixed element to stay within it's parent (touching the right edge of its parent). But right now it's touching the right border of the screen.
Any idea how to fix this? Thanks!
You can add an extra item to simulate the properties of the main container, try this:
.main {
max-width: 500px;
height: 2000px;
margin: auto;
background-color: grey;
}
.nav {
position:fixed;
max-width:500px;
width:100%;
}
.nav > div{
width: 100px;
height: 100px;
background-color: blue;
float:right;
}
<div class="main">
<div class="content">all the content of my website</div>
<div class="nav"><div>fixed on the screen and always visible</div></div>
</div>
position: fixed is described as, "The element is positioned relative to the browser window". You can use Javascript to accomplish this effect, here is how you do it with jQuery, for example:
$(window).scroll(function() {
var y = $(window).scrollTop();
$(".nav").css('top', y);
});
.main {
max-width: 500px;
height: 4000px;
margin: auto;
background-color: grey;
position: relative;
}
.nav {
width: 100px;
height: 100px;
background-color: red;
position: absolute;
right: 0; /* that's the issue */
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main">
<div class="content"> parent </div>
<div class="nav"> fixed to parent width </div>
</div>
I am trying to make my div boxes work out.
I want the orange boxes to have the same size by expanding the smaller ones to the same height as the biggest one.
I also want to make the one on the second row fit properly, to the left perfectly aligned.
HTML
<div class="picture">
<div class="image"></div>
<div class="description">A description</div>
</div>
<div class="picture">
<div class="image"></div>
<div class="description">A description <br /> Extra line</div>
</div>
<div class="picture">
<div class="image"></div>
<div class="description">A description</div>
</div>
<div class="picture">
<div class="image"></div>
<div class="description">A description</div>
</div>
<div class="picture">
<div class="image"></div>
<div class="description">A description</div>
</div>
CSS:
.picture {
width: 20%;
margin: 5px;
float: left;
}
.image {
width: 100%;
height: 200px;
background-color: chartreuse;
}
.description {
background-color: orange;
}
JSFiddle with the problem: http://jsfiddle.net/PW3GV/1/
Edit
The orange boxes can have a varying height. Sometimes it may contain 1 line, 2 lines or 3 lines - so a fixed height is not going to work out
check this fiddle: http://jsfiddle.net/VYZEx/
i've just added a single line of code to the css, it will work as long as you don't mind that the orange boxes have a fixed size, in that case change this and you will be done:
.description {
background-color: orange;
height: 40px;
}
Good luck!
There you are JSFiddle hope it's what you were aiming for;
.picture {
width: 18.5%;
margin: 5px;
float: left;
}
.image {
width: 100%;
height: 200px;
background-color: chartreuse;
}
.description {
background-color: orange;
height: 20px;
overflow: auto;
cursor: pointer;
text-align: center;
}
.description::-webkit-scrollbar{
display: none;
}
I kept the description size as it is and instead made it scrollable.
Change the .picture width to 18.484% as below:
.picture {
width: 18.484%;
margin: 5px;
float: left;
}
.description {
background-color: orange;
}
And add the jQuery script as below:
function equalHeight(group) {
var tallest = 0;
group.each(function() {
var thisHeight = $(this).height();
if(thisHeight > tallest) {
tallest = thisHeight;
}
});
group.height(tallest);
}
$(document).ready(function() {
equalHeight($(".description"));
});
See the updated jfiddle.
Give the .picture frame a relative positioning, make the description position relative and place it at the bottom of the .picture frame then give it a 100% width to take up the entire container.
.picture {
width: 20%;
margin: 5px;
float: left;
position: relative;
}
.image {
width: 100%;
height: 200px;
background-color: chartreuse;
}
.description {
background-color: orange;
position:absolute;
bottom:0;
width:100%;
}
http://jsfiddle.net/PW3GV/8/
Here is how I would attempt this using relative positioning for .picture and absolute positioning for .description.
See my jsfiddle:
http://jsfiddle.net/PW3GV/9/
.picture {
width: 20%;
margin: 5px;
float: left;
position:relative;
}
.description {
background-color: orange;
position:absolute;
bottom:0;
width:100%;
}