margin problem in css while using position element - html

I am pretty new to web development so I am facing a margin issue which I think I might be due to position element in css,I'm not sure though .Here in code I have posted below is just a code for practice purpose on position element in css.
Here's my html code:
<!DOCTYPE html>
<head>
<title>Position Demo</title>
<link rel="stylesheet" type="text/css" href="style1.css">
</head>
<body>
<header>
<span class="title-text">Position Demo</span>
</header>
<div class="container-1"></div>
<div class="container-2"></div>
</body>
And here's my css code:
html {
font-size: 62.5%;
}
*,
html,
body {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.title-text {
font-size: 3rem;
text-align: center;
display: inline-block;
}
.container-1 { <!-- this container has right margin even though I have set margin to 0-->
width: 10rem;
height: 10rem;
position: relative;
top: 30%;
left: 0;
margin-right: 0;
background-color: rgb(218, 173, 173);
}
.container-2 { <!-- this container has right margin even though I have set margin to 0-->
width: 10rem;
height: 10rem;
position: relative;
top: 30%;
left: 30%;
margin-right: 0;
background-color: rgb(149, 218, 183);
}

What you are facing in inspect mode, is not margin.
Just to make sure:
Each element, without changing the display property of the parent element, is placed below it's sibling element. I mean elements are displayed in the page based on their place in your html.
That's why browser shows that yellowish line right of the boxes, it means that this line is taken.
I suggest you set the display property for each section in html.

Related

My symbols won't fit in the div for slideshow

My goal here is to create an image slideshow. I'm trying to add the left and right arrows on each side, however my right arrow won't fit in the div. I'm kind of a beginner so bear with me, I was following w3 schools on the slideshow tutorial to make sense of things. I don't want to copy literally everything from w3 schools but like i said i'm a beginner and i'm trying to make sense of things. My next goal is to move on to js and try to solve things there myself.
<html>
<head>
<title>Practice</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css">
<script src="myscript.js"></script>
</head>
<body>
<div class="container">
<div class="regular-img" >
<img id="city" src="NYC.jpg">
</div>
<div class="regular-img" >
<img id="king" src="KING.jpg">
</div>
<a id="prev">❮</a>
<a id="fwd">❯</a>
</div>
</body>
</html>
````
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
.container {
background-color: yellow;
height: 65vh;
width: 95vw;
margin: 75px auto;
}
img {
height: 100%;
width: 100%;
object-fit: cover;
}
.regular-img {
display: none;
}
a {
cursor: pointer;
/* color: white;
opacity: 0.7; */
position: absolute;
top: 50%;
font-size: 18px;
user-select: none;
font-weight: bold;
padding: 16px;
margin-top: -22px;
width: auto;
}
#fwd {
right: 0;
}
enter code here
Okay, the fellow developer no need to be afraid just add position: relative to .container and you will be good to go. It is because when you give something a position absolute it will relate to the closest parent element whose position is relative. if none is present it will relate to the HTML element so by adding a relative property to the .container right arrow will relate to its parent container and will stay in the container. Google the difference between position relative and absolute and you will have a better understanding
The solution here is very simple. You have added position: absolute; to the arrows. But you didn't add position: relative; to the parent div.
All you have to do is add this :
.container {
position: relative;
}

HTML margin affecting fixed element on left-hand side only

I have a simple HTML document (snip):
<html lang="en">
<body>
<div class="background"></div>
<header class="main-header">
<div>
<a href="../index.html" class="main-header__brand">
uHost
</a>
</div>
</header>
</div>
</body>
</html>
I noticed the following.
If I apply the following style:
background {
background: url('../images/macbook.jpeg');
position: fixed;
height: 100%;
z-index: -1;
width: 100%;
}
Then the background image covers the whole viewport as expected.
If I then add:
html {
margin-left: 10%;
margin-right: 10%;
}
The margin is correctly applied to the left and right of my content. But also to the left side only of the background. Ie:
I am confused as to why, as I thought fixed elements were positioned relative to the viewport? So why is a style on the html element influencing the rendering of the background?
As a solution to get what I wanted (some margin on both sides), I can do something like:
html {
width: 80vw;
margin: auto;
}
.background {
background: url('../images/macbook.jpeg');
position: fixed;
height: 100%;
z-index: -1;
width: 80vw;
}
Which produces:
But again, I'm unsure why the margin property on the html element is affecting my fixed background div?
When using position fixed, the element will still follow its natural initial placement, unless otherwise specified via the top left bottom or right attributes. Here you can see, even though the body element has a margin of 10px, the background element is still at the top left.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
margin: 10px;
}
h1 {
color: white;
text-align: center;
}
.background {
background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/2/22/Solar_Eclipse_May_20%2C2012.jpg/1024px-Solar_Eclipse_May_20%2C2012.jpg");
width: 300px;
height: 300px;
background-size: cover;
z-index: -1;
position: fixed;
top: 0;
left: 0;
}
<body>
<div class="background">
<h1> Solar Eclipse </h1>
</div>
</body>

Can i make a "fullscreen" <pre>

I don't know how else to describe it, not fullscreen, but fill up the whole viewport.
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>1001001</title>
<style id="style-tag"></style>
<script src="dist/app.js"></script>
</head>
<body spellcheck="false">
<div id="content">
<pre contenteditable id="style-text"></pre>
</div>
<div id="footer">
Skip
</div>
</body>
</html>
CSS:
html, body {
margin: 0;
height: 100%;
overflow: hidden;
}
pre {
overflow: auto;
min-height: 100%;
width: 100%;
border-radius: 1px; /* Prevents bad clipping in Chrome. */
}
#content {
position: absolute;
top: 0; right: 0; left: 0; bottom: 20px;
}
#footer {
position: absolute;
bottom: 0;
height: 20px;
left: 0;
right: 0;
padding: 0 10px;
}
Expected outcome:
The coloured block fills the entire screen (I require this to be a as text is added afterwards).
Actual outcome:
Viewport is almost covered by the block, however, on the top and bottom, there is about 10px that are not coloured.
If you set the css min-height property as min-height:100vh; (rather than 100%) on the <pre> element, that should solve your issue, by forcing the height of the element to at least the full viewport height.
Edit - also add margin:0; to the style of the <pre> element. That seems to work for me.
Hope this helps! - James.

Why is this HTML page slightly overflowing in the window?

In this fairly simple HTML page and CSS stylesheet, both the body and html elements are set to "height: 100%;" and yet the page is slightly longer than the window, creating a scrollbar that I don't want.
I've read through many stack exchange posts about this issue of extra space at the bottom of a page, but have not managed to find a fix or an explanation that works for me.
I am fairly certain that the problem is not being caused by a stray text node in the DOM. I have tried removing all extra white space in between tags in the HTML file to no avail. I have tried styling the body with "min-height: 100%", but then the purple content of the page no longer takes up 85% of the whole window as it did before. I have tried setting "overflow: hidden;" on the html element, which seems to work, but I have no idea why it does. I have even tried using a flexbox to achieve the functionality displayed in the code, but I haven't been able to make that work either.
When I right click on that extra unwanted yellow space on the bottom and click "Inspect Element" I get directed to a "buttonWrapper" div, but I have no idea why this would be causing any problems.
A valid explanation of why this is happening is more important to me than a solution right now (hence my dissatisfaction with the "overflow: hidden;" method). If you do have a solution, I'd prefer it would be entirely CSS based.
Thanks for taking the time to read this.
* {
margin: 0;
padding: 0;
}
html {
background-color: yellow;
width: 100%;
height: 100%;
}
body {
background-color: grey;
width: 100%;
height: 100%;
}
#titleSection {
width: 100%;
height: 15%;
text-align: center;
font-size: 10vmin;
}
#contentSection {
width: 100%;
height: 85%;
background-color: purple;
}
.buttonWrapper {
width: 50%;
height: 100%;
display: inline-block;
}
.buttonImage {
height: 100%;
width: 100%;
object-fit: contain;
}
<!doctype html>
<html>
<head lang="en">
<meta charset="utf-8">
<title></title>
<link type="text/css" rel="stylesheet" href="style.css">
<link rel="icon" href="" type="image/x-icon" />
<script src="code.js"></script>
</head>
<body>
<div id="titleSection">Who's going to set up the board?</div>
<div id="contentSection">
<div class="buttonWrapper">
<img src="http://orig15.deviantart.net/7e51/f/2013/293/e/9/owl_face_by_cypher2-d6r9e23.png" class="buttonImage">
</div><!--
--><div class="buttonWrapper">
<img src="http://eredivisiezeilen.nl/wp-content/uploads/2015/04/1429207962_male3-512.png" class="buttonImage">
</div>
</div>
</body>
</html>
Change it to this:
#contentSection {
width: 100%;
height: 85%;
background-color: purple;
font-size: 0;
}

different text positions in chrome. IE and FF

I am making a website with css and jquery. One of my script is to show a text at a specific location on a mouse click. The text is displayed good in google chrome at its intended position. but in IE9 and FF17 they are displaced from the intended position. My background image is such that it fits to the size of the window of the browser.
I am attaching the screenshot which will give a better idea. Also I am writing the code. maybe only a small tweak is required but I do not get it. Please help me in this.
This is the comparison between chrome and IE. the right one is chrome which is the right one. FF and IE display at same positions.
Thanks
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
*Here will my script which is just simple .show and .hide functions*
});
</script>
<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
<title>Train of Thought</title>
<style type="text/css">
html, body {
width: 100%;
height: 100%;
margin-top: 0px;
padding-top: 0px;
top: 0px;
margin-left: 0px;
padding-left: 0px;
left: 0px;
}
body {
overflow: hidden;
}
#background {width: 100%; height: 100%; display: block; position: absolute; z-index:1;}
.content {
visibility:hidden;
border-style: none;
display: block;
position: fixed;
text-align: centre;
z-index: 1;
margin-top: 40%;
background-color: transparent;
font-size:1.5em;
opacity: 0.697;
}
#thought_text{
margin-left: 25%;
margin-right: 25%;
}
<div><img id="background" alt="background" src="tot1.png"></div>
<div class="content" id="thought_text">Here goes the text<br></div>
There is a simple hack that will work in IE9 for vertically centering elements. It uses the transform: translateY property to adjust an element within another element. We can apply a class to our inner element like so:
.element {
position: relative;
top: 50%;
transform: translateY(-50%);
}
You'll need to add the appropriate vendor prefixes. Here is a great article on this: http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/
Firstly, for fixed positioning, use: top, bottom, left, right attributes instead of margin-top, margin-right..
Secondly, you've applied same z-index'es on siblings.
Thirdly, use of img element for background this way is not the best solution.
You should go for CSS background-image for body or text-div wrapper, stretched to 100%.
Full solution:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
// Here will my script which is just simple .show and .hide functions*
});
</script>
<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
<title>Train of Thought</title>
<style type="text/css">
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
background-image:url(http://25.media.tumblr.com/6d28260f10f17c0d2eab47398fd855f6/tumblr_mj9ha54DuW1rub5xuo1_1280.jpg);
background-position: top center;
background-repeat:no-repeat;
}
.content {
top: 40%;
display: block;
position: fixed;
text-align: centre;
z-index: 1;
background-color: transparent;
font-size:1.5em;
opacity: 0.697;
border-style: none;
}
#thought_text{
left: 25%;
right: 25%;
color:#000;
}
</style>
<body>
<div class="content" id="thought_text">Here goes the text<br></div>
</body>
</head>
Consider removing #thought_text{} block in css file and combining it in the .content {} block to avoid overriding of attribute values
or
adding !important directive to the attributes
and also change
margin-top: 40%; to some fixed value such as margin-top: 250px; which ensures the top positions as same in all the browsers.
As I understand, you stretch image to whole page and want to center your block with text. You have 50% width (100% - 25% margins from both side) and 40% top margin.
With position:fixed you have top and left properties to set position relative to page.
.content {
position:fixed; /* taking it over the page */
z-index:2; /* and over the image */
left:25%; /* move to 25% from left */
width:50%; /* and setting width */
top:40%; /* move to 40% from top */
font-size:1.5em;
opacity: 0.697;
}
And you can remove
#thought_text{
margin-left: 25%;
margin-right: 25%;
}
You get original bug because top/bottom margin and padding in percents calculates from width not height according to spec.
this is just an idea , hope that useful .
<style>
#background {
background:url('tot1.png') no-repeat;
width: 100%;
height: 100%;
position: absolute;
z-index:1;
}
</style>
<div id="background">
<div class="content" id="thought_text">Here goes the text<br></div>
</div>
You can use a bit of javascript to detect if IE or Firefox are present, and then change the margin/position of the text accordingly.
function detectBroser(){
if (navigator.userAgent.indexOf("Firefox")!=-1)
return "Firefox";
else if (navigator.userAgent.indexOf("MSIE")!=-1)
return "Internet Explorer";
}