I've got a mockup for a website which has a hero section consisting of two sections, split diagonally at the same angle. The two sections have content and need to scale to fit the content.
I have tried the method described here: two divs split with diagonal line - CSS
but it doesn't work well with content; adding text to the div just extends the rectangle not the triangle. How do I get the boxes to scale with the content?
I would post a comment but I don't have the reputation :/
EDIT: by scaling to content, I mean that the if I add content to one of the divs, the div should be able to fit all of the content inside of it. Both of the divs would need to be the same height. Apologies for any confusion :)
The question is not so clear as to :
scaling to content
I suppose it means that it should keep the same aspect after window resize (??).
// Create a flex container
.hero {
display: flex;
height: 500px;
width: 100%;
flex-flow: row nowrap; // make the two divs side by side
font-size: 2em;
color: white;
font-family: sans-serif;
position: relative;
}
// apply basic styles to the divs
.hero div{
display: flex;
position: relative;
background-color: tomato;
width: 50%;
padding: 50px;
}
// + 100px for :after and :before to fit
// + 10px for the space we really want to see between diagonal
.hero div:first-child{
margin-right: 110px;
}
.hero_1:after, .hero_2:before{
content:'';
position: absolute;
top: 0;
width: 0;
height: 0;
}
// Add a triangle at the end and starts of both divs to simulate diagonal
.hero_1:after {
left: 100%;
border-top: 500px solid tomato;
border-right: 100px solid transparent;
}
.hero_2:before {
right: 100%;
border-bottom: 500px solid tomato;
border-left: 100px solid transparent;
}
Please have a look to this codepen. The split is made with a diagonal line, and it fits to window resizes.
If it's not the desired effect, please edit the question to be more explicit about "scaling to content" I'll be happy to help.
Related
I need to have a layout presenting a grid of floating divs with an horizontal line under intermediate rows. There shouldn't be a line under the last row, and of course if there is only one row of elements, no line under it..
The problem is that size of the page is variable, my elements always have the same size, ergo there the number of columns is relative.
I know how to do this when i have the same number of columns, but not the variable ones.
This is a sketch for clarity:
I am using bootstrap if that makes a difference..
Any suggestions, please?
This might be a solution (if you don't have a background image):
Add the line under the units inside the flex container, and add an extra white line to overwrite the border of the bottom elements.
The divs in this example are just containers. Any padding and margin should be applied to elements inside them. I've made the units grey, and the bottom line light pink to show them, but in reality they should be transparent and white respectively.
.container {
display: flex;
flex-flow: row wrap;
overflow: hidden;
position: relative;
}
.container div {
display: inline-block;
background-color: #eee;
width: 140px;
height: 120px;
padding: 10px;
border-bottom: 3px solid red;
}
.container::after {
position: absolute;
content: "";
display: block;
height: 3px;
width: 100%;
left: 0;
bottom: 0;
background-color: #FFF; /* Make this white. */
}
<div class="container">
<div>A</div><div>A</div><div>A</div><div>A</div><div>A</div><div>A</div><div>A</div><div>A</div><div>A</div><div>A</div><div>A</div><div>A</div>
</div>
You could try this, where the "black" background-color is equal to your body/container background colour.
https://jsfiddle.net/e125u41f/1/
I have a HTML file which I cannot edit.
<section>
<h2>Section heading</h2>
<p>Paragraph text</p>
<img src="image.jpg" />
</section>
The design is asking for the photo to be in the top right of the section, which is easy if the image is the top child of section. Unfortunately the image in the supplied HTML is right at the bottom of the section in the HTML, so simply floating right won't work. With a little work I figured out how to absolute position a div while keeping it in the page flow by faking the flow with another floated element.
* {
box-sizing: border-box;
}
section {
position: relative;
outline: 1px solid #CCC;
}
div {
display: inline-block;
width: 140px;
height: 140px;
background-color: green;
border-radius: 100px;
position: absolute;
top: 0;
right: 0;
}
h2::before {
content: "";
display: inline-block;
float: right;
width: 150px;
height: 150px;
outline: 1px solid red;
}
h2 {
outline: 1px solid blue;
}
See https://jsfiddle.net/tnxhy0po/3/
Div - Using it to demonstrate an image in the fiddle.
Red outline - Right floated ::before pesudo element for
the header.
Blue outline - Header outline.
Silver outline - Section
outline.
Now for the problem.
The header contains the words "Meet the Owner, Julie" and Julie is meant to be on a separate line. If I limit the width of the header in order to do this, the floated spacer element gets contained in the width of the header, which means that text below it doesn't flow up to the image.
See https://jsfiddle.net/s7eke1gy/16/
I'm not sure how to make the image float in the top right corner of the section. Placing it there is easy but making it a part of the flow isn't.
Alternatively, the current float + absolute position solution would work if I could find some way to get "Julie" to move to the next line.
Edit: While testing I had set the section to a max width and forgot to remove it. The width of section is dynamic and as such 100%. I've removed the max-width property from the section in here and in the jsfiddles. Sorry for the confusion!
If I understand you correctly, you want to put Julie on a separate line and leave the text floating like on https://jsfiddle.net/tnxhy0po/1/
You can try to combine before and after pseudo elements, use :before to wrap h2
( move Julie to new line ) and :after to wrap paragraph.
h2::before {
content: "";
display: inline-block;
float: right;
width: 150px;
height: 25px;
outline: 1px solid red;
}
h2::after {
content: "";
display: inline-block;
float: right;
width: 10px;
height: 120px;
outline: 1px solid red;
}
You can see result on https://jsfiddle.net/s7eke1gy/13/
Hope I understand you and this can help.
I am making an animation that involves a set of four divs inside one larger div. The four divs are too large to all fit in the one div at once, so I want to be able to specify the position at which the larger div should start. For example, here I have four boxes inside the div. From top to bottom, the boxes are green, purple, pink, and blue (you can't see the blue in the current jsfiddle because it is cut off). I would like the BOTTOM of the larger fulldisplay div to align with the MIDDLE of the blue box, and everything else to fit above hat until it is cut off at the top of the div. Eventually I am going to be implementing a custom-made scroll button (as I don't want it to look like the overflow:scroll one) but for now I am just trying to get CSS to display the inner divs the way I want.
JS FIDDLE: http://jsfiddle.net/o33gw35w/
CSS:
body {padding: 0; margin: 0; height: 100%; overflow: hidden; font-family: Helvetica;}
.nameblock {
height:10%;
width: 30%;
position: absolute;
background-color: yellow;
}
.fulldisplay {
height:90%;
width: 30%;
position: absolute;
overflow: hidden ;
}
.spacer1 {
height:40%;
position: relative;
background-color: green;
}
.spacer2{
height:40%;
position: relative;
background-color: purple;
}
.spacer3 {
height:40%;
position: relative;
background-color: pink;
}
.spacer4{
height:40%;
position: relative;
background-color: blue;
}
HTML:
<div class="nameblock"></div><br/>
<div class="fulldisplay">
<div class="spacer1">
</div>
<div class="spacer2">
</div>
<div class="spacer3"></div>
<div class="spacer4"></div>
</div>
</body>
Apologize if I got the question wrong as I am not quite sure what you are trying to do, but if you want to have a way of ordering s dynamically, you could use css flexbox to do so. You might need to tweak the classes to have correct width and height (eg. width: 100%; height: 150px;) and define flex container as similar to below snippet.
.fullconversation {
padding: 0;
margin: 0;
list-style: none;
width: 30%;
display: flex;
flex-direction: row;
-webkit-flex-flow: row wrap;
justify-content: space-around;
}
and then
.spacer4{
width: 100%;
height: 150px;
position: relative;
background-color: blue;
order: -1;
}
For more information about flexbox, please refer to the urls below or feel free to ask any questions regarding flexbox or css. Hope this helps.
https://css-tricks.com/almanac/properties/o/order/
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
***********Updated************
If you change the height of spacer1 to be 10%, then you will see the blue box visible at the bottom. Note that the value 10% is just an example, as long as the total size of the heights of inner s dose not take up more than 100%, the blue box will be visible.
.spacer1 {
height:10%;
position: relative;
background-color: green;
}
Also, if you want to see all divs regardless of the size, you could just set overflow to other than hidden.
I've been trying to create a titlebar and left-side panel using div's and css, but as in the screenshot below,
is it possible to create a curvature using css, similar to the red
curvature I've drawn with paintbrush?
You'll also notice a visible blue colour difference between
the yellow arrows. Is it possible to have a more uniform gradient?
I'd like a uniform gradient on the vertical and horizontal panels.
What I'm actually trying to achieve is shown in the bottom half of
the image. A uniform panel with shadows at the edges. Is it possible
to create using CSS or do I have no other option other than to design
it in GIMP and use an image for the entire vertical and horizontal
panel (it's hard to design in GIMP too)?
A jsfiddle example or a link to an existing example would help best. I'm not new to programming, but am new to css.
You could use :after :pseudo-element for that cut and apply inset box-shadow to achieve this.
For the text Logo, Title and Menu you could add spans and apply display: inline-block to first two spans.
body {
background: #C4C4FF;
}
div {
width: 250px;
height: 100px;
position: relative;
background: #8080FF;
}
div:after {
content: '';
position: absolute;
bottom: 0;
right: 0;
width: 50%;
height: 50%;
background: #C4C4FF; /* This color must be same as background */
border-top-left-radius: 30px;
box-shadow: inset 6px 6px 10px -6px #666;
}
span {
display: block;
font-weight: bold;
font-size: 18px;
color: white;
width: 125px;
height: 50px;
text-align: center;
line-height: 50px;
}
div span:nth-of-type(1),
div span:nth-of-type(2) {
display: inline-block;
}
<div>
<span>Logo</span
><span>Title</span>
<span>Menu</span>
</div>
I have an unordered list that has a bit of content and a button. The columns (LIs) will not always be the same height, but I want the button to always be at the bottom. I'm using the display: table / display: table-cell trick to keep the LIs the same height, however I can't get the button to align correctly. I want the button at the bottom, but I also want it to behave like the content does. Meaning I want it centered and to change it's width as the browser is resized.
Here's a fiddle that demonstrates the issue.
http://jsfiddle.net/mattymess/BBuqY/
This is a snippet of code showing how I'm doing the equal height...
.rewards .rewards-chooser {
margin: 0;
border-top: 2px solid #f4f4f4;
border-bottom: 2px solid #f4f4f4;
display: table;
width: 100%;
position: relative;
}
.rewards .reward {
width: 25%;
border-left: 2px solid #f4f4f4;
list-style: none;
display: table-cell;
}
Change position: absolute; to position: relative; in .rewards .reward .redeem class like this:
.rewards .reward .redeem {
position: relative;
bottom: 0;
box-sizing: border-box;
}
Just to knowledge: Your button is relative to something (your container), and not absolute.
To set the buttons in the same line, you should to define a height for the container scope. Something like this:
.reward-description {
height: 200px;
}
I made a clean example for you. To see, click here (jsFiddle).