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?
Related
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 have a button and inside it i have an image and a separator.
The html code is as follows:
<button class="uiImageButton" id="btFactors" style="flex:1 1 0px;" type="button">
<img id="btFactorsImgID" style="vertical-align: bottom;" src="">
<div class="uiImageButtonSeperator">Factors/Formulas</div>
</button>
And the css:
.uiImageButton {
border: 1px solid;
padding: 0px;
border-color: #007AC3;
background-color: white;
color: #007ac3;
text-align: left;
height: 23px;
width: 100%;
font-size: 14px;
font-family: Muli-Light;
}
.uiImageButtonSeperator {
border-left: 1px solid lightgrey;
padding-left: 4px;
vertical-align: bottom;
display: inline;
margin-left: 1px;
margin-right: 2px;
}
The problem I am facing with is that when viewing the page in Internet explorer the image inside the button is being cut off (The image is being placed at the bottom of the button and some of it is cut off).
When using Chrome it looks fins...
I also found that when adding this line of code to the class uiImageButton
display: flex;
it gives a result that is close to what I`m trying to get but not close enough.
It would be great if someone can explain why I`m having this problem only in IE and also how to fix it properly.
I don't understand what the problem is.
Just use this code to make a button. No flexbox, no additional styles and wraps. And perfectly works with IE.
Jsfiddle.
.button {
/* no specific styles needed */
background: blue;
}
.button__image {
display: inline-block; /* to be on one line with text */
width: 10px; /* don't forget sizes for your image */
height: 10px;
margin-right: 10px;
}
.button__text {
font-size: 3em; /* just for fun */
vertical-align: middle; /* set image to vertical center */
}
<button class='button'>
<img class='button__image' src='http://i.imgur.com/jB0PDw1.png'>
<span class='button__text'>Factors/Formulas</span>
</button>
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/
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");
});
});
I made a CSS Navbar, but inbetween each "navbar-item", there is little space. I don't want there to be anyspace at all! Is there a way to make this happen without changing the margin-left for every navbar-item?
<!doctype html>
<html>
<head>
<title>Home - UnhandyFir9</title>
<style>
#wrapper {
box-shadow: 0px 0px 20px 10px black;
left: 0px;
top: 0px;
margin: auto;
margin-top: 30px;
width: 800px;
background-color: rgb(200, 200, 200);
font-family: sans-serif;
}
#top-notification {
display: inline-block;
width: 100%;
height: 20px;
background-color: lightblue;
text-align: center;
}
#navbar-core {
width: 100%;
height: 30px;
background-color: lightgreen;
}
#navbar-item {
display: inline-block;
width: 100px;
height: 30px;
text-align: center;
background-color: green;
color: white;
}
</style>
</head>
<body>
<div id="wrapper">
<span id="top-notification">== Hi! Our site was just recently launched, so you may expect alot of bugs! Sorry 'bout that! ==</span>
<div id="navbar-core">
Home
Lessons
About Us
Donate
</div>
</div>
</body>
</html>
The problem is in display:inline-block - it reduces the elements to inline blocks, meaning they behave like all other inline content in HTML. Since there's whitespace between the anchor elements, which as always collapses to a single whitespace, what you see is an actual 'space' in between in the current font size just like between words in a sentence. You can fix this by applying font-size:0 on the container but that's messy since you'd have to reset it for the children. Recommended method is to just use float:left instead and manually set the parent's size correctly, and set the items to height:100%.
Using multiple elements with the same ID is wrong but not causing this issue - should still be fixed though.
As I mentioned in my comment, IDs must be unique, so use classes instead. That being said, your links are inline elements and are sensitive to white space, so either float them left or remove the white space between the elements in the code.
Ex:
.navbar-item {
display: inline-block;
width: 100px;
height: 30px;
text-align: center;
background-color: green;
color: white;
float:left;
}
jsFiddle example
White space removed jsFiddle example
Try this;
.navbar-item {
display:block;
float:left;
width: 100px;
height: 30px;
text-align: center;
background-color: green;
color: white;
}
<div id="wrapper">
<span id="top-notification">== Hi! Our site was just recently launched, so you may expect alot of bugs! Sorry 'bout that! ==</span>
<div id="navbar-core">
Home
Lessons
About Us
Donate
</div>
First,
#navbar-item {
display: inline-block;
width: 100px;
height: 30px;
text-align: center;
background-color: green;
color: white;
}
Change this to a class instead of an id. Id's are unique and can only be used once on a page but a class can be used over and over again.
I am pretty sure the space is from this but I will make a fiddle to test,
display: inline-block;
You could change display: inline-block; to float: left; and have it without the space.
JSFIDDLE
Use float: left; instead of display: inline-block; by using inline-block will have 4px margin by default but using float: left; by default do not have the space. And use classes for every a element no id, id are unique and shouldn't be repeated.
.navbar-item {
/*display: inline-block;*/
float: left;
width: 100px;
height: 30px;
text-align: center;
background-color: green;
color: white;
}
If you still want to use inline-block instead of float: left; you should use margin-left: -4px;
To solve your problem quickly, you can wrap your links with span and give it a darker background:
<div id="navbar-core">
<span class="navbar-inner-wrapper">
Home
Lessons
About Us
Donate
</span>
</div>
Then add this to your CSS:
.navbar-inner-wrapper {
background-color: green;
}