Is there a flexbox solution 3 columns on a large screen...
+-----+ +----------+ +-----+
| | | | | |
| A | | B | | C |
| | | | | |
| | | | +-----+
+-----+ | |
+----------+
that would change to ...
+-----+ +----------+
| | | |
| A | | B |
| | | |
| | | |
+-----+ | |
+-----+ | |
| | +----------+
| C |
| |
+-----+
on smaller screens, where A, B and C can have variable height. Basically B would be the main content and A and C would be the sidebars.
Try this:-
<body class="HolyGrail">
<header>…</header>
<div class="HolyGrail-body">
<main class="HolyGrail-content">…</main>
<nav class="HolyGrail-nav">…</nav>
<aside class="HolyGrail-ads">…</aside>
</div>
<footer>…</footer>
</body>
Related
I've trawled through various 'solved' dynamic positioning queries but cannot find anything that helps.
I have the following page...
+-----------------------------------------------------------------------+
| +-----------+ +------------------+ +------------------+ +-----------+ |
| | IMG 1 | | | | | | IMG 4 | |
| | width:20% | | IMG 2, width:30% | | IMG 3, width:30% | | width:20% | |
| | aspect | | aspect ratio 4:3 | | aspect ratio 4:3 | | aspect | |
| | ratio | | | | | | ratio | |
| | 3:4 | +------------------+ +------------------+ | 3:4 | |
| | | | | |
| +-----------+ +-----------+ |
| +-----------+ +-----------+ |
| | IMG 5 | | IMG 6 | |
| | width:20% | | width:20% | |
| | aspect | | aspect | |
| | ratio | | ratio | |
| | 3:4 | | 3:4 | |
| | | | | |
| +-----------+ +-----------+ |
| +-----------+ +-----------+ |
| | IMG 7 | | IMG 8 | |
| | width:20% | | width:20% | |
| | aspect | | aspect | |
| | ratio | | ratio | |
| | 3:4 | | 3:4 | |
| | | | | |
| +-----------+ +-----------+ |
+-----------------------------------------------------------------------+
(1) I want the images to resize based on the window width only, i.e. if the user resizes the window vertically I don't want the images resized.
(2) Also, I only want this resizing to happen until the window is 50% of the screen width, then they will remain the same size, i.e. IMG 1 width would remain at 10% of the screen width.
I can achieve (1) for the top row. The problem is for IMGs 5 -8 since the 'top' value is calculated from the window height.
Is there some way I can achieve what I want dynamically?
I can't use calc() since it bases its result for top based on window height.
Also, there appears to be no CSS for screen.width and JS is not dynamic for resizing.
Any help would be greatly appreciated. (further images are below might help explain what I mean)
magic²
Full Screen
+-----------------------------------------------------------------------+
| +-----------+ +------------------+ +------------------+ +-----------+ |
| | IMG 1 | | | | | | IMG 4 | |
| | width:20% | | IMG 2, width:30% | | IMG 3, width:30% | | width:20% | |
| | aspect | | aspect ratio 4:3 | | aspect ratio 4:3 | | aspect | |
| | ratio | | | | | | ratio | |
| | 3:4 | +------------------+ +------------------+ | 3:4 | |
| | | | | |
| +-----------+ +-----------+ |
| +-----------+ +-----------+ |
| | IMG 5 | | IMG 6 | |
| | width:20% | | width:20% | |
| | aspect | | aspect | |
| | ratio | | ratio | |
| | 3:4 | | 3:4 | |
| | | | | |
| +-----------+ +-----------+ |
| +-----------+ +-----------+ |
| | IMG 7 | | IMG 8 | |
| | width:20% | | width:20% | |
| | aspect | | aspect | |
| | ratio | | ratio | |
| | 3:4 | | 3:4 | |
| | | | | |
| +-----------+ +-----------+ |
+-----------------------------------------------------------------------+
width: 50% height:100%
+-------------------------------------------+
| +------+ +---------+ +---------+ +------+ |
| |IMG 1 | | IMG 2 | | IMG 3 | |IMG 4 | |
| | | | | | | | | |
| | | +---------+ +---------+ | | |
| +------+ +------+ |
| +------+ +------+ |
| |IMG 5 | |IMG 6 | |
| | | | | |
| | | | | |
| +------+ +------+ |
| +------+ +------+ |
| |IMG 7 | |IMG 8 | |
| | | | | |
| | | | | |
| +------+ +------+ |
| |
| |
| |
| |
| |
| |
| |
| |
| |
+-------------------------------------------+
width: 50% height: 50%
+-------------------------------------------+
| +------+ +---------+ +---------+ +------+ |
| |IMG 1 | | IMG 2 | | IMG 3 | |IMG 4 | |
| | | | | | | | | |
| | | +---------+ +---------+ | | |
| +------+ +------+ |
| +------+ +------+ |
| |IMG 5 | |IMG 6 | |
| | | | | |
| | | | | |
| +------+ +------+ |
| +------+ +------+ |
| |IMG 7 | |IMG 8 | |
+-------------------------------------------+
width: 33% height: 50%
+-------------------------+
| +------+ +---------+ +--|
| |IMG 1 | | IMG 2 | | |
| | | | | | |
| | | +---------+ +--|
| +------+ |
| +------+ |
| |IMG 5 | |
| | | |
| | | |
| +------+ |
| +------+ |
| |IMG 7 | |
+-------------------------+
So this method isn't perfect, but in order to do this you need a value that represents the size of the screen without using %. In CSS there are 2 values you can use, these are vw and vh, for your purposes you will want vw for the width of the viewport.
vw is equal to the viewport width / 100
vh is equal to the viewport height / 100
These values are dynamic, if the window is resized so are these, so in order to keep constant proportions you can use either vw or vh, here's an example.
.square
{
width: 2vw;
height: 2vw;
background-color: lightblue;
position: relative;
top: 5vh;
left: 5vw;
}
<div class="square">
</div>
You could do more advanced calculations by working out the aspect ratio of the screen, but you get the idea.
Found what I required, it was the javascript onresize event.
<html>
<head>
</head>
<body onresize="myFunction()">
<span id="demo"><img src="img1.jpg" width="20%"></span>
<script>
function myFunction() {
if (window.innerWidth > (screen.width/2))
{
var txt = "<img src='img1.jpg' width='20%'>";
} else {
var txt = "<img src='img1.jpg' width='";
txt = txt + screen.width/10;
txt = txt + "'>";
}
document.getElementById("demo").innerHTML = txt;
}
</script>
</body>
</html>
This resizes the image # 20% window.innerWidth until window.innerWidth <= screen.width, then the image size remains the same # 10% screen.width.
I made a layout with Bootstrap. At desktop resolutions it looks like this:
+---------------+ +-------------+
| | | |
| A | | |
| | | |
+---------------+ | |
| | | C |
| B | | |
| | | |
+---------------+ | |
| | | |
| | +-------------+
| | xxxxxxxxxxxxxxx
| D | xxxxxxxxxxxxxxx
| | xxxxxxxxxxxxxxx
| | xxxxxxxxxxxxxxx
+---------------+ +-------------+
| | | |
| E | | F |
| | | |
+---------------+ +-------------+
| |
| G |
| |
+-------------+
On mobile devices it looks like this:
+---------------+
| |
| A |
| |
+---------------+
| |
| B |
| |
+---------------+
| |
| |
| C |
| |
| |
+---------------+
| |
| |
| |
| D |
| |
| |
+---------------+
| |
| E |
| |
+---------------+
| |
| F |
| |
+---------------+
| |
| G |
| |
+---------------+
My problem is that I need to get rid of the space between C and F indicated by the X's.
Here is my markup:
http://pastebin.com/KTJj72Z0
on div F put negative top margin. It'd pull it above.
like so
#media(min-width:768px){
#F {
margin-top: -100px;
}
}
I have the following table with entries
+--------------------------------------------+----------+
| menu_entry | position |
+--------------------------------------------+----------+
| ADMINISTRATION::USERMANAGEMENT::USER | 2 |
| DEMO::CHART::EXAMPLE | 1 |
| PROJMGMT::PROJSTRG::LOP | 2 |
| ADMINISTRATION::USERMANAGEMENT::RIGHTSMMGT | 1 |
| PROJMGMT::PROJSTRG::MEETINGS | 1 |
| DEMO::GRID::CELLEDIT | 1 |
| DEMO::GRID::ROWEDIT | 3 |
| DEMO::DATAMGMT::GROUPING | 1 |
| DEVELOPER::APPS::ADDAPP | 2 |
| DEVELOPER::APPS::APPTEST | 1 |
| DEMO::GRID::LOCKINGDEMO | 4 |
| DEMO::GRID::FILTERDEMO | 2 |
+--------------------------------------------+----------+
I want to order by menu_entry first and second by position. I do that with the following Statement
select menu_entry,position from app_names order by menu_entry, position;
But it only sorts by menu_entry and not by Position.
Here's the return of my statement:
+--------------------------------------------+----------+
| menu_entry | position |
+--------------------------------------------+----------+
| ADMINISTRATION::USERMANAGEMENT::RIGHTSMMGT | 1 |
| ADMINISTRATION::USERMANAGEMENT::USER | 2 |
| DEMO::CHART::EXAMPLE | 1 |
| DEMO::DATAMGMT::GROUPING | 1 |
| DEMO::GRID::CELLEDIT | 1 |
| DEMO::GRID::FILTERDEMO | 2 |
| DEMO::GRID::LOCKINGDEMO | 4 |
| DEMO::GRID::ROWEDIT | 3 |
| DEVELOPER::APPS::ADDAPP | 2 |
| DEVELOPER::APPS::APPTEST | 1 |
| PROJMGMT::PROJSTRG::LOP | 2 |
| PROJMGMT::PROJSTRG::MEETINGS | 1 |
+--------------------------------------------+----------+
As you can see, DEMO::GRID::... is not sorted right.
You should probably order by SUBSTRING_INDEX(menu_entry, '::', 1) that extracts the part of the string at the left of the first :: or by SUBSTRING_INDEX(menu_entry, '::', 2), depending on what you are after:
select menu_entry, position
from app_names
order by
SUBSTRING_INDEX(menu_entry, '::', 1), position;
Please see fiddle here.
I'm trying to create a column layout by filling in fixed-width divs inside a width:100% container div, letting them "wrap" when there is no room left in the container, thus creating the columns. To change the # of columns, I just change the width of the contained divs. Those contained divs can be pretty tall..
Here is what I have now:
+------------------------------+
|+----+ +----+ +----+ +----+ |
|| | | | | | | | |
|| | | | | | | | |
|| | | | | | | | |
|+----+ +----+ +----+ | | |
| | | |
| | | |
| | | |
| +----+ |
|+----+ +----+ +----+ +----+ |
|| | | | | | | | |
|| | | | | | | | |
|| | | | | | | | |
|+----+ +----+ +----+ +----+ |
| |
See this big waisted space where the sized divs wrap and align on the bottom of the tallest div of the previous line? I guess that is how HTML's box-model works.
But in this very case, what I would like to obtain is this:
+------------------------------+
|+----+ +----+ +----+ +----+ |
|| | | | | | | | |
|| | | | | | | | |
|| | | | | | | | |
|+----+ +----+ +----+ | | |
|+----+ +----+ +----+ | | |
|| | | | | | | | |
|| | | | | | | | |
|| | | | | | +----+ |
|+----+ +----+ +----+ +----+ |
| | | |
| | | |
| | | |
| +----+ |
| |
Any idea?
Check out something like this, it's almost identical to Pinterest...
http://www.wookmark.com/jquery-plugin
I am struggling a bit trying to achieve the following layout.
I have the following divs:
----------------wrapper--------------
| ---------------info-------------- |
| | ----detail-- ---summary-- | |
| | | | | | | |
| | | | | | | |
| | | | ------------ | |
| | | | ----graph--- | |
| | | | | | | |
| | | | | | | |
| | ------------ ------------ | |
| --------------------------------- |
| |
| ---------------info-------------- |
| | ----detail-- ---summary-- | |
| | | | | | | |
| | | | | | | |
| | | | ------------ | |
| | | | ----graph--- | |
| | | | | | | |
| | | | | | | |
| | ------------ ------------ | |
| --------------------------------- |
| |
-------------------------------------
How can I use position and display on my divs to get my page to show correctly?
i have created a sample of what you want.
http://jsfiddle.net/FFU2Y/
Hope it helped.
just try to edit the css of what you like it to be or add div.
Try to use 960.css grid layout !
http://960.gs/
or another way would be using Bootstrap from Twitter, which provides grid solutions, css reset, and many more awesome stylings.
http://twitter.github.com/bootstrap/