First of all i know it would be better to have the css in a external file, but this is just for testing. i've created a banner which include several columns with images. In order to make this responsive i'm trying to use percentages. However i've come to a issue regarding the wrapper div, when applying auto height. It seem to just make it 100% instead of the same height as the actual content? How can i make the wrapper div same height as the content(images)?
JSFiddle link: http://jsfiddle.net/z41nknL3/
<head>
<style>
.wrapper {
width: 100%;
height: auto;
}
.item {
float: left;
}
.double-size {
width: 66.6666%;
height: auto;
}
.normal-size {
float: left;
width: 33.3333%;
height: auto;
display: inline-block;
}
.double-size .column-big {
box-sizing:border-box;
width: 100%;
height: auto;
padding: 0px 2px 0px 0px;
}
.normal-size .column-small-1 {
box-sizing:border-box;
width: 100%;
height: 50%;
padding: 0px 0px 2px 2px;
}
.normal-size .column-small-2 {
box-sizing:border-box;
width: 100%;
height: 50%;
padding: 2px 0px 0px 2px;
}
.column-content {
height: 100%;
position: relative;
overflow: hidden;
}
.column-content .meta-info-doub {
box-sizing:border-box;
position: absolute;
height: auto;
width: 100%;
bottom:0;
right: 0;
padding: 40px;
}
.column-content .meta-info-norm {
box-sizing:border-box;
position: absolute;
height: auto;
width: 100%;
bottom:0;
right: 0;
padding: 20px;
}
.title-double {
font-family: 'Open Sans', sans-serif;
font-size: 20px;
line-height: 1.65;
background: #161616;
background: rgba(22, 22, 22, 0.5);
color: #fff;
display: inline;
padding: 4px 0;
margin: 0;
-webkit-box-shadow: 7px 0 0 rgba(22, 22, 22, 0.5), -7px 0 0 rgba(22, 22, 22, 0.5);
box-shadow: 7px 0 0 rgba(22, 22, 22, 0.5), -7px 0 0 rgba(22, 22, 22, 0.5);
text-transform: uppercase;
}
.title-normal {
font-family: 'Open Sans', sans-serif;
font-size: 17px;
line-height: 1.65;
background: #161616;
background: rgba(22, 22, 22, 0.5);
color: #fff;
display: inline;
padding: 4px 0;
margin: 0;
-webkit-box-shadow: 7px 0 0 rgba(22, 22, 22, 0.5), -7px 0 0 rgba(22, 22, 22, 0.5);
box-shadow: 7px 0 0 rgba(22, 22, 22, 0.5), -7px 0 0 rgba(22, 22, 22, 0.5);
text-transform: uppercase;
}
.date-double {
font-family: 'Open Sans', sans-serif;
display: inline;
color: #fff;
font-size: 11px;
text-shadow: 0 1px 0 #222;
text-transform: uppercase;
margin-bottom: 11px;
display: block;
}
.date-normal {
font-family: 'Open Sans', sans-serif;
display: inline;
color: #fff;
font-size: 11px;
text-shadow: 0 1px 0 #222;
text-transform: uppercase;
margin-bottom: 11px;
display: block;
}
.column-content .content-image{
height: auto;
width: 100%;
background-size: 100%;
display:block;
-moz-transition: all .5s;
-webkit-transition: all .5s;
transition: all .5s;
}
.column-content .content-image:hover {
-moz-transform: scale(1.2);
-webkit-transform: scale(1.2);
transform: scale(1.2);
}
#media all and (max-width: 768px) {
.normal-size {
float: none;
width: 100%;
margin-top: 3px;
}
.double-size {
float: none;
width: 100%;
}
}
</style>
</head>
<body>
<div class="wrapper">
<div class="item double-size">
<div class="column-big">
<div class="column-content">
<img src="http://blognewswp.gotheme.net/wp-content/uploads/2014/08/shutterstock_190029455_supersize-640x400.jpg" href="#" id="img-zoom" class="content-image">
<div class="meta-info-doub">
<h3 class="date-double">23. Oktober 2015</h3>
<h3 class="title-double">Post 1</h3>
</div>
</div>
</div>
</div>
<div class="item normal-size">
<div class="column-small-1">
<div class="column-content">
<img src="http://blognewswp.gotheme.net/wp-content/uploads/2014/08/shutterstock_190029455_supersize-640x400.jpg" href="#" id="img-zoom" class="content-image">
<div class="meta-info-norm">
<h3 class="date-double">23. Oktober 2015</h3>
<div class="info-title"><h3 class="title-normal">Post 2</h3></div>
</div>
</div>
</div>
<div class="column-small-2">
<div class="column-content">
<img src="http://blognewswp.gotheme.net/wp-content/uploads/2014/08/shutterstock_190029455_supersize-640x400.jpg" href="#" id="img-zoom" class="content-image">
<div class="meta-info-norm">
<h3 class="date-double">23. Oktober 2015</h3>
<div class="info-title"><h3 class="title-normal">Post 3</h3></div>
</div>
</div>
</div>
</div>
</div>
</body>
Try :
.wrapper {
position:absolute;
}
And I have updated the JSFiddle to remove some unnecessary divs:
http://jsfiddle.net/z41nknL3/1/
P.S.: the background: red; on .wrapper is to show you its height.
Try to remove height: 100% from .column-content
Related
I am trying to put the horizontal bar beneath the text title where is inside of the container <div> but the horizontal bar just effect in the width, but not moving up to the position...
I am hesitating that should I create one more div. I have been trying to move up the hr by top with vh or even margin, but that is not workable.
What I want is to move the hr below the title.
How I want the hr to move up
Original
.topcon {
background-color: #f6f5f5;
position: relative;
width: 250px;
height: 250px;
border: 15px;
padding: 50px;
margin: 180px auto 150px auto;
border-radius: 20px;
}
.pattern-card {
position: relative;
right: 50px;
border-radius: 20px 20px 0px 0px;
bottom: 50px;
}
.victor {
position: relative;
background-color: #ffffff;
border: 3px solid #ffffff;
border-radius: 50%;
display: inline-block;
margin-left: 50px;
margin-right: auto;
bottom: 110px;
width: 50%;
}
.user-name {
position: absolute;
width: 30%;
left: 20vh;
top: 40vh;
text-align: center;
display: inline;
margin: 0 auto 0 auto;
font-family: "Kumbh Sans", sans-serif;
font-weight: 700;
color: #2d3248;
font-size: 18px;
}
.user-age {
position: absolute;
width: 20%;
right: 15.5vh;
top: 40vh;
text-align: center;
display: inline;
margin: 0 auto 0 auto;
font-family: "Kumbh Sans", sans-serif;
font-weight: 700;
color: #969696;
font-size: 18px;
}
.user-location {
position: absolute;
width: 25%;
left: 22.5vh;
top: 45.5vh;
text-align: center;
display: inline;
margin: 0 auto 0 auto;
font-family: "Kumbh Sans", sans-serif;
font-weight: 700;
color: #969696;
}
hr {
border-top: 1px solid #969696;
width: 100%;
bottom: 50vh;
}
<div class="topcon">
<img class="pattern-card" src="images/bg-pattern-card.svg" alt="pattern card at the frame." />
<img class="victor" src="images/image-victor.jpg" alt="image for Victor" />
<p class="user-name">Victor Crest</p>
<p class="user-age">26</p>
<p class="user-location">London</p>
<hr /> 80K Followers 803K Likes 1.4K Photos
</div>
Try with this
hr{
border-top: 1px solid #969696;
margin-left: -50px;
width: 350px;
margin-top: -15px;
}
change the margin top and width and margin left according to your div width and height
You can also dismiss the horizontal ruler (line) entirely, and use CSS border-top. I tried and got this:
body {
font-family: "Open Sans", sans-serif;
}
body * {
box-sizing: border-box;
}
.card {
width: 300px;
height: 320px;
margin: 20px auto;
overflow: hidden;
text-align: center;
display: flex;
flex-direction: column;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.11);
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.11);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.11);
}
.card-header {
height: 105px;
background: #44d3d9;
}
.card-image {
margin-top: -50px;
}
.card-image img {
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
width: 100px;
height: auto;
border: 4px solid #fff;
}
.card-content h2 {
font-size: 14px;
margin-bottom: 5px;
}
.card-content h2 span {
color: #6d6d6d;
padding-left: 6px;
}
.card-content .location {
margin: 0;
font-size: 13px;
color: #6d6d6d;
}
.card-footer {
display: flex;
margin-top: auto;
height: 90px;
border-top: 1px solid #efefef;
}
.card-footer > div {
flex-grow: 1;
display: flex;
flex-direction: column;
border-right: 1px solid #efefef;
}
.card-footer > div:last-child {
border-right: none;
}
.card-footer ul {
margin: auto 0;
padding: 0;
list-style-type: none;
}
.card-footer ul li {
color: #6d6d6d;
font-size: 11px;
}
.card-footer ul li.count {
color: #111111;
font-size: 16px;
font-weight: 600;
}
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Open+Sans&display=swap" rel="stylesheet">
<div class="card">
<div class="card-header"></div>
<div class="card-image">
<img src="https://randomuser.me/api/portraits/men/91.jpg" alt="">
</div>
<div class="card-content">
<h2>Victor Crest <span>26</span></h2>
<p class="location">London</p>
</div>
<div class="card-footer">
<div>
<ul>
<li class="count">80K</li>
<li>Folowers</li>
</ul>
</div>
<div>
<ul>
<li class="count">803K</li>
<li>Likes</li>
</ul>
</div>
<div>
<ul>
<li class="count">1.4K</li>
<li>Photos</li>
</ul>
</div>
</div>
</div>
I simply want to make a centered section clickable. I used margin auto to center my section but now the margins are clickable too. Should I use flex-box or something to center the section so that there's no more margin or there is an other way? What's the best practice here?
<main>
<a href="#">
<section>
<div class="content">
<h2>some stuff</h2>
<h1>title</h1>
<img src="img/arrow.svg" alt="arrow" width="30">
</div>
</section>
</a>
</main>
section {
width: 400px;
height: 400px;
margin: 0 auto 100px auto;
}
Here's a JSFiddle : Clickable centered section
I've another solution for you. Just add the following code to your css. You can try this.
a {
display: block;
height: fit-content;
width: fit-content;
margin: 0 auto 100px auto;
}
a {
display: block;
height: fit-content;
width: fit-content;
margin: 0 auto 100px auto;
}
section {
border-radius: 10px;
width: 400px;
height: 400px;
position: relative;
box-shadow: 0 1px 3px rgba(85, 85, 85, 0.25), 0 1px 2px rgba(0,0,0,0.12);
transition: all 0.5s cubic-bezier(.25,.8,.25,1);
}
section:hover {
box-shadow: 0 14px 28px rgba(85, 85, 85, 0.25), 0 10px 10px rgba(0,0,0,0.10);
}
section.logofolio {
background-color: #3D75E3;
}
section .content {
position: absolute;
bottom: 0;
padding: 0 0 100px 100px;
}
section h1 {
font-family: 'Archivo Black', sans-serif;
font-weight: bold;
font-size: 3rem;
color: #FFFFFF;
padding-top: 10px;
}
section h2 {
font-family: 'Roboto Mono', monospace;
font-weight: 400;
font-size: 0.8rem;
color: #FFFFFF;
}
section img {
padding-top: 10px;
}
<main class="work">
<p style="text-align: center">
As you can see the margins are clickable too!
</p>
<a href="#">
<section class="logofolio">
<div class="content">
<h2>some stuff</h2>
<h1>Title</h1>
<img src="img/arrow.svg" alt="arrow" width="30">
</div>
</section>
</a>
</main>
Here's my solution for you. I used absolute positioning to center the div. I separated my code using comments. You can check that. Hope it will be helpful.
section {
border-radius: 10px;
width: 1000px;
height: 400px;
/*Edited portion starts*/
position: absolute;
left: 50%;
/* margin: 0 auto 100px auto; */
/*Edited portion ends*/
transform: translateX(-50%);
box-shadow: 0 1px 3px rgba(85, 85, 85, 0.25), 0 1px 2px rgba(0,0,0,0.12);
transition: all 0.5s cubic-bezier(.25,.8,.25,1);
&:hover {
box-shadow: 0 14px 28px rgba(85, 85, 85, 0.25), 0 10px 10px rgba(0,0,0,0.10);
}
.content {
position: absolute;
bottom: 0;
padding: 0 0 100px 100px;
h1 {
font-family: 'Archivo Black', sans-serif;
font-weight: bold;
font-size: 3rem;
color: #FFFFFF;
padding-top: 10px;
}
h2 {
font-family: 'Roboto Mono', monospace;
font-weight: 400;
font-size: 0.8rem;
color: #FFFFFF;
}
img {
padding-top: 10px;
}
}
}
section.logofolio {
background-color: #3D75E3;
}
<main class="work">
<a href="#">
<section class="logofolio">
<div class="content">
<h2>some stuff</h2>
<h1>Title</h1>
<img src="img/arrow.svg" alt="arrow" width="30">
</div>
</section>
</a>
</main>
I'm trying to align this div so that the image appear first and then the 2 lines after, however i cant seem to make it align proberly.
#overview {
width: 350px;
height: 500px;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
#overview #header-collapse {
height: 50px;
width: 100%;
background-color: #ff8217;
color: #fff;
font-size: 15px;
line-height: 50px;
white-space: nowrap;
-moz-border-radius: 0px;
-webkit-border-radius: 3px 3px 0px 0px;
border-radius: 3px 3px 0px 0px;
text-align: center;
}
#overview #body-list {
background: #fff;
height:450px;
overflow-y: auto;
width: 100%;
border-radius: 0px 0px 3px 3px;
-webkit-border-radius: 0px 0px 3px 3px;
border-radius: 0px 0px 3px 3px;
}
#overview #body-list a {
text-decoration:none;
}
.list-item:hover {
background-color: rgba(82, 82, 82, .1);
}
.list-item {
border-bottom: 1px solid rgba(82, 82, 82, .2);
height: 80px;
width: 100%;
padding-left: 10px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
position: relative;
}
.list-item p {
margin: 0px;
}
.list-item #header-title {
color: #954500;
font-size: 20px;
font-weight: 400;
}
.list-item #subtitle {
color: rgb(82, 82, 82);
opacity: 0.6;
font-size: 13px;
}
.list-item #list-image {
height: 60px;
width: 60px;
background-color: #000;
-webkit-border-radius: 30px;
-moz-border-radius: 30px;
border-radius: 30px;
}
<div id="overview">
<div id="header-collapse">
<h4>
Oversigt
</h4>
</div>
<div id="body-list">
<a href="#">
<div class="list-item">
<div id="list-image"></div>
<p id="header-title">Title</p>
<p id="subtitle">Subtitle</p>
</div>
</a>
</div>
</div>
The easiest, and most modern way is to use flexbox.
With this method, the image circle and the text will both be centered vertically, so you don't have to worry about it later.
Place your header-title and subtitle inside of a div.
<div class="list-titles">
<p id="header-title">Title</p>
<p id="subtitle">Subtitle</p>
</div>
Then add the following to your .list-item class:
.list-item {
display: flex;
align-items: center;
}
(I also added margin-right: 10px; to your image so it looks better xD)
Here is a working JSFiddle
Add float:left to that div.
.list-item #list-image {float:left;}
Working JSFIDDLE
Wrap the two titles in a new DIV, then define that new DIV and the DIV of the image as inline-blocks, like this: (you'll have to finetune the margins for distances)
#overview {
width: 350px;
height: 500px;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
#overview #header-collapse {
height: 50px;
width: 100%;
background-color: #ff8217;
color: #fff;
font-size: 15px;
line-height: 50px;
white-space: nowrap;
-moz-border-radius: 0px;
-webkit-border-radius: 3px 3px 0px 0px;
border-radius: 3px 3px 0px 0px;
text-align: center;
}
#overview #body-list {
background: #fff;
height:450px;
overflow-y: auto;
width: 100%;
border-radius: 0px 0px 3px 3px;
-webkit-border-radius: 0px 0px 3px 3px;
border-radius: 0px 0px 3px 3px;
}
#overview #body-list a {
text-decoration:none;
}
.list-item:hover {
background-color: rgba(82, 82, 82, .1);
}
.list-item {
border-bottom: 1px solid rgba(82, 82, 82, .2);
height: 80px;
width: 100%;
padding-left: 10px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
position: relative;
}
.list-item p {
margin: 0px;
}
.list-item #header-title {
color: #954500;
font-size: 20px;
font-weight: 400;
}
.list-item #subtitle {
color: rgb(82, 82, 82);
opacity: 0.6;
font-size: 13px;
}
.list-item #list-image {
height: 60px;
width: 60px;
background-color: #000;
-webkit-border-radius: 30px;
-moz-border-radius: 30px;
border-radius: 30px;
}
#list-image, #title-wrapper {
display: inline-block;
}
<div id="overview">
<div id="header-collapse">
<h4>
Oversigt
</h4>
</div>
<div id="body-list">
<a href="#">
<div class="list-item">
<div id="list-image"></div>
<div id="title-wrapper">
<p id="header-title">Title</p>
<p id="subtitle">Subtitle</p>
</div>
</div>
</a>
</div>
</div>
I've created a grid banner where I'm trying to implement a padding between the columns.
However, when I do this it seem to mess up the heights. How can I do this without messing up heights?
As you can see if you add following code in a html doc, the item normal-size will be bigger than the double-size column. I've applied padding on column-small-1, column-small-2, normal-size and double-size, but as you can see it does not seem to align properly?
.wrapper {
width: 100%;
height: auto;
}
.item {
float: left;
}
.double-size {
box-sizing: border-box;
width: 66.6666%;
height: auto;
padding-right: 8px;
}
.normal-size {
box-sizing: border-box;
width: 33.3333%;
height: auto;
padding-left: 8px;
}
.double-size .column-big {
box-sizing: border-box;
width: 100%;
height: auto;
}
.normal-size .column-small-1 {
box-sizing: border-box;
width: 100%;
height: auto;
padding: 0px 0px 8px 0px;
}
.normal-size .column-small-2 {
box-sizing: border-box;
width: 100%;
height: auto;
padding: 8px 0px 0px 0px;
}
.column-content {
position: relative;
overflow: hidden;
}
.column-content .meta-info-doub {
box-sizing: border-box;
position: absolute;
height: auto;
width: 100%;
bottom: 0;
right: 0;
padding: 40px;
}
.column-content .meta-info-norm {
box-sizing: border-box;
position: absolute;
height: auto;
width: 100%;
bottom: 0;
right: 0;
padding: 20px;
}
.title-double {
font-family: 'Open Sans', sans-serif;
font-size: 20px;
line-height: 1.65;
background: #161616;
background: rgba(22, 22, 22, 0.5);
color: #fff;
display: inline;
padding: 4px 0;
margin: 0;
-webkit-box-shadow: 7px 0 0 rgba(22, 22, 22, 0.5), -7px 0 0 rgba(22, 22, 22, 0.5);
box-shadow: 7px 0 0 rgba(22, 22, 22, 0.5), -7px 0 0 rgba(22, 22, 22, 0.5);
text-transform: uppercase;
}
.title-normal {
font-family: 'Open Sans', sans-serif;
font-size: 17px;
line-height: 1.65;
background: #161616;
background: rgba(22, 22, 22, 0.5);
color: #fff;
display: inline;
padding: 4px 0;
margin: 0;
-webkit-box-shadow: 7px 0 0 rgba(22, 22, 22, 0.5), -7px 0 0 rgba(22, 22, 22, 0.5);
box-shadow: 7px 0 0 rgba(22, 22, 22, 0.5), -7px 0 0 rgba(22, 22, 22, 0.5);
text-transform: uppercase;
}
.date-double {
font-family: 'Open Sans', sans-serif;
display: inline;
color: #fff;
font-size: 11px;
text-shadow: 0 1px 0 #222;
text-transform: uppercase;
margin-bottom: 11px;
display: block;
}
.date-normal {
font-family: 'Open Sans', sans-serif;
display: inline;
color: #fff;
font-size: 11px;
text-shadow: 0 1px 0 #222;
text-transform: uppercase;
margin-bottom: 11px;
display: block;
}
.column-content .content-image {
height: auto;
width: 100%;
background-size: 100%;
display: block;
-moz-transition: all .5s;
-webkit-transition: all .5s;
transition: all .5s;
}
.column-content .content-image:hover {
-moz-transform: scale(1.2);
-webkit-transform: scale(1.2);
transform: scale(1.2);
}
<div class="wrapper">
<div class="item double-size">
<div class="column-big">
<div class="column-content">
<img src="http://blognewswp.gotheme.net/wp-content/uploads/2014/08/shutterstock_190029455_supersize-640x400.jpg" href="#" id="img-zoom" class="content-image">
<div class="meta-info-doub">
<h3 class="date-double">23. Oktober 2015</h3>
<h3 class="title-double">Post2</h3>
</div>
</div>
</div>
</div>
<div class="item normal-size">
<div class="column-small-1">
<div class="column-content">
<img src="http://blognewswp.gotheme.net/wp-content/uploads/2014/08/shutterstock_190029455_supersize-640x400.jpg" href="#" id="img-zoom" class="content-image">
<div class="meta-info-norm">
<h3 class="date-double">23. Oktober 2015</h3>
<div class="info-title">
<h3 class="title-normal">Post 3</h3>
</div>
</div>
</div>
</div>
<div class="column-small-2">
<div class="column-content">
<img src="http://blognewswp.gotheme.net/wp-content/uploads/2014/08/shutterstock_190029455_supersize-640x400.jpg" href="#" id="img-zoom" class="content-image">
<div class="meta-info-norm">
<h3 class="date-double">23. Oktober 2015</h3>
<div class="info-title">
<h3 class="title-normal">Post1</h3>
</div>
</div>
</div>
</div>
</div>
</div>
Can you fix the height of the row? If not, the best I can think of is having your two .item vertically align correctly. Which I would do by adding:
.item {
display:inline-block;
vertical-align:middle;
}
And removing the float:left that was previously on .item. This will also require you remove the whitespace between the closing and opening tags of two .items or apply one of the other techniques for inline-block gaps mentioned "How to remove the space between inline-block elements?".
Edit: There is probably a flexbox based solution if you can restrict your support to quite modern browsers.
Edit: http://jsfiddle.net/a2q3rr30/ is the flexbox solution linked below. It uses a combination of flex, a position absolute trick for container sizing and css object-fit to produce the effect. I've used the technique before and it works well across IE, FF and modern WebKit implementations though some of those might require some vendor specific prefixes to be added.
Hello I searched this everywhere, but i can not find how to make a hexagon grid on tumblr! I managed to make images appear as a hexagon but dont know how to lay out like they do in bee combs...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>{Title}{block:SearchPage} | {SearchQuery}{/block:SearchPage}{block:PostSummary} | {PostSummary}{/block:PostSummary}</title>
<link rel="shortcut icon" href="{Favicon}">
<link rel="alternate" type="application/rss+xml" href="{RSS}">
{block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}
<meta name="image:Background" content="" />
<meta name="image:Custom header" content="" />
<meta name="color:Background" content="#F9F9F9" />
<meta name="color:Accent" content="#FF6600" />
<meta name="color:Text" content="#666666" />
<meta name="if:Infinite scroll" content="1" />
<meta name="if:4 columns" content="0" />
<meta name="if:Hide description" content="0" />
<meta name="text:Background properties" content="fixed center" />
<style type="text/css">
body {
margin: 0;
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
background: {color:Background} url({image:Background}) {text:Background properties};
color: {color:Text};
}
a {
color: inherit;
text-decoration: none;
}
p a,li a,.credit a,.h2 a {
border-bottom: 1px dotted {color:Text};
}
a img {
border: 0;
}
blockquote {
margin: 0;
padding: 0 0 0 0px;
border-left: 1px {color:Text} dotted;
}
.wrap {
margin: 20px auto;
width: {block:If4Columns}50{/block:If4Columns}{block:IfNot4Columns}900{/block:IfNot4Columns}px;
}
.header {
width: 100%;
text-align: left;
padding: 25px{block:PermalinkPage} 0{/block:PermalinkPage};
}
.header img {
max-width: 100%;
}
.header h1 {
text-transform: uppercase;
font-size: 30px;
margin: 0;
letter-spacing: 5px;
font-weight: normal;
color: {color:Accent};
}
.header p {
margin: 5px 0 0 0;
font-size: 12px;
font-size: 12px;
line-height: 175%;
padding: 0;
}
.links {
text-align: right;
}
.links a {
background: #FFF;
border-bottom: none;
-webkit-box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.15);
-moz-box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.15);
box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.15);
margin: 0 5px;
line-height: 35px;
padding: 5px 15px;
font-size: 11px;
font-weight: bold;
text-transform: uppercase;
text-align: center;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
color: {color:Accent};
}
.posts {
margin: 2px 2px 2px 2px;
}
.post {
position: inherit;
float: right;
height: 250px;
width: {block:IndexPage}220px{/block:IndexPage}{block:PermalinkPage}50%{/block:PermalinkPage};
}
.hexagon {
overflow: hidden;
visibility: hidden;
-webkit-transform: rotate(120deg);
-moz-transform: rotate(120deg);
-o-transform: rotate(120deg);
transform: rotate(120deg);
cursor: pointer;
}
.hexagon-in1 {
overflow: hidden;
width: 100%;
height: 100%;
-webkit-transform: rotate(-60deg);
-moz-transform: rotate(-60deg);
-o-transform: rotate(-60deg);
transform: rotate(-60deg);
}
.hexagon-in2 {
width: 100%;
height: 100%;
background-repeat: no-repeat;
background-position: 100%;
visibility: visible;
-webkit-transform: rotate(-60deg);
-moz-transform: rotate(-60deg);
-o-transform: rotate(-60deg);
transform: rotate(-60deg);
}
.hexagon2 {
width: 200px;
height: 400px;
margin: -60px -20px 0 -20px;
}
}
.post .permalink {
width: 150px;
background: -moz-linear-gradient(left, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0.85) 50%, rgba(0,0,0,0.75) 100%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(0,0,0,0.75)), color-stop(50%,rgba(0,0,0,0.85)), color-stop(100%,rgba(0,0,0,0.75)));
background: -webkit-linear-gradient(left, rgba(0,0,0,0.75) 0%,rgba(0,0,0,0.85) 50%,rgba(0,0,0,0.75) 100%);
background: -o-linear-gradient(left, rgba(0,0,0,0.75) 0%,rgba(0,0,0,0.85) 50%,rgba(0,0,0,0.75) 100%);
background: -ms-linear-gradient(left, rgba(0,0,0,0.75) 0%,rgba(0,0,0,0.85) 50%,rgba(0,0,0,0.75) 100%);
background: linear-gradient(left, rgba(0,0,0,0.75) 0%,rgba(0,0,0,0.85) 50%,rgba(0,0,0,0.75) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bf000000', endColorstr='#bf000000',GradientType=1 );
color: #FFF;
position: absolute;
top: 50%;
left: 50%;
margin: -6px 0 0 -10px;
padding: 5px 0;
font-size: 10px;
text-transform: uppercase;
text-align: center;
height: 12px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
-webkit-box-shadow: 0px 0px 25px 0 rgba(0, 0, 0, 0.25);
-moz-box-shadow: 0px 0px 25px 0 rgba(0, 0, 0, 0.25);
box-shadow: 0px 0px 25px 0 rgba(0, 0, 0, 0.25);
opacity: 1;
-webkit-transition: all .25s ease;
-moz-transition: all .25s ease;
transition: all .25s ease;
}
.post:hover .permalink {
opacity: 1;
}
.post .player {
width: 50px;
background: #FFF;
position: absolute;
top: 50%;
left: 50%;
margin: -25px 0 0 -25px;
font-size: 10px;
text-transform: uppercase;
text-align: center;
height: 50px;
-webkit-border-radius: 40px;
-moz-border-radius: 40px;
border-radius: 40px;
}
.post .player_overflow {
width: 20px;
height: 5px;
margin: 11px;
overflow: hidden;
}
.post h2 {
font-size: 16px;
letter-spacing: 2px;
line-height: 150%;
margin: 0 0 10px 0;
text-transform: uppercase;
color: {color:Accent};
}
.post p,.post li {
font-size: 12px;
line-height: 175%;
margin: 5px 0;
padding: 0;
}
.post ul {
margin: 5px 25px;
padding: 0;
list-style: none;
}
.post img {
max-width: 100%;
height: auto;
}
.post .quote {
padding: 10px 15px;
background: #FFF;
position: relative;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.15);
-moz-box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.15);
box-shadow: 0px 1px 6px 5px rgba(0, 0, 0, 0.15);
margin-bottom: 20px;
font-size: 13px;
letter-spacing: normal;
font-family: Georgia, "Times New Roman", Times, serif;
font-style: italic;
font-weight: normal;
text-transform: none;
line-height: 160%;
color: {color:Accent};
}
.post .quote .arrow {
position: absolute;
top: 100%;
left: 10px;
background: url(http://static.tumblr.com/jw8fmba/NDglv0xrl/arrow.png);
width: 35px;
height: 15px;
}
img.main {
width: 100%;
}
.media {
width: 500px;
margin: 0 auto;
}
.post ol.notes {
padding: 0;
margin: 10px 0 !important;
list-style-type: none;
position: relative;
}
.post ol.notes a {
border: 0 !important;
}
.post ol.notes li.note {
margin: 2px !important;
float: left;
width: 16px;
height: 16px;
}
.post ol.notes li.more_notes_link_container {
width: 100% !important;
text-align: center;
margin: 2px 0 !important;
}
.post ol.notes li.note img.avatar {
width: 16px;
height: 16px;
-webkit-border-radius: 16px;
-moz-border-radius: 16px;
border-radius: 16px;
}
span.action {
min-width: 500px;
position: absolute;
top: -20px;
left: 0;
font-size: 12px;
opacity: 0;
-webkit-transition: all .1s ease;
-moz-transition: all .1s ease;
transition: all .1s ease;
z-index: 999;
color: {color:Accent};
}
.post ol.notes li.note:hover span.action {
opacity: 1;
}
.post ol.notes li.note .answer_content {
font-weight: normal;
}
.post ol.notes li.note blockquote {
display: none;
}
#infscr-loading {
text-align: center;
z-index: 100;
position: fixed;
left: 45%;
bottom: 50px;
z-index: 999;
}
.credit { display: none !important }
{CustomCSS}
</style>
<!-- Untitled Themes customize assistant -->
</head>
<body id="32912">
<div class="wrap">
<table class="header">
<tr>
<td width="50%">
<span class="title">
{block:IfCustomHeaderImage}<img src="{image:Custom header}" />{/block:IfCustomHeaderImage}
{block:IfNotCustomHeaderImage}<h1>{Title}</h1>{/block:IfNotCustomHeaderImage}
</span>
{block:IfNotHideDescription}{block:Description}<p>{Description}</p>{/block:Description}{/block:IfNotHideDescription}
</td>
<td class="links">
{lang:Archive}
{block:AskEnabled}{AskLabel}{/block:AskEnabled}
{block:SubmissionsEnabled}{SubmitLabel}{/block:SubmissionsEnabled}
{block:HasPages}{block:Pages}{Label}{/block:Pages}{/block:HasPages}
{block:Pagination}
<span id="pagination">
{block:PreviousPage}<a id="previous" href="{PreviousPage}">{lang:Previous page}</a>{/block:PreviousPage}
{block:NextPage}<a id="next" href="{NextPage}">{lang:Next page}</a>{/block:NextPage}
</span>
{/block:Pagination}
{block:PreviousPost}{lang:Previous post}{/block:PreviousPost}
{block:NextPost}{lang:Next post}{/block:NextPost}
</td>
</tr>
</table>
<div class="posts">
{block:Posts}
<!-- {PostType} -->
<div class="post" id="{PostID}">
{block:Audio}
{block:IndexPage}
{block:AlbumArt}
<div class="photo" style="background: url({AlbumArtURL}) center"></div>
<div class="player">
<div class="player_overflow">
{AudioPlayerWhite}
</div>
</div>
{/block:AlbumArt}
<span{block:AlbumArt} style="display: none"{/block:AlbumArt}>
<div class="quote">
{AudioPlayerWhite}
<div class="arrow"></div>
</div>
{block:TrackName}<h2>{TrackName}</h2>{block:TrackName}
{block:Artist}<h2>{Artist}</h2>{block:Artist}
{block:Caption}{Caption}{/block:Caption}
</span>
{/block:IndexPage}
{block:PermalinkPage}
{block:AlbumArt}<img class="main" src="{AlbumArtURL}" />{block:AlbumArt}
<div style="margin: 10px 0">{AudioPlayerBlack}</div>
{block:TrackName}<h2>{TrackName}</h2>{block:TrackName}
{block:Artist}<h2>{Artist}</h2>{block:Artist}
{block:Album}<h2>{Album}</h2>{block:Album}
{block:Caption}{Caption}{/block:Caption}
{/block:PermalinkPage}
{/block:Audio}
{block:Photo}
{block:IndexPage}
{LinkOpenTag}
<div class="hexagon hexagon2"><div class="hexagon-in1"><div class="hexagon-in2" style="background: url({PhotoURL-400}) center"></div></div></div>
{LinkCloseTag}
{/block:IndexPage}
{block:PermalinkPage}
{LinkOpenTag}
<img class="main" src="{PhotoURL-HighRes}" alt="{PhotoAlt}" />
{LinkCloseTag}
{block:Caption}{Caption}{/block:Caption}
{/block:PermalinkPage}
{/block:Photo}
{block:Link}
<h2><a href="{URL}" {Target}>{Name}</a></h2>
{block:Description}{Description}{/block:Description}
{/block:Link}
{block:Text}
{block:Title}<h2>{Title}</h2>{/block:Title}
{Body}
{/block:Text}
{block:Quote}
<div class="quote">
"{Quote}"
<div class="arrow"></div>
</div>
{block:Source}<p>- {Source}</p>{/block:Source}
{/block:Quote}
{block:Chat}
{block:Title}<h2>{Title}</h2>{/block:Title}
<ul>
{block:Lines}<li>{block:Label}<strong>{Label}</strong> {/block:Label}{Line}</li>{/block:Lines}
</ul>
{/block:Chat}
{block:Answer}
<div class="quote">
{Question}
<div class="arrow"></div>
</div>
<p style="margin-left: 20px"><img style="margin: 0 3px -3px 0" src="{AskerPortraitURL-16}" /> {Asker}</p>
{Answer}
{/block:Answer}
{block:Photoset}
{block:IndexPage}
{Photoset-250}
{/block:IndexPage}
{block:PermalinkPage}
<div class="media">
{Photoset-500}
{block:Caption}{Caption}{/block:Caption}
</div>
{/block:PermalinkPage}
{/block:Photoset}
{block:Video}
{block:IndexPage}
{Video-250}
{/block:IndexPage}
{block:PermalinkPage}
<div class="media">
{Video-500}
{block:Caption}{Caption}{/block:Caption}
</div>
{/block:PermalinkPage}
{/block:Video}
{PostNotes}
</div>
{/block:Posts}
</div>
{block:IndexPage}
<script type="text/javascript">
$(function(){var $container = $('.posts').css({ opacity: 0 });$container.imagesLoaded(function(){$container.animate({ opacity: 1 });$container.masonry({itemSelector:'.post',columnWidth: 300});});{block:IfInfiniteScroll}
$container.infinitescroll({navSelector:'#pagination',nextSelector:'#pagination a#next',itemSelector: '.post',loading: {img:'http://static.tumblr.com/jw8fmba/D6Pluysct/loading.gif',donetext:''}},function( newElements ) { var $newElems = $( newElements ).css({ opacity: 0 });$newElems.imagesLoaded(function(){$newElems.animate({ opacity: 1 });$container.masonry( 'appended', $newElems, true );});});{/block:IfInfiniteScroll}});
</script>
{/block:IndexPage}
</body>
</html>
and here is the website www.hexabee.tumblr.com
You can use CSS to offset the rows and position them so they overlap.
HTML:
<div>
<img src="hex.png"/>
<img src="hex.png"/>
<img src="hex.png"/>
</div>
<div class="alt">
<img src="hex.png"/>
<img src="hex.png"/>
<img src="hex.png"/>
<img src="hex.png"/>
</div>
<div>
<img src="hex.png"/>
<img src="hex.png"/>
<img src="hex.png"/>
</div>
CSS:
div{
/*negative bottom margin to move following rows up*/
}
div.alt{
position:relative;
/*use a negative left value to offset the alternate rows*/
}
Live Demo: Hexagon Layout
While it isn't the most elegant solution, it should get you where you want.