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.
Related
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.
I'm using :target in html and I code something like that:
<div class="1">
<div>
<ul>
link to part 2
</ul>
</div>
<div class="ex">
<ul id="2">
<p>hi</p>
</ul>
</div>
and I've done this in css:
.ex ul {
display: none;
}
.ex ul:target {
display: block;
}
I need to make so that when you click on the link (in this case the words 'link to part 2') the #2 ul show, (alredy done this) and the ul whit the link disappears, how can I do?
One way this can be accomplished is with JavaScript. I added the id remove-on-click to your link which you want removed, and then created a JavaScript event listener to alter the style of this item when it is clicked. You can see the code working here.
<div class="1">
<ul>
link to part 2
</ul>
</div>
<div class="ex">
<ul id="2">
<p>hi</p>
</ul>
</div>
<script>
document.getElementById('remove-on-click').addEventListener('click',function(){
this.style.display = "none";
})
</script>
I did not edit any of your other code, but keep in mind that ul tag should be used with li descendants. If you do not have a li descendant, use another tag, such as a div. Also, you may want to become more familiar with proper naming of class and id attributes, especially in regards to not beginning them with a digit:
https://www.w3.org/TR/CSS2/syndata.html#characters
What are valid values for the id attribute in HTML?
The key consideration to note is that you must write the markup in reverse order.
This is because CSS selectors can only select:
an element itself (or a pseudo-element)
an element's descendant elements
an element's subsequent siblings
It cannot select an ancestor element or (in this scenario) a previous sibling.
Once you have written the markup in reverse order, you can achieve the effect you want using CSS.
Working Example:
#part2,
#part3 {
display: none;
}
#part2:target,
#part3:target {
display: block;
}
#part2:target ~ [id^="part"],
#part3:target ~ [id^="part"] {
display: none;
}
<div id="part3">
<p>This is Part 3.</p>
</div>
<div id="part2">
<p>This is Part 2.</p>
<ul>
<li>Link to Part 3</li>
</ul>
</div>
<div id="part1">
<p>This is Part 1.</p>
<ul>
<li>Link to Part 2</li>
</ul>
</div>
I'm trying to stop moving objects when hovering.
See what i'm doing here>JSFIDDLE
When hovering the second link (TEST2), it changes to bold property (need to be), but it pushes the other button (TEST) to the left. How can i anchor other elements in the header and stop their movement?
give an item class to normal list elements and seperator class to seperator list element
<div class="header-bg">
<div class="container">
<div class="menu-header">
<nav>
<ul>
<li class="item">Test</li>
<li class="seperator"><span>∴</span></li>
<li class="item">Test2</li>
</ul>
</nav>
</div>
</div>
</div>
and give a fixed width to list elements at .item class
.item {
width:70px;
}
working demo
give them a fixed width, ie width:80px
Having problems with my CSS menu drop-down as instead of overlapping the containers its expanding them. Probably very simple oversight but can't find the answer (closest match was Div within li not expanding but the suggestion of putting an absolute position to the submenu class didn't work). Also there is no JS.
Here is the JSFiddle Link : http://jsfiddle.net/KNBLC/
HTML
<body>
<div class="secondary-content-6col">
<h1><span class="white">Headline</span></h1>
<ul class="yellow-call-to-action">
<li>1. Select a Product <img src="../img/arrow-small.png" alt="arrow"/>
<ul>
<li>Item 1
</li>
<li>Item 2
</li>
<li>Item 3
</li>
</ul>
<!--- 1st column Footer -->
</li>
</ul>
</div>
<p> </p>
Change this in your css
.secondary-content-6col {height:150px;}
You need to set a height to that div, else it wil see the height as
height:auto;
I have a <table> and I put more than 6 <div>s in one td then I change the display:inline to show these <div>s inside together.
But it just show at most 5 <div>s in first line and show others in in another line below of first line!
where is wrong?
This is my code:
<tr>
<td>
<div id="navigation"> Home </div>
<div id="navigation"> Item1</div>
<div id="navigation"> Item2 </div>
<div id="navigation"> Item3</div>
<div id="navigation"> Item4 </div>
<div id="navigation"> Item5 </div>
<div id="navigation"> Item 6 </div>
<div id="navigation"> Item 7</div>
</td >
</tr>
CSS Code:
#navigation{
display:inline;
padding:0px 10px 0px 10px;
}
this is design view:
You are using table for layout, use div's instead, ya, surely it won't throw you any error but what you are doing is semantically not correct...
The correct way and a better way to have this is as an unordered list, with display: inline-block; CSS property
<ul>
<li>Demo 1</li>
<li>Demo 2</li>
<li>Demo 3</li>
<li>Demo 4</li>
<li>Demo 5</li>
</ul>
ul li {
display: inline-block;
}
You can also wrap the ul inside an nav which is HTML5 element to provide it a meaning that yes, this is a navigation, you'll be probably nesting a element inside the holder so using display: block; for a element will make sense
First off you can't have multiple elements with the same ID. Change id="navigation" to class="navigation" on the elements.
Secondly you can then use this CSS:
.navigation
{
display: inline-block;
}
This will make those elements all appear in a row.
Because there is no fixed table width, the tables maximum width is the window width.
See this fiddle:
http://jsfiddle.net/7QLPW/1/
One Table with specified width and one without
<table width="500px">
...
<table>
The first one does not break as soon as the window width gets too small, the second one does.
What is the width of your table, full layout or how many column you have.
you can see what I try for your issue
http://fiddle.jshell.net/yNF4n/