I'm essentially trying to create a div which is an image of a button, and when the user clicks it a function is executed. For some reason the div is not showing up at all! What in the world am I setting wrong?
CSS:
#customizeButton
{
background-image:url('images/customizeButton.png');
position:absolute;
top:35%;
left:25%;
width:370px;
height:350px;
background-repeat:no-repeat;
-webkit-background-size:100% auto;
z-index: 150;
}
HTML:
<div id ="customizeButton"></div>
It has to be something with the CSS side. I've got almost identical code for another "button" which I use as an exit button, but it uses a text character instead of an image. It works just fine...
Here's the code for reference:
CSS:
#statSheetExitButton
{
width: 40px;
height: 40px;
position: absolute;
font-weight: bold;
top: 17%;
left: 74%;
font-size: 150%;
font-style: normal;
color: black;
z-index: 50;
}
HTML:
<div id ="statSheetExitButton">X</div>
And again, the question is why the customizeButton is not showing up.
EDIT: ANSWER The problem was that I had the html code for my initial Stat Sheet components in another html file in the same folder, and my program was only listening to that file.
Is this the correct path to your image?
background-image:url('customizeButton.png');
This would only work if the img was in the same directory as the css.
You are absolute positioning your element. Could you be positioning it on top of a relative positioned element that is causing it to be placed outside of the viewport of the browser screen. Use the inspector tools in Chrome, Firefox or Safari to find out where the div is. That'll get you on the right track.
I think your div is empty so that,s why div is not showing, try to write some text or some thing else in div
My thoughts:
display: block; missing
you don't need background-repeat(nor -webkit-background-size), because you are giving it a height & width
if you are only positioning this container, you do not need z-index
Make sure your button is inside a positioned element, which isn't itself hidden.
Related
I am working on designing HTML page by looking at the image I have. It should exactly match with what I have in my image (in the link). I have got almost everything designed as that image but few things I am not able to make it work. Here is my image link and I have to design HTML page exactly as it is.
And here is my jsfiddle which I have designed by looking at the image.
It looks like I am having problem with absolute width because of which all my divs are getting messed up.
I can see white space between company-bio div and mission-statements div which I am not able to remove somehow? And I don't understand why it is even coming.
Also northmanwild div is going out of alignment as well.
There is a lot of white space below copy-rights div at the end and that is also not matching with my image.
Also somehow all the alignments of my div looks ok on my browser on my laptop but when I made jsfiddle, it looks weird and it goes haywire. It doesn't matches with what I have in my image link. So maybe what I have won't work with multiple browsers or multiple resolution.
Here is my css for company-bio:
body .company-bio {
position: relative;
top: -42px;
padding-top: 40px;
margin-left: 131px;
/*Added Just now */
padding-bottom: 40px;
max-width: 100%;
background: url("https://s30.postimg.org/l04wudgs1/grey-bar.png");
padding-left: 140px;
padding-right: 155px;
font-size: 20px;
font-family: "Adelle PE";
}
What is wrong I am doing because of which my html is getting messed up here? What I am supposed to do to solve this absolute width problem so that my html works fine anywhere without alignment getting messed up.
Note: I still need to work on left navigation text which I haven't done that yet. As of now I am trying to fix all the alignment issues which I am having because of absolute width I believe is happening.
I have a start button in my js game. I just noticed that I can be slightly to the right of it, and the cursor is a pointer. My css:
#start{
position: absolute;
top: 130px;
left: 195px;
height: 80px;
width:320px;
background-color: red;
cursor: pointer;
border: 2px solid yellow;
border-radius: 20px;
}
The button is just a div. After setting the button to a variable named "start", I use the following js to make it change background on hover:
start.onmouseover=function(){
this.style.backgroundColor="#FF4500";
}
start.onmouseout=function(){
this.style.backgroundColor="red";
}
I am able to trigger the hover by being outside of the button. Why is that? Here is the game where the issue occurs. The button is the first thing you see. This occurs with some other buttons as well. I know that I can use css hover, but am curious to find out what's wrong with this.
The reason why it is acting this way can be found in your css for #new:
#new {
font-size: 40px;
font-weight: bold;
color: yellow;
position: relative;
left: 48px;
bottom: 24px;
You should note that this child component is inheriting the width of the parent div which you set to have a width of 320px. You can verify this by inspecting the parent and child and looking at the computed styles:
Parent:
Child:
Then in your css for #new, you MOVED the position of the element to the right by 48px:
left: 48px;
This element still has a width of 320px as shown in chrome developer tools.
I bet that little blue bit that has overflowed is exactly 48px and where you are experiencing that unwanted behavior =) So, I hope you now understand what is going on with your css!
You can even verify this by setting the width of the child to be:
width: calc(100% - 48px);
You should find now that there is no more overflow:
The browser is actually taking the hover-detection from this area here.
http://i.imgur.com/WPYi7gj.png
You can probably see that it uses the text as the start of the hover area, and that there's a lot of padding on the right of the element. You'll want to remove this padding using CSS.
Whenever i re-size my window the slider buttons (next/previous) disappear and do not move with the slider. Any idea on how to fix this?
JSFIDDLE:https://jsfiddle.net/b31kvqwr/
Buttons CSS:
#nav img {
position: absolute;
top: -10px;
cursor:pointer;
color:grey;
width:40px;
height:30px;
}
#prev {
margin-left: 530px;
font-size: 10px;
}
#next {
right: -30px;
margin-top: 13px;
}
PS: if the result in the jsfiddle doesn't show, expand the result tab.
This is how the slider looks like when full screen (the right way);
This what happens when i re-size the browser horizontally:
The buttons aren't moving with the slider. Any help please?
The problem at the moment is that you are using margin-left:530px; meaning that the arrows will always be 530px from the left of the screen no matter the size of the screen. It also looks like what ever is wrapping it has a set width and isn't resizing, your code was to messy for me to find this but there are a few thing that I found to make the problem a little better,
https://jsfiddle.net/b31kvqwr/2/
I have managed to keep it the correct place for a lot of the, however to improve get it working perfectly you will need to create 1-2 #mediaqueries to tweet the alignments at different sizes to make it perfect.
The way I did this was by changing margin-left to position:absolute and use a left positioning instead on your prev and next buttons;
#prev {
left: 50%;
font-size: 10px;
position:absolute;
}
#next {
margin-top: 13px;
left:58%;
position:absolute;
}
As I side note I would recommend cleaning up your code like #TingGaint said as it is insanely messy. Also when posting on stack try only include the relevant code not all of it as it makes it quicker and easier to look through and help.
EDIT
I have found the problem, still do what I said above however now instead of have the arrows div where they are now, move them out and so there below <div id="wrapper"> however you will have to play around with the placement as they will be at the top of the screen. However now they stay in the same place when re-sizing!
Example - https://jsfiddle.net/b31kvqwr/4/
I have a menu that under certain circumstance some items show a little red box (think facebook friend count).
I've recently redone the css targetting the menu but nothing should have changed to cause the problem I'm seeing.
It's a simple div like this:
<div id="request-count" class="noticount"></div>
The CSS looks like:
.noticount {
background: none repeat scroll 0 0 #E43C03;
color: #FFFFFF;
font-size: 0.6em;
font-weight: bold;
position: absolute;
top: 3px;
left: 3px;
text-align: center;
}
I've checked the page sounce and my javascript is correctly setting the value so the div ends up looking like this:
<div id="request-count" class="noticount">1</div>
The only way I can get this to actually show up is by manually hacking the live CSS and setting the Width and Height, then it shows up without a problem.
The really odd bit is that the content "1" never shows in the div either. Very confused over this and really don't know what to try.
Not sure if this is significant or an oddity with FireBug but sometimes this div appears in the code view slightly tranparanent which usually disnifies that an element is display:none which I'm not getting either.
What can I try to solve this?
EDIT
Here is a fiddle displaying the problem:
http://jsfiddle.net/UYa5Z/
Not sure of the exact reason, but it appears that the formatting of your font-size is not working as intended. With the example that you linked, if you simply change the font-size of the noticount class from em based to px based it seems to fix the issue.
.noticount {
background: none repeat scroll 0 0 #E43C03;
color: #FFFFFF;
font-size: 10px; /* this instead of font-size: 0.6em */
font-weight: bold;
position: absolute;
top: 3px;
left: 3px;
text-align: center;
}
JSFiddle
Edit:
Based on my second comment below, I investigated the issue further. As this JSFiddle shows, you can keep .noticount's font-size relative if you remove the font-size: 0; from both ul#moomenu and ul#moomenu li. I'm not sure what the purpose of setting those to 0, but given you use px (instead of em) on ul#moomenu a and ul#moomenu ul a I'd suggest using my first suggested fix as it's consistent with the other font-sizes you set in your css.
Make sure the parent of.noticounthas a relativeposition that will fixe the problem
.noticountParent{
position:relative;
}
.noticount{
position:absolute;
}
Html:
<article class=noticountParent>
<div id="request-count" class="noticount">1</div>
</article>
Your ul#moomenu and ul#moomenu li define font-size:0
Since the .noticount has font-size:0.6em, the resulting font size is... 0
A font size of zero is invisible.
I am working on this site http://www.group---me.my/national/
Please remove --- in the url.
For certain deals, there is options, and when you click on the BuyNow button, a popup comes up. I would like to dim (darken) the background, while the popup is shown.
To do this, on my local test site, I added the following div class:
.overlay{
display: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 333%;
background-color: black;
z-index: 20;
opacity: 0.8;
filter: alpha(opacity=80);
}
Then on the Buy Now button, I added
onclick="javascript:document.getElementById('fade').style.display='block';"
I also have this in the site
<div id="fade" class="overlay"></div>
But the problem is, the overlay always hides all the layers, including the popup, regardless how high I set the popup div's z-index.
Any help is much appreciated. Thanks.
Which browser? Which version. I am getting it right here. It should hide right?
And it is prominent. What is that you wanna do here?
If you doesn't specify some parent element to be relative positioned, your overlay div will be positioned relative to body so it can be above all other content.