<div id="kon-main">
<div id="kon-opening-loading"><img src="./images/opening-loading.png?dd3303a5fa928e207fb516c8b6c9a43d" alt="loading"></div>
<div><!----> </div>
</div>
How can I get rid of these <!---->?I could'nt get element inside the div ,but it has something inside the div when I inspect it.
Related
I am attempting to create a site where there are overlapping elements contained with a responsive div.
<div>
<div class="row" style="position:relative">
<img src=... style="position:absolute">
<button style = "position:absolute">
</div>
<div class="row"></div>
...
<div class="row"></div>
</div>
The code works well and is responsive with bootstrap originally, but once I added the absolute, the image inside the 2nd row (Img 2) moves up to overlap the first row and seem to be no longer affected by the outside div. What am I doing wrong?
So I have been given the task of mocking up a new bootstrap version of the building floor map on the web and while trying to make a DIV area clickable and linking to another page, the anchor tag used to make the link makes the div layout messed up?
Here is my code and an image
before I add the anchor tag around the div
after I add the anchor tag around the div
<div class="container">
<div class="row">
<a href="floor0.html">
<div class="item col-lg-4">
<p> floor zero </p>
<br>
<br>
<br>
<br>
</div>
</a>
$(".item").click(function() {
window.location = $(this).data("location");
return false;
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="item col-lg-4" data-location="floor0.html">
<p> floor zero </p>
</div>
You can do similar like this to avoid this css conflict with anchor tag and also to make a div clickable and redirect to destination link. If you run this code you will find 404 error code as there is no file here. Thank you. If this helps you then please make it accepted.
Your mark up needs to be updated as you have some closing div tags missing, not sure if this just the case in the code in your question. The markup should be:
<div class="container">
<div class="row">
<div class="item col-lg-4">
<a href="floor0.html">
<p> floor zero </p>
</a>
</div>
</div>
</div>
You need to give the <a> a style property of display: block; like this:
.item a {
display: block;
}
The anchor will now cover the whole div and work the way you expect it to. It's also a good idea to note; if using a framework like Bootstrap the order of divs is important to make sure the grid behaves as expected, it should always be:
container > row > col
Managed to solve this issue by removing the div with the column classes and then adding the classes from the removed div to the anchor tag
<div class="container">
<div class="row">
<a class="item col-lg-4" href="#">
<p> floor zero </p>
<br>
<br>
<br>
<br>
</a>
Try reading this: Is putting a div inside an anchor ever correct?.
If your goal is to open a link when the div is clicked you can try putting an onClick=(window.location.href='link here') event on the div tag or use jQuery event in script $('div').click(function(){window.location.href='link here'});
How to target a div to do a hover effect that is wrapped inside a href and all that sits inside main div like a holder? When the user hover on the item,i want for example the p element to have hover effet that it is inside div el with class item.
How to target elements like this? If it's possible to do only with css?
Something like this
<div id="ItemsEmployees">
<a href="">
<div class="itemHolder">
<div class="nameTitle">
</div>
<div class="item">
<p>I want only this div to have hover style</p>
</div>
</div>
</a>
</div>
You can use a descendant selector to select it. Here is some code:
<div id="ItemsEmployees">
<a id="anchor" href="">
<div class="itemHolder">
<div class="nameTitle"></div>
</div>
<div class="item">
<p>I want only this div to have hover style</p>
</div>
</a>
</div>
And then some CSS:
#anchor:hover .item {
/* Do stuff here */
}
What this does is select #anchor (which is link, I added an ID) and when it hovers, effects .item, which is the paragraph element.
Here's a JSBin demonstrating with font-size.
Using jquery.
$('#ItemsEmployees a').hover(function(){
$(this).css("background-color", "yellow");
})
Here div tag is parent and anchor tag is child of div tag, so all anchor tag inside the parent div tag is bindend with hover effects.
I have the following HTML page (see jsfiddle) that contains a parent div with three children divs. I'm expecting to see the three divs one next to the other. Instead, I see that each child div is contained inside its sibling.
My web page HTML contains this:
<div id="div1">
<div id="div11" />
<div id="div12" />
<div id="div13"/>
</div>
however when I do "Inspect element" (in both IE and Chrome) I get this:
<div id="div1">
<div id="div11">
<div id="div12">
<div id="div13"></div>
</div>
</div>
</div>
What's wrong with this markup?
<div> elements are not self-closing in HTML4 or HTML5; you need to add an end tag for each one. Thus this:
<div id="div1">
<div id="div11" />
<div id="div12" />
<div id="div13"/>
</div>
should be this:
<div id="div1">
<div id="div11"></div>
<div id="div12"></div>
<div id="div13"></div>
</div>
The browser will fill in the missing closing tags, which is why you've got the nested structure--the browser assumes that the tree was supposed to be nested and closes the tags appropriately.
You can always run your code through an HTML validator (e.g. http://validator.w3.org) to check for simple errors like this.
Div is an open-close tag.
you should specify the open tag <div> with the siblings as you did in the parent div .
here's the right markup
<div id="div1">
<div id="div11">
</div><!--end div11-->
<div id="div12">
</div><!--end div12-->
<div id="div13">
</div><!--end div13-->
</div><!--end parent div-->
I was just wondering if something like this would be possible:
<div id="inventory" >
Blabla <BR/>
Blabla
<div id="empty_slots">
<div class="shop_empty_slot"></div>
<div class="shop_empty_slot"></div>
<div class="shop_empty_slot"></div>
<div class="shop_empty_slot"></div>
<div class="shop_empty_slot"></div>
<div class="shop_empty_slot"></div>
<div style="clear: both"> </div>
</div>
</div>
JFiddle link
I'd like to have the #empty_slots div to be placed at the bottom of #inventory (without changing the position to absolute).
So far it only works when I set the position to absolute. But this is then causing issues
when I place more elements to the div. They're all being placed behind the #empty_slots instead of just expanding the #inventory height.
You've got it almost right, you should place the parent (#inventory) relative, which you already have. And place the child (#empty-slots) absolute instead of relative.
You said you didn't want to place it absolute, but without it, you can't achieve what you want. Is there are reason why you don't want it absolute?
Check the updated Fiddle.