I'm moddifiyng a webpage through css styles and I got stuck trying to join two divs.
<div class="grid_0">
<div class="grid_0">
<div class="wallpaper" itemtype="xyz""></div>
<div class="wallpaper" itemtype="xyz""></div>
<div class="wallpaper" itemtype="xyz""></div>
</div>
<div class="clear"></div>
<div class="grid_0"></div>
<div class="clear"></div>
<div class="grid_0">
<div class="wallpaper" itemtype="xyz""></div>
<div class="wallpaper" itemtype="xyz""></div>
<div class="wallpaper" itemtype="xyz""></div>
</div>
The main container has a flex property (because I want the width of the page to flex with different display resolutions “out there”) and 100% width.
I want to merge the contents of FIRST and LAST grid_0 divs, but between them lay three other divs: two spacers and an add box (the one in the middle).
Notice that the div in the middle (the add box) shares the same ID with the ones I want to merge.
Hiding the two spacers and the add box (using the :nth-child property) didn't do the trick..
Here's a “diagram” that shows the layout.
How can I move the three thumbs in the last grid_0 into the first grid_0 through CSS?
EDIT:
I suspect this isn't doable through CSS..
I might need to use a java script.
you can not manipulate the DOM with CSS, you need JS or something similar.
You will need to try something like this:
$("#id-of-first-element").append( $("#id-of-last-element") );
$("#id-of-last-element").html('');
Related
(There's a similar question here, but I am too much of a noob yet to translate this onto Bootstrap)
What I want is to have an area on the page between "header" and "footer" (let's call it "body"), which may have a
some fixed section, like BS4 "row", put on the top,
some variable content, consisting of several BS "rows", AND aligned
vertically on the middle of what is left of the body (or of the body
itself)
Can it be done in a responsive manner, and without JS (using only Bootstrap 4 CSS) ?
I've tried some stuff:
<body>
<div id="root" class="container">
<div style="height: 100%;">
<div><h1>HEADER</h1></div><hr>
<div style="min-height: 60%;">
<div class="h100">
<div>some badge</div><br>
<div>
<div class="row justify-content-between">
<div class="col-3">Item #2</div>
<div class="col-3 text-right">
<div>some stats</div>
</div>
</div>
<div class="">
<div class="row justify-content-center">
<div class="col text-center"><h3>THIS SHOULD BE IN THE MIDDLE OF A BLANK SPACE</h3></div>
</div>
<div class="row justify-content-center">
<div class="col-4 text-right"><button class="btn btn-link">it's just below and left</button></div>
<div class="col-4 text-left"><button class="btn btn-link">it's just below and right</button></div>
</div>
</div>
</div>
</div>
</div><hr>
<div class="footer">FOOTER</div>
</div>
</div>
</body>
(https://jsfiddle.net/f93mhdbr/) but as long as I add "d-flex" onto "body" div, or any of it's children, all the previous "row"/"col"-based layout turns into horrible mess ! (see https://jsfiddle.net/f93mhdbr/2/)
I suspect this is due to Bootstrap itself using Flexbox for column and rows,
but maybe any solution exists?
I will try to work on improving this question, I know it's very poor, but I right now I am too much in a despair to work it all out...
UPDATE: added links to whatever I was trying to reproduce
You need to use the flex property to achieve it. Using flex-grow here will make your variable element to grow and fill the remaining height of its container, if there is any. Then all is left to do is set align-items-center on the element to align it on the x-axis.
Here is the Fiddle
Please note I added background-colors so it's easier for you to see how much space each element uses, or use an inspector.
You can set any fixed height for the header, footer and content-top. The height of content and content-remaining will adapt responsively, because they have the property flex-grow: 1 set on them. Here's an example.
To explain further, because the container wrap has a min-height: 100-vh, the content element will grow to fill the entire viewport relative to the rest of the flexible items inside the wrap container. The same logic applies to content-remaining, the only difference is that its parent is the content element and not the wrap container.
As last, I added the IE fix for the min-height property on flex-items. It's a known bug and a quick and reliable fix is to wrap it in a separate flex container.
Hopefully this was helpful to you, if you have any questions left please comment on this answer.
I am looking to have all the elements in my div (which is a bootstrap column actually) while keeping the text in there left-align.
So my code looks like this :
I want the p, span and a to be horizontally centered, while their content (the texts) should be left-align.
<div class='col-sm-4 col-md-4'>
<p>...</p>
<span>...</span>
<a>...</a>
</div>
(the number of columns varies, I have 3 here, but that could be more really).
What I tried to do in my css was to add some left-padding in percentages according to the number of columns. It does work quite well, but I am sure there is an easier way to achieve this.
by the way, dont forget to add "class=" ;).
If i understood you right, there are two possibilities.
first:
<div class="col-md-12">
<div class="col-md-4 .col-md-offset-4">
<p>...</p>
<span>...</span>
<a>...</a>
</div>
</div>
This would create an offset of "col-md-4". Thus, 4 - 4 - 4, it would be centered.
Another, neater solution would be:
<div class="col-md-12">
<div class="wrapper" style="width:300px;position:relative;margin-left:auto;margin-right:auto;">
<p>...</p>
<span>...</span>
<a>...</a>
</div>
</div>
That way you create a wrapper that is centered through setting the margins left and right automatically.
For that solution you need to provide the position(relative etc, but not static) and the width!
hope it helps.
I have a series of elements within a row-fluid and span12 that are span4. I want to be able to output as many of these as necessary and have them automatically line up in columns of 3. The problem im having is that this happens, but there is an offset (the uncleared float offset).
Is there a way to do this without counting each box and every 3rd one closing the previous row and starting a new one?
<div id="content" class="clearfix row-fluid">
<div id="main" class="span12 clearfix" role="main">
<div class="row-fluid">
<div class="span4">Test</div>
<div class="span4">Test</div>
<div class="span4">Test</div>
<div class="span4">Test</div>
<div class="span4">TEst</div>
</div>
</div>
</div>
This is practically unavoidable if your boxes have varied height. You can get around this issue by using the Masonry jQuery plugin.
Otherwise, you can use a fixed height for your boxes.
This happens because floated elements fall out of the normal HTML document flow and default to this behaviour when some elements are taller than their siblings.
I'll just show you a jsfiddle I've created to illustrate what I'm trying to achieve:
http://jsfiddle.net/vraG7/3/embedded/result/
Here's the code for that part:
<div class="row">
<div class="twelve columns">
<h2 class="first_column category_title">Nome Categoria</h2>
<div class="row">
<div class="nine columns thumbnail"><img
src="http://www.placehold.it/125x125" alt=""></div>
<div class="three columns date"><time
datetime="2013-02-28" >28<br>02<br>2013</time></div>
</div>
<div class="row">
<div class="twelve columns">
<h2 class="post-title">Titolto del post</h2>
</div>
</div>
</div>
</div>
</div> <!-- category-column -->
What I'm trying to do is to have the 125x125 image and the date box to its right to be the same width as the orange box with "Nome categoria". I thought I did everything right, but apparently I'm missing something.
It is hard to say what exactly the problem is. You are overriding a lot of foundation styles. height, margin, etc. on a bunch of divs.
1) You are applying the background color that you hope to align to to an <h2>. I suggest applying it to the containing <div>. the h2 will never to do the edge of the div, therefore you will not be able to align them.
2) for the date you applying the color to the background. it is possible they are already aligned. if you change the above.
3) for troubleshooting nested grids, it is easy to add the panel class to all of them, this will increase the spacing but let you see the relationship of each nested grid to each other.
this is on foundation 4, but might be useful:
http://foundation.zurb.com/grid-example2.php
Here is my fiddle:
http://jsfiddle.net/XKs8H/1/
And here's my problem:
I'm creating a wiki using MediaWiki. I'm trying to avoid using a lot of extensions and third-party stuff in my installation.
What I'm using is a MediaWiki Template to generate the content shown in my example. Because it's a template, it renders once for every time it's called. So, for each character in the example, the template first creates a left-floating DIV for the name tab and a DIV below that for the content of the character's bio. I can make that part work with absolute positioning, but then the rest of the wiki page content shows up below the absolute div.
Example:
<div id="tab1">Tab 1</div>
<div id="bio1">Tab 1's bio</div>
<div id="tab2">Tab 2</div>
<div id="bio2">Tab 2's bio</div>
<div id="pagebody">Rest of the page's content</div>
Each tab should float next to each other. The bio should show up below the row of tab divs, and pagebody should show up below everything.
I'd recommend something like this:
<div class="tab">
<div class="tab-name">Tab 1</div>
<div class="bio">Tab 1's bio</div>
</div>
<div class="tab">
<div class="tab-name">Tab 2</div>
<div class="bio">Tab 2's bio</div>
</div>
<div class="clearfix">Rest of the page's content</div>
Where the tabs themselves are floating, and clearfix is the common float-clearing page body.