I'm building out a tooltip feature for our site, it's what should be a simple highlight over an icon image and some text appears next to it. the problem I'm having is the words that should be inside of that tooltip bubble breaks into a new line for each. when the code is on its own it works fine.
ul { list-style-type: none; margin: 0; }
li { width: 50px; height: 50px; background: #000; color: #fff; position: relative; }
li:hover { background: #eee; color: #000; }
li:hover #z { display: block; }
#z { position: absolute; left: 50px; height: 50px; background: orange; color: #fff; display: none; }
<ul>
<li>
<div id="z">
some word that shouldn't break
</div>
</li>
</ul>
http://jsfiddle.net/emqLnmo8/1/
Use white-space: nowrap; to stop the words from wrapping.
So with your example: fiddle.
Related
I am trying to use the css border-bottom property with a circle in between. Something like this :
what I want
But, for the first and last circles I only want it to line to be inclusive within the borders but its extending to the ends like this.
result of what I tried with normal css
This is the css I used:
.horizontalLineComplete{
width: 100%;
border-bottom: 4px solid #26890D;
height:20px;
}
.horizontalLineCurrent{
width: 70%;
border-bottom: 4px solid #63666A;
height:20px;
}
I tried using the li:: before and ::after selector classes as well but that also hasn't worked it just shows up the lines between the circles but the colors I assign aren't working accurately. It takes black color by default like this: result for what I tried with selector classes
This is the css I gave:
li.circleComplete::before
{
content: "";
flex: 1 1;
border-bottom: 2px solid #26890D;
margin: auto;
}
li.circleComplete::after {
content: "";
flex: 1 1;
border-bottom: 2px solid #26890D;
margin: auto;
}
li.circleNext::before
{
content: "";
flex: 1 1;
border-bottom: 2px solid #63666A;
margin: auto;
}
li.circleNext::after {
content: "";
flex: 1 1;
border-bottom: 2px solid #63666A;
margin: auto;
}
Can someone help me out on how I can adjust this or let me know if I am making any mistakes in the code? I am using react and typescript for my front end with scss.
This is one of solution how to fix your code.
$('.active').html("✓");
$('#goNext').on('click', function() {
$('ul>li.active').removeClass('active').next('li').addClass('active');
$("ul>li.active").html("✓")
});
li {
width: 2em;
height: 2em;
text-align: center;
line-height: 2em;
border-radius: 1em;
background: #45ad66;
margin: 0 1em;
display: inline-block;
color: white;
position: relative;
}
li::before{
content: '';
position: absolute;
top: .9em;
left: -4em;
width: 4em;
height: .2em;
background: #45ad66;
z-index: -1;
transition: all 1s;
}
li:first-child::before {
display: none;
}
.active {
background: #3f995b;
transition: all 1s;
}
.active ~ li {
background: gray;
}
.active ~ li::before {
background: #000;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
<li class="active">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
</ul>
<button id="goNext">
Go to next
</button>
UPDATED code
I find it easier to put the central line as a background image (via linear-gradient) on the ul element itself.
This snippet sets the ul to display inline-flex and gets the circles (the li elements) spaced out evenly with the first at the left side and the last at the right side by using the space-between justification property.
This way you don't have to do lots of positioning.
The tick is put on via a content in a pseudo element for each li as I assume it is just for decoration rather than as actual content.
ul {
margin: 0;
padding: 0;
list-style-type: none;
display: inline-flex;
width: 100%;
background-image: linear-gradient(#45ad66, #45ad66);
background-size: 100% 2px;
background-position: center center;
background-repeat: no-repeat;
justify-content: space-between;
}
li::after {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
content: '✔';
color: white;
font-size: 3vmin;
}
li {
display: inline-block;
position: relative;
background-color: #45ad66;
width: 6vmin;
height: 6vmin;
border-radius: 50%;
transition: all 1s;
}
li.active,
li:hover {
background-color: #3f995b;
}
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
Note: dimensions are in terms of vmin so that the whole thing is responsive but of course you are free to change those if required.
Just so you can see the 'active' effect transitioning I've put the active color as the color for a hover on an li element as well. Also moved the transition to the element itself so the color transitions both in and out.
Is there a way to position an img separately from the source (text) in an anchor element? For instance, in the picture, I want the word "dot" to be aligned further right than the arrow but stay on top of the arrow.
current
what I want
I know I could make them as separated anchors but I want the color of the word to change when you hover on the arrow as well and if they are separate, the a:hover doesn't work together.
I tried changing the position under .left img to be different but it moves the img and the source.
HTML code:
<span class="leftarrow">
dot<img src="images/leftarrow.png">
</span>
CSS code:
.leftarrow {
position: absolute;
left: 0;
top:0;
}
.leftarrow a{
position: absolute;
left: 0;
font-size: 1.5em;
color:gray;
text-decoration: none;
}
.leftarrow a:hover{
color: black;
}
.leftarrow img{
position: absolute;
left: 0;
top: 15px;
width: 50px;
}
Try this, using Pseudo-Elements. It could definitely be more optimized than this though.
a {
margin-left: 100px;
}
span:after {
content: "";
background-image:url('https://www.flaticon.com/svg/static/icons/svg/271/271218.svg');
display: inline-block;
background-size: 30px 30px;
height: 30px;
width: 30px;
position: absolute;
z-index: 1;
left:90px;
top: 15px;
}
a:hover {
color: red;
}
<a href="#">
<span>dot</span>
</a>
First: wrap the dot into a <span> or <div> for better control,
Second: use a more powerfull display mode (e.g: flex or grid)
here is a sample:
a {
vertical-align: middle;
text-decoration: none;
display: flex;
flex-direction: column;
align-items: flex-end;
color: black;
width: fit-content;
margin: 0 auto;
}
a:hover {
color: red;
}
div {
font-size: 32px;
}
img {
width: 100px;
}
<a href="#">
<div>dot</div>
<img src="https://www.flaticon.com/svg/static/icons/svg/271/271218.svg" />
</a>
I am trying to create a horizontal subnavigation bar in CSS (without an unordered list), but I can't get the dropdown menu to appear.
Here's my code in HTML:
<div class="navbar sticky">
Home
<div class="subnav">
<button class="subnavbtn">Learn <i class="fa fa-caret-down"></i></button>
<div class="subnav-content">
Print
Review
Examples
More Info
</div>
</div>
<div class="subnav">
<button class="subnavbtn">Game <i class="fa fa-caret-down"></i></button>
<div class="subnav-content">
Play Now!
How to Play
Cards
</div>
</div>
Minigames
</div>
Here's my code in CSS:
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.navbar {
overflow: hidden;
background-color: green;
position: sticky;
top: 0;
}
.navbar a {
float: left;
font-size: 16px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.subnav {
float: left;
overflow: hidden;
}
.subnav .subnavbtn {
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.navbar a:hover,
.subnav:hover .subnavbtn {
background-color: chartreuse;
color: black;
}
.subnav-content {
display: none;
position: absolute;
left: 0;
background-color: red;
width: 100%;
z-index: 1;
visibility: hidden;
}
.subnav-content a {
float: left;
color: white;
text-decoration: none;
display: inline;
}
.subnav-content a:hover {
background-color: #eee;
color: black;
}
.subnav:hover .subnav-content {
visibility: visible;
display: block;
}
I've tried changing the opacity or even using visibility, but it just won't work for me. Sometimes the drop down will appear, however the top nav bar will transform (the "Game" link will shift right, starting at the point where "More Info" ends even though they are on different bars).
Most solutions I've seen while searching this issue is that they are not using (display: block;), but I have been and I don't know what to do at this point.
Here's fiddle
Remove overflow:hidden; from your .navbar declaration and replace it with float:left; and width:100%;
Floated elements are removed from the calculated height of the parent element. However, overflow:hidden; invokes the height to be calculated via block formatting context but, was hiding your dropdowns cause overflow is hidden.
Also, floating the parent element means the children dictate the parent's height making it more dynamic.
Revised Fiddle Here
Just remove the position property from the div with class name navbar.
.navbar {
overflow: hidden;
background-color: green;
top: 0;
}
Dropdown menu appear out of the navbar.
So, you should replace overflow: hidden with height: 50px in .navbar:
.navbar {
height: 50px;
background-color: green;
position: sticky;
top: 0;
}
Hey I want to make a website with a frontpage just like this one: http://foreword.io/ .
I need help with the horizontal list to get it just like the one on foreword.io.
I want the yellow area to be stretched all the way to the sides. When I hover over a link it only marks the upper part of the square, so I want it to mark the whole square for each link.
Please help and thanks in advance.
Here is my code:
body {
font-family: Times New Roman;
}
.h1 {
position: absolute;
height: 200px;
top: 90px;
width: 1585px;
text-align: center;
font-size: 350%;
font-family: Times New Roman, Georgia;
}
u {
text-decoration: none;
border-bottom: 5px solid black;
}
.fakta {
position: absolute;
height: 190px;
top: 340px;
width: 700px;
left: 500px;
font-size: 50px;
}
ul {
position: absolute;
height: 100px;
top: 600px;
left: 100px;
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: yellow;
}
li {
float: left;
}
li a {
display: block;
color: black;
text-align: center;
padding: 20px;
text-decoration: none;
font-size: 20px;
}
li a:hover {
background-color: white;
}
<div class="h1">
<h1>
<u>DatabaseNavn</u>
</h1>
</div>
<div class="fakta">
<p>Database med ansatte <br> og avdelinger</p>
</div>
<ul>
<li>Side1</li>
<li>Side2</li>
<li>Side3</li>
<li>Side4</li>
<li>Side5</li>
</ul>
You can do this just adding the Height option to "li a" section in the css as below:
li a {
display: block;
color: black;
height: 100px;
text-align: center;
padding: 20px;
text-decoration: none;
font-size:20px;
}
it will set the height of the square so the whole yellow part will change to white.
in the case of the yellow bar size and item positions:
set the width of the ul to 100% so it will use the whole available space on the browser also remove the "left" and finally add 'position:relative', 'left:20%' and 'width:10%; to the li section.
li {
position: relative;
left: 20%;
width: 10%;
float: left;
}
SOURCE: My head :-P
Use display: inline-block; instead of display: block; and you will get an horizontal list.
Weave: http://kodeweave.sourceforge.net/editor/#2b1da7103aeec07f8b53045481c63c77
For something so simple you're using position absolute in places where it's not needed which could be replaced with margin. Thus your code is fairly WET (especially with me being on a tablet right now) So I made a simple mockup that's DRY and can work for RWD as well if you utilize media-queries.
I removed a lot of the unnecessary positioning. By setting the ul tag to text-align center I was able to center the anchors by telling the li tag to be displayed as an inline-block. Then I filled the width using width: 100%; margin: 0; padding: 0;
How this snippet helps.
body {
font-family: Times New Roman;
}
.h1 {
width: 100%;
text-align: center;
font-size: 350%;
font-family: Times New Roman, Georgia;
}
u {
text-decoration: none;
border-bottom: 5px solid black;
}
.fakta {
width: 100%;
font-size: 50px;
text-align: center;
}
ul {
list-style-type: none;
width: 100%;
margin: 0;
padding: 0;
overflow: hidden;
background-color: yellow;
text-align: center;
}
li {
display: inline-block;
}
li a {
display: block;
color: black;
text-align: center;
padding: 20px;
text-decoration: none;
font-size: 20px;
}
li a:hover {
background-color: white;
}
<div class="h1">
<h1>
<u>DatabaseNavn</u>
</h1>
</div>
<div class="fakta">
<p>Database med ansatte og avdelinger</p>
</div>
<ul>
<li>Side1</li>
<li>Side2</li>
<li>Side3</li>
<li>Side4</li>
<li>Side5</li>
</ul>
I'm trying to show a relevant submenu when the user hovers over an item in the main menu. The problem I am having is that I need to have a common parent for the hover selector to do its magic, but then that seems to screw up my styling. Any suggestions that forgo javascript/jquery would be appreciated as I use that as a crutch too much for things that I should probably be solving with css alone.
HTML
<div id="header">
<div id="header_headline">
Heading
</div>
<div id="menu">
<div id="menu_inset">
HOME
PROFILE<div class="sub_menu_arrow"></div>
PROJECTS<div class="sub_menu_arrow"></div>
NEWS
CONTACT
</div>
</div>
<div id="sub_menu">
<div class="sub_menu_inset" id="sub_menu_profile">
1
2
3
</div>
<div class="sub_menu_inset" id="sub_menu_projects">
1
2
3
4
</div>
</div>
</div>
CSS:
html, body {
width: 100%;
height: 100%;
border: 0;
padding: 0;
margin: 0;
font-family: 'Pathway Gothic One', sans-serif;
color: #212121;
}
a {
text-decoration: none;
color: #212121;
}
#header {
width: 100%;
}
#header_headline {
margin: 1em 1em 1em 1em;
font-size: 2em;
text-transform: uppercase;
}
#menu {
margin-top: 1em;
width: 100%;
text-align: center;
white-space: nowrap;
}
#menu_inset {
display: inline-block;
word-spacing: 5em;
}
.menu_item {
position: relative;
}
.menu_item:hover .sub_menu_arrow {
display: inline-block;
}
#menu_item_profile:hover ~ #sub_menu_profile {
display: inline-block;
}
#menu_item_people:hover ~ #sub_menu_people {
display: inline-block;
}
.sub_menu_arrow {
position: absolute;
display: none;
left: 0;
width: 100%;
bottom: -1.05em;
}
.sub_menu_arrow:after {
content: '';
margin: 0 auto;
border-width: 0 .5em .5em;
border-style: solid;
border-color: #CCCCCC transparent;
display: block;
width: 0;
}
#sub_menu {
margin-top: 1em;
background-color: #CCCCCC;
width: 100%;
text-align: center;
white-space: nowrap;
position: relative;
height: 2em;
}
.sub_menu_inset {
display: none;
top: 0.5em;
position: absolute;
left: 0;
width: 100%;
background-color: #CCCCCC;
word-spacing: 5em;
}
http://jsfiddle.net/u9v0mcvo/
You don't necessarily have to use <ul> and <li> elements. Although, you should avoid nesting <a> tags in <a> tags. I think this is what you might be trying to accomplish (hover over project):
http://jsfiddle.net/u9v0mcvo/1/
When making CSS-only drop downs, tooltips, or whatever, it helps to nest the initially hidden item in the element that is in charge of opening it.
Your menu's should be <ul> and the submenu should be <ul> inside the <li>s.
The sub ul should then be positioned absolutely and display: none. the top level <li>s should have a :hover that changes the inner <ul>s to disbplay block.