At the moment, I've just been manually defining the widths of my elements when hovered (view-source from this site: http://plotme.worldcretornica.com)
I've been trying a lot to make them auto width, like they would with this fiddle
Heres what I've been trying to do (it uses font-awesome),
HTML:
<nav>
<ul>
<li>
<span class="description">Download portal</span>
</li>
<li>
<span class="description">Join the discussion at Spigot</span>
</li>
<li>
<span class="description">Read what PlotMe is about</span>
</li>
<li>
<span class="description">Report an issue or request a new feature</span>
</li>
<li>
<span class="description">Commands and Permissions</span>
</li>
<li>
<span class="description">Configurations explained</span>
</li>
<li>
<span class="description">How to setup/upgrade PlotMe</span>
</li>
<li>
<span class="description">PlotMe Stats</span>
</li>
<li>
<span class="description">Fork me on GitHub!</span>
</li>
</ul>
</nav>
CSS:
#hover {
display: none;
}
#hover:hover span {
display: table;
margin: 0px auto;
border-radius: 5px;
padding: 5px 10px 5px 10px;
background: #f0f0f0 no-repeat 100% 5%;
margin-top: 15px;
position: absolute;
top: 85px;
text-decoration: none;
color: gray;
}
Anyone have a suggestion on how I make the spans auto width?I'm trying to learn, so please be gentle. Thanks!
Add this to your span
#hover:hover span {
white-space: nowrap;
display: inline-block;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
}
This will make the span auto center in the holder "a".
Note that for this to work you need to have the span with position absolute and the holder "a" with position relative.
You can ask the browser to prevent the white space to wrap as next line.
#hover:hover span {
white-space: nowrap;
}
Output:
try display:block;, padding:any_value; and overflow:hidden; or wrp this in a invisible wide element and use text-align:center (for centring pourposes)
Related
I'm trying to make a basic navigation bar where a child dropdown appears when hovering over a list item. I want to position this dropdown starting at the right most edge of the list item I am hovering over, but I want it this dropdown be able to scale bigger than the list item you're hovering over.
The trouble is that when I position the parent relative, the dropdown's width is constricted to the width of the list item you're hovering over, when I remove postion relative I lose the ability to position it the way I want it.
When the parent List item doesn't have position relative it looks like this:
But I want the right edge of that dropdown to align with the right side of the list item I'm hovering on. When I add position relative to the list items, the width of the dropdown is contsrained like this:
The markup looks like follows:
<nav>
<ul class="outer-list">
<li>
<a>
Work
</a>
<ul class="inner-list">
<li>Sub1</li>
<li>Sub2</li>
<li>Sub3</li>
</ul>
</li>
</ul>
<ul class="outer-list">
<li>
<a>
Contact
</a>
</li>
</ul>
<ul class="outer-list">
<li>
<a>
Helpdesk
</a>
<ul class="inner-list">
<li>Sub1</li>
<li>Sub2</li>
<li>Sub3</li>
</ul>
</li>
</ul>
<ul class="outer-list">
<li>
<a>
Subscriptions
</a>
<ul class="inner-list">
<li>Sub1</li>
<li>Sub2</li>
<li>Sub3</li>
</ul>
</li>
</ul>
I am not in charge of the markup, but if it needs to change to allow for a solution that is fine.
My CSS is as follows:
.outer-list{
.dropdown{
padding-right: 20px;
a{
color: black;
text-decoration: none;
position: relative;
.icon-dropdown{
position: absolute;
display: inline-block;
width: 6px;
height: 4px;
background-image: url('./Assets/BlueArrowIcon.svg');
background-size: cover;
background-position: center;
top: 50%;
right: -11px;
transform: translateY(-50%)
}
}
.inner-list{
padding: 25px 20px;
display: none;
position: absolute;
background-color: $color-white;
box-shadow: 5px 0px 50px rgba(0,0,0,0.16);
z-index: 1;
max-width: 310px;
li{
margin-bottom: 20px;
&:hover{
a{
color: $color-dark-red;
}
}
}
}
&:hover{
a{
color: $color-blue;
}
.inner-list{
display: block;
a{
color: black;
}
}
}
}
&:last-of-type{
.dropdown{
padding-right: 0px;
}
}
}
If anyone could help me that would be much appreciated.
I have a div. And this div contains a very long list. This list becomes scrollable automatically.
This div is then inside another div, which fills out the entire screen.
Scrolling works fine, but it only works when the mouse is over the inner div, the one that actually contains all the data.
But I want scrolling to work, also when the mouse is over the parent div, the one that fills out the entire screen.
How do I do that?
You can see the sample here:
https://openage.org/fs/jsl_forritun/?page=hlutir
It doesn't scroll when the mouse is over the darker part. /:
you have two divs that contains your content body
id= "nhreyfing"
give him this style padding: 0 20vw; background: black
or what so ever padding you wanna give him
id= "content"
give him your rgb(213, 191, 134) background
* {
box-sizing: border-box;
}
body {
margin: 0;
background: #2B2832;
}
.main {
margin: 0 auto;
padding: 40px;
width: 700px;
height: 100vh;
overflow-y: auto;
background: #D5BF86;
}
.main ul {
margin: 0;
padding: 0;
}
.main ul li {
list-style: none;
}
.main ul li:nth-child(n+2) {
margin: 10px 0 0;
}
.main ul li a {
padding: 10px;
display: flex;
color: #000;
background: #C6B076;
text-decoration: none;
}
<div class="main">
<ul>
<li>
Link
</li>
<li>
Link
</li>
<li>
Link
</li>
<li>
Link
</li>
<li>
Link
</li>
<li>
Link
</li>
<li>
Link
</li>
<li>
Link
</li>
<li>
Link
</li>
<li>
Link
</li>
<li>
Link
</li>
<li>
Link
</li>
<li>
Link
</li>
<li>
Link
</li>
<li>
Link
</li>
<li>
Link
</li>
<li>
Link
</li>
<li>
Link
</li>
<li>
Link
</li>
<li>
Link
</li>
<li>
Link
</li>
<li>
Link
</li>
<li>
Link
</li>
</ul>
</div>
Do the following:
remove CSS properties from
BODY element {height:100%}
remove {max-width: 800px} and add CSS to id="initial_screen_base" element:
div#initial_screen_base {
max-width: 100vw;
padding: 0px 20vw;
background-color: rgb(43, 40, 50);
}
if you want it to me maxed always to 800px (for smaller devices it will be full width), make it like this:
div#initial_screen_base {
background-color: rgb(43, 40, 50);
max-width: 100vw;
padding: 0;
padding-right: calc((100% - 800px)/2);
padding-left: calc((100% - 800px)/2);
}
for your id="node":
div#node {
background-color: rgb(213, 191, 134);
}
You should remove you inline CSS and put them in a style TAG inside your HEAD. That way you will fave more clear code for yourself to edit.
I have a menu icon that when I click on it my list items appear;
but it pushes down other elements. I want to set my z-index to it hasn't any effect on other element. but it doesn't work.
<div class="dropdown hidden-md hidden-lg ">
<ul>
<li>
<div class="dropbtn">
<span class="bar1"></span>
<span class="bar2"></span>
<span class="bar3"></span>
</div>
</li>
<li class="dropdown-content">
<ul>
<li>خانه</li>
<li>توانایی ها</li>
<li> <a href='products.php'>محصولات</a></li>
<li><a href='projects.php'>پروژه ها</a></li>
<li><a href='aboutus.php'>درباره ما</a></li>
<li><a href='contactus.php'>تماس با ما</a></li>
</ul>
</li>
</ul>
</div>
CSS:
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
display: none;
clear: both;
float: right;
direction: rtl;
background-color: #f9f9f9;
min-width: 75px;
font: 1.2em Yekan;
}
.dropdown {
position: relative;
z-index: 999999999999;
float: right;
text-align: right;
}
JS
$(".dropbtn").on("click",
function() {
$(".dropdown-content").toggle();
}
);
z-index is a relative property that display your index according to the order where you put your element in your page.
<div>here the z-index is equal to 1</div>
<div>here the z-index is equal to 2</div>
If you want to be sure that your z-index is take in consideration you can put an absolute position to your html element but you break the index stack of your element.
For sample in your case if you want to do that your .dropdown is still above all the other element you can do :
.dropdown {
position: absolute;
z-index:999999999999;
float: right;
text-align: right;
}
But it's will also run with a relative element position and in than case you have to be careful of teh impact because you break the "z-index stack". One advice is that case is to set all the z-index of all your element impact by your design.
First, I put your code on embed and add some style to see your btn.
Second, I fix your bug by replacing position:relative by position:absolute
$(".dropbtn").on("click", function(){
$(".dropdown-content").toggle();
});
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
display:none;
clear: both;
float: right;
direction: rtl;
background-color: #f9f9f9;
min-width: 75px;
font:1.2em Yekan;
}
.dropdown {
position: absolute;
z-index:999999999999;
float: right;
text-align: right;
}
ul {
list-style-type:none
}
.dropbtn {
cursor:pointer;
}
.bar {
display:block;
height: 4px;
width: 24px;
background: black;
margin-bottom: 5px;
border-radius: 2px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="dropdown hidden-md hidden-lg ">
<ul>
<li>
<div class="dropbtn">
<span class="bar1 bar"></span>
<span class="bar2 bar"></span>
<span class="bar3 bar"></span>
</div>
</li>
<li class="dropdown-content">
<ul>
<li>خانه</li>
<li>توانایی ها</li>
<li> <a href='products.php'>محصولات</a></li>
<li><a href='projects.php'>پروژه ها</a></li>
<li><a href='aboutus.php'>درباره ما</a></li>
<li><a href='contactus.php'>تماس با ما</a></li>
</ul>
</li>
</ul>
</div>
CodePen is here: http://codepen.io/anon/pen/BKVMoY
ul {
width: 40%;
border: 1px solid black;
list-style: none;
padding: 0;
}
span:last-of-type {
float: right;
}
<ul>
<li>
<a href="#">
<span>New York</span>
<span>$489</span>
</a>
</li>
<li>
<a href="#">
<span>New York</span>
<span>$489</span>
</a>
</li>
<li>
<span>New York</span>
<span>$489</span>
</li>
<li>
<span>New York</span>
<span>$489</span>
</li>
</ul>
Why isn't the floated element underlined?
How can I make it clickable for space between the spans?
Why isn't the floated element underlined?
16.3.1 Underlining, overlining, striking, and blinking: the 'text-decoration' property
Note that text decorations are not propagated to floating and absolutely positioned descendants, nor to the contents of atomic inline-level descendants such as inline blocks and inline tables.
To fix that, you can set text-decoration: inherit on the floated span.
span:last-of-type {
float: right;
text-decoration: inherit;
}
How can I make it clickable for space between the spans?
You can set the <a> to display:block, it will the occupies the entire width available.
a {
display: block;
}
ul {
width: 40%;
border: 1px solid black;
list-style: none;
padding: 0;
}
a {
display: block;
}
span:last-of-type {
float: right;
text-decoration: inherit;
}
<ul>
<li>
<a href="#">
<span>New York</span>
<span>$489</span>
</a>
</li>
<li>
<a href="#">
<span>New York</span>
<span>$489</span>
</a>
</li>
<li>
<span>New York</span>
<span>$489</span>
</li>
<li>
<span>New York</span>
<span>$489</span>
</li>
</ul>
I think you can just add display: block; to the anchor tags in order to make the entire row clickable. I'm not exactly sure why the floated element removes the underline.
<ul class="whole-row-link">
<li>
<span>New York</span>
<span>$489</span>
</li>
<li>
<span>New York</span>
<span>$489</span>
</li>
</ul>
ul.whole-row-link li {
position: relative;
}
ul.whole-row-link li a {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0
}
I was able to make the space between the link clickable but it stillls looks weird when you dont have underline.
I used the flexbox to acheive the effect of the clickable.
`http://codepen.io/Ebeldev/pen/BKVMwP`
I have basically this html code:
<ul class="unordered-list">
<li class="list-item">
<div class="list-item-block">
Sometimes a wrapped link to Google
<p class="list-item-link-description">Short description of the link above</p>
</div>
</li>
</ul>
Is there a way to expand the clickable area of the link to the size of the li element by keeping the links position and the description nicely below the link?
I tried to use absolute positioning for both the link and the description but this fails if for example the link text has a line break. As you can see in this jsFiddle: http://jsfiddle.net/xgcjngvs/3/
I would love to find a solution for this problem without javascript.
EDIT: I should have mentioned that the link tag should only contain the plain text and not any other html code.
Given your new requirement there is another way that this can be achieved without changes to your existing HTML structure:
Remove the absolute positioning from .list-item-link and .list-item-link-description, position: absolute; takes the elements out of the document flow and these two need to be aware of how much space each of them take up
Add a pseudo element to .list-item-link using .list-item-link:after, make this position: absolute; and set the height and width to take up the dimensions of the container.
.unordered-list {
list-style: none;
padding-left: 0;
}
.list-item {
min-height: 50px;
position: relative;
}
.list-item-link {
width: 100%;
}
.list-item-link:after {
content: "";
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
.list-item-link-description {
margin: 0;
}
<ul class="unordered-list">
<li class="list-item">
<div class="list-item-block">
Sometimes a wrapped link to Google
<p class="list-item-link-description">Short description of the link above</p>
</div>
</li>
<li class="list-item">
<div class="list-item-block">
Sometimes a wrapped link to Google. It is very very very very very very long to demonstrate the linke break.
<p class="list-item-link-description">Short description of the link above</p>
</div>
</li>
</ul>
JS Fiddle: http://jsfiddle.net/5s44c95q/
This is possible with a few changes to your markup and css:
Change list-item-block into the a element and set it as display: block;
Change list-item-link and list-item-link-description into span elements as only inline elements are valid in a elements
Style list-item-link to look like the link
Style list-item-link-description to look like the paragraph
.unordered-list {
padding-left: 0;
list-style: none;
}
.list-item {
position: relative;
height: 50px;
}
.list-item-block {
display: block;
min-height: 100%;
text-decoration: none;
}
.list-item-link {
text-decoration: underline;
}
.list-item-link-description {
color: #000000;
display: block;
text-decoration: none;
}
<ul class="unordered-list">
<li class="list-item">
<a href="www.google.com" class="list-item-block">
<span class="list-item-link">Sometimes a wrapped link to Google</span>
<span class="list-item-link-description">Short description of the link above</span>
</a>
</li>
<li class="list-item">
<a href="www.google.com" class="list-item-block">
<span class="list-item-link">Sometimes a wrapped link to Google. It is very very very very very very long to demonstrate the linke break.</span>
<span class="list-item-link-description">Short description of the link above</span>
</a>
</li>
</ul>
If your short description will be on 1 line, you can add padding-bottom to the list-item-link and then move the description up by the same amount and also set a negative margin-bottom for the block as a whole. If you do the padding in ems, it should take care of different font sizes.
To make the short description clickable, you need to make the z-index of the link higher than the description.
.unordered-list {
padding-left: 0;
list-style: none;
}
.list-item {
margin-top:10px;
margin-bottom:-2em;
position:relative;
}
.list-item-link {
display:block;
position:relative;
border:1px #000 solid; /*to show link area */
padding-bottom:2em;
z-index:1;
}
.list-item-link-description {
position:relative;
top:-2em;
}
<ul class="unordered-list">
<li class="list-item">
<div class="list-item-block">
Sometimes a wrapped link to Google
<p class="list-item-link-description">Short description of the link above</p>
</div>
</li>
<li class="list-item">
<div class="list-item-block">
Sometimes a wrapped link to Google. It is very very very very very very long to demonstrate the linke break.
<p class="list-item-link-description">Short description of the link above 2</p>
</div>
</li>
</ul>
EDIT: I removed the paragraph tags as you have requested but I can not get it to work any other way without the span, so the span would have to stay in place.
<ul class="unordered-list">
<li class="list-item">
<div class="list-item-block">
<span class='anchor-control'><a href="www.google.com" class="list-item-link">Sometimes a wrapped link to Google</span>
Short description of the link above
</a>
</div>
</li>
<li class="list-item">
<div class="list-item-block">
<span class='anchor-control'><a href="www.google.com" class="list-item-link">Sometimes a wrapped link to Google. It is very very very very very very long to demonstrate the linke break This needs to be a longer link then .</span>
Short description of the link above
</a>
</div>
</li>
</ul>
And here's your CSS.
EDIT: New styles to match the top, it's pretty straight forward stuff
a{
text-decoration: none;
color: #000;
}
.anchor-control a{
text-decoration: underline;
width: 100%;
float: left;
color: #00f;
}
.unordered-list {
padding-left: 0;
list-style: none;
}
.list-item {
position: relative;
padding; 0;
margin: 0;
}
.list-item-link {
position: relative;
}
a .list-item-link-description {
position: relative;
color: #000;
margin: 0;
margin-bottom: 10px;
}
EDIT: This should be what you're after.
http://jsfiddle.net/xgcjngvs/9/
css
a{
text-decoration: none;
}
.anchor-control{
text-decoration: underline;
}
.unordered-list {
padding-left: 0;
list-style: none;
}
.list-item {
position: relative;
padding; 0;
margin: 0;
}
.list-item-link {
position: relative;
}
#content {
display: none;
}
#show:target #content {
display: inline-block;
}
#show:target #open {
display: none;
}
.btn-open:after,.btn-close:after{
position:absolute;
right:280px;
top:0;
}
.btn-open:after{
content: "\25BC";
}
.btn-close:after{
content: "\25B2";
}
<ul class="unordered-list">
<li class="list-item">
<span class='anchor-control'>Sometimes a wrapped link to Google</span>
<div id="show">
<div id="content">
Short description of the link above
</div>
</div>
</li>
</ul>
try this JSFIDDLE