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-->
Related
So, what I am trying to do, is put a div inside a div. The text editor reads the second div's end as the first one's.
This kind of stumped me, so I haven't really tried anything else
<div id="navbar">
</div>
<div id="else">
<div>
</div>
<div id="project1">
</div>
</div>
The last div should go with the first one.
<div id="navbar">
<div id="outer">
<div id="innerOne">
</div>
<div id="innerTwo">
</div>
</div>
</div>
Be sure to make good use of indenting and spacing if you want to make things easier on yourself!
If you notice in your code when you declare the first div you immediately close it again and start a new one, every other div wants to be nested inside it.
<div id="navbar">
A Div on it's own
</div>
<div id="else">
A new div on the same 'level' as the last
<div>
a Child of the else div
</div>
<div id="project1">
second Child of the else div
</div>
end of else
</div>
Figuring the nesting is easier when you:
Indent the code, and
Add comments to track the (matching) closing tags
<div id='navbar'> // open navbar
<div id='else'>
</div> //end else
<div id='project1'>
</div> //end project1
</div> //end navbar
(my code block thing is being buggy, but I hope you understand what I was saying...)
In HTML after most opening tag should come the content and then the closing tag
in your case ...
There are self-closing tags also, which don't need a closing one for example: <img src="">
Your code is wrong, because after the <div id="else"> you have another div opening tag, but there should be a closing tag before it, like this:
<div id="navbar">
</div>
<div id="else">
</div>
<div id="project1">
</div>
Nesting divs should look like this:
<div id="navbar></div>
<div id="else">
<div id="project1"></div>
</div>
Like if I had:
<div class="body">
<div class="logo">
<img...>
</div>
<p>some text</p>
</div>
Could I go...
<div class="body">
<div class="logo">
<img...>
</div class="logo">
<p>some text</p>
</div>
...so that it knows to end the second div and not the first?(this is a light example of what I am trying to do, but I think you get it)
(and if it is possible, a way using just HTML or css)
If your motive is to identify the closing tag effectively means, possibly you can use the comments
<div class="body">
<div class="logo">
<img...>
</div> <!-- logo div closed here -->
<p>some text</p>
</div>
Proper formatted code will help to find the closing tag hierarchy.
Nope.
Closing tags always close the most recently opened matching tag. In your example, it simply works as desired. And the alternative would not be valid markup: tags cannot overlap.
I don't think you can, but great news coming: you don't need to!
The moment you put a </div>, than the closest (going backwards) div (and therefore its class/classes) will close.
Indentation helps understanding how it works:
<div class="first">
<div class="second">
<div class="third"> <!-- Next closing div closes "third" -->
</div> <!-- Next closing div closes "second" -->
</div> <!-- Next closing div closes "first" -->
</div>
Another example:
<div class="first">
<div class="second"> <!-- Next closing div closes closest one, in this case "second" -->
</div>
<div class="third"> <!-- Next closing div closes "third" -->
</div> <!-- Next closing div closes "first" -->
</div>
Notes:
You might want to look into learning how to style element's children, like all the <p> elements in all <div> elements which have the class="cool".
This could avoid the need to close and reopen the same classes multiple times.
This game teaches child selection in a great and visual way: http://flukeout.github.io
Lastly, note that there currently is no parent selector in CSS. What that is (Er.. would be) you'll figure out yourself soon after learning about child selection.
I am trying to make a CSS style for a website However in their HTML they do not use IDs for containers. Some of these containers have adverts, while others do not. I want to display:none the containers adverts. The adverts themselves have IDs, and so does the normal content.
This is what their HTML looks like:
<div id="wrapper">
<div class="container">
<div id="advert"> Advert </div>
</div>
<div class="container">
<div id="content"> Normal stuff </div>
</div>
<div class="container">
<div id="advert2"> Advert </div>
</div>
</div>
What you are referring to is selecting the ID's Parent in the DOM structure. You cannot do this with CSS at the moment but with CSS4 there should be a way to select a parent in the DOM. At the moment is is done with JQuery. To get the parent div for the 'advert' ID would be...
$( "#advert" ).parent().css( "display", "none" );
I'm getting some strange CSS behavior when using display:table,table-row,table-cell
When a table-cell contains an empty div, it pushes down the content of the cell next to it.
<html>
<body>
<div style="height:200px">
<div style="display:table">
<div style="display:table-row">
<div style="display:table-cell">
<div style="height:100px;width:200px;overflow-y:scroll"></div>
</div>
<div style="display:table-cell">
<div style="height:100px;width:100px;overflow-y:scroll">Why am I getting pushed down?!?</div>
</div>
</div>
</div>
</div>
<div style="height:200px">
<div style="display:table">
<div style="display:table-row">
<div style="display:table-cell">
<div style="height:100px;width:200px;overflow-y:scroll">A</div>
</div>
<div style="display:table-cell">
<div style="height:100px;width:100px;overflow-y:scroll">Suddenly I'm not getting pushed down?!?</div>
</div>
</div>
</div>
</div>
</body>
</html>
If I put some content in the DIV, behavior stops. Is this a bug? Affects Firefox and Chrome. If it's not a bug, how do I get around it?
To get around this problem, set vertical-align:top on the empty td.
FIDDLE
Different browsers can use different systems it is hard to say that if this is a bug or your browser
acting differently or could be a server not updating to check this inspect element and check if code matches
I have a layout built using CSS display:table (inline, row, cell, etc). I'm doing local development on it with apache, and when I refresh the page, two of the div containers are incorrectly lined up. However, if I uncheck and re-check display:table-row, they correct themselves, and the page displays correctly.
http://jsfiddle.net/fNNKT/
You can see the HTML and CSS at the jsFiddle above. It's actually not working there either, so maybe I'm doing something wrong, and can use help with that.
<div class="cabinet-container">
<div class="mode-bar">
<div class="mode-bar-left">
<div class="mode-bar-item">logo</div>
<div class="mode-bar-item active">Dispense</div>
<div class="mode-bar-item">Inventory</div>
</div>
<div class="mode-bar-right schedule">
<div class="mode-bar-item">Sign-Out</div>
</div>
</div>
<div class="table"></div>
<div class="left-container"></div>
<div class="center-container">
<div class="search-container">
<div class="table-cell">
<div class="search-field"></div>
</div>
</div>
<div class="nav-button-center-container">
<div class="table-cell">
</div>
</div>
<div class="list">
<div class="table-cell">
<div class="list-item-center-container"></div>
<div class="list-item-center-container"></div>
<div class="list-item-center-container-partial"></div>
</div>
</div>
<div class="nav-button-center-container-down-active">
<div class="table-cell"></div>
</div>
</div>
<div class="footer">
<div class="button-group table-border-5">
<div class="button-secondary">Dispense Non-Drug</div>
<div class="button-secondary">Sort By: Last Name</div>
</div>
<div class="button-group-right table-border-5">
<div class="button-primary">New Clinical Order</div>
</div>
</div>
</div>
Is your question related to .mode-bar-left and .mode-bar-right wrapping onto two lines? If so, the problem relates to whitespace. Think of two images displayed inline, side by side. If there's whitespace between the tags in the code, there will be whitespace displayed in the browser.
Solution #1:
Take your logic one level higher up in the DOM. Change the display value for both mode-bar elements to table-cell (instead of the current inline-table). Then change the .mode-bar-item elements to display: inline-block (instead of table-cell).
Solution #2:
A faster, less elegant solution is to add float: left to .mode-bar-left.
On the topic of elegance, I strongly recommend that you consider some more semantically meaningful tags than just div. For example, .mode-bar-left is clearly a list (ul perhaps?) and the .mode-bar-item elements are clearly list items (li).
Are you using any javascript/jQuery? On a recent project of my own, I was having a similar issue and all I had to do was move my custom lightbox script from the to right before the tag, and it seemed to fix the issue. Sometimes javascript can be wonky like that. I don't understand why, but that's the way it is.