I have the following code in HTML for footer.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel = "stylesheet" type="text/css" href="style_testfooter.css">
</head>
<body>
<div class="footer">
<p>hello</p>
</div>
<div class="footerdark">
<p> hello</p>
</div>
</body>
</html>
And similarly CSS code is as follows :
.footer {
position: relative;
left: 0;
bottom: 110px;
width: 100%;
background-color: #303740;
color: white;
text-align: center;
padding: 160px 0px;
}
.footerdark {
position: relative;
left: 0;
bottom: 0;
width: 100%;
background-color: #272d35;
color: white;
text-align: center;
padding: 30px 0px;
}
When i try to remove the para tags from the html code the UI changes for the footer.what is the reason/error ?
Before removal of p tags
After removal of p tags
Your .footer class has a bottom value set. At the moment, with the p tag in place, it is changing the lower footer height enough to cover that white space. I'd recommend removing bottom: 110px.
Note: p tags are block-level elements and so they span the full width of their parent and have a set height, which effects the height of it's parent.
Related
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.
So I am not a web developer and have very little experience with html and css so this might sound dumb:
But I saw code from my co worker who set a section to position:relative and the child element (an h1 in this case) to position: absolute; top: 0; left: 0; height: 100%; width:100% and somehow the h1 took the entire height and width of the parent which was the section.
I tried reproducing it below but it was not possible. Seems like the h1 has a height of zero since the border is not surrounding it. Is there something wrong with the code below?
<!DOCTYPE html>
<html>
<head>
<style>
.main {
background-color: blue;
position: relative;
}
h1 {
position: absolute;
top: 0;
left: 0;
border: 1px solid black;
height: 100%;
width: 100%;
}
</style>
<title>Page Title</title>
</head>
<body>
<section class="main">
<h1>This is a Heading</h1>
</section>
</body>
</html>
It is not the position: relative that is causing the problem but the position: absolute set on the h1.
If the parent container having the absolutely positioned child element doesn't have an explicit width and height set, it will collapse. This is because absolutely positioned elements are taken out of the normal flow of the document.
In order to solve your problem, you can explicitly set height/width on your .main.
Please remove position:absolute; top:0; left:0;height:0;width: 100%; this css to h1 class and your problem is solved.
<!DOCTYPE html>
<html>
<head>
<style>
.main {
background-color: blue;
position: relative;
}
h1 {
border: 1px solid black;
}
</style>
<title>Page Title</title>
</head>
<body>
<section class="main">
<h1>This is a Heading</h1>
</section>
</body>
</html>
I am currently learning HTML & CSS and wrapping my head around positioning i.e fixed, relative and absolute. I understand the concepts of each pretty well , at least I thought I did until my footer tag completely disappeared within itself when I set it's position to absolute. I know your asking what does disappeared within itself mean ? It means I had to adjust the left position value from 1024 to 850 just to be able to see the footer again. Which makes me ask why the did the position value jump so high after setting the footer the absolute?Essentially that's the question I am asking. I hope I explained well enough. I tried to include a picture but Stackoverflow wouldn't let me since this my first post. Also i had three other 3 other divs on the page with the footer, div and header elements positions are set to relative.......code below.
main, header, footer{
display: block;
}
.page-container{
width: 95%;
margin: 0 auto;
background-color: #050111;
position:relative;
}
header{
width: 100%;
height: 60px;
margin: 0px auto;
background-color: blue;
text-align: center;
position: relative;
}
h1{
color: white;
line-height: 50px;
margin: auto;
}
main{
width: 100%;
height: 500px;
margin: 10px auto;
background-color: rgb(24, 223, 223);
text-align: center;
}
footer{
widows: 100%;;
height: 120px;
margin: 0 auto;
background-color: blueviolet;
text-align: center;
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="main.css">
<title>Layout practice</title>
</head>
<body>
<div class="page-container">
<header>
<h1>This is the header of the page</h1>
</header>
<main>
<h1>Main Content</h1>
</main>
<footer>
<h1>Footer</h1>
</footer>
</div>
</body>
</html>
position:absolute; will place an element relative to its ancestor element. So if you positioned your footer as absolute it will start from where the body of the page starts.
footer{
position:absolute;
bottom:0;
}
Adding bottom:0; will place your element at the very bottom of the body.
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.
I am trying create a simple single page site that works on mobile. Ideally, I'd like each section of the site to be 100% of the browser height. This is the page:
http://codepen.io/juanp83/pen/EgjBwK
and here's the code:
body, html {
height: 100%;
width: 100%;
}
.section {
height: 100%;
position: relative;
}
.one, .three {
background-color: #666;
}
.two {
background-color: #222;
}
.bottom {
position: absolute;
bottom: 20px;
right: 0px;
left: 0px;
}
p {
color: #fff;
text-align: center;
}
.nav {
position: fixed;
top: 0px;
height: 50px;
width: 100%;
background-color: #fff;
z-index: 1;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="reset.css">
<link rel="stylesheet" href="main.css">
</head>
<body>
<!--nav-->
<div class="nav"></div>
<!--Section1-->
<div class="section one">
<div class ="bottom"><p>By Juan Portillo</p></div>
</div>
<!--Section2-->
<div class="section two">
</div>
<!--Section3-->
<div class="section three">
</div>
</body>
</html>
It works great on my desktop. But I tried it on my iPhone and the first section takes up the entire height of the webpage, not just the height of the browser, so it ends up "hiding" the other sections.
I've done several searches here on stack overflow as well as some other sites but I just can't find a fix. Any help would be greatly appreciated.
.section {
height: 100vh;
}
Set the height to your viewport height using vh.
Reference: https://snook.ca/archives/html_and_css/vm-vh-units
height: 100vh
that should do the trick
vh = viewport height