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>
Related
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.
I'd like to set the div height using percentages that do not depend on items in it.
I got a fixed header on the top of the screen and a centered div. But set height in percentages does not work. It enlarges only if I add some items in there.
Please help.
I have this code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>lol</title>
<link rel="stylesheet" href="style.css"/>
</head>
<body>
<div id="conteiner">
<header>
<p>header</p>
</header>
<div id="main">
<p>main info</p>
</div>
</div>
</body>
</html>
And this CSS.
html{
width: 100%;
height: 100%;
}
body{
overflow: hidden;
margin: 0;
width: 100%;
height: 100%;
}
header{
position: fixed;
top: 0px;
width: 100%;
height: 10%;
border: solid red 1px;
}
#main{
display: block;
width: 65%;
height: 80%;
border: solid green 1px;
margin: 8% auto 0 auto;
}
You forgot to make it's parent 100% height too.
#conteiner has automatic height by default because its div block. And default height is height of its children. If parent's height isn't set manually, children height in percents are ignoring by browser
#conteiner {
height: 100%;
}
at your style file you have to write style for container div code like
#container{
height:100%;
}
Please have a look at this jsfiddle
<!DOCTYPE html>
<html lang='en'>
<head>
<style>
body { height: 100%; margin: 0; padding: 0;}
div { height: 100%; width: 100%; position: absolute; top: 0px; left: 0px; background: black;}
img { height: 100%;}
</style>
</head>
<body>
<div><img src='https://upload.wikimedia.org/wikipedia/commons/8/85/Smiley.svg'></div>
</body>
</html>
Even setting height 100% for both and , there still has little extra space in the bottom that causes the scrollbar. Does anyone know what causes that space?
I just want to know the behavior.
Thank you!
The img tag is an inline tag and the extra space you're seeing is due to this. Add display:block to the style of the image.
I'm a total novice in HTML/CSS, but I'm having trouble with centering a fixed h1 element. It refuses to center itself and sticks to the left side of the page. I've tried setting the margin to auto, but it doesn't do a thing. Here's the code:
h1 {
color: #580101;
font-family: RobotoRegular;
position: fixed;
text-align: center;
}
* {
background-color: #ecebe9;
}
#navbar {
color: #000653;
background-color: #00001a;
height: 40px;
border-radius: 3px;
}
.sidebar {
background-color: black;
width: 90px;
height: 500px;
float: left;
margin: 30px 0px 0px 0px;
}
And the HTML:
<!DOCTYPE html>
<html>
<head>
<link href="Fonts/stylesheet.css" rel="stylesheet" type="text/css">
<title>Webpage</title>
</head>
<body>
<div id="navbar"></div>
<div class="sidebar"></div>
<h1>Hello World!</h1>
</body>
</html>
So, what should I do?
if you want to use fixed position then add width: 100%; css rule for h1 css style.
other just remove position that will work.
DEMO
Change <h1> position:fixed to position:relative
the reason its sticking to the side of the page is because hence the name its fixed for example. you cannot tell it to freely float in the center if you have 'basically' demanded the element to be fixed, if that makes sense
you could do this
<style>
.test{
position:fixed;
right:0;
left:0;
text-align:center;
background:#EEEEEE;
</style>
<h1 class="test">test</h1>
When using position, specify it's position...left, top, or right, bottom.
This is my CSS
.test {
background-image:url('images/smiley.gif');
background-repeat:repeat;
}
This is my HTML:
<div class="test" id="xyz">some code which should come background to image</div>
The code that I have written sets a background image.
But I want to put an image on top of the text, instead of behind it, so that it covers the text. (I also want it to automatically repeat to fill the element, which could be any size.)
How can I do that?
This should do the trick. the :before selector creates a fake div with the given content (here a space, because without the content attribute, and I think with an empty string content, the fake div isn't created), and which can be styled. So the fake div is created, and styled with a background-image, a given height and width, and a z-index of 1, while the real div has a z-index of zero and appears below.
<!DOCTYPE html>
<html>
<head>
<title>Test page</title>
<style>
.test:before {
content: " ";
position: absolute;
width: 100px; height: 100px;
background-image:url('http://upload.wikimedia.org/wikipedia/commons/a/a4/Smiley_transparent.png');
background-repeat:repeat;
z-index: 1;
}
.test {
z-index: 0;
}
</style>
</head>
<body>
<div class="test" id="xyz">some code which should come background to image</div>
</body>
</html>
Combining this with Paul D. Waite's answer avoids having an explicit span in the code.
I thought the :before had to be applied to .test :first-child:before, so it would be a child of the xyz div, instead of being a sibling, but it seems it is not necessary (though it escapes me why).
You can test the result live on jsfiddle.
<!DOCTYPE html>
<html>
<head>
<title>Test page</title>
<style>
.test {
position: relative;
}
.test:before {
content: " ";
position: absolute;
top: 0;
bottom: 0;
height: auto;
left: 0;
right: 0;
width: auto;
background-image:url('http://upload.wikimedia.org/wikipedia/commons/a/a4/Smiley_transparent.png');
background-repeat:repeat;
}
</style>
</head>
<body>
Some text before.
<div class="test" id="xyz">some code which should come background to image</div>
Some text after.
</body>
</html>
Interesting task. I think this should do it, if you’re willing to put in an extra HTML element. (Alternatively, use .test:before instead of .test .foregroundImage, like in Georges’ answer).
HTML
<div class="test" id="xyz"><span class="foregroundImage"></span>some code which should come background to image</div>
CSS
.test {
position: relative;
}
.test .foregroundImage {
position: absolute;
top: 0;
bottom: 0;
height: auto;
left: 0;
right: 0;
width: auto;
background-image:url('images/smiley.gif');
background-repeat:repeat;
}
See http://jsfiddle.net/RUJYf/ for a working example.
CSS
<style type="text/css">
.test { position: relative; }
.test img, .test p { position: absolute; top: 0; }
.test img { z-index: 10; }
.test p { margin: 0; padding: 0; }
</style>
HTML
<div class="test">
<img src="images/smiley.gif" />
<p>some code which should come background to image</p>
</div>