I have two divs in my html page. I want one to remain as it is if I scroll the page. I did-
<html>
<body>
<div id="head" style="height:100%; width:100%; background:#ff0000; position:fixed; z-index:1">
<p>
Hi
</p>
</div>
<div id="main" style="length:100%; width:100%;">
<p>
Hello
</p>
<p>
Hello
</p>
<p>
Hi
</p>
<p>
Hi
</p>
</div>
</body>
</html>
But the problem is that 'main' div is already overlapped by 'head'. It is not showing both 'Hello's at all.
What should I do so that initially no one is overlapped until we scroll.
Thanks in advance.
Good day. You can add some padding-top to #main. for example:
<div id="main" style="length: 100%; width: 100%; padding-top: 40px;">
Depending on your #head 's height, you may need more than 40px padding-top.
demo: http://jsfiddle.net/thisizmonster/19um6tak/
Related
I am learning basic css, I've got a basic understanding of html. I was watching a YT video on css and cannot get my code to replicate what is shown on the screen. I've tried for an hour now. I'm sure it's something super simple, but you don't know what you don't know kind of thing.
I'm trying to get 2 colored blocks to stack one then the other. but they're just stacking on top of each other. I typed out my code just like it showed on the video. # https://www.youtube.com/watch?v=_0Z1oNQ93Wo&list=PLLAZ4kZ9dFpNO7ScZFr-WTmtcBY3AN1M7&index=7
my code is:
<html>
<head>
<meta charset="utf-8">
<title>CSS learning</title>
</head>
<body>
<h1>CSS Tutorial</h1>
<div style="width:90px; height:90px; background-color:blue;">
<div style="width:100px; height:100px; background-color:red;">
</body>
</html>
the red block is covering up the blue one, and not stacking on one another like in the video.
Embed the div into the div. They are on the same hierarchy.
<div>
<div>
</div>
</div>
If you want one div on top of the other do it like this:
<html>
<head>
<meta charset="utf-8">
<title>CSS learning</title>
</head>
<body>
<h1>CSS Tutorial</h1>
<div style="width:90px; height:90px; background-color:blue;">
</div>
<div style="width:100px; height:100px; background-color:red;">
</div>
</body>
</html>
You have to understand the css position. Here in short: If you set position: absolute of any element, it will position absolutely according to the nearest parent which has the position property of relative. So, if you want to stack one div to another - you need to give their parent position of relative, And give them/one of them position of absolute.
<div>
<div style="position: absolute; top: 0; left: 0; background-color: red; height: 150px; width: 150px"></div>
<div style="background-color: green; height: 150px; width: 150px"></div>
</div>
In this case the parent div has the position of relative by default.
Can someone tell me what I can add the _layout page to have all my pages center align and adjust to 100 % depending on the resolution? Is this possible. I think it might be in:
Thanks!
.container {
width:90%;
}
Set margin:auto; on your .container div.
.container{
border:1px solid red;
margin:auto;
width:90%;
}
<div class="header">
<p>
Header
</p>
</div>
<div class="container">
<p>
some text
</p>
<p>
some more text
</p>
</div>
You can use the <center> HTML tag like this in your _Layout page
<center>
#RenderBody()
</center>
This will center the content of all views/pages that use that layout.
For more information take a look at this HTML center tag.
#align_text_center{
height:100%;
display:flex;
}
#aligned_text_h1{
margin:auto;
}
<html>
<body>
<div id="Container1">
<div id="align_text_center">
<h1 id="aligned_text_h1"></h1>
</div>
</div>
<div id="Container2">
<div id="align_text_center">
<h1 id="aligned_text_h1"></h1>
</div>
</div>
</body>
</html>
Welcome! I got again a bit problem while positioning the texts to it's position. I have a h1 element in the center of container1,container2 id's.
I want to align a second(and later a third) text below the first h1 element. I can't say it, so I made an interactive image about it. :(
Thank you for help! :)
I draw an interactive image,click here.
Place all the elements you want to position in the same div, and then position that div, rather than positioning each element separately.
I am having trouble correctly centering my website
It seems to be centered when I zoom out. but to a user that doesn't zoom out it looks out of place. any suggestions? the site was created with all AP divs it doesn't center correctly even when trying to use the following:
<div align="center">
Try margin:0 auto; for the container div it will center align your div :)
See the example
See the fullscreen view of the result
your design is not correct in my opinion. you must:
<body>
<div id="wrapper">
<div id="header">
from apdiv1 to 31
</div>
<div id="content">*/instead of blockquote*/
put content
</div>
<div id="footer">
put content</div>
</div>
</body>
with css
body{background-image:concrete bkg.jpg}
#wrapper{margin:0 auto}
more more more...
brgds
In css
add property
body
{
text-align:center;
margin:0 auto;
}
The general html structure of my pages is
<div id="wrapper">
<div id="header">
</div>
<div id="content">
</div>
<div id="footer">
</div>
</div>
I have a 1000px layout with the content centering.
However, for a couple of the pages I have a banner in the content that should expand 100% to the sides of the browser (i.e., beyond the 1000px wrapper).
Should I delete the wrapper div for this page and apply width: 1000px; margin: 0 auto; separately? Or should I take the banner outside of the standard wrapper layout? What is a more standard way to do this?
Thank you.
Using style="overflow:show" for that content banners parent should allow it to show. Instead of width=100% you might need to use some javascript to get the screens width and make it that width.
I would take the banner outside of the wrapper.
I had same problem and done something like this:
.center
{
margin: auto;
width: 1000px;
}
<div id="wrapper">
<div id="header">
</div>
<div id="content">
<div class="center">
</div>
<div id="banner">
</div>
<div class="center">
</div>
</div>
<div id="footer">
</div>
</div>