I have a problem with the footer in HTML and CSS.
I want to put it down using :
position: absolute;
bottom: 0px;`
It puts it down but If the page has a scroll, it does not drop it to the end.
Use this CSS property in place of absolute
position: fixed;
Related
I am trying to make a basic website for college but I have trouble doing the navigation sections that go drop down show in front of the section part since I had set it as position:fixed
How can I make the navigation in front of it the section but also keep the section fixed
Any type of way is open to try.
Looks to me like you just need z-index on navigation.
Place it as first child of tag like this:
<body>
<div class="navigation>...</div>
<div class="container other-content"></div>
</body>
and since you gave it position: fixed; be sure to set z-index like this:
.navigation {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 1000;
min-height: 100px;
}
I have this site:
http://dl.dg-site.com/functionmentes/
There is a div with color #D9D9D9
Code CSS:
#full_bar{background:#D9D9D9;width:100%;height:100px;}
I want to my div to be the full width site and to be glued to footer.
How can i make this?
I use a theme in Wordpress.
Thanks in advance!
By making the position fixed, this will ensure that it will follow the user as they scroll up and down your website.
#full_bar {
background: #d9d9d9;
width: 100%;
height: 100px;
position: fixed;
bottom: 0;
left: 0;
}
If you add position:absolute; left: 0; to the css, the bar will more or less do what you're trying to do, but it's a dirty hack.
The real problem is that you're adding your 'full_bar' in the wrong place (inside a div which restricts the width). Personally I would opt for placing the full-bar in your <footer> tag.
You should placed your gray bar outside the section, between section and footer or on footer on html.
But if you want a css solution, you need to put your section parent to position relative and set your gray bar on absolute bottom with full width:
section {
position: relative;
padding-bottom: 100px; // Your bar height
}
#full_bar{
background:#D9D9D9;
width:100%;
height:100px;
position: absolute;
bottom: 0;
left: 0;
}
You are putting #full_bar inside class="container". container is the parent of div id #full_bar, that's why its not taking full width.
Do your code outside contaner class and you can see the changes.
See the attachment, i think you want this as per i understand your question.
Got a fixed div with a tag cloud hanging on a side of a page. It overflows footer divs. And i need it to scroll under. Can't really set a z index to -1 since it's on top of another div.
Tried setting up z-index where footer would have greater one. Didn't work. Any ideas?
Thanks!
Old topic but I had the same issue on my project. Z-index works... if you give the element it should scroll under a position. So let's say you have:
<div id="floating">I'm a cloud</div>
<footer>I'm a rock</footer>
Then your CSS should look something like this:
#floating { position: fixed; top: 100px; right: 100px; z-index: 50; }
footer { position: relative; z-index: 999; }
I'm looking for a trick to create a "fixed" HTML object on the browser screen using CSS. I want it to stay in the same position all the time, even when the user scrolls through the document. I'm not sure what the proper term for this is.
It would be like the chat button on Facebook or the Feedback button that is on some websites that follows you throughout the page.
In my situation, I want to keep a div at the absolute bottom-right corner of the screen at all times. Sample CSS appreciated.
You may be looking for position: fixed.
Works everywhere except IE6 and many mobile devices.
The easiest way is to use position: fixed:
.element {
position: fixed;
bottom: 0;
right: 0;
}
http://www.w3.org/TR/CSS21/visuren.html#choose-position
(note that position fixed is buggy / doesn't work on ios and android browsers)
Make sure your content is kept in a div, say divfix.
<div id="divfix">Your Code goes here</div>
CSS :
#divfix {
bottom: 0;
right: 0;
position: fixed;
z-index: 3000;
}
Hope ,It will help you..
position: sticky;
The sticky element sticks on top of the page (top: 0) when you reach its scroll position.
See example:
https://www.w3schools.com/css/tryit.asp?filename=trycss_position_sticky
The tweak:
position:fixed;
works, but it breaks certain options....for example a scrollable menu that is tagged with a fixed position will not expand with the browser window anymore...wish there was another way to pin something on top/always visible
position: fixed;
Will make this happen.
It handles like position:absolute; with the exception that it will scroll with the window as the user scrolls down the content.
Try this one:
p.pos_fixed {
position:fixed;
top:30px;
right:5px;
}
In order to keep floating text in the same location over an image when changing browser zoom, I used this CSS:
position: absolute;
margin-top: -18%
I think the % instead of fixed pixels is what does it. Cheers!
#fixedbutton {
position: fixed;
bottom: 0px;
right: 0px;
z-index: 1000;
}
The z-index is added to overshadow any element with a greater property you might not know about.
You can do like this:
#mydiv {
position: fixed;
height: 30px;
top: 0;
left: 0;
width: 100%;
}
This will create a div, that will be fixed on top of your screen. - fixed
HTML
<div id="fixedbtn"><button type="button" value="Delete"></button></div>
CSS
#fixedbtn{
position: fixed;
margin: 0px 10px 0px 10px;
width: 10%;
}
You can try this code:
<div style="top: 0; position: sticky;">your code</div>
or you can add class/id like this:
html:
<div class="FixedPosition">your code</div>
css:
.FixedPosition{
position: sticky;
top: 0;
}
you may change the "top" if you want it to not be on top of the screen and don't delete the top else it won't work.
I hope this help : )
How do I put a transparent png image over a DIV without it affect anything else in the HTML document? I would do position absolute because it takes it out of the "normal flow of the document" but I have the whole website centered using "margin-left: auto;" and "margin-right: auto;"
if you apply position: relative to the div you want to cover then position: absolute on the image will be calculated relative to the covered div rather than the whole page, if it is a child element. i.e.
<div id="tobecoverd">
<p>your content...</p>
<img src="./img/transparent.png" class="cover" />
</div>
div#tobecovered{
position: relative;
}
div#tobecovered img.cover{
position: absolute;
/* position in top left of #tobecovered */
top: 0; /* top of #tobecovered */
left: 0; /* left of #tobecovered */
}
Other solution is to use after like this:
.image:after{
content: "";
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
background: url(https://i.imgur.com/DDdKwlk.png) no-repeat 0 0;
background-size: cover;
}
:)
I would say float is a good way to do this by not block other things , with absolute , some thing will hide under it or show above it base on the z-index.
This is a good tutorial on css positioning , take a look , you might found what you looking for
I think position:absolute is more appropriate for normal usages as it follows the scroll.
Here's how it works. The example shows a transparent image absolutely positioned over another image, creating a mask.
Check working example at http://jsfiddle.net/39VG9/1/
You be able to use this css in a class_name in React js (in html is class="class_name") to show a div as a pop up (bring up) or send back.
<div classname="class_name">
...
</div>
.class_name{
position: absolute;
/**Put div hide*/
/**z-index: -9;*//
/**Put as pop up*/
/**z-index: 9;*//
}