I have the following:
ol.progress-tracker {
margin: 0;
padding: 0;
list-style-type: none;
/*
position: absolute;
bottom: 0px;
*/
}
If I try the commented code, it messes up my other styling and I'm not sure why. Is there another way to push this thing to the bottom in a responsive-design-friendly way? My fiddle is here:
http://jsfiddle.net/4mABB/
If you position a block element absolutely, it looses it's default property of using the whole space horizontally. You would have to specify a width yourself:
ol.progress-tracker { width: 300px; /* or whatever */ }
Related
I have a keyboard diagram to indicate to the user that they should be able to press a key to move from one cell of the CSS grid to another. The cells are set to the width and height of the browser. (The keypress does not function yet). Still, when I scroll up and down, the arrow key image remains, but when I scroll right, the right cells of the grid shove the image off the page? (It would also be nice to get rid of the negative margin on the body tag but that seems to be necessary when the image is a sticky element.
body {
margin: 0;
padding: 0;
margin-top: -102px;
}
.nav-legend {
position: sticky;
top: 10px;
padding-left: 10px;
}
https://codepen.io/russellbits/pen/eYjmWyg
Not sure if it gets the desired result, but it seems that position: fixed might be suitable for the use case.
Forked demo with modification: codepen
Example:
body {
margin: 0;
padding: 0;
}
.nav-legend {
position: fixed;
top: 10px;
left: 10px;
z-index: 999;
}
I am trying to customize navigation menu in wordpress. I want my submenu to appear below the parent menu element in a single line. I am also setting submenu position to absolute so that I can control the overlap of main menu bar and submenu bar.
Below is my minimized CSS (in SASS, for clarity I am posting only those portions that i thought relevant).
Problem: Everything is working fine except the submenu items now break into lines, rather than in a single line.
Observation: If I remove absolute positioning OR I give a fixed width, then it works.
What I tried: Putting white-space: nowrap and display:inline-block (in li), though I know display doesn't make sense for absolute positioning.
.menu-primary-menu-container {
&>ul {
float:left;
list-style: none;
&>li {
position: relative;
float:left;
&>ul {
position: absolute;
height: 40px;
bottom: -30px;
list-style: none;
&>li {
float:left;
}
}
}
}
}
You have to specify a width to the submenu in order to get it working: JSFiddle
.menu-primary-menu-container {
&>ul {
float:left;
list-style: none;
&>li {
position: relative;
float:left;
&>ul {
position: absolute;
height: 40px;
bottom: -30px;
list-style: none;
width: 500px;
&>li {
float:left;
}
}
}
}
}
If you use position: absolute; without a width or without specify left and right, the element will use the width as small as possible.
I want to put .image exactly behind .description-wrap. I've tried using padding and margins to center it but no go.
.image img {
display:block;
margin: 0 auto;
width:30%;
bottom:100px
}
https://jsfiddle.net/vsdLk90s/
I have made some changes to your code and explained them in comments.
.image {
position: absolute; /* Out of flow of current structure */
width: 70%; /* To regain the width of previous layout */
margin-top: -15%; /* Align it vertically */
z-index: -1; /* Priority reordering, place the image underneath the text */
}
JSfiddle
I am trying to make a tooltip for an anchor tag using only CSS. I have come this far. I am trying to achieve the functionality of having the box and the tip arrow positioned exactly at the center no matter what the length of the text is.
The above image is what I am trying to get at.
I've tried keeping the width:auto but it's not working either.
body
{overflow-x:hidden;}
div
{position:relative;width:700px;border:1px red solid;padding:20px;margin:0 auto;text-align:justify;}
a
{position:relative;white-space:nowrap;}
a > span.tooltip
{
position: absolute;
white-space: normal;
width: 100%;
top: 130%;
left: 0;
}
a > span.tooltip > span
{
position: absolute;
top: 0;
right: 0;
text-align: center;
bottom: 0;
left: -500%;
width: 1100%;
}
a > span.tooltip > span > span
{
display: inline-block;
background: black;
border-radius: 4px;
padding: 10px;
color: white;
max-width: 300px;
}
DEMO:
http://jsfiddle.net/b2Yqf/
works on msie 7 8 9 10, firefox, chrome
not what you might want... since markup is made with three nested <span>s... but YES. it could be done!
The main problem you're facing is that you need a white-space: nowrap this gets you about as far as hint.css by #robooneus. I can't figure out the centering either though. Any widths or margins are relative to the "Tooltip" link's width. A link to where you found the images might be helpful too so we can study the source.
EDIT1:
Additionally, a margin-left: -6px on the arrow (the :before) centers that on the word tooltip, it counteracts the move to the right by the border.
I don't think what you are trying to do (center the tooltip) is possible while having width:auto;.
If you declare a width, you can simple position the tooltip with:
.tooltip:hover:after {
width:100px; /* whatever you want */
left:50%;
margin-left:-50px; /* half the width */
}
EDIT
As #Alexander says in his answer, also repositioning your tooltip arrow using margin-left is a good idea, as it is slightly off center with just left:50%.
Is there any way to align element (div in our case) to bottom of flex?
Fiddle here: http://jsfiddle.net/djeQv/1/
#images div {
position:relative;
bottom: 0px;
margin-top: -10px;
padding-top: 10px;
cursor: default;
}
This usual way didn't worked this time.
Why not position the text absolute? Something like this:
#images div {
position:absolute;
bottom: 0;
text-align: center;
width: 100%;
}
Since this takes the text out of the flow of the document, you will need to add some padding to the bottom of your link to prevent the text from overlapping the image.
I updated your fiddle to demonstrate: http://jsfiddle.net/djeQv/2/