The div with style contentdetailleft is absolute and so will be positioned to the div with the style container (since container is absolute). You can see that I have set left to 0px and top to 0px just to illustrate this. If you run it you will see the div with contentdetailleft overlap the div with style contentTop as you would expect. This is the HTML:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1.0"/>
<title>Charts</title>
<link rel="stylesheet" href="css/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<style>
html, body {
width: 100%;
height: 100%;
margin: 0px auto;
padding:0;
background-color: blue;
}
h3 {
margin: .5em;
color: black;
}
.container {
width:98%;margin:1%;height:96%;overflow:auto;position:absolute;
}
.containerTop {
width:100%;height:auto;
}
.containerBottom {
width:100%;margin-top:40px;height:auto;
}
.contentheaderleft {
width:20%;float:left;height:40px;left:0px;top:0px;position:absolute;border:1px solid #ddd;color:#666;background-color:yellow;
}
.contentheaderright {
width:77%;float:left;overflow:auto;overflow:hidden;margin-left:1%;position:absolute;left:21%;height:40px;border:1px solid #ddd;color:#666; background-color: red;
}
.contentdetailleft {
width:20%;height:89%;position:absolute;left:0px;top:0px;border: 1px solid #ddd; background-color: #fbf9ee;
}
.contentdetailright {
width:77%;float:left;overflow:auto;overflow:hidden;margin-left:1%;position: absolute;left:21%;height: 89%;border: 1px solid #ddd; background-color: #fbf9ee;
}
</style>
</head>
<body>
<label id="spn" style="display:none"></label>
<label id="spnstring" style="display:none"></label>
<div class="container">
<div class="containerTop">
<div class="contentheaderleft">
<h3 align="center">Widget</h3>
</div>
<div class="contentheaderright">
<h3 align="center">Drop Your Widget Here</h3>
</div>
</div>
<div class="containerBottom">
<div id="leftdiv" class="contentdetailleft">
</div>
<div class="contentdetailright" id="rightsec">
</div>
</div>
</div>
</body>
</html>
Now remove the left:0px and top:0px on the contentdetailleft style (see the HTML below). Now the div with style contentdetailleft is within the div with style contentBottom. How can this be?
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1.0"/>
<title>Charts</title>
<link rel="stylesheet" href="css/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<style>
html, body {
width: 100%;
height: 100%;
margin: 0px auto;
padding:0;
background-color: blue;
}
h3 {
margin: .5em;
color: black;
}
.container {
width:98%;margin:1%;height:96%;overflow:auto;position:absolute;
}
.containerTop {
width:100%;height:auto;
}
.containerBottom {
width:100%;margin-top:40px;height:auto;
}
.contentheaderleft {
width:20%;float:left;height:40px;left:0px;top:0px;position:absolute;border:1px solid #ddd;color:#666;background-color:yellow;
}
.contentheaderright {
width:77%;float:left;overflow:auto;overflow:hidden;margin-left:1%;position:absolute;left:21%;height:40px;border:1px solid #ddd;color:#666; background-color: red;
}
.contentdetailleft {
width:20%;height:89%;position:absolute;border: 1px solid #ddd; background-color: #fbf9ee;
}
.contentdetailright {
width:77%;float:left;overflow:auto;overflow:hidden;margin-left:1%;position: absolute;left:21%;height: 89%;border: 1px solid #ddd; background-color: #fbf9ee;
}
</style>
</head>
<body>
<label id="spn" style="display:none"></label>
<label id="spnstring" style="display:none"></label>
<div class="container">
<div class="containerTop">
<div class="contentheaderleft">
<h3 align="center">Widget</h3>
</div>
<div class="contentheaderright">
<h3 align="center">Drop Your Widget Here</h3>
</div>
</div>
<div class="containerBottom">
<div id="leftdiv" class="contentdetailleft">
</div>
<div class="contentdetailright" id="rightsec">
</div>
</div>
</div>
</body>
</html>
Thanks
Ian
The reason you are seeing this change in behavior is because the default positioning that occurs when you use "position: absolute;" is "left: 0;". However, "top: 0;" is not default behavior, so when you add that (as you correctly said), ".contentdetailleft" is positioned to the ".container" element.
Because ".contentdetailleft" comes after ".contentheaderleft" in the DOM (*and more importantly, because ".containerBottom" and ".containerTop" are still default position - static), once ".containerdetailleft" becomes positioned absolutely it is pulled out of the normal flow of the DOM and positioned based on it's relative/absolute parent (".container"). At this point it is sitting at the top-left corner of container, on top of ".containerTop", and thus on top of ".contentheaderleft".
You don't need the style "left: 0;" on ".contentdetailleft" once it has been positioned absolutely. If you would like to keep it absolute and have the "top" styling, but not have it overlap/cover ".contentheaderleft", simply position it from the top at the exact height of ."contentheaderleft" (42px), i.e. "top: 42px;".
*see below, all I updated was the top position of ".contentdetailleft"
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1.0"/>
<title>Charts</title>
<link rel="stylesheet" href="css/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<style>
html, body {
width: 100%;
height: 100%;
margin: 0px auto;
padding:0;
background-color: blue;
}
h3 {
margin: .5em;
color: black;
}
.container {
width:98%;margin:1%;height:96%;overflow:auto;position:absolute;
}
.containerTop {
width:100%;height:auto;
}
.containerBottom {
width:100%;margin-top:40px;height:auto;
}
.contentheaderleft {
width:20%;float:left;height:40px;left:0px;top:0px;position:absolute;border:1px solid #ddd;color:#666;background-color:yellow;
}
.contentheaderright {
width:77%;float:left;overflow:auto;overflow:hidden;margin-left:1%;position:absolute;left:21%;height:40px;border:1px solid #ddd;color:#666; background-color: red;
}
.contentdetailleft {
width:20%;height:89%;position:absolute;left:0px;top:42px;border: 1px solid #ddd; background-color: #fbf9ee;
}
.contentdetailright {
width:77%;float:left;overflow:auto;overflow:hidden;margin-left:1%;position: absolute;left:21%;height: 89%;border: 1px solid #ddd; background-color: #fbf9ee;
}
</style>
</head>
<body>
<label id="spn" style="display:none"></label>
<label id="spnstring" style="display:none"></label>
<div class="container">
<div class="containerTop">
<div class="contentheaderleft">
<h3 align="center">Widget</h3>
</div>
<div class="contentheaderright">
<h3 align="center">Drop Your Widget Here</h3>
</div>
</div>
<div class="containerBottom">
<div id="leftdiv" class="contentdetailleft">
</div>
<div class="contentdetailright" id="rightsec">
</div>
</div>
</div>
</body>
</html>
Related
.timeline-main-container {
border-left: 5px solid red;
margin-left: 50px;
}
.xyz::before {
content: "";
border-radius: 50%;
height: 10px;
width: 10px;
background-color: blue;
}
.xyz {
margin-left: 50px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="timeline-main-container">
<div class="timeline-first-container xyz">
<h1>Master in Computer Engineering</h1>
<p>Harvard University</p>
<time>2015-2017</time>
</div>
<div class="timeline-second-container xyz">
<h1>Bachelor in Computer Engineering</h1>
<p>University of California</p>
<time>2014-2015</time>
</div>
<div class="timeline-third-container xyz">
<h1>Computer Science</h1>
<p>International University</p>
<time>2013-2014</time>
</div>
</div>
</body>
</html>
I want the below timeline.
I've so far built this.
Now, I want circles to be on that line. I've indeed added the code for it there in
.xyz::before
but it's not working. Please help me understand and fix the issue. Why is the circle not appearing? I've set border-radius 50% and background-color to blue, so I expect a blue circle to appear in front of each timeline text around that vertical line. It's not yet positioned though.
You need to position them properly. Changes are documented in CSS.
.timeline-main-container {
border-left: 5px solid red;
margin-left: 50px;
}
.xyz::before {
content: "";
border-radius: 50%;
height: 20px; /* Changed */
width: 20px; /* Changed */
background-color: blue;
position: absolute; /* Added */
left: -63px; /* Added */
}
.xyz {
margin-left: 50px;
position: relative; /* Added */
}
<div class="timeline-main-container">
<div class="timeline-first-container xyz">
<h1>Master in Computer Engineering</h1>
<p>Harvard University</p>
<time>2015-2017</time>
</div>
<div class="timeline-second-container xyz">
<h1>Bachelor in Computer Engineering</h1>
<p>University of California</p>
<time>2014-2015</time>
</div>
<div class="timeline-third-container xyz">
<h1>Computer Science</h1>
<p>International University</p>
<time>2013-2014</time>
</div>
</div>
My thing is not working i can't figure out any errors too.As far as i know i tried to separate those mountains and cloud on different level which seems not to be working rather they're sitting beside on their parent element
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="icon" href="images/icon2.ico">
<title>Farhan Sadiq</title>
</head>
<body class="body">
<div class="top-container">
<img class: "top-cloud" src="images/cloud.png" alt="cloud-img">
<h1>Farhan Sadiq</h1>
<p><span class="underline">WebDevloper</span> and <span class="underline">GameDevloper</span></p>
<img class: "bottom-cloud" src="images/cloud.png" alt="cloud-img">
<img src="images/mountain.png" alt="mountain-img">
</div>
<div class="middle-container">
</div>
<div class="bottom-container">
</div>
</body>
</html>
.body {
margin: 0;
text-align: center;
}
h1 {
margin-top: 0;
}
.top-container {
background-color: #CEE5D0;
}
.middle-container {
background-color: pink;
width: 200px;
height: 200px;
}
.bottom-container {
background-color: yellow;
width: 200px;
height: 200px;
}
.underline {
text-decoration: underline;
}
.bottom-cloud {
position: absolute;
}
you have a typo in the section, the property class uses = instead of : , then what does the output you expect mean, how do you separate it?
There is a typo class in the tag. You have to change the class in this img tag class: "top-cloud" so it looks like this class="top-cloud".
This question already has answers here:
How to remove the space between inline/inline-block elements?
(41 answers)
Closed 1 year ago.
Why there is a space between two <hr> tags?
When I make the width of <hr> tags, it didn't work. I made it 49%, but there is still a space between the two <hr> tag. How do I remove the space from the <hr> tags?
Here is the HTML and CSS code:
*{margin: 0;padding: 0;}
body
{background-color:#181818;color: white;}
a
{text-decoration:none;}
h1
{text-align: center;color: #3ea6ff;}
.home
{font-size: 3em;background-color: #202020;}
#night
{color: #f34601;}
#mare
{color: #3ea6ff;}
#left
{
display: inline-block;width: 49%;
background-color: #f34601;height: 2px;border: 0;
}
#right
{
display: inline-block;width: 49%;
background-color: #3ea6ff ;height: 2px;border: 0;right: 0px;
}
<!DOCTYPE html>
<html>
<head>
<title>Nightmare</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="nightmare.css">
</head>
<body>
<div class="home logo">
<h1 id="mare">
<span id="night">Night</span>mare</h1>
</div>
<hr id="left">
<hr id="right">
</body>
</html>
You can use single hr with gradient background instead.
* {
margin: 0;
padding: 0;
}
body {
background-color: #181818;
color: white;
}
a {
text-decoration: none;
}
h1 {
text-align: center;
color: #3ea6ff;
}
.home {
font-size: 3em;
background-color: #202020;
}
#night {
color: #f34601;
}
#mare {
color: #3ea6ff;
}
hr {
display: inline-block;
background: linear-gradient(to right, #f34601 50%, #3ea6ff 50%);
height: 2px;
width: 100%;
border: 0;
}
<div class="home logo">
<h1 id="mare">
<span id="night">Night</span>mare</h1>
</div>
<hr>
check the code. This is really a better answer (imo) occam's razor
*{margin: 0;padding: 0;}
body
{background-color:#181818;color: white;}
a
{text-decoration:none;}
h1
{text-align: center;color: #3ea6ff;}
.home
{font-size: 3em;background-color: #202020;}
#night
{color: #f34601;}
#mare
{color: #3ea6ff;}
#left
{
display: inline-block;width: 49%;
background-color: #f34601;height: 2px;border: 0;
}
#right
{
display: inline-block;width: 49%;
background-color: #3ea6ff ;height: 2px;border: 0;right: 0px;
}
<!DOCTYPE html>
<html>
<head>
<title>Nightmare</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="nightmare.css">
</head>
<body>
<div class="home logo">
<h1 id="mare">
<span id="night">Night</span>mare</h1>
</div>
<hr id="left"><hr id="right">
<h1> OR YOU CAN DO THIS</h1>
<hr id="left"><!--
--><hr id="right">
</body>
</html>
Float :
Using float:left; on both of the hr's seem to work.
Flex :
I don't recommend doing this though. What I'd do is wrap the 2 hr's into a div and add display: flex; on it. And in the children I'd add flex-grow:1;
If i'm not mistaking it should grow the 2 hr's to take all the space in the div evenly. It will also work better with the rest of the page rather than using float which can sometimes mess everything up (from my own experience).
<hr id="left">
<br>
<hr id="right">
You can put a br between the hr
a br means a break.
Check this link to see more
https://www.w3schools.com/tags/tag_br.asp
I have three boxes/containers on a single row of my webpage.
The first box, the blue box is 2px away from the browser edge on the left, while the last box, the purple box is 2px when I inspect element.
image of boxes
However it does not look like this on the web page and looks uneven:
http://jamesbsite-com.stackstaging.com/
I have read all about the box-model but I am still unable to get equal spacing even though I have set a 2px margin on both the left and right.
Please advise as to what is causing this?
The .call-outs-container is the parent container and the .call-out is the child
and they are being applied to these divs:
#
amendment
complete code below
#
<!doctype html>
<html>
<head>
<title>James' page!</title>
<meta charset="utf-8" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style type="text/css">
hr {height:1px; border:none; color:#000; background-color:#000;}
a {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
a:visited{
color:green;
}
body { margin: 0;}
.ClearFloat {
clear: both;
}
.call-outs-container
{
max-width: 2000px;
margin: 1px 1px 1px 1px
}
.call-out {
padding: 5px;
margin-left: 2px; margin-top: 40px; margin-right: 2px; margin-bottom: -5px;;
width:30%;
float:left;
}
.call-out:nth-child(1) {background-color: #c0dbe2;}
.call-out:nth-child(2) {background-color: #cdf1c3;}
.call-out:nth-child(3) {background-color: #ccb9da;}
.call-out:nth-child(5) {background-color: #c0dbe2;}
.box{
border:10px solid #CC3F85;
width:400px;
margin: 0 auto;
padding: 20px;
}
</style>
</head>
<body>
<iframe width="100%" height="315" src="https://www.youtube.com/embed/NkyEOrQiGMQ" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen target = "test1"></iframe>
<div class="call-outs-container">
<div class="call-out">
<h4>Feature1</h4>
<p> hello</p>
</div>
<div class="call-out">
<h4>Feature2</h4>
<p>Nanking</p>
<p>new tab</p>
</div>
<div class="call-out">
<h4>Feature3</h4>
I am interested in history.
</div>
<div class = "ClearFloat"></div>
<div class="call-out">
<h1>James's page!</h1>
</div>
</div>
<div class = "ClearFloat"></div>
<h2>A few facts about me</h2>
<img src="me.jpeg" width="400">
<p>I like web desigm.</p>
</body>
</html>
div{
text-align:center;}
<!DOCTYPE html>
<html>
<head>
<style>
div {
background-color: lightgrey;
width: 300px;
padding: 50px;
margin: 20px;
float: right;
}
</style>
</head>
<body>
<div>Welcome Page</div>
<div>Welcome Page2</div>
</body>
</html>
I would recommend using flexbox in this situation. It will make controlling things much easier. No need for float.
First, you need to add display: flex to .call-outs-container.
Next, specify that the items will fill the axis evenly by adding flex: 1 1 0 to .call-out
.call-outs-container {
display: flex;
}
.call-out {
padding: 5px;
margin-right: 2px;
flex: 1 1 0;
/* margin-left: 2px;
margin-top: 40px;
margin-bottom: -5px;
width: 30%;
float: left; */
}
.call-out:nth-child(1) {
background-color: #c0dbe2;
}
.call-out:nth-child(2) {
background-color: #cdf1c3;
}
.call-out:nth-child(3) {
background-color: #ccb9da;
}
<div class="call-outs-container">
<div class="call-out">
<h4>Feature1</h4>
<p> hello</p>
</div>
<div class="call-out">
<h4>Nanking</h4>
new tab
</div>
<div class="call-out">
<h4>Feature3</h4>
I am interested in history.
</div>
</div>
* Edited based on various feedback*
I was trying to implement Parallax effect in my Webpage as described in http://pixelcog.github.io/parallax.js/
Below is my HTML and CSS code :
HTML
<!DOCTYPE html>
<html lang = "en">
<head>
<link rel = "stylesheet" type = "text/css" href = "CSS.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src = "Parallax/parallax.js"></script>
</head>
<body id='ground'>
<div id='Main_Div'>
<div id = 'Sub_Div1'>
</div>
<div class="parallax-window" data-parallax="scroll" data-image-src="https://upload.wikimedia.org/wikipedia/commons/1/17/Mytikas.jpg">
<h3>Some Text</h3>
</div>
<div id = 'Sub_Div3'>
</div>
</div>
</body>
CSS Code
body {
margin: 0 auto;
width: 60%;
}
#Main_Div {
height: 2600px;
background: #FFFF00;
padding: 30px 0;
}
#Sub_Div1 {
height: 500px;
background: #800000;
padding: 30px 0;
}
#Sub_Div3 {
height: 500px;
background: #FFA500;
padding: 30px 0;
}
.parallax-window {
height: 400px;
background: transparent;
}
However with above code I could not achieve desired effect.
Appreciate if someone can point out any improvement in my code.
Thanks,