I recently built a slide-out menu using jQuery, but the list containing the menu items has been behaving strangely. No matter how I change the CSS, the various list elements always stay in the same place, right on top of each other. The page in question is this.
.slide-menu {
width: 30%;
left: -30%;
position: absolute;
z-index: 1;
background-color: white;
}
.dlink {
font-size: 16px;
position: absolute;
width: 30%;
display: block;
}
#slide-list{
list-style: none;
top: 0%;
margin-left: 0px;
}
.sli-list-item {
width: 30%;
}
#slide-panel {
height: 100%;
top: 0%;
}
This is the relevant CSS.
Change your .dlink class to this:
.dlink {
font-size: 16px;
position: relative;
width: 30%;
display: block;
}
position: absolute; made them line up on top of each other.
Related
I'm trying to overarchitect a tooltip. The goal is for the tooltip abstraction to not have any knowledge of the wide context (document). Instead, it should be placed in an element and just work.
However, I'm having difficulty achieving max-width behaviour:
Understandably so, since the content has white-space: nowrap.
However, without it, I face this problem:
Help me fix the layout so that I may get a proper max-width behaviour. Specifically, when there is no more room in the line, wrap the content in a new line.
Here's the example: https://jsbin.com/fucujak/3/edit?html,css,output
helper {
display: inline-block;
position: relative;
top: 30%;
left:30%;
padding: 10px;
background: green;
color: white;
border-radius: 300px
}
tooltip {
display: block;
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
}
tooltip:hover tooltip-anchor {
display: block;
}
tooltip-anchor {
display: none;
position: absolute;
top: 100%;
left: 50%;
width: 0;
height: 0;
}
tooltip-container {
display: block;
position: absolute;
}
tooltip-positioner {
display: block;
position: relative;
left: -50%;
}
tooltip-content {
display: block;
padding: 10px;
/* white-space: nowrap; */
background: blue;
color: white;
max-width: 100px;
}
<helper>
i
<tooltip>
<tooltip-anchor>
<tooltip-container>
<tooltip-positioner>
<tooltip-content>
Some long, extended tooltip content
</tooltip-content>
</tooltip-positioner>
</tooltip-container>
</tooltip-anchor>
</tooltip>
</helper>
You can simply do like below:
helper {
display: inline-block;
position: relative;
top: 30%;
left: 30%;
padding: 10px;
background: green;
color: white;
border-radius: 300px
}
tooltip {
position: absolute;
display:none;
top: 100%; /* place at bottom*/
/* center*/
left:50%;
transform:translateX(-50%);
/**/
margin-right: -200px; /* this is the trick that will make sure the content can go up to 180px (an arbitrary big value) */
max-width:180px; /* your max-width*/
padding:10px;
background:blue;
}
helper:hover tooltip {
display:block;
}
<helper>
i
<tooltip>
Some long, extended tooltip content
</tooltip>
</helper>
<helper>
i
<tooltip>
Some long
</tooltip>
</helper>
I have three different elements. Two divs and 1 button. I'm trying to make them look nice, and not overlaps each other, but when the content of one div is bigger, everything is ruined. I tried to use overflow and min-height properties, but it didn't work. Any advice?
.lk .popup .popup-masterclass {
position: relative;
height: 48px;
}
.lk .popup .masterclass-text {
position: absolute;
top: 0;
left: 138px;
}
.lk .popup .popup-roundtable {
position: relative;
height: 48px;
}
.lk .popup-close-text {
font-size: 12px;
color: rgba(14, 17, 22, 0.5);
text-align: center;
margin-left: auto;
margin-right: auto;
position: absolute;
bottom: 80px;
left: 0;
right: 0;
}
#media screen and (min-width: 768px) {
.lk .popup .close-mobile {
display: none;
}
}
Inside .twig they all are next to each other like this:
<div class="popup-masterclass"></div>
<div class="popup-roundtable"></div>
<div class="popup-close-text close close-mobile">{{ t("lk.close.popup") }}</div>
And all of that looks like this:
In order to design with html and css the following way to display numbers ( it's an image counter related to a caroussel )
I'm facing a problem which is putting a sort of line break in "content" so that the .down_numb (36) can be a little bit under the slash like a previous image.
This is my code:
#container{
width: 150px;
height: 150px;
background-color :black;
margin-left: auto;
margin-right: auto;
position: relative;
}
/*Similar parameters between the 2 classes*/
.up_num , .down_num{
position: absolute;
font-size: 25px;
width: 10px;
height: 10px;
color: white;
}
/*Position of up num*/
.up_num{
top:20%;
left: 45%;
}
/*Position of down num*/
.down_num{
top:40%;
left: 45%;
}
/*Pseudo class of down_num with content "/" */
.down_num:before{
content : ' \002F ';
}
<div id="container">
<div class="up_num">1</div>
<div class="down_num">36</div>
</div>
Thanks everyone.
I would apply display: inline-block; and position: relative to the inner DIVs (i.e. putting them into one line and using top settings to offset them from that line), apply position: absolute to the before element containing the / and adjust settings approximately as in my snippet:
#container {
width: 150px;
height: 150px;
background-color: black;
margin-left: auto;
margin-right: auto;
position: relative;
box-sizing: border-box;
padding-top: 34px;
padding-left: 52px;
}
#container>div {
display: inline-block;
position: relative;
}
.up_num,
.down_num {
font-size: 25px;
color: white;
}
.up_num {
top: 20%;
}
.down_num {
top: 35%;
left: 0.2em;
}
.down_num:before {
content: ' \002F ';
position: absolute;
top: -30%;
left: -0.3em;
}
<div id="container">
<div class="up_num">1</div>
<div class="down_num">36</div>
</div>
You can do it using pseudo elements. Simmilar issue is solved in this answer.
Thanks to transform: rotate(angle); you can rotate the line as you want and it doesn't interfere with other elements as it is essentially a part of the element you assign it to. You will still need to play with it for a bit though.
I need to layer multiple divobjects.
To look like this
Whenever I load the markup as an HTML file in the browser the top: feature isn't responding. Then, if I open firebug to check the CSS, it shows that the value is there. If I modify the value of top: then and only then do the elements with top applied to them snap to the value in the CSS file.
I am aware that an alternative is to use a negative margin-top combined with padding set in fixed units, but as margin-top is relative to the child and not the parent that isn't consistent under all circumstances. I'd rather use position:absolute inside of a position:relative container.
Here's a fiddle, for some reason the it isn't congruent with what I see on my html file. Nonetheless, it may be of some help visualizing things.
<!--here's the container-->
<div id="fale_container">
<!--here's the container for the top-layer-->
<div id="fale_textbox_0">
<div class="highlight0a" id="Fale"><h1 class="fale_heading" id="faleh1">Fale</h1></div>
<div class="highlight0a" id="que"><h1 class="fale_heading">que</h1></div>
<div class="highlight0a" id="nem"><h1 class="fale_heading">nem</h1></div>
<div class="highlight0a" id="um"><h1 class="fale_heading">um</h1></div>
</div>
<!--here's the markup in question, this needs to go behind the container cited above. this is where the problematic styles are located-->
<div id=fale_textbox_container>
<div id="fale_textbox_2">
<h1 id="fale_heading_2">Rápido</h1>
</div>
<div id="fale_textbox_3">
<h2 id="fale_subheading_2">Sem Sotaque</h2>
</div>
<div id="fale_textbox_1">
<h2 id="fale_subheading_1">GRINGO</h2>
</div>
CSS
.highlight0a{
position: relative;
height: 55.7px;
width: 100%;
margin-bottom:1%;
}
.fale_heading {
position: relative;
display: block;
width: 13.32756%;
float: left;
margin-right: 0.00666%;
margin-left: 13.33422%;
color: black;
font-size: 3em;
clear: right;
z-index: 10; }
#fale_container {
position: relative;
height: auto;
width: 100%; }
#fale, #que, #nem, #um {
z-index: 9; }
#fale:after {
content: '';
z-index: -1;
position: absolute;
background-color: #fff;
width: 9%;
height: 100%;
left: 13.334%;
min-width: 4em; }
#que:after {
content: '';
z-index: -1;
position: absolute;
background-color: #fff;
height: 100%;
width: 9.1%;
left: 13.334%;
min-width: 6em; }
#nem:after {
content: '';
z-index: -1;
position: absolute;
background-color: #fff;
height: 100%;
width: 10.5%;
left: 13.334%;
min-width: 4em; }
#um:after {
content: '';
z-index: -1;
position: absolute;
background-color: #fff;
height: 100%;
width: 7.3%;
left: 13.334%;
min-width: 2em; }
#fale_textbox_container, #fale_textbox_1, #fale_textbox_2, #fale_textbox_3 {
display: block;
position: relative;
width: 100%;
float: left;
margin-left: 0;
margin-right: 0;
height: auto; }
#fale_textbox_container {
background-color: black;
z-index: 0; }
#fale_textbox_1, #fale_textbox_2, #fale_textbox_3 {
padding: 2%;
top: -42%;
z-index: 2; }
#fale_textbox_1 {
height: 100px;
background-color: white; }
#fale_textbox_2 {
height: 60px;
background-color: #7C1A1A; }
#fale_textbox_3 {
height: 80px;
background-color: #3F3C3C; }
#fale_heading_2, #fale_subheading_1, #fale_subheading_2 {
position: absolute;
z-index: 4;
width: 13.32756%;
float: left;
margin-right: 0.00666%;
margin-left: 28.66858%;
color: black; }
#fale_heading_2 {
top: 10; }
#fale_subheading_1 {
font-size: 4em;
top: 10; }
#fale_subheading_2 {
top: 10; }
I'm not completely sure what you are trying to accomplish.
Maybe you mean the following:
#fale_textbox_container {
background-color: black;
z-index: 0;
position: absolute; // Added this one
}
.highlight0a {
position: relative;
height: 55.7px;
margin-bottom:1%;
display: inline; // And this one
}
http://jsfiddle.net/xqd3x91q/3/
And next time, please please outline the code a little bit better, hard to read. And sometime in English would give most users more feeling of what you are trying to do. For me it looks like it is some sort of book cover.
I have a dropdown menu in af fixed positioned header, where I want the dropdown box to appear in front of another fixed positoned element.
I have tried with z-index on both elements, and I have checked, that both elements has a position.
See tis fiddle: http://jsfiddle.net/ng8u8zjx/1/
The dropdown box i showing behind the element containing the "+". I want it in the front.
.dashboard-header {
width: 100%;
height: 50px;
position: fixed;
top: 0;
background-color: #FF555F;
}
...
.dashboard-header .user-menu ul ul {
display: none;
background-color: #FF555F;
height: auto;
text-align: center;
z-index: 10;
position: relative;
}
...
/* ADD NEW START */
article.content header a.add-new {
color: #FFF;
line-height: 32px;
text-align: center;
background-color: #FF555F;
border-radius: 5px;
width: 30px;
height: 30px;
display: block;
position: fixed;
right: 10px;
top: 60px;
font-size: 22px;
text-decoration: none;
z-index: 1;
}
You have to set z-index to container .dashboard-header.
.dashboard-header {
z-index: 2;
}
Fiddle: http://jsfiddle.net/ng8u8zjx/2/