I keep getting a problem with my css - tried modifying the code many times but still stuck. Before I paste all the CSS (there is a lot), maybe someone knows what the problem could be from the GIF below.
Basically, when you hover over the language, the menu opens. When you move down to French/Russian the dropdown disappears.
I get the feeling it has something to do with hovering over the picture below.
Many thanks.
EDITED
Just found the answer here: Can't get CSS drop down nav to go over content
I had to set the z-index for the nav to 9999 in order to get bring it into highest priority.
Many thanks for your comments and answers.
~Aivoric
Try this one - JSFiddle
HTML
<div class="language-choice">
ENGLISH <span class="red active"></span>
GERMAN <span class="red"></span>
FRENCH <span class="red"></span>
RUSSIAN <span class="red"></span>
</div>
CSS
.language-choice{
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
height: 40px;
width: 200px;
border: green solid 2px;
background-color: #fff;
overflow: hidden;
}
.language-choice:hover{
height: 160px;
}
.language-choice a{
display: block;
padding: 10px;
text-decoration: none;
color: green;
}
.language-choice a:hover{
text-decoration: underline;
}
.language-choice a .red{
width: 16px;
height: 16px;
float: right;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
border: red solid 2px;
}
.language-choice a:hover .red, .language-choice a .active{
background-color: red;
}
Related
When using text-decoration on a link, the child element (span) is not included, so then the underline doesn't extend:
a {
font-size: 36px;
text-decoration: underline dotted rgb(221, 221, 221);
color: #000;
}
a:hover {
text-decoration: none;
color: #000;
}
.badge-dark {
font-size: 9px;
margin-left: 2px;
position: relative;
text-align: center;
top: -5px;
}
<a href="#">
My title is here
<span class="badge badge-dark">Special</span>
</a>
See fiddle
Is it possible for the span to be included or is text-decoration ignoring spans by design?
https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration:
The text-decoration shorthand CSS property sets the appearance of decorative lines on text.
This means that the underline will be directly under the text in question and not under the element. If you zoom in enough, you will see the underline is actually under the word special
If you want to continue the line under special, perhaps you could use a pseduo element for your badge and add some non-breaking spaces for it to sit in:
a {
font-size: 36px;
text-decoration: underline dotted rgb(221, 221, 221);
color: #000;
}
a:hover {
text-decoration: none;
color: #000;
}
.badge {
display: inline-block;
position: relative;
text-decoration: underline dotted rgb(221, 221, 221);
}
.badge-dark:after {
content: 'Special';
display: inline-block;
color: #ffffff;
background: #555555;
padding: 3px 5px;
border-radius: 5px;
font-size: 9px;
position: absolute;
text-align: center;
right: 5px;
top: 50%;
transform: translateY(-50%);
margin-top: -5px;
}
<a href="#" class="badge badge-dark">
My title is here
</a>
You can apply text-decoration to your span, however it will appear just under the span text and not inline with the preceding text. To make it inline you will need to make your span the same height as its parent container. Alternatively you can likely use a pseudo element (:before or :after) to put the line where you want it.
This happens because of the CSS specification that basicly say, you can't have text-decoration in inline block elements. If you span to also be affected by text-decoration, you must change the display:inline-block. Further information can be found in this question .
Just to show you , how it would work, if the span was being effected by the text-decoration, here is an example:
a {
font-size: 36px;
text-decoration: underline dotted rgb(221, 221, 221);
color: #000;
}
a:hover {
text-decoration: none;
color: #000;
}
.badge-dark {
font-size: 20px;
margin-left: 2px;
position: relative;
text-align: center;
top: -5px;
}
<a href="#">
My title is here
<span class="badge badge-dark">Special</span>
</a>
Also, in the code you posted in SO, the text-decoration property is working properly, just not in the fiddle. If you want it to be equal through the whole link, try using border instead.
You can use border-bottom property instead of text-decoration.
also see that I have changed the a to an inline-block element.
.row {
background: #f8f9fa;
margin-top: 20px;
}
.col {
padding: 10px;
}
.title-link {
display: inline-block;
font-size: 36px;
border-bottom: 4px dotted rgb(221, 221, 221);
color: #000;
text-decoration: none;
}
.title-link:hover {
border-bottom: none;
color: #000;
text-decoration: none;
}
.badge-dark {
font-size: 9px;
margin-left: 2px;
position: relative;
text-align: center;
top: -5px;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col">
<a class="title-link" href="#">My title is here
<span class="badge badge-dark">Special</span></a>
</div>
</div>
</div>
The font size of the content in the badge is different from the other link text and you also have an alignment of top:-5px. These two break the line and even without using the bootstrap badge you would get the text-decoration broken. Yes it would extend to the span text but be broken and it would not be what you want. And bootstrap badge also has the style of text-decoration: none...
Another way of getting the dotted underline to extend the badge is removing the text-decoration and using border-bottom like this below:
a {
font-size: 36px;
border-bottom: 3px dotted rgb(221, 221, 221);
color: #000;
}
a:hover {
color: #000;
border-bottom: none;
}
I'm using this drop-down menu and it comes down aligned with the button on the left but I want it to come down the opposite way because it's going off the screen on mobile. I attached pictures to show what it is doing vs what I am trying to make it do.
<div class='dropdown'>
<button class='dropbtn'>Hi, Anthony ▼</button>
<div class='dropdown-content'>
<a href='index.php?c=my-profile'>My Golfer Profile</a>
<a href='index.php?c=my-schedule'>My Schedule</a>
<a href='index.php?c=account-settings'>Account Settings</a>
<div style='width:100%;border-bottom: 1px #000 dotted;'> </div>
<a href='actions/logout.php'>Logout</a>
</div>
</div>
.dropbtn {
background-color: #3D5C7F;
color: white;
padding: 12px;
font-size: 14px;
border: none;
cursor: pointer;
border-radius: 3px;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {background-color: #f1f1f1}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .dropbtn {
background-color: #3D5C7F;
}
what it does
what I need it to do
As you do not posted your HTML code I don't know which class is applied on your dropdown's starting element. If dropdown-content class is applied on the dropdown's starting element add the following styles along with the styles you already applied on the class dropdown-content:
.dropdown-content {
right: 0;
left: auto;
}
If you will post your HTML as well we could better help.
I am not sure which class that is so I will give you an idea. The way I do it is that I position the dropdown absolute and position the parent element relative. When you do this , you can give it top and sides. In order to achive your position .. If you put the relative position to your whole navigation and dropdown will be absolute, you can give the dropdown something like top: 40px , right: -30px ... Hope this makes sense , if not , post some HTML and we will make it work.
My client has provided me with a design for their site and it includes a standard menu with a downward triangle on the active item (see image). I don't know where to start...what's the best way of going about getting this effect?
Here's a tutorial on generating arrows, triangles and other shapes using CSS: http://www.howtocreate.co.uk/tutorials/css/slopes
Also have a look at how CSS Arrow Please! generates its arrows: http://cssarrowplease.com/
Here's a little example I just knocked up:
HTML:
<div class="active">
<div>Active Menu Item</div>
</div>
CSS:
.active > div {
width: 150px;
padding: 10px;
background-color: #f00;
color: #fff;
text-align: center;
}
.active::after {
display:block;
content: "";
font-size: 0px; line-height: 0%; width: 0px;
border-top: 20px solid #f00;
border-left: 85px solid #fff;
border-right: 85px solid #fff;
}
JS Fiddle: http://jsfiddle.net/dmf3s97m/
I have button and text on the same line. They have different font size. Button has padding. In browser it seems that text is on the same line, but the padding goes below the big text. I want the bottom button padding be on the same line as the big text. In other words, shift text a bit down or button a bit up.
Here's my CSS
.bigtext {
font-size: 200%;
border-bottom: 1px solid #999;
}
.button-container {
display: inline-block;
}
.button-container button {
font-size: 40%;
padding: 5px;
border-radius: 5px;
border: 1px solid #d3d3d3;
}
Fiddle: http://jsfiddle.net/7ydtgb7x/
If you want a really simple way to do this you can just add "position: relative;" and "bottom: 5px;" to your button.
If you need any help let me know by adding a comment. There are three kind of positions:
Relative which follows the flow.
Absolute that almost follows the flow.
And Fixed which gets completely out of any flow.
.bigtext {
font-size: 200%;
border-bottom: 1px solid #999;
}
.button-container {
display: inline-block;
}
.button-container button {
font-size: 40%;
padding: 5px;
border-radius: 5px;
border: 1px solid #d3d3d3;
position: relative;
bottom: 5px;
}
<div class="bigtext">
Test
<div class="button-container">
<button>Button</button>
</div>
</div>
for a quick fix:
transform:translateY(-5px);
fiddle
Here is a possible solution for you:
wrap your Test with a div, then both child's of .bigtext are (already) displayed inline-block, just make sure they are vertical-align:top.
Align vertical as well the button like this:
.button-container button { vertical-align:top}
Finally "reset" the line-height for your container .bigtext with: line-height:1
Here is a snippet with full code:
.bigtext {
font-size: 200%;
border-bottom: 1px solid #999;
line-height: 1
}
.bigtext > div {
display: inline-block;
vertical-align: top;
}
.button-container button {
font-size: 40%;
padding: 5px;
border-radius: 5px;
border: 1px solid #d3d3d3;
vertical-align: top
}
<div class="bigtext">
<div class="text-container">Test</div>
<div class="button-container">
<button>Button</button>
</div>
</div>
Use either transform: translateY(-10px); or margin-bottom: 10px;
I've got a submit button in a list:
<ul>
<li><input type="submit" value="Pls don't shift" /></li>
</ul>
The li and the input have different backgrounds, and these should be positionable.
The input should have dynamic width (depending on the value).
The input's value should be almost at the input's bottom.
These things reduce the number of opportunities to solve the problem.
And the problem exactly is: IE8 and IE9 shift the text of value, and IE8 shifts the background too.
I've tried to solve it and made this css (this is only a 'debug-css'):
li {
display: block;
width: auto;
border: 1px solid red;
padding: 0;
margin: 0;
float: left;
overflow: hidden;
}
input,
input:active:hover {
display: block;
background: url(tools-48x48.png) no-repeat center center;
width: auto;
height: 60px;
border: 1px solid transparent;
outline: none;
color: #fff;
text-align: center;
position: relative;
overflow: visble;
padding: 0 10px;
margin: 2px;
}
input:active:hover {
border: 1px solid red;
}
And the most interesting thing is: Now if I click on the button's text value, then it makes the same bad shift, but if I click eslewhere (on the button, but not on the text value) then it works.
That was the point when I've minded to write here.
How to disable submit buttons :active state in IE?
Thank you!
I have tested this in IE9 and when I remove several styles that "aren't" used the input text doesn't shift when you click on it.
removed styles:
li {
width: auto;
border: 1px solid red;
padding: 0;
margin: 0;
overflow: hidden;
}
input,
input:active:hover{
background: url(tools-48x48.png) no-repeat center center;
outline:none;
}
and added the styles
input,
input:active:hover{
position: relative;
overflow: visible;
}
See my Fiddle for more details here: http://jsfiddle.net/f67Vw/4/
A good other option seems to be to replace it with a carefully styled a element.
HTML
<ul>
<li>
Doesn't shift
</li>
</ul>
CSS
.button {
display: block;
width: auto;
height: 19px;
border: 1px solid transparent;
color: #000;
text-align: center;
padding: 20px 10px;
margin: 2px;
text-decoration:none;
}
Again see my Fiddle for more details here: http://jsfiddle.net/f67Vw/4/