Given the following
<style>
.container {
overflow: hidden;
height: 100%;
width: 90%;
margin: 15px auto 0px auto;
}
.square
{
float: left;
width: 80px;
height: 80px;
display: block;
background-image: url('commonimgs/empty_icon.png');
background-repeat: no-repeat;
margin: 2px;
padding-top: 3%;
margin-left: 5px;
}
</style>
<div>
<div class="container">
<div class="square">1R</div>
<div class="square">2R</div>
<div class="square">3R</div>
<div class="square">4R</div>
<div class="square">5R</div>
<div class="square">6</div>
<div class="square">7</div>
<div class="square">8</div>
<div class="square">9</div>
<div class="square">10</div>
</div>
</div>
I am trying to make a tiled layout that auto centers and adapts to screen size. What I can't figure out is how to get the squares to spread evenly across the container.
getting...
+------------------------------------+
| |
| +------------------------------+ |
| | | |
| | +----+ +----+ +----+ | |
| | | | | | | | | |
| | | | | | | | | |
| | +----+ +----+ +----+ | |
| | | |
| | +----+ +----+ +----+ | |
| | | | | | | | | |
| | | | | | | | | |
| | +----+ +----+ +----+ | |
| | | |
| | +----+ +----+ +----+ | |
| | | | | | | | | |
| | | | | | | | | |
| | +----+ +----+ +----+ | |
| | | |
| +------------------------------+ |
| |
+------------------------------------+
wanting
+------------------------------------+
| |
| +------------------------------+ |
| | | |
| | +----+ +----+ +----+ | |
| | | | | | | | | |
| | | | | | | | | |
| | +----+ +----+ +----+ | |
| | | |
| | +----+ +----+ +----+ | |
| | | | | | | | | |
| | | | | | | | | |
| | +----+ +----+ +----+ | |
| | | |
| | +----+ +----+ +----+ | |
| | | | | | | | | |
| | | | | | | | | |
| | +----+ +----+ +----+ | |
| | | |
| +------------------------------+ |
| |
+------------------------------------+
Use the table and create 3 columns, each column should have DIV inside. You can easily align the DIV in center by using
<td align="center">
Add padding: 3%; to .container
.container {
overflow: hidden;
height: 100%;
width: 90%;
margin: 15px auto 0px auto;
background:#dbdbdb;
padding: 3%;
}
DEMO
Or text-align:center to .container
.container {
overflow: hidden;
height: 100%;
width: 90%;
margin: 15px auto 0px auto;
background:#dbdbdb;
padding: 3%; text-align:center
}
DEMO 2
Also change display:block to display:inline-block in .square
change or add these:
.square{
position: relative;
width: 27%;
padding-top: 3%;
margin-left: 4%;
margin-right: 1%;
margin-top: 5%;
margin-bottom: 0%;
}
.container{
padding-bottom: 5%;
}
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.
The content div contains an X amount of divs inside of it, but what i would wand is that the divs inside the content div to float(open for sugestions) from top to bottom instead of left to right.
and when the divs in the content div reaches it max-height the divs inside the content div overflow to the right and start over from top to bottom (as shown in the example below), and so, stretch the content divs width to fit a new row.
I also would like to make it work in mobile browsers.
css---------------------------------------:
.content {
float: left;
min-width: 100px;
height: 95%;
}
.block {
float: left;
width: 100px;
height: 100px;
}
html---------------------------------------:
<div class="content">
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
</div><!-- end content -->
My questions are:
1: how can i let the divs(inside the content div) float from top to bottom.
2: when the content div reached the max-height how can i let the divs float next to eachother and start a new vertical row.
+ ==== content ==== + + ==== content ====================== +
| +---------------+ | | +---------------+ +---------------+ |
| | | | | | | | | |
| | div 1 | | | | div 1 | | div 4 | |
| | | | | | | | | |
| | | | | | | | | |
| | | | | | | | | |
| +---------------+ | | +---------------+ +---------------+ |
| +---------------+ | | +---------------+ +---------------+ |
| | | | | | | | | |
| | | | | | | | | |
| | div 2 | | when more then 3 divs vertacly | | div 2 | | div 5 | |
| | | | i wand it to expand horizontaly | | | | | |
| | | | | | | | | |
| | | | | | | | | |
| +---------------+ | | +---------------+ +---------------+ |
| +---------------+ | | +---------------+ |
| | | | | | | |
| | | | | | | |
| | div 3 | | | | div 3 | |
| | | | | | | |
| | | | | | | |
| | | | | | | |
| +---------------+ | | +---------------+ |
+ ================= + + =================================== +
Thank you in advance!
You can do so using display: flex; and flex-direction: column
Here is a demo: http://jsfiddle.net/hpy3vt1s/
This demo is using the <div id="container"> as indicator for available space, which is 100% of the view port height. You will have to set a height or max-height to controll the max items per row. When you'd set max-height: 330; exactly 3 items would be in one row/column: Here is a demo showing this
body
{
margin:0;
}
#container
{
display: flex;
flex-direction: column;
flex-wrap: wrap;
height: 100vh;
}
#container .box
{
width: 100px;
height: 100px;
margin: 5px;
background-color: silver;
flex: 0 0 auto;
}
HTML:
<div id="container">
<div class="box">1</div>
<div class="box">2</div>
....
</div>
Information on Browser-Support: http://caniuse.com/#feat=flexbox (IE10+)
Nice article on flexbox: http://css-tricks.com/snippets/css/a-guide-to-flexbox/
Referencing this question:
Is there a way to use use text as the background with CSS?
I was able to make one line of text appear behind another line of text.
What I am having trouble figuring out is how to make multiple lines of background text.
Here's the pattern i want to use:
http://nanocluster.umeche.maine.edu/scope/bgScope
So inserting it directly didn't work, everything was on one line.
OK, I thought, I'll use a <pre></pre> set of tags, but that made the background text invisible.
So then I tried taking out the pre tags, and putting in <br> on each new line. But it still nothing. Next I tried putting
font-family: Courier;
font-size: 18px;
color:#167c11;
into the style sheet, but, the text in the background is still invisible.
Have a look at the page where i am trying to get newlines into the text as a background.
http://nanocluster.umeche.maine.edu/scope/
Can anyone see what I am doing wrong? How can I get multiple lines of text as a background in CSS?
You use absolute positioning and z-index to add the background effect.
body{
background:black;
color:green;
}
#background{
position:absolute;
top:0px;
left:0px;
z-index:-1;
-webkit-user-select: none; /* Chrome/Safari */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* IE10+ */
/* Rules below not implemented in browsers yet */
-o-user-select: none;
user-select: none;
cursor:default;
}
#content{
color:red;
font-family: Courier;
}
The rules:
-webkit-user-select: none; /* Chrome/Safari */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* IE10+ */
/* Rules below not implemented in browsers yet */
-o-user-select: none;
user-select: none;
cursor:default;
give it a background effect making it so the text cannot be selected and the cursor is default instead of text.
The html is very simple:
<div id="background">
<pre>
+---------+---------+---------+---------+---------+---------+---------+---------+---------+---------+
| | | | | | | | | | |
| | | | | | | | | | |
| | | | | | | | | | |
| | | | | | | | | | |
+---------+---------+---------+---------+---------+---------+---------+---------+---------+---------+
| | | | | | | | | | |
| | | | | | | | | | |
| | | | | | | | | | |
| | | | | | | | | | |
+---------+---------+---------+---------+---------+---------+---------+---------+---------+---------+
| | | | | | | | | | |
| | | | | | | | | | |
| | | | | | | | | | |
| | | | | | | | | | |
+---------+---------+---------+---------+---------+---------+---------+---------+---------+---------+
| | | | | | | | | | |
| | | | | | | | | | |
| | | | | | | | | | |
| | | | | | | | | | |
+---------+---------+---------+---------+---------+---------+---------+---------+---------+---------+
| | | | | | | | | | |
| | | | | | | | | | |
| | | | | | | | | | |
| | | | | | | | | | |
+---------+---------+---------+---------+---------+---------+---------+---------+---------+---------+
| | | | | | | | | | |
| | | | | | | | | | |
| | | | | | | | | | |
| | | | | | | | | | |
+---------+---------+---------+---------+---------+---------+---------+---------+---------+---------+
| | | | | | | | | | |
| | | | | | | | | | |
| | | | | | | | | | |
| | | | | | | | | | |
+---------+---------+---------+---------+---------+---------+---------+---------+---------+---------+
| | | | | | | | | | |
| | | | | | | | | | |
| | | | | | | | | | |
| | | | | | | | | | |
+---------+---------+---------+---------+---------+---------+---------+---------+---------+---------+
| | | | | | | | | | |
| | | | | | | | | | |
| | | | | | | | | | |
| | | | | | | | | | |
+---------+---------+---------+---------+---------+---------+---------+---------+---------+---------+
_____________________________________________________________________________________________________
t1:288 ms t2:480 ms Display Mode: Normal: Peak Detect Vectors: OFF Grid = FULL
</pre>
</div>
<div id="content">
I am content and I am above the grid!
</div>
Check out this Demo
Are you looking for something like this ?
http://jsfiddle.net/adriantombu/LNCXB/
I made some changes to your html and css, you can see what it does on the jsfiddel above.
body {
background-color:#000000;
font-family: Courier;
font-size: 18px;
color:#167c11;
}
#container {
position: relative;
color:#FF0011;
}
#background {
color:#167c11;
position: absolute;
top: 0;
left: 0;
z-index: -1;
}
#background pre {
margin: 0; padding: 0
}
#content {
position: absolute;
top: 0;
left: 0;
}
I'm trying to create a div with images inside it, and there is space between them. For example, I want the space between them is 2px, I can use margin:1px; so it will become 2px when one's left-margin meet other's right-margin, same for top and bottom. But there is also space between image and div's border, so the div will become like this:
+------------------------------------------+
| |
| +---------------+ +---------------+ |
| | | | | |
| | | | | |
| | | | | |
| | IMG1 | | IMG2 | |
| | | | | |
| | | | | |
| | | | | |
| +---------------+ +---------------+ |
| DIV |
| |
| +---------------+ +---------------+ |
| | | | | |
| | | | | |
| | IMG3 | | IMG4 | |
| | | | | |
| | | | | |
| | | | | |
| +---------------+ +---------------+ |
| |
+------------------------------------------+
When what I'm actually trying to do, is this:
+---------------+---+---------------+
| | | |
| | | |
| | | |
| IMG1 | | IMG2 |
| | | |
| | | |
| | | |
+---------------+ +---------------+
| DIV |
| |
+---------------+ +---------------+
| | | |
| | | |
| IMG3 | | IMG4 |
| | | |
| | | |
| | | |
+---------------+---+---------------+
How to do this, without set style for every single image?
If adding classes or IDs is not an option and you do not want to style the images individually. Then you could try using img:nth-child(n) or img:nth-of-type(n).
First assign a right margin to every odd image:
img:nth-of-type(odd){
margin-right: 1px;
}
Then a left margin to every even:
img:nth-of-type(even){
margin-left: 1px;
}
And finally a top margin to every image but the first two:
img:nth-of-type(n+3){
margin-top: 2px;
}
You could also leave out one of the left or right margins and increase the one you leave in... thereby reducing the size of your styles a little.
Here an example: jsfiddle. In this example the container div has a set width of two images plus margins, and the images are floating left within.
jsfiddle example
You can set your bottom margins and align your left column images with the float property in your CSS:
img {
margin-bottom: /*your margin*/;
float: left;
}
And then move the right column images to the right of the div container:
nth-child(even) {
float: right;
}
give all images a same class & define padding for it
try this
<div>
<img src="1.jpg" class="myimage"/>
<img src="2.jpg" class="myimage"/>
<img src="3.jpg" class="myimage"/>
<img src="4.jpg" class="myimage"/>
</div>
CSS
.myimage {
display:block;
padding:2px 2px 0 0;
}
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