I am currently creating a UL menu, and I'm having some difficulties. Whenever I am trying to move down the text in the LI it is making the div bigger.
HTML Code:
<ul class="accordion">
<li class="files">
Dashboard<span>0</span>
</li>
</ul>
CSS Code:
.accordion li > a {
display: block;
position: relative;
min-width: 110px;
padding: 0 20px 0 50px;
height: 50px !important;
color: #C8C8C8;
font: bold 12px/32px Arial, sans-serif;
text-decoration: none;
}
So whenever I change the padding to this:
padding: 5px 20px 0 50px;
It makes the div 55px in height, when it should be 50px. Hope someone can help me with this! Thank you.
Here is how box-sizing/padding and line-height work. My personal opinion is that line-height is the best option and a lot more easy to calc.
They can be used together for a truly awesome combo!
Line-height/Padding CSS
.lH {
width: 80px;
height: 50px;
text-align: center;
display: block;
border-radius: 5px;
border: 2px solid rgba(0, 0, 0, 0.4);
background: #ff7200;
line-height: 50px;
margin-bottom: 50px;
}
Box-sizing CSS
.bS {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
width: 80px;
height: 50px;
text-align: center;
display: block;
border-radius: 5px;
border: 2px solid rgba(0, 0, 0, 0.4);
background: mediumSeaGreen;
padding: 12px 0;
}
JSFIDDLE
Related
I am playing with CSS pseudo elements. As soon as the menu button gets hovered it receives a small orange underline. This element should stay as soon as the dropdown-container is visible. Is there a light weight solution to achieve such behaviors?
In case pseudo elements aren´t the best solution for my need, I am open minded for different solutions.
https://jsfiddle.net/j3g49fwd/
$(".dropdown-btn").click(function() {
this.classList.toggle("increase")
$(".dropdown-container").toggle()
})
.wrapper {
position: relative;
top: 5vh;
margin: 40px 30px 30px 30px;
height: fit-content;
background: white;
border-radius: 10px;
box-shadow: -10px -10px 10px rgba(255, 255, 255, 0.5),
15px 15px 15px rgba(70, 70, 70, 0.12);
padding: 1vw;
}
.dropdown-btn {
display: flex;
justify-content: center;
padding: 10px 0px 10px 20px;
text-decoration: none;
display: block;
border: 1px solid transparent;
background: none;
height: fit-content;
min-height: 5vh;
width: 100%;
text-align: left;
cursor: pointer;
outline: none;
transition: all 0.3s ease-in-out;
}
.dropdown-btn:after {
content: "";
display: block;
margin: 3px 0 0 0;
width: 0;
height: 1px;
background: rgb(242, 123, 57);
transition: all 0.4s;
}
.dropdown-btn:hover::after {
width: 100%;
}
.dropdown-container {
display: none;
padding: 10px 20px 10px 20px;
margin: 0 0 2vh 0;
}
.increase {
font-size: 20px !important;
}
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<div class="wrapper">
<button class="dropdown-btn">I am a menu button
<label class="menu-title" id="flow-menu-title"></label>
<i class="fa-solid fa-gear col-1 dropdown-icon"></i>
</button>
<div class="dropdown-container">
Hello Stackoverflow
</div>
</div>
</body>
</html>
if I understand you correctly, you should be able to edit the CSS just like this:
.dropdown-btn.increase::after,.dropdown-btn:hover::after {
width: 100%;
}
https://jsfiddle.net/bkefg9dt/
Take a look at these photos
JSFiddle link at the bottom
firefox:
chrome:
they are both the same element taken from chrome and firefox and as you can see the one from firefox has some space around it's top and left side but the one from chrome doesn't
now, There is no margin or anything that's causing this and it works fine in any other browser except for firefox.
the important styles for the main element is
float: left;
height: 30px;
line-height: 30px;
margin: 12.5px 0;
and for the Pseudo-element ::before
float: left;
display: block;
content: '\F011';
height: 30px;
line-height: 30px;
margin: 0 10px 0 0;
padding: 0 10px;
and the HTML for the element
<button class="like" onclick="item_like()">500</button>
this is the link of JSFiddle
run it in chrome and firefox and see the difference
http://jsfiddle.net/79cEb/5/
what am I doing wrong here?
Maybe try positioning the like absolutely using CSS
.like{
float: left;
height: 30px;
margin: 12.5px 0;
background-color: #FAFAFA;
border-radius: 4px;
position:relative;
padding: 0 10px 0 40px;
margin: 12.5px 10px;
background-color: #000;
font: 16px/30px arial;
color: #FFF;
border:none;}
.like::before{
position:absolute; top:0; left:0;
width:30px;
content: 'like';
margin: 0 10px 0 0;
padding: 0 5px;
background-color: #FF7373;
color: #FFF;
border-right: 1px solid #CCC; display:block; border:0;
}
I'd recommend you to specify top:0; left: 0; to your ::before pseudo elements. Sometimes cheeky browsers take a few px up and left to the actual position. CSS:
.like:before {
float: none;
width: 30px;
content: "like";
margin: 0px 10px 0px 0px;
padding: 0px 5px;
background-color: #FF7373;
color: #FFF;
border-right: 1px solid #CCC;
position: absolute;
top: 0;
left: 0;
border-radius: 4px 0 0 4px;
}
.like {
float: none;
height: 30px;
border-radius: 4px;
box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.5);
padding: 0px 10px 0px 0px;
margin: 12.5px 10px;
background-color: #000;
font: 16px/30px arial;
color: #FFF;
border: medium none;
position: relative;
width: 88px;
text-align: right;
}
Fiddle: http://jsfiddle.net/79cEb/13/
I made you this solution, it places the button relative and the :before class absolute. Then you can use the top, bottom and left position, which will be relative to parent.
Note that I added a overflow: hidden to the button, so the rounded borders are still visible.
This is the altered CSS:
.like {
float: left;
height: 30px;
margin: 12.5px 0;
background-color: #FAFAFA;
border-radius: 4px;
box-shadow: 0 0 1px rgba(0, 0, 0, 0.5);
padding: 0 10px 0 40px;
overflow:hidden;
margin: 12.5px 10px;
background-color: #000;
font: 16px/30px arial;
color: #FFF;
border:none;
position: relative;
}
.like::before {
float: left;
width:30px;
position: absolute;
left: 0;
top: 0;
bottom: 0;
content:'\F011';
background-color: #FF7373;
color: #FFF;
border-right: 1px solid #CCC;
}
Also, see the updated Fiddle.
I was using this code to create a ruler on my site:
CSS:
.ruler, .ruler li {
margin: 0;
padding: 0;
list-style: none;
display: inline-block;
}
/* IE6-7 Fix */
.ruler, .ruler li {
*display: inline;
}
.ruler {
background: lightYellow;
box-shadow: 0 -1px 1em hsl(60, 60%, 84%) inset;
border-radius: 2px;
border: 1px solid #ccc;
color: #ccc;
margin: 0;
height: 3em;
padding-right: 1cm;
white-space: nowrap;
}
.ruler li {
padding-left: 1cm;
width: 2em;
margin: .64em -1em -.64em;
text-align: center;
position: relative;
text-shadow: 1px 1px hsl(60, 60%, 84%);
}
.ruler li:before {
content: '';
position: absolute;
border-left: 1px solid #ccc;
height: .64em;
top: -.64em;
right: 1em;
}
/* Make me pretty! */
body {
font: 12px Ubuntu, Arial, sans-serif;
margin: 20px;
}
div {
margin-top: 2em;
}
HTML:
<ul class="ruler"><li>1</li><li>2</li><li>3</li><li>4</li></ul>
It was working OK with bootstrap2:
http://jsfiddle.net/Uvt5U/4/
Now I'm migrating to bootstrap3 and the ruler is broken:
http://jsfiddle.net/Uvt5U/
How can I get it working?
Kind Regards.
This is because in Bootstrap 3 box-sizing style is set to border-box, while in Bootstrap 2 it's not.
My Firebug points me that this rule is setting this style:
*, *:before, *:after {
-moz-box-sizing: border-box;
}
bootstrap.min.css line 9
The text in my li's don't seem to be centering I am using margin: 10px auto; and it isn't working, also I tried using the margin: 0 auto to center the whole ul but that isn't working either
here is the css
ul.mainpackages {margin: 0 auto; height: 40px; width: 100%; }
ul.mainpackages li {
border-top-width: 4px;
border-bottom-width: 4px;
border-top-style: double;
border-bottom-style: double;
border-top-color: #FDFECD;
border-bottom-color: #FDFECD;
height: 40px;
width: 300px;
background-color: #DDEFEF;
display: inline-block;
margin: 0px 60px;
}
ul.mainpackages li p{
margin: 10px auto;
font-size: 16px;
}
and the html
<ul class="mainpackages">
<li class="first1"><p>Pick a package that suits you!</p></li>
<li class="last1"><p>Special deals & offers!</p></li>
</ul>
Your paragraph is 100% wide, so when you try to center it...
You should either set the width or text-align: center inside the paragraph
You need to explicitly specify a width on the <p> before using margin: 0 auto;
ul.mainpackages li p{
margin: 10px auto;
font-size: 16px;
width: 180px;
}
jsfiddle
I've got a problem with a CSS tooltip over an image. Using it on text works fine, however when I use an image instead of text, it seems to be having issues, the issues are a bit hard to explain so I'll just give you a link:
http://zorps.dk/css-tooltips/tooltip.html
CSS code:
.tooltip {
border-bottom: 1px dotted #000000; color: #000000; outline: none;
cursor: help; text-decoration: none;
position: relative;
}
.tooltip span {
margin-left: -999em;
position: absolute;
}
.tooltip:hover span {
border-radius: 5px 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px;
box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1); -webkit-box-shadow: 5px 5px rgba(0, 0, 0, 0.1); -moz-box-shadow: 5px 5px rgba(0, 0, 0, 0.1);
font-family: Calibri, Tahoma, Geneva, sans-serif;
position: absolute; left: 1em; top: 2em; z-index: 99;
margin-left: 0; width: 250px;
}
.tooltip:hover img {
border: 0; margin: -10px 0 0 -55px;
float: left; position: absolute;
}
.tooltip:hover em {
font-family: Candara, Tahoma, Geneva, sans-serif; font-size: 1.2em; font-weight: bold;
display: block; padding: 0.2em 0 0.6em 0;
}
.classic { padding: 0.8em 1em; }
* html a:hover { background: transparent; }
.classic {background: #FFFFAA; border: 1px solid #FFAD33; }
html code:
<p> <a class="tooltip" href="#"> <img src="icon_question.png" /> <span class="classic">The tooltip text goes here!</span></a></p>
Anyone know what the issue is?
Thanks!
Note: the code is taken from: http://sixrevisions.com/css/css-only-tooltips/
It's the code within the .tooltip:hover img class - If you remove it, it works well:
http://jsfiddle.net/RyRRM/
it's probably because the event is triggered by the tooltip's non-text-node parent. When you hover over the image, it detects a mouseout event for the parent. You could try making the image a css background and setting the width of the element instead of embedding the <img>
Your markup could then be
<a class="tooltip image" href="#"><span class="classic">The tooltip text goes here!</span></a>
and your css would be
.tooltip.image {
width: 12px;
height: 14px;
background-image: url("./icon_question.png");
display: block;
background-repeat: no-repeat;
}