i have this dropdown inside another one, but i want to put this second dropdown to the right, i'm trying use position relative like this in the scss
.bloco2{
position: relative;
margin-right: 200px;
}
but it remains in the same place, and the margin-top works
<div ngbDropdown>
<li ngbDropdownToggle>
<a class="dropdown-item">
<i class="bi bi-box mx-2"></i>
Meus Editais
</a>
</li>
<div ngbDropdownMenu aria-labelledby="dropdownBasic1" class="bloco2">
<button ngbDropdownItem>• Lista de Meus Editais</button>
<button ngbDropdownItem>• Propostas Cadastradas para o Edital</button>
<button ngbDropdownItem>• Avaliação Propostas do Edital</button>
</div>
</div>
</div>
</div>
Please try using position:absolute; in combination with left:xxx;top:yyy; instead.
When an element is positioned using position:absolute, it is then positioned relative to the nearest parent element that has position:relative or position:absolute.
So in your case, I would recommend adding an identifier (class or id) to the parent element and setting its position as relative. Then change your bloco2 class to be absolute.
<div ngbDropdown id="parentElement">
Then apply style:
#parentElement {position:relative;}
.bloco2 {position:absolute; left:200px; top:100px}
Note: the above is simply to illustrate the effect of using absolute positioning. You will need to fine tune the correct values yourself.
Also, your html elements are not valid. Your < li > tags should sit within < ul > or < ol > tags not a < div >. Its common practice to house menu items like this in an unordered list like shown here:
https://stackoverflow.com/questions/36811224/why-do-navigation-bars-in-html5-as-lists#:~:text=By%20using%20a%20ul%20%2C%20it's,all%20available%20navigation%20links%20and
EDIT
Please see very simple example below:
<html>
<body>
<style>
ul {width:100px}
.level1 {position:relative;background-color:#f00;}
.level1 ul {position:absolute;z-index:99;left:100px;}
.level2 {background-color:#0f0;}
</style>
<ul>
<li class="level1">Item 1</li>
<li class="level1">Item 2</li>
<li class="level1">Item 3
<ul>
<li class="level2">Sub item 1</li>
<li class="level2">Sub item 2</li>
<li class="level2">Sub item 3</li>
</ul>
</li>
<li class="level1">Item 4</li>
</ul>
</body>
</html>
This demonstrates how the unordered list < ul > is absolutely positioned, relative to its parent < li > tag.
Related
I'm trying to center nav-content using center option
So it will look like this.
However it doesn't work on the ul attribute.
Ends up looking like this instead.
My code:
...
<div class="nav-content center" style="background-color: black">
<ul class="tabs tabs-transparent">
<li class="tab">Test 1</li>
<li class="tab">Test 2</li>
</ul>
</div>
</nav>
Solution:
mdubus' answer is correct but it needs to be in the ul element instead of the div for it to work using Materialize.
On your div nav-content center, just add a display:flex; justify-content:center;. That should do the trick ;)
I'm not familliar with materielize, you can do it with css, by stting the parent element to: flex and justifiy-content: center; or simply by setting .nav-content{ text-align: center; }
I used the method shown in How to target the href to div
to target the href to div. It worked. But I need to add another level.
HTML
<ul >
<li class="active">home</li>
<li>settings</li>
</ul>
<div class="target">
<div id="m1">
<ul >
<li class="active">Item1</li>
<li>Item 2</li>
</ul>
</div>
<div id="m2">
<ul>
<li class="active">Item1</li>
<li>Item 2</li>
</ul>
</div>
</div>
<div class="target123">
<div id="subm1-1">
content1
</div>
<div id="subm1-2">
content2
</div>
<div id="subm2-1">
content3
</div>
<div id="subm2-2">
content4
</div>
</div>
CSS
.target > div {
display:none;
}
.target > div:target{
display:block;
}
.target123 > div {
display:none;
}
.target123 > div:target{
display:block;
}
My issue is when I click on the link, "item 1" in the content in appears in the correct place. But the content in disappears.
How can I stop this?
My divs are positioned next to each other. So one div doesn't overlap the other.
If I understand correctly what you're trying to do, this is not possible using the :target attribute. The target is always the part of the URL after the #, and there can always only be one target at a time.
This means that whenever you activate a target all the other elements are going to be hidden again. You cannot show contents based on two different targets at the same time using this method.
What the Header Should Look Like
This is how the header should look like.
What it currently looks like
As you can see, my header isn't looking too good... I seem to be having some floating issues.
Current Header Code
Here is the HMTL I used to generate my header.
I'm trying to center the h1, float the logo to the left completely and have the h2 display beside the logo. The publish date and publisher are fine.
<header>
<ul style="list-style-type:none;float:right;">
<li style="float:left;">
<img src="C:\Logo.jpg" alt="Logo"/>
</li>
<li style="float:left;">
<h2>Statuts de Production</h2>
</li>
<li style="float:right;">
<h1 style="margin-bottom:0px">Machines en cours d'assemblage</h1>
</li>
<ul style="list-style-type:none;float:right;">
<li>
Dernière mise à jour: <xsl:value-of select="Table/Publish/DateEntry"/>
</li>
<li>
Par: <xsl:value-of select="Table/Publish/Username"/>
</li>
</ul>
</ul>
</header>
Am I not using the right approach? Should I use a table instead of an unordered list?
If you want to vertical align the list items and indent the middle one, just remove the styles from the HTML and use this external CSS (using external CSS is the first thing to improve your approach):
ul { display: block; list-style-type:none; height: 50px; }
li { display: inline-block; vertical-align: middle; }
ul ul { display: inline-block; }
ul ul li { display: block; }
and set the padding to each list item as you want, the third item might be floated right.
Second: you can not use image path on your HDD C:\Logo.jpg to enable the access from clients, use the http://... protocol.
Third: you can not use ul as direct child of ul. Only lis are allowed inside ul
<ul>
<li>item 1</li>
<li>item 2</li>
<li>
<ul>
<li>subitem 1</li>
<li>subitem 2</li>
</ul>
</li>
</ul>
Dose the following help you? it is designed such that the hight is constant.
<div style='position:relative; padding:0px 200px 0px 200px; background-color:gray;height:20px;box-sizing:border-box;'>
<div style='position:absolute;background-color:yellow; left:0px; top:0px; height:100%;width:200px;'>
left pannel
</div>
<div style='position:absolute;background-color:yellow; right:0px; top:0px; height:100%; width:200px;'>
right pannel.
</div>
<div style='box-sizing:border-box;width:100%;text-align:center;'>
Center
</div>
</div>
You can see it also here.
I am trying to set a nested set of list items in a Joomla menu so that the outermost parents move down to make room for the children. The height of the list items also needs to be a set height because the menu items are buttons. At the moment what happens is that the parent items below a child item horizontally get pushed into the space of the child item so that they overlap. Here is a simplified example of what I am trying to achieve:
<ul>
<li style="height: 40px;">Parent Item 1
<ul>
<li style="height: 40px;">Child item of 1</li>
</ul>
</li>
<li style="height: 40px;">Parent Item 1</li>
</ul>
Here is a link to a page on my site showing exactly this situation:
http://procadsys.worldnz.co.nz/test
Is there any way with CSS to have the heights properly calculated down this list so that each level is 40 pixels below the previous one without any levels overlapping? I've tried changing the position attribute to fixed and relative as well, but this didn't work.
Solved it. The answer is to use line-height, not height:
<ul>
<li style="line-height: 40px;">Parent Item 1
<ul>
<li style="line-height: 40px;">Child item of 1</li>
</ul>
</li>
<li style="line-height: 40px;">Parent Item 1</li>
</ul>
You use this style code
ul > li:hover ul{
height:40px;
margin:0;
padding:0;
}
Im having trouble making sure my active graphic is positioned outside of the button, basically the overflow of the parent element keeps the graphic hidden inside of it instead of being outside. I have tried to use position:absolute and z-index but I cant solve this.
HTML
<ul id="mynav">
<li class="active">Link
<ul id="subernav">
<li>Inner Link 1</li>
<li>Inner Link 2</li>
<li>Inner Link 3</li>
</ul>
<span class="active ir">Active Link</span>
</li>
<!-- More links -->
<!--<li>Link</li>-->
<!--<li>Link</li>-->
<!--<li>Link</li>-->
<!--<li>Link</li>-->
</ul>
CSS
body{background:#000;color:#000;font-family:Arial;padding:20px;}
a{text-decoration:none;color:#000;}
#mynav > li{height:45px;background:#fff;width:458px;padding:5px 10px;text-align:center;overflow:hidden;margin-bottom:30px;position:relative}
#mynav > li a{line-height:45px;}
#mynav li.active:hover{height:90px;cursor:pointer}
#mynav li .active{background:#f00 url('http://dummyimage.com/15/f00/fff&text=+') no-repeat -668px -214px;width:15px;height:15px;position:absolute;left:50%;bottom:-15px;margin-left:-7.5px;border:1px solid #f00;z-index:250}
#subernav li{display:inline-block;zoom:1;*display:inline;}
#subernav li a{color:#f00;}
.ir{display:block;text-indent:-999em;overflow:hidden;background-repeat:no-repeat;text-align:left;direction:ltr;}
Link to fiddle:
http://jsfiddle.net/UbvQk/5/
Remove the overflow: hidden and the height from the mynav active (and the :hover).
Set the subernav to display:none;.
Add #mynav li.active:hover #subernav to have display:block;
Updated Fiddle