* {
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>
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 will show you with this example:
body {
background-image: url('http://wallpapercave.com/wp/adsKXLw.png');
background-repeat: no-repeat;
overflow: scroll;
background-size: 1050px 500px;
height: 100%;
margin: 0 auto;
}
#huge {
width: 900px;
height: 498px;
position: absolute;
background-color: rgba(255, 103, 48, 0.5);
left: 75px;
top: 0%;
}
.navbar div, .navbar div p {
position: fixed;
}
#navbar-background {
width: 820px;
height: 110px;
border-radius: 70px;
top: 11px;
left: 115px;
background-color: rgba(255,255,255, .2);
z-index: 1
}
#home-div {
background-color: rgb(249, 162, 100);
width: 210px;
height: 60px;
border-radius: 30px;
position: fixed;
left: 135px;
top: 30px;
z-index: 2;
border-top: 1px white solid;
border-left: 1px solid white
}
#home-div-button {
background-color: rgb(200, 131, 78);
width: 215px;
height: 60px;
border-radius: 30px;
z-index: 1;
top: 40px;
left: 140px;
position: fixed;
}
#home-text {
font-family: Comfortaa;
text-align: center;
top: 10px;
left: 145px;
font-size: 30px;
color: #FFFFFF;
}
#clan-div {
width: 90px;
height: 45px;
border: 2px white solid;
left: 505px;
top: 40px;
position: fixed;
border-radius: 10px 0px 0px 10px;
}
#clan-text {
left: 512px;
top: 35px;
font-size: 14px;
font-family: Comfortaa;
text-align: center;
color: #FFFFFF;
}
#clan-div-2 {
width: 90px;
height: 45px;
border: 2px white solid;
left: 597px;
top: 40px;
position: fixed;
border-radius: 0px 10px 10px 0px;
}
#clan-text-2 {
left: 610px;
top: 35px;
font-size: 14px;
font-family: Comfortaa;
text-align: center;
color: #FFFFFF;
}
#games-div {
width: 90px;
height: 45px;
border: 2px white solid;
left: 712px;
top: 40px;
position: fixed;
border-radius: 10px;
}
#games-text {
font-size: 20px;
font-family: Comfortaa;
color: #FFFFFF;
top: 35px;
left: 723px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>The Own Clan Website</title>
<link href="https://fonts.googleapis.com/css?family=Comfortaa" rel="stylesheet">
<link href="style.css" rel="stylesheet" text="text/css">
<link href="script-1.js" type="text/javascript">
</head>
<body>
<div div="everything">
<div id="huge"></div>
<div class="navbar">
<div id="navbar-background"></div>
<div id="home-div">
<p id="home-text">Home Thing</p>
</div>
<div id="home-div-button"></div>
<div id="clan-div">
<p id="clan-text">Thing<br>Button</p>
</div>
<div id="clan-div-2">
<p id="clan-text-2">Hello <br>World</p>
</div>
<div id="games-div">
<p id="games-text">Stuff</p>
</div>
</div>
</div>
</body>
</html>
The navbar is set to fixed so that the it will stay when the user scrolls down or up. The problem is that if the user's screen is small then when they scroll sideways the navbar will stay with them.
body {
background-image: url('http://wallpapercave.com/wp/adsKXLw.png');
background-repeat: no-repeat;
overflow: scroll;
background-size: 1050px 500px;
height: 100%;
margin: 0 auto;
}
#huge {
width: 900px;
height: 498px;
position: absolute;
background-color: rgba(255, 103, 48, 0.5);
left: 75px;
top: 0%;
}
.navbar div, .navbar div p {
position: fixed;
}
#navbar-background {
width: 100%;
height: 110px;
border-radius: 70px;
top: 11px;
background-color: rgba(255,255,255, .2);
z-index: 1;
}
#home-div {
background-color: rgb(249, 162, 100);
width: 40%;
height: 60px;
border-radius: 30px;
position: fixed;
left: 5px;
top: 30px;
z-index: 2;
border-top: 1px white solid;
border-left: 1px solid white;
}
#home-div-button {
background-color: rgb(200, 131, 78);
width: 40%;
height: 60px;
border-radius: 30px;
z-index: 1;
left: 8px;
top: 40px;
}
#home-text {
font-family: Comfortaa;
text-align: center;
width: 40%;
left: 10px;
font-size: 18px;
color: #FFFFFF;
}
#clan-div {
width: 16%;
height: 45px;
border: 2px white solid;
left: 250px;
top: 40px;
position: fixed;
border-radius: 10px 0px 0px 10px;
}
#clan-text {
left: 275px;
width: 9%;
top: 35px;
font-size: 14px;
font-family: Comfortaa;
text-align: center;
color: #FFFFFF;
}
#clan-div-2 {
width: 15%;
height: 45px;
border: 2px white solid;
left: 342px;
top: 40px;
position: fixed;
border-radius: 0px 10px 10px 0px;
}
#clan-text-2 {
left: 365px;
top: 35px;
width: 9%;
font-size: 14px;
font-family: Comfortaa;
text-align: center;
color: #FFFFFF;
}
#games-div {
width: 90px;
height: 45px;
border: 2px white solid;
left: 445px;
top: 40px;
position: fixed;
border-radius: 10px;
}
#hello {
width: 100%;
}
#games-text {
font-size: 20px;
font-family: Comfortaa;
color: #FFFFFF;
top: 35px;
left: 468px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>The Own Clan Website</title>
<link href="https://fonts.googleapis.com/css?family=Comfortaa" rel="stylesheet">
<link href="style.css" rel="stylesheet" text="text/css">
<link href="script-1.js" type="text/javascript">
</head>
<body>
<div div="everything">
<div id="huge"></div>
<div class="navbar">
<div id="navbar-background">
<div id="home-div">
<p id="home-text">Home Thing</p>
</div>
<div id="home-div-button"></div>
</div>
</div>
</div>
</body>
</html>
See if this helps, you should look into Bootstrap or Foundation as well.
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>
The top picture shows what it turns out for me, and the bottom one shows how it is supposed to be. So what I need help with is to properly place the white "box".
Here the image: http://imgur.com/a/HSAh5
My Code
div {
border: solid 1px black;
}
#div1 {
background-color: Silver;
height: 300px;
width: 100px;
margin-bottom: 5px;
}
.ruta {
background-color: white;
height: 200px;
width: 400px;
margin-left: 120px;
}
#div2 {
background-color: Black;
width: 402px;
height: 10px;
align-top:5px;
}
<!DOCTYPE html>
<html>
<link rel="stylesheet" href="stylesheet.css">
<head>
<title>Page Title</title>
</head>
<body>
<div id="div1"></div>
<div class="ruta"></div>
<div id="div2"></div>
</body>
</html>
And here is the original code which we are supposed to edit. The blank spaces is what should be filled in.
________
{
border: solid 1px black;
}
_______
{
background-color: Silver;
height: 300px;
width: 100px;
________________________
}
_______
{
background-color: White;
height: 200px;
width: 400px;
margin-left: 120px;
}
_______
{ background-color: Black;
width: 402px;
height: 10px;
margin-top: 5px;
________________________
}
<body>
<div id="div1"></div>
<div class="ruta"></div>
<div id="div2"></div>
</body>
div
{
border: solid 1px black;
}
#div1
{
background-color: Silver;
height: 300px;
width: 100px;
float:left;//this will align your sidebar to left and clear aditional space
}
.ruta
{
background-color: White;
height: 200px;
width: 400px;
margin-left: 120px;
}
#div2
{
background-color: Black;
width: 402px;
height: 10px;
margin-top: 5px;
clear:both;//added
}
<body>
<div id="div1"></div>
<div class="ruta"></div>
<div id="div2"></div>
</body>
you can do it in several ways.this is one of it.try this
<!DOCTYPE html>
<html>
<head>
<title>hover</title>
<style type="text/css">
body{
margin:0;
padding:0;
}
div#div1{
width: 100px;
height: 300px;
background-color: Silver;
border:1px solid black;
margin: 10px;
}
div.ruta{
width: 400px;
height: 200px;
background-color: white;
margin: 10px;
border: 1px solid black;
position: absolute;
left: 120px;
top: 0;
margin-top: 10px;
}
div#div2{
width: 402px;
height: 10px;
background-color: black;
clear: both;
position: absolute;
top: 310px;
margin: 10px;
}
</style>
</head>
<body>
<div id="div1"></div>
<div class="ruta"></div>
<div id="div2"></div>
</body>
</html>
This is another way
<!DOCTYPE html>
<html>
<head>
<title>hover</title>
<style type="text/css">
body{
margin:0;
padding:0;
}
div#div1{
width: 100px;
height: 300px;
background-color: Silver;
border:1px solid black;
margin: 10px;
float: left;
}
div.ruta{
width: 400px;
height: 200px;
background-color: white;
margin: 10px;
border: 1px solid black;
float: left;
}
div#div2{
width: 402px;
height: 10px;
background-color: black;
clear: both;
margin-left: 10px;
}
</style>
</head>
<body>
<div id="div1"></div>
<div class="ruta"></div>
<div id="div2"></div>
</body>
</html>
This is third way with only using margin propery without float or position properties
<!DOCTYPE html>
<html>
<head>
<title>hover</title>
<style type="text/css">
body{
margin:0;
padding:0;
}
div#div1{
width: 100px;
height: 300px;
background-color: Silver;
border:1px solid black;
margin: 10px;
}
div.ruta{
width: 400px;
height: 200px;
background-color: white;
margin: 10px;
border: 1px solid black;
margin-top: -310px;
margin-left: 120px;
}
div#div2{
width: 402px;
height: 10px;
background-color: black;
margin-left: 10px;
margin-top: 110px;
}
</style>
</head>
<body>
<div id="div1"></div>
<div class="ruta"></div>
<div id="div2"></div>
</body>
</html>
I'm trying to make it so the boxes are next to each other, but when I add another box it goes to the bottom. I'm fairly new to html and css, how would you do that? If you could code that part for me and explain it, I'd be really grateful.
Image:
http://i61.tinypic.com/9lj0ox.png
<div id="leftside">
<div id="portrait"></div>
<div id="leftbox"><b>About Me</b><p>test</p></div>
<style>
#leftside {
position: fixed;
margin-left: 0px;
top: 125px;
width: 220px;
height: 485px;
padding: 20px;
background: rgba(255,255,255,0.5);
background-repeat: repeat;
background-attachment: fixed;
border: 1px solid #000;
border-radius: 5px;
}
#portrait {
margin-left: 0px;
width: 200px;
height: 200px;
padding: 10px;
background: url(http://i861.photobucket.com/albums/ab179/treeskywind/profile/kidosmall2_zps57444730.png );
border: 1px solid #000;
border-radius: 5px;
color: #fff;
font-family: Century Gothic;
}
#leftbox {
height: 230px;
width: 200px;
margin-left: 0px;
margin-top: 20px;
background-color: #6855A7;
color: #fff;
border: 1px solid #000;
border-radius: 5px;
padding: 10px;
font-family: Century Gothic;
text-align: justified;
overflow: auto;
}
</style>
</div>
<div id="rightside">
<div id="box1"><b>Links</b></div>
<div id="rightbox"><b>My Interests</b></div>
<div id="box2">test</div>
<style>
#rightside {
position: fixed;
margin-left: 0px;
top: 125px;
width: 600px;
height: 485px;
padding: 20px;
background: rgba(255,255,255,0.5);
background-repeat: repeat;
background-attachment: fixed;
border: 1px solid #000;
border-radius: 5px;
margin-left: 280px;
}
#box1 {
margin-left: 0px;
width: 200px;
height: 160px;
padding: 10px;
background: #6855A7;
border: 1px solid #000;
border-radius: 5px;
color: #fff;
font-family: Century Gothic;
}
#rightbox {
height: 260px;
width: 200px;
margin-left: 0px;
margin-top: 20px;
background-color: #6855A7;
color: #fff;
border: 1px solid #000;
border-radius: 5px;
padding: 10px;
font-family: Century Gothic;
text-align: justified;
overflow: auto;
}
#box2 {
width: 200px;
height: 160px;
padding: 10px;
background: #6855A7;
border: 1px solid #000;
border-radius: 5px;
color: #fff;
font-family: Century Gothic;
margin-left: 250px;
}
</style>
</div>
you can use:
display: inline-block;
btw put your above your page html!!