For some reason div elements change their parents during rendering in unexpected way, reproducible in Firefox and Chrome.
E.g.
<div class="main">
<div class="slot"/>
<div class="slot"/>
</div>
<div class="footer"></div>
Firefox debugger will show as this at runtime as:
<div class="main">
<div class="slot"><div class="slot"/></div></div>
<div class="footer"></div>
</div>
When I remove .slot elements(see the code attached), everything renders as expected(#footer place in tree after rendering is same as in the source).
Code:
http://pastebin.com/3j3aQFdh
The problem is that you use empty divs: like that
<div />
You should try to change your code to use valid divs with empty content:
<div></div>
Related
I am using bootstrap visibility classes as follows on my webpage:
<div class="hidden-sm">
<div id="lrg-div-A"></div>
</div>
<div class="hidden-lrg">
<div id="lrg-div-B"></div>
</div>
<div class="hidden-md">
<div id="lrg-div-C"></div>
</div>
The visibility classes work and are hidden in the viewport where required. But, when I look at the markup in the browser's developer tools, I still see the markup for the hidden divs. For example, on large screens, "lrg-div-B" is not seen in the viewport, but the markup is still seen in the HTML tab. Is there anyway to remove it from the markup as well, similar to what 'dispaly: none' does?
display: none doesn't remove it from the markup, but it does remove it from the document flow so that it doesn't take up space. You can remove a node with javascript using remove() or removeChild() but mind you can't get it back again (unless you store it and re-append it later).
console.log('Hidden node: ', document.querySelector('.hidden-sm'));
//Hidden node: <div class="hidden-sm">…</div>
console.log('Before remove(): ', document.getElementById('lrg-div-B'));
// Before remove(): <div id="lrg-div-B">large B</div>
document.getElementById('lrg-div-B').remove();
console.log('Removed node: ', document.getElementById('lrg-div-B'));
// Removed node: null
.hidden-sm {
display: none;
}
<div class="hidden-sm"> <!-- hidden but still in markup -->
<div id="lrg-div-A">large A</div>
</div>
<div class="hidden-lrg">
<div id="lrg-div-B">large B</div> <!-- removed from markup -->
</div>
<div class="hidden-md">
<div id="lrg-div-C">large C</div>
</div>
It is not supposed to remove the elements from markup. CSS handles how DOM looks not its structure. You need to use a bit of Javascript if you actually want to remove the DOM elements.
I'm using Bulma. Consider the following HTML
<div class="container">
<div class="columns">
<div class="column has-text-centered">
<h1 class="title">
Welcome! :)
</h1>
<div class="buttons">
Login now!
Register now!
</div>
</div>
</div>
</div>
Now, the title is centered but the buttons aren't. Of course, if we set display: block; to the div which groups together the buttons, they get centered as well. But I couldn't find any example and I'm not sure if that's the way to go here.
Is there a more "Bulma-like" way of solving this problem?
I'm not sure about that.
I tried to reproduce the issue but it seems that the buttons are centered.
<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.4.0/css/bulma.css" rel="stylesheet"/>
<div class="container">
<div class="columns">
<div class="column has-text-centered">
<h1 class="title">
Welcome! :)
</h1>
<div class="buttons">
Login now!
Register now!
</div>
</div>
</div>
</div>
Maybe there are other rules that overrides this behavior?
EDIT:
It seems that in the same version between 0.4.0 and 0.8.0 they take advantage of the flex box layout.
In the example that you shared the buttons class has the display: flex-box but it miss the property justify-content: center; for centering the content of that div.
I don't know if it is the expected behavior or a bug.
Here a working example: https://jsfiddle.net/gix_lg/73vmofqa/1/
Have you tried " is-vcentered" instead of "has-text-centered" ?
Also, you can use empty columns by using a div with a class="column" to create horizontal space around .column elements, or use .is-centered on the parent .columns element
Have you tried to inspect your page to see the css?
I have this:
<div class="block3">
<div class="surround">
<div class="s_title">
<h3>Title</h3>
</div>
<div class="block_content">
<div class="content"> </div>
</div>
</div>
</div>
In my example I can't add content directly in HTML (blocks rendered by default in PHP), so I need to add in CSS.
The hard part of this is that I need to add text only in block3 element, after <h3> (.s_title:after will affect all s_title, so it will not work for me.)
Is there any way to do this?
Just add .block3 in front of your selector like how you would limit selection of any other element to some container element:
.block3 .s_title:after
I don't understand why the fiddle at http://jsfiddle.net/zHH4D/
doesn't show the "to the right" outside the red area and to the right,
but inside the red block?!
I can put the div outside the parent div and this kind of works but it just doesn't make sense to me.
Where am i thinking wrong?
You have a typo:
<div style="width:340px;float:left;background-color:#f00;">
<div>above ok</<div> <!-- TYPO -->
<div>under ok</div>
</div>
This causes the browser to interpret your markup as best as it can, which results in this (copied from Chrome inspector):
<div style="width:340px;float:left;background-color:#f00;">
<div>above ok<!--<div-->
<div>under ok</div>
</div>
<div style="float:left;">
to the right?
</div>
</div>
Here's a fixed version:
<div style="width:340px;float:left;background-color:#f00;">
<div>above ok</div> <!-- Notice the closing div tag -->
<div>under ok</div>
</div>
We've just started to redesign our site following the responsive web design + mobile first philosophy and guidelines.
In a particular page, we are facing the following situation: in the "mobile view" of the page we want to have the elements arranged as the left part of the image shows.
That's why in the HTML these elements are declared as follows:
<div id="container">
<div id="A">A</div>
<div id="B">B</div>
<div id="C">C</div>
<div id="D">D</div>
<div id="E">E</div>
</div>
Up to this point, all of it is straightforward. The problem is that, using media queries, for higher screen resolutions we want to rearrange the items as shown in the right part of the image.
The general question, which solves our particular problem with this page, is: is it possible to float arbitrary elements to each of the two columns without having to change the HTML markup between the two versions? A pure CSS solution would be much desired.
Note: the height of the elements is unknown, and the width is percentual.
EDIT: For clarification, and regarding our particular case, we need the item E to be attached under item B, and not vertically aligned to D. This fiddle shows what we don't want.
You could float A, C and D to the right. However you might need to apply overflow:auto to B and E. Also note, that if B is higher than A, C is getting pushed down to align accordingly.
Fiddle
Could you do something like this?
<div id="container">
<div id="A">A</div>
<div id="B" class = "left">B</div>
<div id="C">C</div>
<div id="D">D</div>
<div id="E" class = "left">E</div>
</div>
<style>
.left { float:left; }
</style>
You can just set float:left in the media query you want and ignore it in the other one.
Edit:
In response to OP's feedback that B and D were not sitting directly on top of each other, revising the code to float: right instead fixes this. ie
<div id="container">
<div id="A" class = "right">A</div>
<div id="B" >B</div>
<div id="C" class = "right">C</div>
<div id="D" class = "right">D</div>
<div id="E" >E</div>
</div>
<style>
.right { float:right; }
</style>
For the normal layout, you should do it like this.
Both divs should be left floated.
<div id="container1">
<div id="left">
<div id="B">B</div>
<div id="E">E</div>
</div>
<div id="right">
<div id="A">A</div>
<div id="C">C</div>
<div id="D">D</div>
</div>
</div>
The problem is that the mobile version uses another arrangement.
So one solution is to make onther version for the mobile page and hide #container1 (and vice versa for the other site).
<div id="container2">
<div id="A">A</div>
<div id="B">B</div>
<div id="C">C</div>
<div id="D">D</div>
<div id="E">E</div>
</div>