I'm trying to make a footer for my page and I'm using the following CSS:
#footer {
height: 100px;
background-color: #F3F3F3;
position: absolute;
bottom: 0;
}
The footer appears at the bottom of the page as it should. I can see the text I write glued to the bottom of the page properly. However, the background colors refuse to appear at all. It's just the plain white background of the rest of the page.
Any idea why this is happening?
EDIT Checked for any conflicting/overriding CSS. Nothing that I can see.
EDIT2 The HTML
<div id="footer">
<center><p> Sup dawg, I'm a footer </p></center>
</div>
The css attribute to set the background color is background color. Change your css to:
#footer {
height: 100px;
background-color: #F3F3F3;
position: absolute;
bottom: 0;
}
Here is a working example: http://jsfiddle.net/gfKXU/1/
Did you mean background-color: #F3F3F3; instead?
Related
I'm using following css formatting to display a loading panel on form submission, and I have stored the gif image in \src\main\resources\static , but the the html div is not picking up the image, it takes all the other css formattings except the image. I have referred the following SOF link, but the mentioned solutions are not working. any one came across similar issue?
How to set background url for css files in thymeleaf?
<style >
#loader {
display: none;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
background: rgba(0,0,0,0.75) url([[#{/loading2.gif}]]) no-repeat center center;
z-index: 10000;
}
</style>
You've set display: none; - therefore an element, including background image, is invisible. Get rid of this property.
Otherwise it looks good.
I'm new to HTML and CSS and am trying to implement a navigation bar that sends the user to another part of my one-page website whenever they click on a link. I'm using anchors and reference links in order to achieve this. For instance, I'll have:
<a name="JR_Harrison_Target"></a>
and then use
[Introduction][1]
to go to that location on the page. The only problem is that when I click on the link, it sends me to the page with a large margin of pixels at the top browser from the previous section of my website. This happens whenever I click a link to any and all sections. Is there any way to adjust the position of the anchor that I'm scrolling to so I can set up the window accurately? Thanks!
Example of problem:
Try to play with this code:
HTML
<div class="menu">
1
2
3
4
</div>
<section id="1"></section>
<section id="2"></section>
<section id="3"></section>
<section id="4"></section>
CSS
section {
height: 400px;
background: red;
border: 2px solid black;
}
.menu {
position: fixed;
top: 0;
height: 50px;
width: 100%;
background: #fff;
color: black;
display: flex;
align-items: center;
opacity: .5;
}
.menu a {
margin: 0 20px;
}
JSFiddle: http://jsfiddle.net/8m0w2aon/8/
As you can see - in order to make links work properly - you need to place the id prop on the section you'd like to scroll to. You'll be just "teleported" to the beginning of the section.
Each section should have fixed height, and no element inside it should come out of it (for example a background image which is bigger than the section itself).
I have a problem with hover. I have a normal pic with opacity and another one with white background. I did this:
html:
<div id="glob" style="margin-right:5px;margin-top:2px;float:right;height:45px;width:40px;">
<img src="images/icon_globus.png" width="32" height="33" alt="" style="margin-right:5px;margin-top:7px;"/>
</div>
css:
#glob:hover{
background:url('../images/icon_globushover.png') no-repeat;
}
As you can see from the pic, the white one (upper globus) is behind the other one. It should not be behind.
What is not good?
EDIT: Thanks all, it's working. I did like the first answer. Don't know why I used img tag. I always use divs as image, but here I was stupid. Thanks a lot all for your help!
Because background always has the lowest z-index of all elements and content will be on top of it. I would suggest you to put "images/icon_globus.png" this as a background for div glob and remove that image tag. Then it should work the way you want it.
try without the image part.
glob {
background: url('icon_globus.png');
}
glob:hover {
background: url('icon_globus_hover.png');
}
Depending on the browsers you want to support, you could do something like this in CSS:
#glob { position: relative; }
#glob:hover:after {
content: '';
display: block;
position: absolute;
z-index: 1000;
left: 0;
top: 0;
right: 0;
bottom: 0;
background:url('../images/icon_globushover.png') no-repeat;
}
Because your image icon_globus.png is above your div background so when you hover, you actually apply a background to the container containing your image, you globushover appears behind your ..
try this instead:
html:
<div id="glob></div>
css:
#glob {margin-right:5px;margin-top:2px;float:right;height:45px;width:40px;background:url('../images/icon_globus.png') no-repeat;}
#glob:hover{
background:url('../images/icon_globushover.png') no-repeat;
}
this way you change/overwrite the default background-image. css means cascade style, cascade is wat permits you to overwrite styles depending on a certain condition, thats theory applied here. just overwrite a background-image with another one on hover.
remove all style and change as below
// CSS
glob:hover{background: url("/images/icon_globushover.png") no-repeat;}
.glob{
background: url("/images/icon_globus.png") no-repeat;
float: right;
margin: 0px 0px 15px 20px;
overflow: hidden;
padding: 0px;
width: 32px;
height: 33px;
}
<div class="glob"></div>
if your path source is like this
myhardrive/MysiteFolder/Images/ and your index.html is in MysiteFolder so in css must be (/images/)
if your path source is like this
myhardrive/MysiteFolder/files/mystyle.css here you do ("..\images\")
I have implemented the following website: link
There are two textfields in the header part of the website. If you click on a textfield, a calender pops up. My problem is that the calender is not shown on the foreground although I set the css properties position: absolute; and z-index: 999;. What is the problem and how can I solve it?
You can add the following to your css
.row-3 {
overflow: visible;
}
Just remove overflow:hidden; from here #header .row-3
#header .row-3 {
background: url("images/header-tail.gif") repeat-x scroll left top transparent;
height: 276px;
}
see the attached image how i did
I'm creating PHP, Javascript based photo-gallery from scratch
The problem is, I want to make difference between simple picture and photo-album.
So simple picture borders look like that
Is that possible to create facebook like photo-album borders (double borders, which creates multiple images effect) via css or CSS3?
P.S Don't know if it will be possible with old css standarts. I mean, CSS3 probably can do it but it will not be backward compatible. In other hand, currently my php side generates 100x100 px thumbs. I need something that will not be ruined if I will increase size of thumbs.
Thx in advance
Use a pseudo element like :before or :after, for example:
Turns out, most browsers don't like :before on images because it's not a text-containing element. You could still do this if you did it on an alternative element, like a div, and set the div's background to the original image. Or, you could try:
http://jsbin.com/otivaj/edit#html,live
Is this what you're looking for?
jsfiddle
HTML:
<div class="facebook-album"></div>
CSS:
.facebook-album, .facebook-album:before
{
background: red;
width: 100px;
height: 100px;
margin: 20px;
border: 3px solid #FFF;
box-shadow: 0 0 0 1px #999;
position: relative;
}
.facebook-album:before
{
margin: 0;
content: "";
position: absolute;
top: -7px;
left: -7px;
background: white;
z-index: -1;
}
You could just look at Facebook's source to figure it out. This will also work:
http://jsfiddle.net/g9A6a/
Yep, you can definitely do this with CSS. It looks like all your images are the same size, too, which will make this very straightforward. Simply place your <img> inside a containing element with position: relative; and an offset. Both the container and image should have a border, with padding and offsets you so desire. Set the width and height of the containing element based off the child image's dimensions.
Here is a
DEMO on jsfiddle
I'm not sure you can achieve that effect with simply CSS2. If adding more markup is an option, I would do something like this:
<ul>
<li><img></li>
</ul>
li {
position: relative;
border: 1px solid gray;
}
img {
padding: 6px;
border: 1px solid gray;
position:absolute;
top:6px;
left: 6px;
background-color:white;
}