I would like the images in this layout to each take up 50% of the page.
Right now the split is 2/3 for the large image and 1/3 for the 2 smaller images.
Images are here:
https://www.joshungerdesign.com/packed
I can make the large image take up 50% by using this:
.tweak-index-gallery-layout-packed [data-index-gallery-images='3']
.Index-gallery-item:nth-child(3n+1) {
width: 50%;}
I don't know how to make the small images extend to the right side once the large image width is changed.
I just write basic code, I hope it'll help you out. Thanks
body {
margin: 0;
}
.Index-gallery-inner {
background-color: #fff;
display: inline-block;
width: 100%;
}
.Index-gallery-item {
box-sizing: border-box;
float: left;
height: 500px;
border: 5px solid #fff;
width: 50%;
}
.Index-gallery-item:nth-child(2),
.Index-gallery-item:nth-child(3){
height: 250px;
width: 50%;
}
.Index-gallery-item-inner {
background-color: #ccc;
height: 100%;
width: 100%;
}
.Index-gallery-item-image {
background-color: white !important;
padding: 0 !important;
}
<div class="Index-gallery-inner clear">
<div class="Index-gallery-item">
<div class="Index-gallery-item-inner"></div>
</div>
<div class="Index-gallery-item">
<div class="Index-gallery-item-inner"></div>
</div>
<div class="Index-gallery-item">
<div class="Index-gallery-item-inner"></div>
</div>
</div>
Related
Does someone know how i can make something like this by only using css?
on each side their is 1/5 space.
i have already the html part done.
example
This is the html with css
<div class="container">
<div class="block-1">
</div>
<div class="block-2">
</div>
</div>
html, body {
height: 100%;
margin: 0;
}
.container {
width: 60%; /* left and right 20% */
min-height: 100%;
margin: 0 auto; /* center */
background-color: blue;
}
.block-1 {
width: 100%;
height: 100px;
background-color: grey;
}
.block-2 {
width: 100%;
}
I'm somewhat new to html but im tyring to have a transparent background image and in the body have div containers that show the background image just not transparently.
I want to say, "do the opposite", but I really need more information (or an example).
If you used one background image and set specific classes up for the divs that can see the image, would you be able to get the effect you want?
CSS example:
html body { background-image: url("myimage.jpg"); }
div { background: #FFFFFF; }
.peek { background: transparent; }
HTML example:
<body>
<div> section with white background (blocks the background image), contains text </div>
<div class="peek"> section that exposes the background image, reveals different aspects of the background when the page is scrolled </div>
Please let me know if I understood what your goal was.
To my understanding you're looking for something like this:
<style>
* {
color: white;
}
.background {
width: 100%;
height: 100%;
position: relative;
background-image: url('https://images.pexels.com/photos/730896/pexels-photo-730896.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.side {
width: 20%;
height: 100%;
position: relative;
display: inline-block;
float: left;
background-color: red;
}
.main {
width: 60%;
height: 100%;
position: relative;
display: inline-block;
float: left;
background-color: transparent;
}
.top, .spacer, .bottom {
width: 100%;
height: 20%;
position: relative;
display: inline-block;
float: left;
background-color: red;
}
.content {
width: 100%;
height: 20%;
position: relative;
display: inline-block;
float: left;
}
.section-one {
background-color: rgba(0,0,0,0.5);
}
.section-two {
background-color: rgba(0,0,0,0.25);
}
</style>
<div class="background">
<div class="side">THIS IS WHITE</div>
<div class="main">
<div class="top">THIS IS WHITE</div>
<div class="content section-one">THIS HAS A BG IMAGE THAT IS SET TO THE CONTAINER DIV</div>
<div class="spacer">THIS IS WHITE</div>
<div class="content section-two">THIS HAS A BG IMAGE THAT IS SET TO THE CONTAINER DIV</div>
<div class="bottom">THIS IS WHITE</div>
</div>
<div class="side">THIS IS WHITE</div>
</div>
I am currently transitioning the width property of an element. I would like to replace this with transitions on scaleX and translateX for better rendering performance.
I'm struggling to come up with a proper 1:1 conversion between the two concepts.
Below is a box which contains two lines. Each line has a bar inside of it. The first bar is created using width. The second bar is created using scaleX and translateX. The second bar breaks out of the box. It should appear identical to the width bar for all possible values.
Is this an appropriate way to tackle this problem? If not, how should I approach it? If so, I have some concerns:
I feel like I shouldn't have to use 1% width. I thought I could say 1px and scale that, but maybe that isn't the right idea.
I'm unclear if I should use 1% width and scale up, or 100% width and scale down. Perhaps they're equivalent, but the width of the bar controls the positioning of translateX
* {
box-sizing: border-box;
}
.box {
height: 200px;
width: 200px;
border: 1px solid;
}
.line {
background-color: #ccc;
width: 100%;
height: 5px;
margin: 50px 0;
}
.bar {
height: 5px;
background-color: blue;
}
.bar.width {
width: 66.6%;
}
.bar.scale {
width: 1%;
transform: scaleX(66.6) translateX(33%);
}
<div class='box'>
<div class='line'>
<div class='bar width'>
</div>
</div>
<div class='line'>
<div class='bar scale'>
</div>
</div>
</div>
It's simpler than all that. You're already scaling the element to 66%. Now all you need to do is set the origin to the far left of the element with transform-origin: 0 50%; and drop the translate rule. That should fix the issue.
* {
box-sizing: border-box;
}
.box {
height: 200px;
width: 200px;
border: 1px solid;
}
.line {
background-color: #ccc;
width: 100%;
height: 5px;
margin: 50px 0;
}
.bar {
height: 5px;
background-color: blue;
}
.bar.width {
width: 66.6%;
}
.bar.scale {
width: 1%;
transform: scaleX(66.6);
transform-origin: 0 50%;
}
<div class='box'>
<div class='line'>
<div class='bar width'>
</div>
</div>
<div class='line'>
<div class='bar scale'>
</div>
</div>
</div>
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 8 years ago.
Improve this question
How do I get the following setup with CSS to work?
jsfiddle
http://jsfiddle.net/16ex38mL/2/
Basically, I intend to put an input box to #header-nav-content-search and let the div and the one below it resize responsively to 100% of the remaining width.
I have two static width columns. One is the first one with 240px, and one is the last one with 200px.
code
#header-nav-content-search {
width: 100%;
}
didn't do the trick.
I have concentrated on reducing the HTML markup needed. The following example is mainly based on that excellent sketch of yours, so it will need some tweaking.
Basic Idea
Create a three "column" CSS table with the center cell remaining fluid:
<div class="table">
<div class="cell"></div>
<div class="cell center">I contain 4 fluid divs with the class ".inner"</div>
<div class="cell"></div>
</div>
The center cell contains your 4 inner boxes with the class .inner
Basic CSS Styles
box-sizing: border-box will allow us to calculate percentage width including padding and borders
The main container, .table, is given a fixed height (could be changed to percentage)
The .inner divs are display: inline-block and are given appropriate percentage widths and fixed heights equal to half the containers height
The left and right columns are given their fixed widths
.table is given an appropriate min-width to prevent the inner divs from overlapping
Note: In the HTML markup, the inner divs closing and opening tags have no space between them. This is important as it prevents a gap that is present with inline elements.
Refer to this article for more information.
CSS / HTML / Demo
* {
box-sizing: border-box;
}
html,
body {
height: 100%;
}
body {
margin: 0;
}
.table {
display: table;
height: 300px;
width: 100%;
min-width: 600px;
table-layout: fixed;
}
.cell {
display: table-cell;
vertical-align: top;
}
.left {
width: 240px;
}
.right {
width: 200px;
border-left: solid 1px #000;
}
.inner {
display: inline-block;
height: 150px;
vertical-align: top;
}
.center-left {
width: 30%;
}
.center-right {
width: 70%;
}
/* Borders */
.table {
border: solid 1px #000;
}
.inner {
border-bottom: solid 1px #000;
border-left: solid 1px #000;
}
.center-right .inner {
border-right: solid 1px #000;
}
.inner:nth-child(3),
.inner:nth-child(4) {
border-bottom: none;
}
<div class="table">
<div class="cell left">
240px width
</div>
<div class="cell center">
<div class="inner center-left">
30% width 50% height
</div><div class="inner center-right">
70% width 50% height
</div><div class="inner center-left">
30% width 50% height
</div><div class="inner center-right">
70% width 50% height
</div>
</div>
<div class="cell right">
200px width
</div>
</div>
I wouldn't do it that way. Here's one way to get you started.
DEMO: http://jsbin.com/faveca/1/
http://jsbin.com/faveca/1/edit
HTML:
<header>
<div class="fixed-width-240 eq">
240px column fixed width what about is it equal to the others, yes it is.
</div>
<div class="fluid eq">
fluid column
</div>
<div class="fixed-width-200 eq">
200px column
</div>
</header>
CSS
body,
html {
margin: 0;
padding: 0;
}
header div,
header div:before,
header div:after {
box-sizing: border-box
}
header {
border: 2px solid #000
}
header:after {
content: "";
display: table;
clear: both;
}
.fixed-width-240 {
z-index: 1;
position: relative;
background: red;
}
.fixed-width-200 {
z-index: 2;
position: relative;
background: orange;
}
.fluid {
position: relative;
z-index: -1;
background: #ccc;
}
#media (min-width:700px) {
header {
overflow: hidden
}
header .eq {
padding-bottom: 99999px;
margin-bottom: -99999px;
}
.fixed-width-240,
.fixed-width-200 {
float: left
}
.fixed-width-240 {
width: 240px;
width: 240px;
margin-right: -240px;
border-right: 2px solid #000;
}
.fixed-width-200 {
float: right;
z-index: 2;
width: 200px;
margin-left: -200px;
border-left: 2px solid #000;
}
.fluid {
float: left;
padding: 0 220px 0 260px;
width: 100%;
}
}
I am trying to divide a page into 4 equal sections (2x2 grid) with a fixed header. So far I have a it split into 4 but because of the header, the page is going bigger than 100%.
I want the 4 parts to only take up the available space on the screen and not make the page scroll but be equal.
HTML:
<header></header>
<div class="container">
<div class="block blue"></div>
<div class="block green"></div>
<div class="block purple"></div>
<div class="block red"></div>
</div>
CSS:
html, body {
height: 100%;
}
header {
width: 100%;
height: 117px;
background-color: grey;
}
.container {
width: 100%;
height: 100%;
}
.block {
width: 50%;
height: 50%;
float: left;
}
.blue {
border-top: 4px solid blue;
}
.green {
border-top: 4px solid green;
}
.purple {
border-top: 4px solid purple;
}
.red {
border-top: 4px solid red;
}
See demo so far: http://jsfiddle.net/Kas78/1/
I also want to be able to make it responsive so that each block can be changed to 100% width and a fixed height when the page is smaller than 690px so that needs to be kept in mind.
I'd recomment to change your code to this:
http://jsfiddle.net/NicoO/Kas78/2/
html, body {
height: 100%;
}
header {
height: 117px;
background-color: grey;
}
.container {
height: calc(100% - 117px);
}
.block {
width: 50%;
height: 50%;
float: left;
}
I throw out some width:100% since block elements will fill the parent element by default.