Here is my website: http://www.bkd.com/wealth-advisors/index-test.htm
The problem I am currently having is that the "Wisdom for Your Wealth" bar will only show up on certain resolutions. Is there anyway I can make this show up on all? I need it to lay across the page the same on every page. A little below the bottom but not all the way at the bottom.
Anyone have any suggestions?
Here is my CSS:
.bottombar {
position:fixed;
margin-top: 800px;
top:0px;
left:0px;
height:42px;
width:1800px;
z-index:100;
}
Here is the HTML
<div style="position:absolute; top:-50; left:5; font-size:80px; z-index:4"><a
href="/wealth-advisors/about-test.htm"><img src="/wealth-advisors/images/wisdom-
wealth.png" height="52" width="800" class="bottombar" ></a></div>
Please let me know if you need anything else from me.
Thank you!
-Marcy-
This will solve your problem:
.bottombar {
bottom: 0;
display: table;
height: auto;
position: absolute;
width: 100%;
}
With width: 100%, position: absolute and display: table you don't need to adjust top, left or any margins.
use bottom:0; i would may try removing the margin top as well. i would change the width to 100%. also remember you have the image in a div that's absolute and the image is fixed.
Related
I have the following example: http://jsfiddle.net/4EpRv/
and another here: http://jsfiddle.net/4EpRv/1/
Both show two images (one taller than wide, and the other wider than tall). The code SHOULD be making the images align in the middle (horizontal and vertically) and fill the space of the screen until the image hits its maximum width or height and should have 72px of padding around them (at a minimum, depending on the image size and aspect ratio)
The first example works fine on all screen sizes, but the second example breaks on portrait screens as the image appears off-canvas at the bottom.
See screenshots for the second example: http://dev.driz.co.uk/gallery/ipad1.png (not working on portrait) and http://dev.driz.co.uk/gallery/ipad2.png (working on landscape).
And see screenshots for the first example (that work): http://dev.driz.co.uk/gallery/ipad2.png and http://dev.driz.co.uk/gallery/ipad3.png
The HTML is as follows:
<div class="gallery">
<div class="gallery-background">
<img src="http://dev.driz.co.uk/gallery/halo.jpg" />
</div>
</div>
and the CSS:
.gallery {
bottom: 0;
height: 100%;
left: 0;
position: fixed;
right: 0;
top: 0;
width: 100%;
}
.gallery-background {
background: none repeat scroll 0 0 #333333;
bottom: 0;
left: 0;
padding: 72px;
position: fixed;
right: 0;
text-align: center;
top: 0;
}
.gallery-background:before {
content: ' ';
display: inline-block;
vertical-align: middle;
height: 100%;
}
.gallery-background img {
max-height: 100%;
max-width: 100%;
vertical-align: middle;
}
Any ideas why the second example breaks on portrait screens if the image is wider than taller?
And how I could fix this?
Update: Media Queries might be an option if I can apply a different rule if the screen is portrait and need to do something slightly different.
Update 2: The :before declaration is important, as it's what centers the image vertically, see here for an example without it: http://jsfiddle.net/4EpRv/2/ so removing that isn't an option, unless I can find an alternative. And here is proof that removing it causes the image to NOT be centered in the middle vertically: http://dev.driz.co.uk/gallery/NotWorking.png
Update 3: Using JavaScript has been the best solution so far, as by NOT using padding and instead positioning the element centrally I can handle all the issues: http://dev.driz.co.uk/gallery/2/landscape.php but can this be done in pure CSS?
I retyped the post with a solution to your problem. Hope it helps.
CSS
html{
width:100%;
height:100%;
margin:0;
}
body{
width:100%;
height:100%;
margin:0;
}
.gallery{
position:relative;
}
.gallery-background {
width:100%;
height:100%;
display:table-cell;
background-color:#333;
text-align:center;
vertical-align:middle;
padding:0;
margin:0;
border:0;
}
.gallery-background img {
display:block;
max-width:100%;
margin:0 auto;
max-height:100%;
}
JavaScript
$(function(){
$('.gallery-background').css('height',$('body').innerHeight())
$('.gallery-background').css('width',$('body').innerWidth())
window.onresize = function(event) {
$('.gallery-background').css('height',$('body').innerHeight())
$('.gallery-background').css('width',$('body').innerWidth())
}
})
HTML
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<div class="gallery">
<div class="gallery-background">
<img src="http://dev.driz.co.uk/gallery/halo.jpg" />
</div>
</div>
I have added the solution on here. I believe it is almost impossible to do without some fixed height. I have added JavaScript in to assist you.
Edit: I have fixed the question you asked with the use of JavaScript also adjusts on window resize. http://jsfiddle.net/4EpRv/9/
Edit: Fixed Scrollbar http://jsfiddle.net/4EpRv/11/
Here is a PEN I created for a similar answer. There are 3 ways to vertically align your content. I think table-cell method or translate() method will suite you best.
I am trying to put a gray bar on the bottom of the screen of my webpage, regardless of the resolution. However, when I try, it seems to just go up or down when I go in a different resolution. Is there any way to fix this?
Also, the bar is made out of CSS using the div id tag.
/* HTML*/
<div id="info">Scroll for info</div>
/* CSS */
<style>
#info {
height: 40px;
position: relative;
margin-top: 25%;
background-color: #393838;
opacity:
}
</style>
EDIT: I want it to be on the bottom of the screen, but then when I scroll down it goes up towards the top of my screen.
If you want it on the bottom and always at the bottom, you have to use position: fixed.
You could try this:
#info {
height: 40px;
position: fixed;
bottom:0%;
width:100%;
background-color: #393838;
opacity: 1;
}
http://jsfiddle.net/rX4nd/1/
How about adding entering as well?
.someDiv {
position:fixed;
width:50%;
height:300px;
margin-left:-25%;
background:#063;
bottom:0px;
left:50%;
}
Here is some Documentation that should help you with what you want.
https://developer.mozilla.org/en-US/docs/Web/CSS/bottom
Tl;dr, set "position: fixed" to place it at the bottom of the rendered part of the parent.
I have this very simple footer :
.footer{
width:100%;
background-color:#333;
height:100px;
position: absolute;
bottom: 0px;
}
and this container :
.container{
position:relative;
height:100%;
width:980px;
margin:0px auto;
}
The container's (content) height is 100% so it is based on the amount of results you get from your search query. I want the footer to stick underneith the container at all time. And when you have no results I just want to have it at the bottom of the screen.
I tried to give the container a padding-bottom the height of the container and change the posistion but it didn't help. Does anyone has an idea how to solve this?
try this:
.footer{ width:100%; background-color:#333; height:100px; position: fixed;
bottom: 0px; }
Changing position absolute with fixed
DEMO
see this CSS to make HTML page footer stay at bottom of the page with a minimum height
and http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page
I hope this will helpful for you.
I have this css, now it looks like a want it to in my 1366x768 laptop screen, it appears at the centre of the screen at the bottom. But when I move it to my larger screen, the footer appears in a different position, further up the page.
Can anyone give me some suggestions please?
position:relative;
width:900px;
height:70px;
background-color:#0CF;
margin-top:38%;
right:25%;
left:50%;
margin-left:-450px;
This is why:
margin-top:38%;
38% of any different screen height will result in a different position for your footer, assuming it is position relative to the body and not to another element that may have another position. In your case I would be willing to bet it is relative to the body.
If you change that to position absolute, then give it a bottom value it will stick to the bottom of the screen.
position:absolute;
width:900px;
height:70px;
background-color:#0CF;
bottom:0;
right:25%;
left:50%;
margin-left:-450px;
If you do
position: absolute;
margin-right: auto;
margin-left: auto;
with the width that you already have, that should centre it. Then
bottom: 0;
should put it at the bottom of the screen. Then you can get rid of left, right, margin-top.
[edit] The finished thing would look like this
position: absolute;
width: 900px;
height: 70px;
background-color: #0CF;
margin-left: auto;
margin-right: auto;
bottom: 0;
I am trying to make a footer/navigation fixed to the bottom right corner of the screen so when you scroll down it will always be visible, and when you pull the bottom right of the browser to make it bigger it will stay fixed in the corner. I would also like it to scale smaller when you make the browser smaller. I've figured a way to do this in the top left corner but not the right.
I have tried
position:fixed;
bottom:0;
right:0:
however this doesn't seem to be working. I am left with a mysterious space between the edge of the page and my image (http://i.imgur.com/FZoaLd0.jpg) (doing a negative margin on the div does not erase this space) I also do not want to affix this as a background image because I eventually want to make it an image map.
sorry if this is confusing! I am still a newb at this.
<div id="footer">
<img src= "images/swirlfooter.png" width="75%" height="75%">
</div>
is the width and height the culprit of the space? if so how would i fix that? just create the image in the exact size i need it to be?
First, you need a fixed position, if you don't want it to move while scrolling.
#footer {
position:fixed;
right:0;
bottom:0;
margin:0;
padding:0;
width:75%;
}
#footer img {width:100%;}
And to clear the margins :
html, body {
margin:0;
padding:0;
}
Be careful, the position:fixed, unfortunatly doesn't work with safari on iOS (iPhones, iPads...)
You can see a demo here.
Edit
Another solution is to put the img in background of the footer, like this example :
#footer {
position:fixed;
right:0;
bottom:0;
margin:0;
width:75%;
height:75%;
background:url(http://i.imgur.com/FZoaLd0.jpg) no-repeat bottom right;
background-size:100%;
}
Position absolute will move with scroll. What you need is positon:fixed;
#footer {
position:fixed;
bottom:0;
right:0:
}
You need position: fixed;.
You also might want to try clearing the body and HTML margins:
html {
margin: 0;
padding: 0;
}
body {
margin: 0;
padding: 0;
}
Is it withing any parent containers that have position set to position: relative;?
Use
position:fixed;
Instead of absolute.
Fixed will keep it always at the bottom right of the window.
Absolute changes as you scroll.
HTML:
<div class="class-name">
<img src="images/image-name.png">
</div>
CSS:
div.class-name {
position: fixed;
margin-top: -50px;
top: 100%;
left: 100%;
margin-left: -120px;
z-index: 11000;
}
div.class-name img{
width: 100px;
}
Change margin-top according to your image height.