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>
Related
I have given my divs a min-width.
But if the width increases to more that this then the width should be percentage of the parent container.
I can't for the life of me figure out why I am unable to fix this silly thing.
Any help will be appreciated.
https://jsfiddle.net/q6u3sh5f/
In the fiddle above you can see the wrap's white border extends the width of the window but my divs have a mind of their own.
<html>
<body>
<div class = "wrap">
<div class="date">Date</div>
<div class="month">Month</div>
<div class="task">Task</div>
<div class="status">Status</div>
</div>
</body>
</html>
body {
background-color: #4efa6d;
}
.wrap {
width: 100%;
border: 1px solid white;
}
.date {
min-width: 60px;
width: 6.25%;
float: left;
border: 1px solid red;
margin: 5px;
padding: 5px;
}
.month {
min-width: 70px;
width: 6.25%;
float: left;
border: 1px solid red;
margin: 5px;
padding: 5px;
}
.task {
min-width: 540px;
width: 67.5%;
width: auto;
float: left;
border: 1px solid red;
margin: 5px;
padding: 5px;
}
.status {
min-width: 100px;
width: 12.50%;
float: left;
border: 1px solid red;
margin: 5px;
padding: 5px;
}
You can do using flex.(hope this is not an issue)
float has become old as of now.
I have moved px to random % for min-width feel free to modify this.
fiddle to playaround.
body {
background-color: #4efa6d;
}
.wrap {
width: 100%;
border: 1px solid white;
display:flex;
}
.date, .month {
min-width: 2%;
width: 6.25%;
border: 1px solid red;
margin: 5px;
padding:5px;
}
.task {
min-width: 10%;
width: 67.5%;
margin: 5px;
padding:5px;
border: 1px solid red;
}
.status {
min-width: 5%;
width: 12.5%;
border: 1px solid red;
margin: 5px;
padding:5px;
}
<html>
<body>
<div class = "wrap">
<div class="date">Date</div>
<div class="month">Month</div>
<div class="task">Task</div>
<div class="status">Status</div>
</div>
</body>
</html>
I am making my first webpage and am having trouble positioning elements. They keep overlapping each other when I resize the browser. The title is positioned absolute, but this means it overlaps the image at the top. I cant get it into position by any other means. Can anyone help?
My question wasn't answered properly the first time.
.wrapper {
margin: 0 auto;
max-width: 1024px;
min-width: 1024px;
min-height: 760px;
max-height: 760px;
padding-right: 15px;
padding-left: 15px;
border: 5px solid red;
}
.header img {
min-width: 77%;
max-width: 77%;
min-height: 200px;
max-height: 200px;
position: relative;
left: 23%;
}
#cont {
position: relative;
width: 200px;
height: 200px;
border: 5px solid red;
}
#cont .header {
position: relative;
width: 200px;
height: 200px;
border: 5px solid red;
}
.top-left {
position: absolute;
top: 11px;
left: 23%;
color: teal;
font-size: 63px;
min-width: 100px;
max-width: 100px;
min-height: 100px;
max-height: 100px;
font-family: Helvetica;
text-align: center;
}
<!DOCTYPE html>
<html>
<head>
<title></title>
<link href="./new 1.css" type="text/css" rel="stylesheet">
</head>
<body>
<div class="wrapper">
<div class="header">
<img src="C:\Users\Duncan\Desktop\Coding\Images\guitar_banner.jpg" alt="Dunc's guitar lessons in Isleworth" />
<div id="cont">
<div class="top-left">Dunc's<br/> Guitar<br/> Lessons</div>
</div>
</div>
</div>
</body>
</html>
Thanks
Did you try something like this ? please tell me if i wrong.
Here your css code.
.wrapper {
margin: 0 auto;
max-width: 1024px;
min-width: 1024px;
min-height: 760px;
max-height: 760px;
padding-right: 15px;
padding-left: 15px;
border: 5px solid red;
}
.header img {
min-width: 77%;
max-width: 77%;
min-height: 200px;
max-height: 200px;
position: relative;
left: 23%;
}
#cont {
position: absolute;
z-index:1000;
width: 200px;
height: 200px;
border: 5px solid red;
}
#cont .header {
position: relative;
width: 200px;
height: 200px;
border: 5px solid red;
}
.top-left {
position: absolute;
top: 11px;
left: 23%;
color: teal;
font-size: 63px;
min-width: 100px;
max-width: 100px;
min-height: 100px;
max-height: 100px;
font-family: Helvetica;
text-align: center;
}
And here your html code.
<div class="wrapper">
<div class="header">
<div id="cont">
<div class="top-left">Dunc's<br/> Guitar<br/> Lessons</div>
</div>
<img src="C:\Users\Duncan\Desktop\Coding\Images\guitar_banner.jpg" />
</div>
</div>
Hope this help you.
Good luck.
* {
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 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>
When I put first and second div I made into the the main div it isnt in him, but outside under.
Please paste it in text editor and run it to see the problem and tell me what I did wrong please.
HTML
<head>
<title>TEST</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<div class="main">
<div id="second_div"></div>
<div id="facebook"></div>
<div id="twitter"></div>
</div>
</body>
CSS
div.main {
background-color: gray;
height: 1000px;
width: 1260px;
padding: 0px;
margin: 0px;
}
* {
padding: 0px;
margin: 0px;
overflow: hidden;
}
#second_div {
background-color: brown;
height: 280px;
width: 1150px;
border: 4px solid black;
margin-left: 50px;
margin-right: 50px;
margin-top: 20px;
overflow: hidden;
float: left;
}
#twitter {
background-color: lightblue;
height: 100px;
width: 200px;
float: left;
margin-left: 980px;
margin-top: 180px
}
#facebook {
background-color: darkblue;
height: 100px;
width: 200px;
margin-top: 20px;
margin-right: 80px;
margin-left: 980px;
}
div.main {
background-color: gray;
width: 1260px;
padding: 0px;
margin: 0px auto;
}
* {
padding: 0px;
margin: 0px;
overflow: hidden;
}
#second_div {
background-color: brown;
height: 280px;
width: 1150px;
border: 4px solid black;
display:inline-block;
verticle-align:top;
}
#twitter {
background-color: lightblue;
height: 100px;
width: 200px;
display:inline-block;
verticle-align:top;
}
#facebook {
background-color: darkblue;
height: 100px;
width: 200px;
display:inline-block;
verticle-align:top;
}
<div class="main">
<div id="second_div">
<div id="facebook"></div>
<div id="twitter"></div>
</div>
</div>
HTML
<div class="main">
<div id="second_div">
<div id="facebook"> </div>
<div id="twitter"> </div>
</div>
</div>
css
.main { background:gray; overflow:hidden; padding:50px;}
#second_div { background:brown; height:50%; overflow:hidden; border: 4px solid black; padding:20px;}
#facebook { float:left; background:darkblue; width:100px; height:150px; margin-right:20px;}
#twitter { float:left; background:lightblue; height:150px; width:150px;}