I'm trying to get the iframe the to the full page height, but it's not really working.
I already tried many ways to do it, but none of them would work for me...
I hope some of you know how to do it!
HTML:
<body>
<article>
<h1>Hello world</h1>
<p class="subtitle fancy ">
<span>Versie 1.0</span>
</p>
</article>
<iframe class="configurator " src="" frameBorder="0">Browser not compatible.</iframe>
<footer>
<span class="arrow "></span>
<p>© Copyright 2015</p>
</footer>
</body>
CSS:
html, body {
margin: 0;
padding: 0;
}
body {
background: #ECECEC;
margin: 0px;
color: #333;
font-family:'Cinzel Decorative', cursive;
}
h1 {
font-size: 3em;
text-align: center;
}
article {
max-width: 600px;
overflow: hidden;
margin: 0 auto 50px;
}
.subtitle {
margin: 0 0 2em 0;
}
.fancy {
text-align: center;
display: -webkit-flex;
}
.fancy:before, .fancy:after {
content:"";
border-bottom: 1px solid white;
border-top: 1px solid white;
-webkit-flex: 1;
margin: .45em 0;
}
.fancy:before {
margin-right: 15px;
}
.fancy:after {
margin-left: 15px;
}
footer {
background-color: #D7D7D7;
position: relative;
margin-bottom: 0px;
width: 100%;
height: 50px;
position: absolute;
bottom: 0;
left: 0;
font-family:'Montserrat', sans-serif;
border-top: 2px solid white;
}
footer p {
margin-left: 10px;
font-size: 15px;
color: #626262;
}
footer:before, footer:after, footer > .arrow {
content:"";
position: absolute;
bottom: 100%;
left: 50%;
margin-left: -20px;
border: 20px solid transparent;
border-bottom-color: #D7D7D7;
pointer-events: none;
}
footer:after {
margin-left: -8px;
border-width: 8px;
}
footer > .arrow {
margin-left: -11px;
border-width: 11px;
border-bottom-color: #fff;
}
.configurator {
width: 100%;
background-color: white;
position: absolute;
margin-top: -50px;
margin-bottom: -1000px;
}
So what I want is the iframe height all the way to the bottom against the top of the footer.
jsFiddle: http://jsfiddle.net/94d9tbLx/
Added script to find height .
var h = $(document).outerHeight() - $('article').outerHeight() - $('footer').outerHeight();
$('iframe').css('height', h);
Please check the fiddle - http://jsfiddle.net/afelixj/94d9tbLx/2/
Remove all styles from footer and .configurator and add the following:
footer {
background-color: #D7D7D7;
margin-bottom: 0px;
width: 100%;
height: 50px;
left: 0px;
font-family: "Montserrat",sans-serif;
border-top: 2px solid #FFF;
bottom: 0px;
position: relative;
float: left;
}
.configurator {
width: 100%;
background-color: #FFF;
height: 100vh;
float: left;
position: relative;
}
FIXED JSFIDDLE
(adjust the height to anything)
Related
I have been trying to add a title border with CSS. but I can't find the actual result.
.widget-title {
font-size: 1em;
border-bottom: 1px solid red;
margin-bottom: 30;
text-decoration: underline;
text-underline-offset: 1rem;
padding-bottom: 0.5rem;
text-decoration-thickness: 0.1875rem;
text-decoration-color: green;
color: black;
}
<h1 class="widget-title"> Widget title </h1>
For gray line, you have to use ::before element, hope its works
.widget-title {
font-size: 1em;
margin-bottom: 0;
color: black;
position: relative;
width: 33.33%
}
.widget-title span{
display: inline-block;
position: relative;
padding-bottom: 15px;
}
.widget-title:before{
content: "";
position: absolute;
left: 0;
bottom: 2px;
width: 100%;
background: #ccc;
z-index: -1;
height: 2px;
}
.widget-title span:before{
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 100%;
background: blue;
z-index: -1;
height: 6px;
border-radius: 20px;
}
.d-flex{
display: flex;
gap: 30px
}
<div class="d-flex">
<h1 class="widget-title"> <span>Widget title</span></h1>
<h1 class="widget-title"> <span>Title sm</span></h1>
<h1 class="widget-title"> <span>Widget title long</span></h1>
</div>
.widget-title {
border-bottom: 1px solid #000;
padding: 0 0 5px;
}
Steps:
1)Add border-bottom.
2)Change the padding-bottom.
This will work. Thanks.
I created a simple div for my comments section.
I would like to give it the appearance of a speech bubble by having a triangle on the left or any other effect that would make it look like a speech bubble coming from the left.
How can I achieve that without using an image ?
image
html
<div class='comment'></div>
css
.comment {
margin-left: 10px;
height: 80px;
display: inline-block;
color: white;
width: 400px;
border: 1px solid white;
padding: 10px;
border-radius: 5px;
overflow: hidden;
}
Try this
.comment {
margin-left: 10px;
height: 80px;
display: inline-block;
color: white;
width: 400px;
border: 1px solid white;
padding: 10px;
border-radius: 5px;
position: relative;
background-color: #fff;
border:1px solid #000;
}
.comment::before{
content:"";
position: absolute;
top:20px;
left:-12px;
margin:auto;
height: 20px;
width: 20px;
border:1px solid #fff;
transform:rotate(45deg);
background-color: #fff;
border-bottom:1px solid #000;
border-left:1px solid #000;
}
<div class='comment'></div>
style accordingly,
hope this helps...
I hope to help you:
.comment {
position: relative;
margin-left: 50px;
margin-top: 50px;
height: 50px;
display: inline-block;
width: 200px;
padding: 10px;
border-radius: 5px;
background: skyblue;
color: #FFF;
}
.comment:before, .comment:after {
content: '';
border-radius: 100%;
position: absolute;
width: 50px;
height: 50px;
z-index: -1;
}
.comment:after {
background-color: #fff;
bottom: -30px;
left: 55px;
}
.comment:before {
background-color: skyblue;
bottom: -20px;
left: 70px;
}
<div class='comment'>Hello,World!</div>
I like Nicholas Gallagher's work best, see his demo page.
This is lifted off his page and is not my own work.
<style>
/* Bubble with an isoceles triangle
------------------------------------------ */
.triangle-isosceles {
position: relative;
padding: 15px;
margin: 1em 0 3em;
color: #000;
background: #f3961c;
border-radius: 10px;
background:linear-gradient(#f9d835, #f3961c);
}
/* creates triangle */
.triangle-isosceles:after {
content: "";
display: block; /* reduce the damage in FF3.0 */
position: absolute;
bottom: -15px;
left: 50px;
width: 0;
border-width: 15px 15px 0;
border-style: solid;
border-color: #f3961c transparent;
}
</style>
<p class="triangle-isosceles">This is a quote. Hello world. text goes here.</p>
How can you create two triangles next to an image?
As you can see in the jsfiddle, the triangles are not tounching the image. I want them to touch the image and the blue bar above.
I tried this post: How can I have an image float next to a centered div? didn't work.
.content {
width: 960px;
margin: 0 auto;
}
ul.producten {
margin-top: 4%;
list-style-type: none;
}
ul.producten li {
width: 315px;
}
ul.producten li img {
display: inline-block;
width: 295px;
}
.producten_top {
width: 315px;
height: 40px;
background: #3bcdff;
}
.producten_top h1 {
font-size: 30px;
color: #fff;
text-align: center;
padding: 5px 0;
}
.arrow_left {
display: inline-block;
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid #1c1c1d;
transform: rotate(225deg);
float: left;
}
.arrow_right {
display: inline-block;
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 5px solid #1c1c1d;
transform: rotate(315deg);
float: right;
}
<div class="content">
<ul class="producten">
<li>
<div class="producten_top"><h1>Test</h1></div>
<div class="arrow_left"></div>
<img src="http://assets.worldwildlife.org/photos/144/images/hero_small/Giant_Panda_Hero_image_(c)_Michel_Gunther_WWF_Canon.jpg?1345515244" alt="Plafond lampen">
<div class="arrow_right"></div>
</li>
</ul>
</div>
jsfiddle
what it needs to be:
Use position: absolute instead of display: inline-block and give 8px border for triangles instead of 5px and set display: block and margin: auto for make img center. of course you need to set position: relative; for parent (ul.producten li).
.content {
width: 960px;
margin: auto;
}
ul.producten {
margin-top: 4%;
list-style-type: none;
}
ul.producten li {
width: 315px;
position: relative;
}
ul.producten li img {
display: block;
width: 295px;
margin: auto;
}
.producten_top {
width: 315px;
height: 40px;
background: #3bcdff;
}
.producten_top h1 {
font-size: 30px;
color: #fff;
text-align: center;
padding: 5px 0;
}
.arrow_left {
width: 0;
height: 0;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-top: 8px solid #1c1c1d;
transform: rotate(225deg);
position: absolute;
left: 0;
top: 39px;
}
.arrow_right {
width: 0;
height: 0;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-bottom: 8px solid #1c1c1d;
transform: rotate(315deg);
position: absolute;
right: 0;
top: 39px;
}
<div class="content">
<ul class="producten">
<li>
<div class="producten_top"><h1>Test</h1></div>
<div class="arrow_left"></div>
<div class="arrow_right"></div>
<img src="http://assets.worldwildlife.org/photos/144/images/hero_small/Giant_Panda_Hero_image_(c)_Michel_Gunther_WWF_Canon.jpg?1345515244" alt="Plafond lampen">
</li>
</ul>
</div>
This technique makes a square div with a linear gradient alpha background that resembles a triangle. As a bonus, by adjusting the distance between alpha=1 and alpha=0 (the percentages) in the gradients you can change the anti-aliasing of the diagonal line (the left arrow has more anti-aliasing in this example).
.content {
width: 960px;
margin: 0 auto;
}
ul.producten {
margin-top: 4%;
list-style-type: none;
}
ul.producten li {
width: 315px;
position: relative;
}
ul.producten li img {
display: block;
width: 295px;
margin: auto;
}
.producten_top {
width: 315px;
height: 40px;
background: #3bcdff;
}
.producten_top h1 {
font-size: 30px;
color: #fff;
text-align: center;
padding: 5px 0;
}
.arrow_left {
width: 10px;
height: 10px;
background: linear-gradient(225deg, rgba(28,28,29,1) 44%,rgba(28,28,29,0) 56%);
position: absolute;
left: 0;
top: 40px;
}
.arrow_right {
width: 10px;
height: 10px;
background: linear-gradient(135deg, rgba(28,28,29,1) 48%,rgba(28,28,29,0) 50%);
position: absolute;
right: 0;
top: 40px;
}
<div class="content">
<ul class="producten">
<li>
<div class="producten_top"><h1>Test</h1></div>
<div class="arrow_left"></div>
<div class="arrow_right"></div>
<img src="http://assets.worldwildlife.org/photos/144/images/hero_small/Giant_Panda_Hero_image_(c)_Michel_Gunther_WWF_Canon.jpg?1345515244" alt="Plafond lampen">
</li>
</ul>
</div>
I have modified your css. The changes I made are:
Set the same width for the blue header and image
Set position fixed for image and right arrow
Set the arrows degrees values in negative
Check it out...
<html>
<head>
<style>
.content {
width: 960px;
margin: 0 auto;
}
ul.producten {
margin-top: 4%;
list-style-type: none;
}
ul.producten li {
width: 315px;
}
ul.producten li img {
display: inline-block;
width: 315px;
position: fixed;
}
.producten_top {
width: 315px;
height: 40px;
background: #3bcdff;
}
.producten_top h1 {
font-size: 30px;
color: #fff;
text-align: center;
padding: 5px 0;
}
.arrow_left {
display: inline-block;
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid #1c1c1d;
transform: rotate(-225deg);
float: left;
position: fixed;
}
.arrow_right {
display: inline-block;
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 5px solid #1c1c1d;
transform: rotate(-315deg);
float: right;
}
</style>
</head>
<body></body>
</html>
I am having trouble adding gray color to the left of that div.
<div class="full-width">
<div class="footer-nav">
<div class="footer-nav-left">
<p class="text-center"> © Copyright 2016. All Rights Reserved </p>
</div>
<div class="footer-nav-right">
Nav links here
</div>
</div>
</div>
Please check link below for full code:
JS Fiddle
What I need is:
A 60 deg angle requires uneven borders.
.footer-nav-left:after { /* note, now an 'after' */
content: '';
line-height: 0;
font-size: 0;
width: 0;
height: 0;
border-top: 80px solid gray;
border-bottom: 0px solid transparent;
border-left: 0px solid transparent;
border-right: 40px solid transparent; /* half border-top */
position: absolute;
top: 0;
left: 100%;
}
For the grey background extending to the left side of the viewport, use another pseudo-element
.footer-nav-left:before {
content: '';
line-height: 0;
font-size: 0;
width: 50vw;
height: 100%;
background: inherit;
position: absolute;
top: 0;
right: 100%;
}
body {
margin: 0;
}
.full-width {
background-color: black;
overflow: hidden;
/* no scroll bar */
}
.footer-nav {
min-height: 80px;
width: 480px;
margin: 0 auto;
}
.footer-nav-left {
background-color: gray;
min-height: 80px;
position: relative;
float: left;
color: #FFFFFF;
z-index: 1001;
}
.footer-nav-left:before {
content: '';
line-height: 0;
font-size: 0;
width: 50vw;
height: 100%;
background: green;
/* for demo purposes: use inherit for production */
position: absolute;
top: 0;
right: 100%;
z-index: -1;
}
.footer-nav-left:after {
content: '';
line-height: 0;
font-size: 0;
width: 0;
height: 0;
border-top: 80px solid gray;
border-bottom: 0px solid transparent;
border-left: 0px solid transparent;
border-right: 40px solid transparent;
position: absolute;
top: 0;
left: 100%;
}
.footer-nav-left p {
margin-top: 30px;
font-size: 15px;
}
<div class="full-width">
<div class="footer-nav">
<div class="footer-nav-left">
<p class="text-center">© Copyright 2016. All Rights Reserved</p>
</div>
<div class="footer-nav-right">
Nav links here
</div>
</div>
</div>
Note: the angled border only works (as would any) because the height of the parent is known. Percentage width borders are not yet possible.
Like this?
New css:
.footer-nav{
min-height: 80px;
width:100%; // <-- changed
margin:0 auto;
}
.footer-nav-left p{
margin-top: 30px;
font-size:15px;
margin-left: 80px; // <-- changed
}
Updated fiddle
Not sure about your border issue;
.footer-nav-left p{
margin-top: 30px;
font-size:15px;
margin-left:80px;
}
.footer-nav{
min-height: 80px;
width:960px;
margin:0 auto;
position:relative;
}
.footer-nav-left{
background-color:gray;
min-height:80px;
position: absolute;
left:0;
color:#FFFFFF;
z-index:1001;
}
My code display correctly on local, with a diamond shape in the middle of the navigation bar, but the "plus" sign missing the bottom part.(It's what I want to know how to fix it)
However, the outlook changed significantly after I pasted code into JSfiddle and Codepen.io
http://codepen.io/yumikohey/pen/PwPYxN
http://jsfiddle.net/yumiko/ae1zmqpa/
CSS
body{
}
header{
width: 100%;
height: 80px;
}
#top{
width: 100%;
height: 50px;
background-color: #000;
border-bottom: 10px solid #C2973C;
}
#socialBar_top{
width: 25%;
height: 30px;
margin: 0 10px;
float: right;
}
ul {
list-style-type: none;
padding: 10px;
}
ul li {
display: inline;
}
#expandButton {
width: 100%;
padding-left: 46%;
margin-top: 10px;
}
.centerBox{
margin-top: -50px;
padding-top: -10px;
}
#diamondButton {
width: 0;
height: 0;
border: 30px solid transparent;
border-bottom-color: #C2973C;
position: relative;
top: -30px;
}
#diamondButton:after {
content: '';
position: absolute;
left: -30px;
top: 30px;
width: 0;
height: 0;
border: 30px solid transparent;
border-top-color: #C2973C;
}
#plusSign {
margin: -30px 0 -0 -14px;
color: #fff;
font-size: 3em;
}
Thanks in advance for your generous help.
Try this :
#plusSign {
color: #fff;
font-size: 2em;
margin: 0 0 0 -9px;
position: absolute;
top: 29px;
z-index: 100000;
}
Fixed the issue with this code,
#plusSign {
margin-left: -14px;
color: #fff;
font-size: 3em;
position: absolute;
top: 0;
z-index: 100;
}
But can anyone explain why codePen and JSfiddle cannot display my code correctly?