Layout with tiles of 2 types - javascript

Is there a way to make this kind of layout with pure CSS or CSS + little JS? (click my avatar to enlarge reference image =)
My attempts to use floats and display options haven't succeed. See
http://jsfiddle.net/vdk2wns1/1/
Tiles will be used for images and iframes.
p.s. using external code (like Masonry or Isotope) is not appropriate here.

One approach would be:
#container {
max-width: 860px;
margin: 0 auto;
height: 100%;
height: 100%;
}
.block {
width: 23%;
height: 200px;
background: #ccc;
margin: 10px 1%;
float: left;
outline: 1px solid red;
}
.block:nth-of-type(3) {
clear: left;
}
.block:nth-of-type(5) {
float: right;
width: 48%;
height: 420px;
margin-top: -210px;
}
#media screen and (max-width: 640px) {
.block:nth-of-type(3) {
clear: none;
}
.block:nth-of-type(5) {
float: left;
width: 23%;
height: 200px;
margin-top: 10px;
}
}
Since it appears you wanted to adapt to different screen sizes, I changed the widths to percentages to make it responsive. This Fiddle shows the result.
If you didn't want to float Block 5 right, you could position it absolutely.
I expect that you can adapt the basic ideas to your needs.

Here is how I solve my problem after #bobdye shared his idea.
The final code (jsfiddle) is: Here
The solution appeared in 4 steps:(1). style large block with float: right;(2). clear float of the second small block;(3). set up negative margins for large block while in 3-cloumn layout;(4). make some adjusments to #media queries.
Hope this will help someone else =)

Related

How to lower an image vertically on a webpage

I have been defeated attempting to figure out how to lower an image on a website.
I have seen lots of people simply doing .img {...} and editing it that way, the problem is that I have more than one img that is using that tag so if I edit it that way, it will affect all tags that utilize it, which is not what I want. Simply put, I have an image that is displaying near the top of my website and I would simply want it lower. For the class, here is the code:
.bichon{
display: block;
margin-left: auto;
margin-right: auto;
height: 300px;
width: 850px;
}
for my class and then for the image insert:
<img src = "https://upload.wikimedia.org/wikipedia/commons/thumb/9/93/Bichon_Fris%C3%A9_-_studdogbichon.jpg/1200px-Bichon_Fris%C3%A9_-_studdogbichon.jpg" class = "bichon">
The image is centered horizontally but I simply want to lower it a bit vertically so it's not overshadowing my navigation bar.
Thanks.
.bichon {
display: block;
margin: 50px auto 0;
height: 300px;
width: 850px;
}
You can give it a margin at the top. This will lower your image. I suggest make margin-top equal to the height of your navigation bar.
.bichon{
display: block;
margin-top: 80px; //the height of your navigation bar
margin-left: auto;
margin-right: auto;
height: 300px;
width: 850px;
}

Add scrolling to Lightbox2

Heres an image of the issue I'm trying to resolve. I am working on my portfolio site; and I have images of some of my personal projects, all of them are the same width but some have different heights. Due to getting full page screenshots of my work, some of the images have a much greater height than others. Instead of allowing displaying all the images the same size and allowing scrolling in the modal window, it scales the images down to fit within the same height as all the others. This gives it an odd look cause some of the images get scaled down a lot. I would like to get all the images to display in the same width, and those that need it to allow scrolling to see the rest of the image. I tried to use overflow: scroll; on the .lightbox but that didn't help. I've also tried overflow-y. I would also like to disable the page in the background from being able to scroll, to allow the scrolling to be focused on the images that it is necessary on.
.lightbox {
position: absolute;
left: 0;
width: 100%;
z-index: 10000;
text-align: center;
line-height: 0;
font-weight: normal;
}
.lightbox .lb-image {
display: block;
min-width: 100%;
height: auto;
border-radius: 3px;
/* Image border */
border: 4px solid white;
}
.lightbox a img {
border: none;
}
.lb-outerContainer {
position: relative;
*zoom: 1;
width: 250px;
min-height: 250px;
margin: 0 auto;
border-radius: 4px;
/* Background color behind image.
This is visible during transitions. */
background-color: white;
}
Lightbox2 by default appends calculated width & height to the image and .lb-outerContainer. But you can override this by doing the following -
.lb-outerContainer {
width: 100% !important;
height: auto !important;
}
.lightbox .lb-image {
width: 100% !important;
height: auto !important;
}
I don't recommend this because this breaks the intended use of this plugin. I'm sure you'll find an alternative to lightbox2 that achieves what you're looking for. So you can consider this as a temporary fix.
EDIT: Here's a jsfiddle to see it work. https://jsfiddle.net/hsugx6wm/43/

Keep image stationary, that's location is relative to nearby text

In the very middle of the screen I have a piece of text, along with an image. When the text gets longer, the image is forced to move the right, which is what its supposed to do. But what I want it to do, is keep the image in the same spot, and make the text shift over to the left instead.
(I will also be adding more names so I need this fix to be universal, not like manually changing it for each piece of text.)
(It might be hard to see, but its noticeable, and yes I'm using a template...)
My site - Updated link
I tried messing with the HTML to get the margin-right once the page is fully loaded, then when it updates the text change the margin-right to that, but it did absolutely nothing.
Any help is appreciated, I have no idea how to fix this issue.
What about this?
#banner .content {
display: inline-block;
margin-right: 1%;
max-width: 95%;
padding: 6em;
position: relative;
text-align: right;
vertical-align: middle;
z-index: 1;
float: left;
width: 66%;
}
You can solve this issue by defining the width property for the containing content layer, and then floating the image and the text to the right.
For example, if you want the right-hand side of the text to be aligned to the center of the page your image + it's left-hand margin needs to be half the width of the containing #banner .content layer.
With your image being 18rem square with a left-margin of 3rem your containing #banner .content div needs to be 42rem wide ((18 + 3) * 2).
#banner .content {
position: relative;
width: 42rem;
height: 18rem;
text-align: right;
vertical-align: middle;
/* center div.content */
margin: 0 auto;
clear: both;
display: block;
z-index: 1;
}
#banner .content .image {
width: 18em;
height: 18em;
border-radius: 100%;
vertical-align: middle;
margin-left: 3rem;
display: inline-block;
}
Content inside .content slides to the right with the span.image locked to its right-hand edge. As long as the text-container's width (header) does not exceed half the width of `.content' it will remain right-aligned 3rem from images left-hand side. Avoid using css-padding for positioning control and use css-margin properties instead.

Make Dynamic square div for an memory game

What is the easiest way to make responsive dynamic div-s square, like in memory game (image below).
I have problem that user need to scroll down to see whole bottom part of game. How can I calculate (easiest solution) that whole my game is always visible. And also I want that to be dynamic (on image we can see 4x4 game, there should work for any number, 7x7, 10x10 and so on...).
Snippet of my code is: http://jsbin.com/nucovakevu/edit?html,css,output.
Everything in is added dynamically by JavaScript.
It also does not work where I do zoom in.
I am beginner in front-end developing and I mixed here bootstrap and plain css, which is probably not good solution.
Also I used this css trick to make my div as responsive square:
width: 23%;
height: 15vw;
It supposed to be something like:
width: 23%;
height: 23vw;
but I get rectangle in this case, because I obviously do not understand very well how this work.
Just call the function size(); whenever you want to update the grid.
Look at the comments within the code to understand better how this functions.
https://jsfiddle.net/xn5j4rcf/
window.addEventListener('load', function() {
size();
});
function size() {
var container = document.getElementById('container');
container.innerHTML = '';//don't want any extra boxes when you call this function again
var x = Math.floor(window.innerWidth / 50);//width of boxes that can fit; remove any decimal places
var y = Math.floor(window.innerHeight / 50);//height of boxes that can fit; remove any decimal places
for (var i = 0; i < x * y; i++) {//multiply x*y to get total area of boxes that can fit
var box = document.createElement('div');//create a div
box.className = 'box';//assign class
container.appendChild(box);//append
}
}
window.addEventListener('resize', function() {
size();//call the function again when the window is resized
});
.box {
width: 50px;
height: 50px;
padding: 4px;
-o-box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
display: inline-block;
border: 4px solid #fff;//border for margin but use border-box to make sure the width and height are still 50px
background-color: #ddd;
}
html,
body {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
#container {
font-size: 0;//remove annoying margin from display:inline-block;
}
<div id="container">
</div>
This approach can be achieved, but a little odd kinky skills and compatibility is not good:
DEMO: response divs with full screen
Here is the use of a table-cell flexibility and writting-mode to change the direction of the flow
css code blow:
html,body{
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
.wrap{
width: 100%;
height: 100%;
-webkit-writing-mode: vertical-lr;
display: table;
table-layout: fixed;
background-color: #000;
}
.row-wrap{
display: table-cell;
}
.row{
width: 100%;
height: 100%;
display: table;
table-layout: fixed;
-webkit-writing-mode: horizontal-tb;
}
.item{
display: table-cell;
height: 100%;
border: 1px solid #ffffff;
box-sizing: border-box;
}

CSS - displaying a dynamic height floated DIV - missing background image

My Goal:
Here is what I'm trying to accomplish. We have an list of categories that appear on a page. The number of categories is unknown. The description can be pretty much any size... yet we want a uniform look. So, we are using the dotdotdot plugin to put ellipses on the paragraphs. When you hover over the item, it should expand the description and show the full text.
I want that hover to float or overlay whatever is below it. Due to some of my layout items (see my NOTE below) my sccontainer element doesn't have a set height. It's dynamic based on the content... with a max-height set.
When I change that height to AUTO in the hover event (which causes the text to flow down and displays all the content), I lose the background on the sccontainer element.
Some pertinent CSS:
.sccontainer { width: 280px; zoom: 1; float: left; margin: 5px 10px; padding: 0; border: 1px solid #8697a1; -moz-border-radius: 5px; border-radius: 5px; -moz-box-shadow: 0 0 6px #777; -webkit-box-shadow: 0 0 6px #777; box-shadow: 0 0 6px #777; -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=6, Direction=90, Color='#777777')"; filter: progid:DXImageTransform.Microsoft.Shadow(Strength=6, Direction=90, Color='#777777'); position: relative; background: #fff url(http://imagecss.com/images/background.jpg) repeat-x left top; }
.sccontainer .parent { position: absolute; width: 270px; }
.sccontainer .image { margin: 5px; float: left; }
.sccontainer .image img { width: 48px; }
.sccontainer .icon { margin: 0; }
.sccontainer p { margin: 8px; padding: 0; max-height: 145px; }
.sccontainer h1 { line-height: 24px; display: inline-block; vertical-align: middle; width: 200px; height: 48px; padding: 0; margin: 5px 0 0 0; overflow: hidden; }
.sccontainer h1 a { padding: 0; font-size: 24px; color: #fff; font-weight: normal; }
.sccontainer .content { position: relative; height: 210px; padding: 0 5px; font-size: 15px; line-height: 22px; width: 270px; }
.sccontainer a:hover { text-decoration: underline; }
.sccontainer.hover { height: 250px; }
.sccontainer.hover .content { height: auto; }
.sccontainer.hover .content p { min-height: 135px; max-height: none; }
jsFiddle:
Here is a jsFiddle version of what I have right now. You can see this in action, if you hover over the text in the blue box. It's a bit large, so I used jsFiddle instead of putting all the bits here code tags...
http://jsfiddle.net/ztMM5/1/
And here is a mockup of what I'd like to see. Method 5a expands slightly to show the full content.... yets overlaps the red line. None of the other items move around or are affected.
NOTE: Sorry for the size of things. I've trimmed it down about as much as I can. Also, I am modifying an existing intranet website... it's 3rd party, so I have limited control of the source code - hence the table usage. :(
What I've Tried/Researched:
I believe the issue stems from the fact that my sccontainer item is floating, and doesn't have a height specified. That's why the image disappears.
I had a version that kept the background... but the sccontainer box didn't resize like we need... the text just overflowed it... rather ugly.
I don't know enough CSS to make this all work right. I'm not adverse to using jQuery to do more if needed.
I did work on a version that handled most of the hover using the :hover stuff... but it didn't work quite as well as the jQuery approach.
This answer may not solve your specific problem but it may help others with a similar scenario (working with tables makes difficult to render a clean layout in most cases.)
I ran into this issue before and this is how I solved it. It basically relies in an html nested div structure to achieve the expandability of the content without affecting the floating layout of the near elements :
<div id="wrapper" class="cf"><!--wrapper with border and CLEARED-->
<div class="sccontainer"><!--position relative-->
<div class="inner"><!--position absolute-->
<div class="content"><!--position relative-->
<!-- my content here -->
</div>
</div>
</div>
<!-- more containers etc-->
</div><!--END wrapper-->
First, we are going to apply the infamous clear-fix hack to the #wrapper container (use your preferred method):
.cf:after {
visibility:hidden;
display:block;
content:"";
clear:both;
height:0
}
* html .cf {
zoom:1
}
/* IE6 */
*:first-child+html .cf {
zoom:1
}
Then the style for the .sccontainer container :
.sccontainer {
width: 280px; /* or whatever - could be % for responsiveness */
padding-bottom:200px; /* any value to give height without using height ;) */
position: relative;
float: left;
margin: 5px 10px; /* or whatever */
overflow: hidden; /* this is important to keep all same height and big content out of sight */
z-index: 1; /* this is important too, see later */
background: white url("imagebackground.jpg") 0 0 repeat-x; /* need to explain? */
}
Then the .inner container, which actually will help to keep the layout in order if we hover the elements
.inner {
position: absolute; /* please don't move */
width: 100%; /* to fill the whole parent container */
height: 100%; /* same */
}
And the content :
.content {
position: relative;
background: white url("imagebackground.jpg") 0 0 repeat-x; /* not redundant though */
width: 100%; /* helps to fill the gaps with small content */
height: 100%; /* same, specially if using image backgrounds */
/* other styles, etc */
}
NOTE: we should apply same border-radius properties to the three containers and box-shadow to .sccontainer and .content for consistency
Now, what happens when we hover ?
.sccontainer:hover {
overflow: visible; /* show the full content */
z-index: 999; /* place me on top of the others if needed (which lower z-index, remember?) */
}
.sccontainer:hover .content {
height: auto; /* as it really is, including background image */
}
NOTES : this effect will happen regardless if the content's height is smaller than the parent container's height. You may not like the effect mostly if you are using borders and shadows (could be shown as smaller box inside the parent container) so we could add an extra class to .sccontainer like
<div class="sccontainer withhover">
and apply the hover effects only if that class exist like
.sccontainer.withhover:hover {
overflow: visible;
z-index: 999;
}
... and use a bit of jQuery to remove that class for shorter content, so it won't be affected :
jQuery(document).ready(function ($) {
$(".sccontainer").hover(function () {
var $contentHeight = $(this).find(".content").height();
if ($(this).innerHeight() > $contentHeight) {
$(this).removeClass("withhover");
}
});
});
See JSFIDDLE

Categories

Resources