I have the following html code:
<div class="project">
<h3 class="black product">Dash</h3>
view project
</div>
<div class="project">
<h3 class="black product">5/3/1</h3>
view project
</div>
and the following css code:
.hide {
display: none;
}
div.project:hover h3{
line-height: 200px;
}
div.project:hover .hide {
display: inline-block;
}
div.project {
display: inline-block;
position: relative;
overflow: hidden;
width: 300px;
height: 300px;
border: 2px solid #222;
margin: 0px 20px 20px 20px;
}
h3.product { font-size: 24px; line-height: 300px;}
Which is basically just two div buttons side by side. When I hover over each div the product title moves up and the "view product" text appears.
However when I quickly hover between the two divs they "jitter" up and down, and stay "jittered". From what I have seen, this occurs in Safari but not in Chrome.
http://jsfiddle.net/f8Laktoz/ Here is the jsfiddle.
This is my first time asking a question, so let me know if I can be more specific. Any help is appreciated! Thanks in advance.
Its seems to be a bug with the way the divs are 'displacing' each other on hover.
Try adding this to your css:
div.project {
...
float: left;
}
Working JS fiddle: http://jsfiddle.net/f8Laktoz/1/
Related
Here is a code snippet with the exact behavior I would like to replicate.
I want to add an effect to the title when the mouse is hovering anywhere on the link.
.link {
display: block;
width: 250px;
text-decoration: none;
color: black;
padding: 10px;
border: solid black 1px;
}
.link .title {
margin-bottom: 8px;
width: fit-content;
}
.link:hover .title {
background-color: lightblue;
}
<a href="#" class="link">
<div class="title">Title</div>
<div class="subtitle">Subtitle that is usually longer than the title</div>
</a>
My problem: I can't use the width: fit-content; CSS rule as it is not supported by IE.
If you try running this snippet in IE, you will see something like this: image (on imgur)
My question: How can I make sure the .title div always fits its's content without using width: fit-content?
I'm creating a page, at the top of which there is a button (aligned to the right), followed by the main page content in a div.
I've encountered an issue when trying to separate the button and the main content div. The two divs are currently overlapping. I don't imagine this to be a huge issue, but I'd like to clarify what the most accepted way of separating these would be, rather than just messing about with margins etc.
.view-all-container {
display: block;
float: right;
margin-bottom: 40px;
}
.view-all {
background-color: #808080;
color: #fff;
padding: 10px;
}
.main-section {
height: 400px;
background-color: #ebebeb;
}
<div class="view-all-container">
<a class="view-all">View our range of holiday homes</a>
</div>
<div class="main-section">
</div>
I've found that when I add a margin-top: 50px to .main-section the button travels with it, as if it's contained within the same div.
If you are looking for best practices then consider the following:
1) Avoid using float. There are many better ways to get elements where you want them without needing to revert to a complicated process. The biggest problem with float is that it removes your element from the normal DOM flow. https://designshack.net/articles/css/farewell-floats-the-future-of-css-layout/, https://www.webdesignerdepot.com/2014/07/the-secret-to-designing-website-layouts-without-css-floats/
2) If you are navigating, then use the <a> tag. If you are doing something on the same page use a <button> or <input type='button'/> https://davidwalsh.name/html5-buttons
Here is a simple fix for what you want:
.view-all-container {
margin-bottom: 10px;
text-align: right;
}
.view-all {
background-color: #808080;
border: none;
color: #fff;
padding: 10px;
text-align: middle;
}
.main-section {
height: 400px;
background-color: #ebebeb;
padding: 5px;
}
<div class="view-all-container">
<button class="view-all">View our range of holiday homes</button>
</div>
<div class="main-section">
Stuff in the main section
</div>
I removed the float and changed to text-align. The <div> is already display: block so I removed that.
I assumed that your button at the top was to make changes on the active page so I changed the html from an <a> tag to a <button>.
If you don't want to use text-align then try flex-box:
.view-all-container {
display: flex;
justify-content: flex-end;
margin-bottom: 10px;
}
.view-all {
background-color: #808080;
border: none;
color: #fff;
padding: 10px;
}
.main-section {
height: 400px;
background-color: #ebebeb;
padding: 5px;
}
<div class="view-all-container">
<button class="view-all">View our range of holiday homes</button>
</div>
<div class="main-section">
Stuff in the main section
</div>
One of my favorite quotes about using float comes from this article: https://www.sitepoint.com/give-floats-the-flick-in-css-layouts/
If you’re new to CSS layouts, you’d be forgiven for thinking that using CSS floats in imaginative ways is the height of skill. If you have consumed as many CSS layout tutorials as you can find, you might suppose that mastering floats is a rite of passage. You’ll be dazzled by the ingenuity, astounded by the complexity, and you’ll gain a sense of achievement when you finally understand how floats work.
Don’t be fooled. You’re being brainwashed.
You just need to clear the float with clear:right on .main-section
.view-all-container {
display: block;
float: right;
margin-bottom: 40px;
}
.view-all {
background-color: #808080;
color: #fff;
padding: 10px;
}
.main-section {
height: 400px;
background-color: #ebebeb;
clear: right;
}
<div class="view-all-container">
<a class="view-all">View our range of holiday homes</a>
</div>
<div class="main-section">
</div>
I'm creating some kind of chat box for my website and I can't make vertical scrollbar to appear outside the border.
This is what I'm getting:
All I want is that scrollbar to appear outside the border, on the right. It's not really pretty as it is now, is it.
The main HTML code (with one message insise the chatbox) of thix box looks like this:
<div id="sb_body">
<div id="sb_messages_set">
<div class="sb_message">
<div class="sb_message_header">
<div class="sb_message_author">PookyFan</div>
<div class="sb_message_hour">12:11</div>
</div>
<div class="sb_message_content">test</div>
</div>
</div>
<!-- Some other chatbox's elements -->
</div>
My CSS code looks like this:
div#sb_messages_set
{
border: 2px solid black;
border-radius: 10px;
background-color: #0080E0;
overflow: auto;
height: 300px;
}
div.sb_message
{
margin: 2px 4px 5px 4px;
border-bottom-style: dashed;
border-width: 1px;
border-color: black;
}
div.sb_message_header
{
clear: both;
display: block;
margin-bottom: 3px;
}
div.sb_message_author
{
display: inline;
text-align: left;
font-weight: bold;
}
div.sb_message_hour
{
display: inline;
float: right;
}
div.sb_message_content
{
clear: both;
text-align: left;
padding-bottom: 5px;
}
Is there any way to achieve what I want? I was looking for answer but didn't find anything that would solve my problem.
Oh, and if there's anything wrong with my code but it's not connected with my issue, please share your thoughts, I started having fun with creating websites pretty recently so it's possible that I make some newbie mistakes here and am not really aware of it.
Edit: important thing I forgot to mention about - I want the border to be fully visible all the time, I mean - I want just the messages to be scrolled, but wihout making the border be scrolled with it.
In other words, I don't want anything like that:
In this picture the chatbox has been scrolled a little and the top and bottom frame isn't visible. But I want the entire frame to be visible despite div's content being scrolled.
Well, if that won't work, and you're married to the design, I think you have to use a bg image. I can't find a way to style the scrollbar with CSS. I made another jsfiddle with this solution demonstrated: http://jsfiddle.net/jlmyers42/mrx46geg/
But basically, you just move some of your CSS around:
#sb_body {
width: 272px;
height: 300px;
overflow: auto;
padding: 0;
margin: 0;
background: url("http://arcsuviam.com/play/random/bluebg.png") no-repeat left top;
}
div#sb_messages_set {
margin: 5px;
}
div.sb_message {
padding: 2px 4px 5px 4px;
border-bottom-style: dashed;
border-width: 1px;
border-color: black;
}
I'd put the whole thing in a container that has the overflow:auto style applied.
See this fiddle: http://jsfiddle.net/jlmyers42/8tptqt19/
<div id="sb_body">
<div id="sb_container">
<div id="sb_messages_set">
<div class="sb_message">
<div class="sb_message_header">
<div class="sb_message_author">PookyFan</div>
<div class="sb_message_hour">12:11</div>
</div>
<div class="sb_message_content">test</div>
</div>
</div>
</div>
<!-- Some other chatbox's elements -->
</div>
CSS
div#sb_container {
overflow: auto;
}
Simple.
With your div
Put the static width like below:
#divID{
overflow: hidden;
width: calc(1024px + 0);
}
#divID:hover{
overflow-y:scroll;
}
Stumbled across it and works for me. My div is positioned absolute if that makes a difference.
The scroll bar appears outside the div when hovered on
so you can check out that site - it describes you the solution precisely. I created a small jsfiddle for you. Note here that the text-div inside the "li" has a width in "vw". This makes the effect of scrolling outside the content. Hope this helps!
HTML
<ul><li id="lio" class="open"><div class="text">
Lorem..
</div></li></ul>
<button>
Halo
</button>
CSS
.open {
overflow: hidden;
display: block;
width: 100%;
height: 100px;
background-color: red;
}
.text {
padding: 15px;
background-color: orange;
width: 30vw;
}
ul {
display: table;
}
JQUERY
$(document).ready(function() {
http://jsfiddle.net/fcLzqp5o/#run
$("button").click(function() {
$("#lio").css("overflow-y", "scroll");
});
});
Here’s a tricky one…
I have a div, the contents of which should change on hove over on any part of it.
Here’s a pic detailing both wanted states:
And here is best effort, so far:
codepen
..it needs a bit of work.
Any help much appreciated!
Here's the HTML so far:
<div class="item green">
<a href="#">
<h4>Welcome</h4>
<p>Click here to find out more</p>
<img src="http://www.veropixel.com/res01-170w115h.jpg"/>
</a>
</div> <!-- /item -->
So there's my solution http://codepen.io/anon/pen/mIrvA :
$resinGreen: #00a14a;
.green { background: $resinGreen; }
.item {
width: 300px;
margin-bottom: 5px;
a {
display: block;
height: 98px;
overflow: hidden; /* cancels img float */
text-decoration: none;
h4, p {
height: 98px;
line-height: 98px; /* Two lines added to center
vertically text of course you can use display:inline-block
with vertical-align:middle */
padding-left: 15px;
margin:0;
}
img {
float: right;
height: 98px;
}
p {
display: none;
}
&:hover {
h4, img { display: none; }
p { display: block; }
}
}
}
Your problem was that your link haven't a height so it's why it was blinking, i also moved img to the first place for floating
If using just images within the div this bit of jquery will do it:
$('#applyimg').hover(function(){
$(this).attr('src','/design/sendcv_over.png');
},function(){
$(this).attr('src','/design/sendcv.png');
});
HTML
<img id='applyimg' src='/design/sendcv.png'>
Mouseover the image will swop it's source
I think this problem is best explained by images. This is how my accordion looks:
When you click on the small plus/minus icons the slides under each chapter will expand/collapse. However when the content in the accordion grows too tall, it grows out from its container. So if I click on more plus icons the accordion will look like this (not pretty):
As you can see, the container is not growing taller together with the accordion and it does not look good.
This problem only occurs in IE7 and IE8. It works in Firefox and Chrome.
The HTML looks like this (simplified):
<div id="content">
<div class="box2 rounded-corners">
<div class="chapters">
<h3>Obsah</h3>
<div id="accordion">
<ul>
... // accordion content - too long
... // accordion content - too long
</ul>
<div class="clear"> </div>
</div>
<div class="clear"> </div>
</div>
<div class="training-body">
... // content to the right of the accordion
</div>
</div>
</div>
The CSS, again siplified:
html, body {
height: 100%;
width: 100%;
overflow: auto;
}
#content {
background: white url('/images/background_middle.png') left top repeat-x;
padding: 13px;
min-height: 40em;
height: auto !important;
height: 40em;
}
/* this is the div with rounded corners */
#content .box2 {
background: white;
padding: 0 15px 15px;
border: 1px solid #C5E3F8;
position: relative;
}
/* left sidebar 98
#content div.chapters {
float: left;
width: 224px;
}
/* orange heading "OBSAH" */
#content div.chapters h3 {
color: #ff6e19;
text-transform: uppercase;
font-size: .9em;
text-align: center;
padding-bottom: .5em;
margin-top: 1em;
margin-bottom: 0;
}
#content div.chapters h3 a {
color: #ff6e19;
}
/* accordion */
#accordion {
width: 226px;
border-top: 1px solid #c5e3f8;
}
#accordion ul {
padding-left: 0;
margin-top: 0;
margin-bottom: 0;
margin-left: 0;
}
/* area to the right of the accordion */
#content div.training-body {
float: left;
padding-left: 0px;
width: 748px;
line-height: 1.3em;
}
Hmmm, after a lot of research, it turned out that the curvycorners plugin is causing the problem, here's what you have to do:
Download the latest version of the plugin (also try to upgrade your jQuery, but this is only a tip)
change your rounded-corners CSS to the following:
.rounded-corners {
-moz-border-radius:2ex;
-webkit-border-radius:2ex;
}
in your JS and after toggleing the ULs, you need to redraw the corners, refer, using the following:
$this.parent().parent().children('ul').toggle();
curvyCorners.redraw();
EDIT sorry, my first answer was incorrect
The problem is with the min-height you set. IE 7 and 8 support min-height, but incorrectly handle !important, not giving it priority over the the next declaration. To solve just remove the two height lines. If you want to support IE6 add the height rule like the following
...
min-height: 40em;
}
* html #content {
height: 40em;
}