Fiddle
I am making a social thumbs up button, and I'm having some issues. Inside my full button I have a second div to hold the right side of it. But it is about 15px tall, even if I use CSS to make it 300px tall. It also won't size with width. It is about 10px away from the right edge of the button container.
If you want the button to expand with whatever content you put in it, then the height property can't be set to an absolute value. Remove this line:
height: 25px;
from the #b CSS class and your button element should expand to contain whatever content you want inside of it. An alternative to the height property is the min-height property so instead of deleting the above line of css you could replace it with:
min-height: 25px;
The same principle applies with the CSS width property.
Related
How to hide the scrollbar without affecting the body width using JavaSCript? Whenever I click a button, the scrollbar gets hidden which is alright, but the body width gets affected. I want the body width remaining the same whether the scroll bar is hidden or not.
You can hide your scrollbar with the following styles without changing affecting on the body:
body::-webkit-scrollbar
{
width: 0;
}
i hope this will work for you.
If you give the body overflow: hidden on clicking the button, you can set padding-right: 17px to the body.
I have a problem.
Screenprinter of webpage and code is attached.
PROBLEM:
The footer div will not vertical align 100% at the bottom of the page. As you see on image there is some space between the footer div (in red) and the bottom of the page. You also see the yellow main body div under neath the red footer div (the red footer div should cover the yellow in bottom. What can i do to achieve that the vertical align of the red footer completly at the bottom?
iMAGE OF WEBPAGE,CODING IN THE STYLE-TAG AND THE MAIN BODY OF THE "HTML" PAGETHE
Appreciate help with which content to change or add coding.
There are a couple of mistakes in your code.
First : Do not include any inline css, unless you absolutely need to give that style preference (mostly happens in case of using frameworks). Do it in a css file.
Second : target the id in your css using # symbol. like #FooterDiv. If you want it to be at the bottom, use bottom:0; not top:300;
Third : Understand the difference between position:absolute; and position:fixed;
position:fixed; will fix your div at the bottom and it will always be visible even if your content is scrollable.
position:absolute; fixes your div to the bottom of the parent that is set to position:relative; (in your case that is ). If your content in the parent div is scrollable then it will be visible when you scroll to the very bottom of your parent
You overwrite the properties. In the HTML code you set a top: 300 that overwrites the bottom:0 from the CSS file.
Make sure you put # in front of your element in the CSS file: #FooterDiv
Try adding margin-bottom: 0px; to your style.
Or padding-bottom: 0px;
I would like to make the transition of the menu to be smooth. The problem is when you click the arrows, the 2nd div will show on the bottom of the 1st div, making it not smooth to look at. pls see below for my code:
Pls see my code here:
http://www.codeply.com/go/mdMPOkmFVH
in your code you need to do some basic change in CSS, your CSS should be as follows
.btn-arrow {
display: inline-block;
text-align: center;
}
.effects-list {
text-align: center;
}
.col-xs-4 {
min-height:20px;
}
Here you need to set minimum height 20px for class .col-xs-4, The reason behind this is the jquery function needs to set sliding element to have position absolute, and you were setting it to relative by force. and if all child elements in divs are absolute elements, then absolute elements won't acquire it's space in parent div and that is why it will make parent div's acquired content will be empty. so it will treat it as empty div and set it's height as 0px, and won't show anything in the div... so here we are specifying it's minimum height to solve our issue.
Another thing that we could have done is adding white space to the parent div
e.g.
<div class="col-xs-4" id="effects_menu"> </div>
Our form has a height problem with a div used for text feedback.
On a webpage I have a empty div with an id that has a style applied to it. Javascript is applied to the div when a user enters information into a form. Before the Javascript runs and put text into the div it has only a few pixels in height, when the Javascript adds text the div gains height and pushes the form elements under it down. The form should remain static without moving on user interaction.
With text the div is 29px high. Now I can apply the following style to the div.
height: 29px;
This solution does not seem to be safe as other browsers might render differently or someone might be using a different font size.
What is the best practice solution to setting the height of an empty div to stop it changing size when text is added?
If you set some fixed height (say... 29px) to the div it won't change size...
To better support different font-size, and/or number of lines, you can calculate that special number (29px) as the product of your font-size * line-height * numberOfLinesYouWantToAllow, and set this number as the div's height accordingly.
CSS
height: 29px;
overflow: auto;
I want to use a div as a background for a website.
If I use position:fixed and set the width & size to the viewport size the design breaks on mobile devices/tablets as they do not support the fixed position.
What's the best way to set a div as a static background, so that it works on mobile devices too?
I'm not entirely sure how you intend to use the background, but I created a loose way to do this here. The tacky background is applied to a div the size of the screen, and it will not move (as long as you're careful with what you put inside it). However, the same effect could be done just by direct styles on the body - I'm not sure what exactly you need the div for, so I can't guarantee this technique will work for your use case.
How it Works
With disclaimers out of the way, here are a few details on how it works. All content will have to appear within two divs: one outer one that has the background, and an inner one to hold all of the content. The outer one is set to the size of the page and can have the background applied to it. The inner one then is set to the size of the parent, and all overflow is set to scroll. Since the outer one has no scrollbar, any interior content that exceeds the size of the background tag will cause a scrollbar to appear as though it were on the whole page, not just on a section of it. In effect, this then recreates what the body is on the average web page within the "content" div.
If you have any specific question on the styles, let me know and I'll flesh out the mechanics in more detail.
With jQuery
I suppose there's still one remaining option: use similar style rules, but absent the ability to nest everything within the background, instead prepend it, and change it's position whenever the user scrolls, like so.
Then, just inject this code:
<style>
#bg {
width: 100%;
height: 100%;
position: absolute;
top: 0px;
background-image: url(http://cdn6.staztic.com/cdn/logos/comsanzenpattern-2.png:w48h48);
margin: 0px;
padding: 0px;
overflow: hidden;
}
</style>
<script>
$("body").prepend("<div id='bg'></div>");
$(document).on("scroll", function () {
$("#bg").css("top", $(document).scrollTop())
.css("left", $(document).scrollLeft());
});
</script>
modifying the style rules for the background div accordingly, and you should be good. It will not have a good framerate since this will always appear after the scroll paint, but you're running low on options if you have so little control over the rest of the document structure and style.
You don't have to use jquery. I was able to get this effect with just CSS.
You set the div just below the initial tag. Then apply the image to the html within the div. Give the div and id attribute as well (#background_wrap in this case).
...I tried this without applying the actual image link within the html and it never worked properly because you still have to use "background-image:" attribute when applying the image to the background within css. The trick to getting this to work on the mobile device is not using any background image settings. These values were specific for my project but it worked perfectly for my fixed background image to remain centered and responsive for mobile as well as larger computer viewports. Might have to tweak the values a bit for your specific project, but its worth a try! I hope this helps.
<body>
<div id="background_wrap"><img src="~/images/yourimage.png"/></div>
</body>
Then apply these settings in the CSS.
#background_wrap {
margin-left: auto;
margin-right: auto;
}
#background_wrap img {
z-index: -1;
position: fixed;
padding-top: 4.7em;
padding-left: 10%;
width: 90%;
}