Hey I am searching for a solution to split my front page of my website into 3 responsive triangles. All theses triangles should have an image inside and some text but it doesn't work that well...
All ready tried to work with 'border' or 'transform'. Also used 'vw' and 'vh' instead of percentage.
CSS for the first "main" triangle:
.triangle {
width: 100vw;
height: 100vh;
overflow: hidden;
}
.triangle:before {
background-size: cover;
content:"";
display:block;
width: 100%;
height: 100%;
background-image: url("http://lorempixel.com/output/city-q-g-1920-1080-10.jpg");
transform: rotate(-45deg);
transform-origin:0 0;
}
The triangle should get the whole width of the display resolution and height too.
* {
box-sizing: border-box;
}
div {
display: inline-block;
vertical-align: top;
border: .5vw solid black;
text-align: center;
padding: .2vw;
width: 33%;
color: white;
margin: 0;
}
#left {
background-color: green;
}
#middle {
background-color: orange;
}
#right {
position: absolute;
right: .2vw;
background-color: blue;
}
Please see this Fiddle
Related
I have an image that has a width of 50% and a div with text that is 65% because I want the heading inside the div to overlap the image. But, the problem is that I don't want the other content inside the div to overlap the image - just the heading. I want the text and the button to be next to the image not on top of it.
But I can't seem to figure it out.
Here's a Codepen: https://codepen.io/tayanderson/pen/EbJZxy
.project {
height: 75vh;
margin: 15em 0;
position: relative;
.project-info {
z-index: 100;
display: flex;
flex-direction: column;
justify-content: center;
position: absolute;
width: 65%;
height: 100%;
right: 0;
h2 {
text-transform: initial;
color: #eee;
}
p {
font-weight: 300;
color: #ccc;
margin: 40px 0;
}
.project-desc {
width: 70%;
.button {display:inline-block;}
}
}
.project-img {
background-size: cover;
background-position: center;
height: 100%;
-webkit-filter: grayscale(100%) brightness(50%);
filter: grayscale(100%) brightness(50%);
width: 51.3%;
}
a {text-decoration:none;
color: #fff;}
#media only screen and (max-width: 768px) {
.project-info, .project-img {
width: 100%;
}
.project-info {
left: 0;
padding: 0 20px;
.project-desc>*{
width: 100% !important;
float: left !important;
}
p {display: none;}
}
}
}
You can try something like that using flexbox.
https://codepen.io/dakata911/pen/BmEpeB
.article {
width: 60%;
margin: 0 auto;
display: flex;
}
.article__image,
.article__text {
width: 50%;
}
.article__image {
background: url('http://www.country1067.com/wp-content/uploads/sites/28/2017/07/logoImage_4.jpg') center center no-repeat;
background-size: cover
}
.article__text {
padding: 12px;
background: #c3c3c3;
}
.article__text h2 {
margin-left: -96px;
color: #FFF;
font-size: 40px;
}
why don´t you make the two divs to 50% and give padding to project-info?
You need this attribute for do correctly the padding inside the div
*{
box-sizing:border-box;
}
Here you have the result
https://codepen.io/marcosefrem/pen/BmERmY
I think I understand what you are describing. Instead of using the percentages to position the items use position: relative instead and float the image (remember to put it first in the flow).
Check this out:
https://codepen.io/alexplummer/pen/eeoRmN
.project-info {
display: inline-block;
width: calc(50% - 10px);
height: 100%;
padding-left: 10px;
...
}
.project-img {
width: 50%;
float: left;
...
}
I want to draw lines to the left and right of an element up to the edge of their parent element.
I'm not sure how I could describe this otherwise, but maybe a screenshot will do the trick:
As you can see, this is close to perfect, and if I put
overflow: hidden;
on the heading, then its even better, but then I can't see my nice rounded corners (red circled parts in screenshot) because it's then cut-off.
At the moment, as is, this is my HTML:
<div id="IntroPage" class="introPage">
<div class="test">Heading</div>
</div>
Where "introPage" is the gray part you see.
My CSS for this:
.introPage {
position: relative;
max-width: 1000px;
margin: auto;
padding-top: 50px;
height: 100%;
background: gray;
}
.test {
position: relative;
/* overflow: hidden; */
text-align: center;
}
.test:before,
.test:after {
content: "";
position: relative;
background: #0099FF;
height: 6px;
display: inline-block;
width: 50%;
border-radius: 2px;
}
.test:before {
right: 10px;
margin-left: -50%;
}
.test:after {
left: 10px;
margin-right: -50%;
}
Anyone has a better solution to this?
Thanx in advance!
Here's a quick Fiddle
Sorry , I had to use 2 divs for the blue lines so they would cooperate with the hybrid layout: flexbox for modern browsers and display table for a fallback.
HTML
<div id="IntroPage" class="introPage flexBox">
<div class='line'></div>
<div class="test">
Heading
</div>
<div class='line'></div>
</div>
CSS
body {
background: grey;
}
.introPage {
position: relative;
width: 100%;
max-width: 100vw;
padding-top: 3em;
height: 100%;
background: gray;
display: table-row;
}
.test {
position: relative;
text-align: center;
width: 20%;
min-width: 1.5em;
display: table-cell;
font-variant: small-caps;
font-weight: 700;
font-size: 2em;
line-height: 2.5em;
flex-grow: 1;
flex-shrink: 1;
flex-basis: 20%;
}
.line {
position: relative;
background: #0099FF;
height: .4em;
border-radius: 2px;
display: table-cell;
height: 6px;
flex-grow: 1;
flex-shrink: 1;
flex-basis: 39%;
}
.flexBox {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: center;
align-content: center;
align-items: center;
}
<style>
h2 { width:100%; text-align:center; border-bottom: 1px solid #000; line-height:0.1em; margin:10px 0 20px; }
h2 span { background:#fff; padding:0 10px; }
</style>
<h2><span>THIS IS A TEST</span></h2>
http://codepen.io/chriscoyier/pen/zDGkw
The quick and dirty way would be to set the width of the test before and after elements to a smaller width (Say maybe 40% instead of 50%).
.introPage {
position: relative;
max-width: 1000px;
margin: auto;
padding-top: 50px;
height: 100%;
background: gray;
}
.test {
position: relative;
/* overflow: hidden; */
text-align: center;
}
.test:before,
.test:after {
content: "";
position: relative;
background: #0099FF;
height: 6px;
display: inline-block;
width: 40%;
border-radius: 2px;
}
.test:before {
right: 10px;
}
.test:after {
left: 10px;
}
<div id="IntroPage" class="introPage">
<div class="test">Heading</div>
</div>
The best case solution would be to re-size the test before and after elements based on the width of the "test" class. I'm not so sure this is possible in css alone and you will likely have to use javascript to resize the width of those elements based on the size of the test element.
The basic outline of this process would be to calculate the width of the text, convert it from pixels to a percentage, then subtract that percentage from 100%, and divide by 2.
I may give this a shot later depending on how much time I have, if anyone wants to pick it up from here feel free to edit the post (community wiki style).
I think I have an answer...works with any page width.
http://codepen.io/anon/pen/ZGxNgB
<div id="IntroPage" class="introPage">
<div class="test">Heading</div>
</div>
.introPage {
position: relative;
max-width: 1000px;
margin: auto;
padding-top: 50px;
height: 100%;
background: gray;
}
.test {
position: relative;
/* overflow: hidden; */
text-align: center;
width:100%;
display:block;
height:30px;
}
.test:before,
.test:after {
content: "";
position: absolute;
background: #0099FF;
height: 6px;
display: inline-block;
width: 40px;
border-radius: 2px;
top:12px;
}
.test:before {
float:right;
right:-40px;
pos
}
.test:after {
float:left;
left:-40px;
}
When I hover over my div JS inserts new html, but it breaks the flow in my page. I think it is the css margin in my title class, but I want the title to be centered. What is the best way to fix this?
.title {
width: 100%;
height: 30px;
text-align: center;
margin: 0 auto;
background-color: black;
color: snow;
margin-top: 23%;
margin-bottom: 0;
}
Fiddle
http://jsfiddle.net/lee45276/t8xfto77/
Just add vertical-align: top:
.project {
//your stuff
vertical-align: top;
}
Here is the fiddle working:
http://jsfiddle.net/t8xfto77/1/
I think this css will work for you:
/************
INFO
************/
.info {
width: 100%;
height: 100%;
}
.title {
width: 100%;
height: 30px;
background-color: black;
color: snow;
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
I need to create a separator with text in the middle. By middle I mean both centered horizontally and vertically - there are many examples of this technique using pseudo elements or an extra span in the middle.
Here's some code I would normally use - uses the span method:
h2.centre-line
{
width:40%;
text-align:center;
border-bottom:0.1rem solid #ccc;
line-height:0.1em;
margin:2.5rem 30%;
}
h2.centre-line span
{
background-color:#fff;
padding:0 1rem;
}
<h2 class="centre-line"><span>Text</span></h2>
The problem I have with all of the examples I have found so far is that the text is on a transparent background with margin spacing around it. However what I want to do is place the text in a container with height and keep it centered, like this:
At the moment I've been unable to adapt my code sucessfully and not come across any further suitable examples to follow.
Any ideas?
Your request is a little unclear as it's not stated what this 'separator' is supposed to be separating.
However, vertical & horizontal centering can be achieved by using absolute positioning.
The 'line behind' is achieved by a pseduo-element.
* {
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.wrap {
height: 200px;
position: relative;
background: lightgrey;
margin: 5px;
}
h2.centre-line {
text-align: center;
position: absolute;
top: 50%;
left: 50%;
width: 40%;
transform: translate(-50%, -50%);
}
h2.centre-line:before {
content: "";
position: absolute;
width: 100%;
height: 1px;
top: 50%;
left: 0;
z-index: -1;
background: red;
}
h2.centre-line span {
background-color: lightblue;
padding: 1rem;
display: inline-block;
}
<div class="wrap">
<h2 class="centre-line"><span>Text</span></h2>
</div>
JSfiddle Demo with another wrapper with greater height.
Use an hr? something like this: http://liveweave.com/42IlZQ
hr {
padding: 0;
border: none;
border-top: medium double #333;
color: #333;
text-align: center;
}
hr:after {
content: "§";
display: inline-block;
position: relative;
top: -0.7em;
font-size: 1.5em;
padding: 0 0.25em;
background: white;
}
<div class="container">
<hr class="hr-text" data-content="AND">
</div>
<style type="text/css">
.container {
max-width: 50%;
margin: 40px auto;
}
.hr-text {
line-height: 1em;
position: relative;
outline: 0;
border: 0;
color: black;
text-align: center;
height: 1.5em;
opacity: .5;
}
.hr-text:before {
content: '';
background: linear-gradient(to right, transparent, #818078, transparent);
position: absolute;
left: 0;
top: 50%;
width: 100%;
height: 1px;
}
.hr-text:after {
content: attr(data-content);
position: relative;
display: inline-block;
color: black;
padding: 0 .5em;
line-height: 1.5em;
color: #818078;
background-color: #fcfcfa;`enter code here`
}
</style>`enter code here`
Yes now i've got the grid outertcontainer fixed but somehow its not expanding 100%.
Please tell me where am i doing it wrong.
i am giving the emitted css.
if you see it in full screen you can see the outer container div is still not 100%.
Thanks.
Here is the
FIDDLE
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box; }
body {
margin: 0;
padding: 0; }
img {
max-width: 100%; }
.bordered {
border: 1px solid black; }
.redbordered {
border: 1px solid red; }
.greenbordered {
border: 1px solid green; }
.outerContainer {
max-width: 68em;
margin-left: auto;
margin-right: auto;
min-height: 300px;
width: auto;
margin-left: 133px;
background-color: crimson; }
.outerContainer:after {
content: "";
display: table;
clear: both; }
.outerContainer .leftSide {
float: left;
display: block;
margin-right: 0%;
width: 50%;
background-color: blue;
min-height: 200px; }
.outerContainer .leftSide:last-child {
margin-right: 0; }
.leftNav {
height: 100%;
width: 133px;
background-color: black;
position: fixed;
left: 0px; }
Of course, position:fixed is exactly for that purpose, to have the element fixed in that position, overlapping everything below it. To have a regular 2 columns layout with no overlapping, just try this (there are many ways to do it, this is just one using CSS without changing your HTML)
body {
margin: 0;
padding: 0;
display:block;
min-height:100%;
}
.leftNav {
height: 100%;
width: 10%;
background-color: black;
display:inline-block;
opacity: 0.7;
}
.rightContainer {
background-color:silver;
min-height: 300px;
display:inline-block;
}
.fluid {
width: 89%;
}
jsFiddle
remove width 100% in fluid and make rightContainer as width auto and margin-left 100px
.rightContainer
{
background-color:silver;
min-height: 300px;
width:auto;
margin-left:100px;
}