I know it's a simple problem but I couldn't put words on it in my researches, so here's a picture of what I want:
Basically, I have a list of features which I want to display that way, which could be seen as a vertical list where rows are overlapping. I tried using :nth-of-type(2n) css selector to alternate left and right alignments, which is currently working, and make the overlapping by setting vertical negative margins, but this makes all items move up, so there's no overlapping.
Also, since I want the design to be responsive, it should just display as a centered vertical list on mobile.
What's the better way to achieve that?
NB: Don't worry about what's inside the gray boxes, it doesn't serve the purpose of this question.
Code:
.feature {
width: 50%;
text-align: center;
margin: 0 auto;
}
.feature:nth-of-type(2n + 1) {
margin-left: 0;
margin-right: auto;
}
.feature:nth-of-type(2n) {
margin-left: auto;
margin-right: 0;
/*margin-top: -60px*/
}
You can use translation to translate the right boxes to the bottom or the left one to the top
.container {
display: flex;
flex-wrap: wrap;
padding-bottom: 50px;
}
.feature {
flex: 0 1 45%;
margin: 5px 2%;
text-align: center;
min-height: 100px;
border: 2px solid;
box-sizing: border-box;
}
.feature:nth-of-type(2n) {
transform: translateY(50px);
}
<div class="container">
<div class="feature"></div>
<div class="feature"></div>
<div class="feature"></div>
<div class="feature"></div>
</div>
I have made some changes to the code of #Temani Afif, I just made it a bit more like how you wanted, By adding some more styling.
Also I have added the mobile view for this
Just add this CSS,
.feature:nth-of-type(2n) {
transform: translateY(100px);
}
.feature:nth-of-type(1n) {
margin-bottom: 100px;
}
For Mobile Responsiveness
#media(max-width:600px){
.feature{
flex:100%;
}
.feature:nth-of-type(2n) {
transform: translateY(0);
}
.feature:nth-of-type(1n) {
margin-bottom: 0;
}
}
Credits : #Temani Afif
Related
I am attempting to tile a webpage with div elements of various sizes. However, I am running into an issue with once x number of div elements have filled the width of the screen the following div is placed below the previous 'row', rather than being floated to fit into space between elements in the previous 'row'. The code below better demonstrates what I mean; I'd like the 'game' div to be floated to fit into the space above where it is currently positioned.
h1 {
color: white;
}
.center {
display: flex;
justify-content: center;
align-items: center;
text-align: center;
}
.container {
display: inline-block;
}
.default {
margin: 1em;
float: left;
}
/* For hover text */
.hover_img {
width: 100%;
height: 100%;
position: relative;
float: left;
}
.hover_img h4 {
color: white;
}
.hover_img:hover img {
opacity: .2;
}
.hover_img:hover .center_text {
display: block;
}
.center_text {
position: absolute;
top: 50%;
left: 0;
display: none;
font-weight: bold;
text-align: center;
}
img {
margin: 0;
}
.rectangle-tile-horizontal {
height: 15em;
width: 35em;
}
.red {
background-color: rgba(255, 63, 63, 0.8);
}
#game, #game img {
width: 30em;
height: 30em;
}
#app, #app img {
width: 40em;
height: 35em;
}
<div class="container">
<div class="rectangle-tile-horizontal red center default">
<h1><b>Projects</b></h1>
</div>
<div class="rectangle-tile-horizontal hover_img default" id="app">
<img src="http://cohenwoodworking.com/wp-content/uploads/2016/09/image-placeholder-500x500.jpg">
<div class="center_text"><h4>Web App</h4></div>
</div>
<div class="hover_img default" id="game">
<img src="http://cohenwoodworking.com/wp-content/uploads/2016/09/image-placeholder-500x500.jpg">
<div class="center_text"><h4>Breakout</h4> </div>
</div>
I'm afraid what you want to do is actually re-order your divs to create a space-filling layout. To the best of my knowledge, using only CSS for this is difficult, if not outright impossible.
I suggest you take a look at this SO post, or perhaps even the Bulma framework is what you want.
If, however, you move away from re-ordering the containers automagically and instead look towards a solution that elastically adapts the width of each container to fill the available space while maintaining its "order" (first, second, third), I am sure CSS will be a viable solution. If you require assistance, please use the search or ask anew.
Create a style for your div class or id like
.className
{display:inline;}
and use it in your each div
Hope this will help you
An example of this
http://jsfiddle.net/JDERf/
When I place two different divs side by side with a sidebar, and have only margin to the right on the first one (that is on the left). And the right one don't have one.
How do I create a good structure so I don't have to manually add style="margin:0" to the right HTML element?
To demonstrate this I have created this illustration:
You can use nth-child(odd) to target every odd item in the order of your items.
Since you didn't provide any actual code example, I have put together a structure I felt appropriate for such a design.
Here's an example I knocked up: http://codepen.io/michaelpumo/pen/OMgEKp
In the CodePen, I am using Jade for HTML and SCSS for the CSS. I recommend using them, but if you want the compiled code, it's below.
HTML
<div class="grid">
<div class="grid__left">
<div class="grid__hero"></div>
<div class="grid__item"></div>
<div class="grid__item"></div>
</div>
<div class="grid__right">
<div class="grid__sidebar"></div>
</div>
</div>
CSS
* {
box-sizing: border-box;
}
body {
padding-top: 10px;
}
.grid {
width: 600px;
overflow: hidden;
margin: 0 auto;
}
.grid__left, .grid__right {
float: left;
}
.grid__left {
width: 400px;
}
.grid__right {
width: 200px;
padding-left: 10px;
}
.grid__hero, .grid__item, .grid__sidebar {
background: #000;
}
.grid__hero {
width: 100%;
height: 200px;
margin: 0 0 10px 0;
}
.grid__hero {
width: 100%;
height: 200px;
margin: 0 0 10px 0;
}
.grid__item {
float: left;
clear: none;
width: 195px;
height: 200px;
margin: 0 10px 10px 0;
}
.grid__item:nth-child(odd) {
margin-right: 0;
}
.grid__sidebar {
width: 100%;
height: 410px;
}
Hope it makes sense. The real meat of the matter is on the .grid__item divs, that have a margin right, but this being removed for every odd one, which results in the effect I think you're after.
In any case, it looks like you're after a grid system. There are many out there; most popular being Bootstrap. I strongly recommend using one of them: http://getbootstrap.com
Personally, I use a SCSS based grid called Neat: http://neat.bourbon.io/
I want to place two pictures at the same place on the webpage - to overlay each other (later on I'll add some webkit animations for them to move in two different directions, but the startpoint should be the same). I have the following css layout (here's jsfiddle). The CSS here looks like this:
.intro{
background-color: #b0e0e6;
width: 100%;
margin: 0 auto;
font-size: 1.5em;
padding: 5px;
}
.intro:before,.intro:after {
content: " ";
display: table;
}
.intro:after {
clear: both;
}
.image{
width: 50%;
background-color: #aaaae6;
float: left;
}
img{
margin: 0 auto;
display: block;
}
.text{
width: 50%;
background-color: #cccccc;
float: left;
}
as you can see in the fiddle, now two pictures are one below the other, so I've decided to modify the css and add this:
img{
margin: 0 auto;
display: block;
position:absolute;
left: 10%;
top: 25%;
}
but that causes the not visible at all... How can I preserve the size of that div and just put two images directly in it?
As a starting point for consideration: in CSS3, a single element can have multiple, stacked background images. Example:
.my-container {
background:
url(grid.png),
url(building.jpg)
}
Here's a codepen.
In CSS2 and below, you can use z-index, absolute, width, and height etc.
I have been trying to use display: inline-block; more often. I have two divs or images or whatever at inline-block level. I am vertically aligning them at middle. However, I would like to have one float left, and one float right - which breaks the spell. For example: a logo in a header on the left and a mobile navigation symbol on the right. I might as well just say that absolute positioning is not an option:
A FIDDLE is here: Thanks.
HTML
<header class="global-header">
<div class="logo">logo</div>
<div class="hamburger">☰</div>
</header>
CSS
* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
html, body {
margin: 0;
}
.global-header {
position: relative;
width: 100%;
float: left;
padding: 1em;
background-color: rgba(0,0,0,.2);
}
.logo, .hamburger {
display: inline-block;
vertical-align: middle;
background-color: #f06;
padding: 1em;
}
.logo {
width: 12em; height: 5em;
}
.hamburger {
width: 3em; height: 3em;
}
One way of addressing this is to use text-align:justify. For this to work, the content needs to be more than one line long, so we have to add a second line of content using the :after pseudo-element. Then it's all about stopping the second line taking up any vertical space.
Add this to your css:
.global-header {
text-align:justify;
line-height:0;
}
.global-header:after {
content: '\A0';
display: inline-block;
width:100%;
line-height:0;
}
See http://jsfiddle.net/RZsyx/
Depending on what you are really putting in the logo and hamburger elements, you may need to apply a line-height to each of them.
Would the following give the desired result?
.hamburger {
width: 3em; height: 3em;
position:relative;
left:100%;
margin-left:-15em;
}
The -15 comes from hamburger width + logo width
I suppose you want to do a header for a mobile page.
you should try to use the box-model with box-orient and box-flex.
a good guide can be found here (it s in german though):
http://www.html5rocks.com/de/tutorials/flexbox/quick/
at the bottom is some kind of CSS-fiddle-box, so you can try if it
is the right choice for you.
the only drawback I can think of, is that you have do fill in another
element between .logo and .hamburger which gets the box-flex: 1.
leading you:
<header>
<div class="logo boxes">logostuff</div>
<div class="fill boxes"></div>
<div class="hamburger boxes">E</div>
</header>
with the following (additional) css
.boxes {
display:-moz-box;
background:#ff0000;
}
.global-header {
float: none;
display:-moz-box;
-moz-box-orient: horizontal;
-moz-box-align: center;
}
.fill {
-moz-box-flex:1;
}
So, right to the point, here's what I want (minus the poor quality)...
http://www.hbperspective.com/alt3/site.jpg
And here's what I've got...
http://www.hbperspective.com/alt3/
I'm trying to get those two transparent columns to be centered as they are in the pic. With this CSS layout I'm having a heck of a time figuring out how to do that without causing all kinds of other problems. Here is my styling...
* {
padding: 0;
margin: 0;
}
body {
background: #000000 url('background_div.png') repeat-y center top;
color: #ffffff;
font-family: Arial, Helvetica, sans-serif;
margin: 0 auto;
}
#wrapper {
background: url('background_header_transparent.png') no-repeat center top;
width: 100%;
display: table;
overflow: hidden;
}
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 100%;
background: #000000;
filter:alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
}
.container {
float: left;
position: relative;
margin-top: 100px;
}
.content {
position: relative;
float: left;
}
#contentColumn{
width: 540px;
}
#sidebarColumn {
width: 190px;
margin-left: 20px;
float: left;
display: inline;
}
#contentColumn .content {
width: 500px;
padding: 10px;
}
#sidebarColumn .content {
width: 170px;
padding: 10px;
}
* html #contentColumn .overlay { height: expression(document.getElementById("contentColumn").offsetHeight); }
* html #sidebarColumn .overlay { height: expression(document.getElementById("sidebarColumn").offsetHeight); }
The markup is pretty simple, probably be just easier to look at it from the link provided. So, like I said I'm not really sure what to do at this point to get it working the way I want. Any ideas?
div#container {
width:500px; /* Same width as both columns */
margin:auto; /* Will center the container */
}
div#col1 {
float:left; /* allows side-by-side columns */
width:250px;
}
div#col2 {
float:left;
width:250px;
}
div.clear {
clear:both; /* Stops columns from extending past border of container */
}
<div id="container">
<div id="col1"></div>
<div id="col2"></div>
<div class="clear"></div>
</div>
And for extra credit, avoid using expressions :) Instead, perform any needed logic like that with javascript, via a framework like jQuery.
There are so many gotchas creating CSS columns I would suggest using a framework instead of rolling your own. There are lots of gotchas which are browser defendant and that you may not see unless you check in IE, FF, Safari, Opera, etc.
A few good frameworks are:
YUI Grids
Blueprint CSS
Blocks (new experimental)
Rules for centering things in CSS:
The thing you're centering must be assigned a width
The margins on that block must be assigned to auto
I have it working on your site in FF3 and IE7 using
div#wrapper {
width:800px;
margin: auto;
}
div#contentColumn
{
margin-left: 20px;
}
If you want to fix up the logo (see top right) then add an extra container div immediately inside the wrapper, and apply the above width/margin to the container (as suggested by Jonathan Sampson.)