I have this code snippet but it's not working, the text is not showing inside the iframe.
body {
background-color: grey;
border: grey solid 1px;
}
p.para1 {
margin: auto;
width: 40%;
border: 3px solid black;
padding: 20px;
background-color: black;
color: white;
}
iframe.sidepanels1 {
border: 5px dotted green;
background-color: grey;
position: absolute;
top: 10px;
right: 10px;
width: 320px;
height: 550px;
text-align: center;
}
iframe.sidepanels2 {
border: 5px dotted green;
background-color: grey;
position: absolute;
top: 10px;
left: 10px;
width: 320px;
height: 550px;
}
p.iframe {
position: absolute;
top: 20px;
text-align: center;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="mystyle.css" type="text/css">
<body>
<center><p class="para1">This is a lot of shit to be written here<br> and this is just an example of this shit m8</p></center>
<iframe class="sidepanels1"><p class="iframe">Testing</p></iframe>
<iframe class="sidepanels2"><p class="iframe">Trying</p></iframe>
</body>
</head>
</html>
Why do you use iframe?
iframe is used to embedding another HTML page into the current page. Check this
Change iframe for div and it will work.
body {
background-color: grey;
border: grey solid 1px;
}
p.para1 {
margin: auto;
width: 40%;
border: 3px solid black;
padding: 20px;
background-color: black;
color: white;
}
div.sidepanels1 {
border: 5px dotted green;
background-color: grey;
position: absolute;
top: 10px;
right: 10px;
width: 320px;
height: 550px;
text-align: center;
}
div.sidepanels2 {
border: 5px dotted green;
background-color: grey;
position: absolute;
top: 10px;
left: 10px;
width: 320px;
height: 550px;
}
p.iframe {
position: absolute;
top: 20px;
text-align: center;
}
<center><p class="para1">This is a lot of shit to be written here<br> and this is just an example of this shit m8</p></center>
<div class="sidepanels1"><p class="iframe">Testing</p></div>
<div class="sidepanels2"><p class="iframe">Trying</p></div>
Also you cannot have the body inside the head.
You have to check the HTML basic structure and the tags meanings, .
You can add the HTML code you want to appear in the iframe as srcdoc
attribute.
body {
background-color: grey;
border: grey solid 1px;
}
p.para1 {
margin: auto;
width: 40%;
border: 3px solid black;
padding: 20px;
background-color: black;
color: white;
}
iframe.sidepanels1 {
border: 5px dotted green;
background-color: grey;
position: absolute;
top: 10px;
right: 10px;
width: 320px;
height: 550px;
text-align: center;
}
iframe.sidepanels2 {
border: 5px dotted green;
background-color: grey;
position: absolute;
top: 10px;
left: 10px;
width: 320px;
height: 550px;
}
p.iframe {
position: absolute;
top: 20px;
text-align: center;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="mystyle.css" type="text/css">
</head>
<body>
<center><p class="para1">This is a lot of shit to be written here<br> and this is just an example of this shit m8</p></center>
<iframe class="sidepanels1" srcdoc="fsfsfsfsaf"></iframe>
<iframe class="sidepanels2" srcdoc="safsdfsdfsf"></iframe>
</body>
</html>
Related
I have parent and child div tag. I want to point arrow to child div tag from parent div tag.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
#curves div {
width: 100px;
height: 100px;
border: 5px solid #999;
}
#curves.width div {
border-color: transparent transparent transparent #999;
}
#curve1 {
-moz-border-radius: 50px 0 0 50px;
border-radius: 50px 0 0 50px;
}
.arrow-right {
width: 0;
height: 0;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-left: 27px solid #ccc;
float: right;
margin-top: -7px;
margin-right: -26px;
}
</style>
</head>
<body>
<div id="curves" class="width"> parent
<div id="curve1"> child </div><span class="arrow-right"> </span>
</div>
</body>
</html>
No javascript, Learning to use arrow in css
I want to make like this image
Here is an arrow with pure CSS. Supported by all browsers.
.arrow {
width: 120px;
}
.line {
margin-top: 14px;
width: 90px;
background: blue;
height: 10px;
float: left;
}
.point {
width: 0;
height: 0;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
border-left: 30px solid blue;
float: right;
}
<div class="arrow">
<div class="line"></div>
<div class="point"></div>
</div>
As already mentioned, you can do it with pseudo-elements. Here's a way to do it:
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.parent {
display: inline-flex;
flex-direction: column;
width: 100%;
margin-bottom: 10px;
}
.children {
position: relative;
}
.children {
margin-left: 12px;
}
.parent .children:not(:last-of-type):before {
content: "";
width: 1px;
height: 100%;
background-color: #666;
top: 0;
left: -10px;
position: absolute;
}
.parent .children:last-of-type:before {
content: "";
width: 6px;
height: 10px;
border-left: 1px solid #666;
border-bottom: 1px solid #666;
border-radius: 0 0 0 6px;
top: 0;
left: -10px;
position: absolute;
font-size: 10px;
line-height: 19px;
}
.parent .children:last-of-type:after {
content: "";
width: 4px;
height: 0px;
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
border-left: 5px solid #666;
top: 5px;
left: -6px;
position: absolute;
}
</style>
</head>
<body>
<div class="parent">
Parent
<div class="children">child</div>
<div class="children">child</div>
</div>
<div class="parent">
Parent
<div class="children">child</div>
</div>
</body>
</html>
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>
* {
margin: 0;
padding: 0;
}
body {
width: 100%;
height: 100%;
background-color: #DDDDDD;
}
h1 {
color: #00BBFF;
font-family: "Lato", "Helvetica", "Futura", sans-serif;
text-align: center;
font-size: 30px;
margin-top: 10px;
margin-bottom: 10px;
}
#container {
width: 550px;
height: 550px;
top:0;
bottom:0;
left:0;
right:0;
margin:auto;
}
#cakeContainer {
width: 400px;
height: 400px;
border-radius: 100% / 50%;
background-color: white;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
#top {
background-color: white;
border-bottom: 1px black solid;
width: 400px;
height: 70px;
border-radius: 100%;
padding-top: 100px;
}
#bottom {
background-color: white;
border-bottom: 1px black solid;
width: 400px;
height: 120px;
padding-top: 50px;
border-bottom-left-radius: 100%;
border-bottom-right-radius: 100%;
border-right: 1px solid black;
border-left: 1px solid black;
}
#middle {
background-color: white;
border-bottom-left-radius: 100%;
border-bottom-right-radius: 100%;
border-bottom: 20px #FFFFCC solid;
width: 400px;
height: 100px;
padding-bottom: 50px;
border-right: 1px solid black;
border-left: 1px solid black;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Happy Birthday!</title>
<link rel="stylesheet" type="text/css" href="css.css" />
<link rel="shortcut icon" type="image/png" href="http://www.giftatonce.com/store/android/uploaded_files/1458668593_GCN07.png"/>
</head>
<body>
<h1>Happy Birthday Mom!</h1>
<div id="container">
<div id="cakeContainer">
<div id="top">
</div>
<div id="middle">
</div>
<div id="bottom">
</div>
</div>
</div>
</body>
</html>
I want to connect the 2nd div (#middle) to the bottom div (#bottom) , but there's still a small space on the sides of the middle div, making it look unappealing. Any help?
And any design advice would be nice :P
Check it.
* {
margin: 0;
padding: 0;
}
body {
width: 100%;
height: 100%;
background-color: #DDDDDD;
}
h1 {
color: #00BBFF;
font-family: "Lato", "Helvetica", "Futura", sans-serif;
text-align: center;
font-size: 30px;
margin-top: 10px;
margin-bottom: 10px;
}
#container {
width: 550px;
height: 550px;
top:0;
bottom:0;
left:0;
right:0;
margin:auto;
}
#cakeContainer {
width: 400px;
height: 400px;
border-radius: 100% / 50%;
background-color: white;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
#top {
background-color: white;
border-bottom: 1px black solid;
width: 400px;
height: 70px;
border-radius: 100%;
padding-top: 100px;
}
#bottom {
background-color: white;
border-bottom: 1px black solid;
width: 400px;
height: 120px;
padding-top: 50px;
border-bottom-left-radius: 100%;
border-bottom-right-radius: 100%;
border-right: 1px solid black;
border-left: 1px solid black;
top: -79px;
position: relative;
z-index: 0;
}
#middle {
background-color: white;
border-bottom-left-radius: 100%;
border-bottom-right-radius: 100%;
border-bottom: 20px #FFFFCC solid;
width: 400px;
height: 100px;
padding-bottom: 50px;
border-right: 1px solid black;
border-left: 1px solid black;
position: relative;
z-index: 1;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Happy Birthday!</title>
<link rel="stylesheet" type="text/css" href="css.css" />
<link rel="shortcut icon" type="image/png" href="http://www.giftatonce.com/store/android/uploaded_files/1458668593_GCN07.png"/>
</head>
<body>
<h1>Happy Birthday Mom!</h1>
<div id="container">
<div id="cakeContainer">
<div id="top">
</div>
<div id="middle">
</div>
<div id="bottom">
</div>
</div>
</div>
</body>
</html>
You can try the following solution:
* {
margin: 0;
padding: 0;
}
body {
width: 100%;
height: 100%;
background-color: #DDDDDD;
}
h1 {
color: #00BBFF;
font-family: "Lato", "Helvetica", "Futura", sans-serif;
text-align: center;
font-size: 30px;
margin-top: 10px;
margin-bottom: 10px;
}
#container {
width: 550px;
height: 550px;
top:0;
bottom:0;
left:0;
right:0;
margin:auto;
}
#cakeContainer {
width: 400px;
height: 400px;
border-radius: 100% / 50%;
background-color: white;
bottom: 0;
left: 0;
right: 0;
margin: auto;
border:1px solid black;
}
#top {
background-color: white;
border: 1px black solid;
width: 400px;
height: 70px;
border-radius: 100%;
padding-top: 100px;
margin-left:-1px;
}
#bottom {
background-color: white;
border-bottom: 1px black solid;
width: 400px;
height: 120px;
padding-top: 50px;
border-bottom-left-radius: 100%;
border-bottom-right-radius: 100%;
border-right: 1px solid black;
border-left: 1px solid black;
margin-left: -1px;
}
#middle {
background-color: white;
width: 400px;
height: 100px;
border-bottom-left-radius: 100%;
border-bottom-right-radius: 100%;
border-bottom: 20px #FFFFCC solid;
}
<h1>Happy Birthday Mom!</h1>
<div id="container">
<div id="cakeContainer">
<div id="top"></div>
<div id="middle"></div>
<div id="bottom"></div>
</div>
</div>
I want to create a 2 column liquid layout with a nav bar on the left side that should have a height of 100%, a header that should have a width of 100% and a content section that should have a height and width of 100% as well, and there should be a margin on all sides of 10 or 20 pixels, and also in between the header, nav and content boxes. Here is my fiddle:
https://jsfiddle.net/d2Lnq6sd/1/
header {
position: relative;
height: 75px;
width: 100%;
background-color: red;
border: 1px solid black;
}
nav {
position: relative;
top: 20px;
left: 0px;
height: 100%;
width: 200px;
padding: 10px;
background-color: blue;
border: 1px solid black;
}
section {
position: absolute;
top: 110px;
left: 240px;
width: 100%;
background-color: green;
border: 1px solid black;
}
Now as you can see the nav bar is not 100% in height and the content section is too wide. My final result should look like this:
http://imageshack.com/a/img921/9425/UYp8Ah.png
Tried finding help on google on this issue but I still don't get what I should use, relative or absolute positions and which to use for which attribute. any pointers?
You're good to go: http://codepen.io/8odoros/pen/vKxVYv?editors=1100
nav bar is 100% in height
the content section is not too
wide
html, body {
height:calc(100% - 60px);
}
body {
font-family: verdana;
color: #fff;
}
.container {
position: relative;
margin: 10px;
padding: 10px;
height:100%;
box-sizing:border-box;
}
header {
float:left;
height: 75px;
width: 100%;
background-color: red;
border: 1px solid black;
box-sizing:border-box;
}
nav {
float:left;
margin-top:20px;
height: 100%;
width: 200px;
padding: 10px;
background-color: blue;
border: 1px solid black;
box-sizing:border-box;
}
section {
float:right;
margin-top:20px;
height:100%;
padding: 10px;
width:calc(100% - 220px);
background-color: green;
border: 1px solid black;
box-sizing:border-box;
}
<div class="container">
<header>
This is the header
</header>
<nav>
This is the nav
</nav>
<section>
This is the main section
</section>
</div>
Try this code and see demo:
CSS:
body {
color: #fff;
font-family: verdana;
}
header {
background-color: red;
border: 1px solid black;
height: 75px;
width: 100%;
}
nav {
background-color: blue;
border: 1px solid black;
float: left;
margin: 2% 0;
min-height: 300px;
padding: 10px;
width: 20%;
height: 100%;
}
section {
background-color: green;
border: 1px solid black;
float: right;
position: absolute;
right: 10px;
top: 100px;
width: 75%;
}
See Fiddle Demo
Alright so I changed a few things:
https://jsfiddle.net/d2Lnq6sd/9/
body,html {
height:100%;
}
body {
font-family: verdana;
color: #fff;
}
.container {
position: relative;
margin: 10px;
padding: 10px;
width: 73%;
float: left;
height:auto;
}
header {
position: relative;
height: 75px;
width: 100%;
background-color: red;
border: 1px solid black;
}
aside {
float:left;
width:20%;
margin-top:15px;
margin-left:5px;
height: 100%;
background-color: blue;
border: 1px solid black;
}
section {
width: 100%;
background-color: green;
border: 1px solid black;
}
I have moved your navigation into an aside tag, this is just HTML 5 syntax Link
By using floats and keeping the positions as they were you are able to create the desired effect. To get the width to 100% I would recommend playing with the padding and margins to get it to a 20% + 80% ratio.
Hope this helps :)
Do you need like this ,
Html:
<div class="container">
<header>
This is the header
</header>
<nav>
This is the nav
</nav>
<section>
This is the main section
</section>
</div>
Css:
body {
font-family: verdana;
color: #fff;
}
.container {
position: relative;
margin: 10px;
padding: 10px;
}
header {
position: relative;
height: 75px;
width:675px;
background-color: red;
border: 1px solid black;
}
nav {
position: relative;
top: 20px;
left: 0px;
height: 300px;
bottom:200px;
width: 200px;
padding: 10px;
background-color: blue;
border: 1px solid black;
}
section {
position: absolute;
top: 110px;
left: 240px;
width: 100%;
background-color: green;
border: 1px solid black;
}
you can see the link:https://jsfiddle.net/d2Lnq6sd/11/
You can position nav as fixed, use below to get an idea.
nav {
position: fixed;
top: 20px;
left: 0px;
height: 100%;
width: 200px;
padding: 10px;
background-color: blue;
border: 1px solid black;
margin-top: 76px;
}
Currently I am making a website. I input images into a div, and then text overlays that image to describe it. I put the text over the image, and then put a opacity of .5. The problem with my code is that the text will not scroll. The scroll is shown, but it will not work.
My HTML
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="style.css"/>
<style type="text/css">
<!--
body {
margin: 0px;
}
-->
</style>
</head>
<body>
<div id="wrapper">
<div id="background">
<h10>.</h10>
</div>
<div id="header">
<div id="logobackground">
<img src="http://localhost/cabinchic/logo.png">
</div>
<div id="navbar">
<a href="http://localhost/cabinchic/home.html">
<div id="homebutton">
<h1> Home </h1>
</div>
</a>
<a href="http://localhost/cabinchic/homedecor.html">
<div id="homedecorbutton" style="border-radius: 8px; color: #00693E;;background-image: url(http://localhost/cabinchic/woodplankgreen.jpg)">
<h1> Home Decor </h1>
</div>
</a>
<a href="http://localhost/cabinchic/askheather.html">
<div id="askheatherbutton">
<h1> Ask Heather </h1>
</div>
</a>
</div>
</div>
<div id="leftbox">
</div>
<div id="mainbox">
<div class="picture" style="background-image: url(http://localhost/cabinchic/stones.jpg)">
<div class="text">
<h1> 26473264738654356427564 gyugfyubyeefwafwaf67erafh6ea7f67webf7bqyeuiewHFUIWhf78whiuNEuiwehui </h1>
</div>
</div>
</div>
<div id="footer">
<div id="footerborder">
<h10>.</h10>
</div>
<center>
<img src="http://localhost/cabinchic/logo.png" style="max-height: 18%; margin-top: -2%">
<div id="footertextcr"> <h1>All Rights Reserved © 2014 Python Daily</h1> </div>
<div id="footertext"> <h1>Logo made by Fatpaint | Site made by Michael Jones</h1> </div>
</center>
</div>
</div>
</body>
</html>
My CSS
/*Dartmouth Green Color Code Is #00693E*/
#background {
background-image: url("http://localhost/cabinchic/flatstone.jpg");
z-index: -10;
height: 160%;
width: 100%;
position: absolute;
}
#wrapper {
height: 100%;
width: 100%;
/*overflow-y: scroll;*/
position: absolute;
}
#header {
height: 100%;
width: 100%;
position: fixed;
}
#logobackground {
width: 100%;
background-image: url("http://localhost/cabinchic/wood.jpg");
text-align: center;
position: fixed;
margin-top: -3.8%;
}
#navbar {
height: 10%;
width: 100%;
background-image: url("http://localhost/cabinchic/woodbark.jpg");
margin-top: 13.6%;
position: fixed;
border-top: 1px solid black;
border-bottom: 1px solid black;
}
#homebutton {
background-image: url("http://localhost/cabinchic/woodplank.jpg");
height: 10%;
width: 12%;
position: fixed;
margin-left: 19%;
text-align: center;
font-size: 80%;
color: black;
}
#homebutton:hover {
color: #00693E;
border-radius: 8px;
}
#homedecorbutton {
background-image: url("http://localhost/cabinchic/woodplank.jpg");
height: 10%;
width: 12%;
position: fixed;
margin-left: 44%;
text-align: center;
font-size: 80%;
color: black;
}
#homedecorbutton:hover {
color: #00693E;
border-radius: 8px;
}
#askheatherbutton {
background-image: url("http://localhost/cabinchic/woodplank.jpg");
height: 10%;
width: 12%;
position: fixed;
margin-left: 69%;
text-align: center;
font-size: 80%;
color: black;
}
#askheatherbutton:hover {
color: #00693E;
border-radius: 8px;
}
#leftbox {
width: 20%;
height: 105.8%;
position: absolute;
background-image: url("http://localhost/cabinchic/barkpine.jpg");
margin-top: 19%;
border-right: 1px solid black;
border-bottom: 1px solid black;
border-top: 1px solid black;
border-top-right-radius: 8px;
border-bottom-right-radius: 8px;
z-index: -1;
background-size: 100%;
}
#mainbox {
width: 76%;
height: 100%;
position: absolute;
margin-top: 20.4%;
margin-left: 22%;
background-image: url("http://localhost/cabinchic/barkbrown.jpg");
border-radius: 8px;
border: 1px solid black;
/*background-size: 100%;*/
z-index: -1;
}
.picture {
border-radius: 6px;
border: 1px solid black;
background-size: cover;
position: absolute;
height: 55%;
width: 80%;
margin-left: 10%;
border-bottom-right-radius: 0px;
max-height: 55%;
z-index: 1;
}
.text {
overflow-y: scroll;
width: 100%;
height: 20%;
max-height: 20%;
background-color: black;
color: white;
opacity: .5;
border-top: 2px solid white;
margin-top: 34.3%;
font-size: 60%;
z-index: 2;
position: relative;
}
#footer {
width: 100%;
margin-top: 70%;
background-image: url("http://localhost/cabinchic/wood.jpg");
border-bottom: 1px solid black;
}
#footerborder {
width: 100%;
height: 2%;
margin-top: 40%;
background-image: url("http://localhost/cabinchic/woodbark.jpg");
}
#footertextcr {
color: white;
font-size: 50%;
margin-top: -3.5%;
}
#footertext {
color: white;
font-size: 40%;
margin-top: -1%;
}
a, u {
text-decoration: none;
}
Sorry that there is no spacing in the CSS code it didn't paste right...
Problem #1:
Your header has a height of 100%, a width of 100%, and is fixed over the page, thus covering the div and scroll bars and removing the ability to scroll.
Problem #2:
The container for the text, #mainbox has a z-index of -1, thus putting it and its children behind of everything else:
#mainbox {
width: 76%;
height: 100%;
position: absolute;
margin-top: 20.4%;
margin-left: 22%;
background-image: url("http://localhost/cabinchic/barkbrown.jpg");
border-radius: 8px;
border: 1px solid black;
/*background-size: 100%;*/
}
JSFiddle Demo