Develop Reference

Adjust size and center text vertically in a JQuery button

I have a button html element on my page and want to use the JQuery button so I do
$( "#myButton" ).button();
This works great, but I want to edit the style of the button, namely (as it says in the title) I want to make the button shorter with smaller text and center the text vertically. I've tried
#myButton {
height: 22px;
font-size: 16px !important;
}
And this works in terms of making my button and text the size I want them, but it doesn't center the text vertically in the button. I've tried setting padding-bottom: 2px;, I've tried setting line-height: 22px;, and I've tried setting vertical-align: center;, but none have worked. The button still looks like: Any help would be greatly appreciated. Thanks!

Try to use padding: 0; instead height: 22px; and your height will be defined by your font-size attribute.
Example: https://jsfiddle.net/dmonti/mz8k7kkw/

For centering small elements relative to a parent I usually just use absolute positioning:
HTML
<div>
<span>Process</span>
</div>
CSS
div {
position: relative;
border: 5px solid grey;
background: black;
color: white;
width: 200px;
height: 300px;
}
span {
position: absolute;
bottom: 50%;
right: 50%;
transform: translate(50%, 50%);
}
The important things to note here are that your "Process" element is self-contained (inside it's own span element), and that its parent element's position property is set to relative.
The CSS transform property might look a little confusing, but it essentially keeps the element perfectly centered inside of it's parent, no matter how it's resized.
Fiddle
In my fiddle, you can see how it centers by adjusting the div's height property in the css.
Hope this helps!

Sticking side menu to top

I've been looking into sticking a "div" to the top of the screen when you scroll past it, or making the div scroll with the page when it reaches the top of the screen.
The issue i get when i try this matter is that changing to position: fixed; using either jquery or the simple css, removes the float from the element.
My layout look somewhat like this: http://jsfiddle.net/ThSXm/33/ <-- updated
So when the float is removed, the id="content" get's overlapped by the sidemenu, making the sidemenu bigger and out of place.
I need a solution where you dont have to alter the position of the elements or if there is some fix i can make on the content div so it wont get overlapped when changing the positions.
Update
Sandeeproop managed to help me with the positioning, but the scroll matter is still a issue.
As i mentioned in the comment for this question, the div has to scroll/stick to the top of the screen when the div is close to the top or reaches the top (and preferably stop once the div reaches the footer or is close to reaching the footer), because there are more divs (header/slideshow etc) before we reach the side menu, and you wont see the menu if you just use position: fixed.
Any thoughts?
/update
Looking forward to some answers!
//Jim

If i understand you question correctly.
Please check this fiddle.
#nav {
width: 136px;
position: fixed;
background: #FF0000;
margin-left: 1em;
margin-top: 1em;
}
#content{
width: 80%;
height: 600px;
background: #FF9966;
float: left;
margin-left: 170px;
margin-top: 1em;
}

You can set fixed margin-top values for nav and content elements.
Something like that http://jsfiddle.net/ThSXm/26/
#nav {
width: 15%;
height: 100%;
float: left;
background: #FF0000;
margin-left: 1em;
margin-top: 60px;
}
#content{
width: 80%;
height: 600px;
background: #FF9966;
float: left;
margin-left: 1em;
margin-top: 60px;
}

I guess what you are looking for is "position: sticky".
This is not yet supported by many browsers, but here is a pollyfill for it
http://philipwalton.github.io/polyfill/demos/position-sticky/

Have you considered a solution where you use position:absolute on the element?
Have it being absolute untill you need it to stick and then change it to fixed.
Here is a simple fiddle:
http://jsfiddle.net/dXe97/
if ($(this).scrollTop() > boxTop) {
$box.css({
'position':'fixed',
'top': 0
});
}else{
$box.css({
'position':'absolute',
'top': 150
});
};
The .box element is absolute positioned, but when you scroll down passed the element, it is changed to fixed and its top value is set to 0, and back again when you scroll up.

Webpage displays incorrectly on different resolutions due to incorrect css

I'm having some issues with a webpage of mine, mainly on mobile devices but it also affects desktop devices too, I would be willing to award a bounty (as and when stackoverflow allows me) to whomever can help with these problems
HTML: http://pastebin.com/raw.php?i=bbFsMcwT
CSS: http://pastebin.com/raw.php?i=SGMwt3cs
JSFiddle: http://jsfiddle.net/D8SJD/
Issue 1 - Left/Right Scroll Image Buttons
Currently my left and right scroll image buttons are done in html using onmouseover and onmouseout I want to be able to convert them into css based "buttons"
Issue 2 - Dynamic Resolution(s)
The header and footers aren't dynamic with different resolutions for example, I created the page designed on a 1680x1050 monitor which looks like: Desktop 1680x1050 however making the window smaller it looks like: Desktop Small Window
On a Nexus 4 mobile phone on default zoom it looks like: Mobile Original Zoom
On a Nexus 4 mobile phone zoomed out to as far as it can go it looks like: Mobile Max Distance
On a Nexus 4 zoomed out and scrolled to the bottom (so that the browsers URL bar disappears) it looks like: Zoomed out without URL bar (the footer of the actual webpage vanishes)
On a Nexus 4 zoomed out and scrolled just off from the bottom (so that the browsers URL bar is visible) it looks like: Zoomed out with URL bar (the footer returns)
.
The placeholder image and arrows are supposed to be in the center of the footer and headers and should shrink in accordance to the screen resolution.
Mobile device default zoom (if possible) needs to be decreased so they can see more and on getting smaller (if possible) if it gets close to Mobile Original Zoom then the Up to Top, Down to Key, placeholder logos should vanish...
Please see images at bottom of this post
For the mobile devices I tried things like below just for testing but none of them worked...
#media (max-width: 640px) {
#header > a img {
display: none;
}
}
EDIT 14/11/2013 # 01:58GMT
On a 1920x1080 screen it looks kind of okay although there is a big gap between the text and the placeholder image as seen below:
On a 1680x1050 screen it looks roughly how it should take note of where "Semi" is located and compare to the 1920x1080 image from above.
On a 600x600 screen it appears as follows, which as you can see there is a big gap between the placeholder and the left arrow but on the right arrow there is no gap and infact it overflows, as for the text it too is too far to the right.

Type
#media screen and (max-width:640px) {
/* Your specific styles go here */
}
and dont forget to add
<meta name="viewport" content="width=device-width,initial-scale=1.0">
Hope that helps :-)

I see a border around your links, remove from your links:
a{
border:none ;
}
for first issue you can do it with CSS, just remove <img> tag inside <a> tag like this:
<div class="footleft">
<a class="def" href="javascript: void(0);">
</a>
</div>
create image buttons like this:
then set background to <a> tag like this:
#footer .footleft a {
width: 100px;
height: 47px;
display: block;
background: url(path/to/leftarrow.png);
background-position: 0 0;
}
#footer .footright a{
width: 100px;
height: 47px;
display: block;
background: url(path/to/rightarrow.png);
background-position: 0 0;
}
#footer .footleft a:hover , #footer .footright a:hover{
background-position: 0 100%;
}
second issue, I think if you remove position:absolute; from #header .headimage and #footer .footimage it will be okay.
and if your want to centerize headmid and footmid and footmidtwo you have two choices,
First: set fixed width to them and use CSS like this:
#footer .footmid {
top: 50%;
left: 50%;
position: absolute;
font-size: 15px;
width: 292px;
margin-left: -146px;
}
#footer .footmidtwo {
top: 70%;
left: 50%;
position: absolute;
font-size: 15px;
width: 126px;
margin-left: -63px;
}
#header .headmid {
top: 60%;
left: 50%;
position: absolute;
font-size: 15px;
width: 302px;
margin-left: -151px;
}
Second: if you need to have dynamic width you can use this CSS and JQuery:
CSS:
#header .headmid {
top: 60%;
left: 50%;
position: absolute;
font-size: 15px;
}
#footer .footmid {
top: 50%;
left: 50%;
position: absolute;
font-size: 15px;
}
#footer .footmidtwo {
top: 70%;
left: 50%;
position: absolute;
font-size: 15px;
}
JQuery:
var $widthhead = $(".headmid").width();
var $widthfoot = $(".footmid").width();
var $widthfoot2 = $(".footmidtwo").width();
$(".headmid").css("margin-left",$widthhead/2*(-1));
$(".footmid").css("margin-left",$widthfoot/2*(-1));
$(".footmidtwo").css("margin-left",$widthfoot2/2*(-1));
jsFiddle is here

Okay I've tried to filter out all of the irrelevant code for this solution.
See the solution here.
Most of the time, it is best to use relative positioning to fit elements absolutely inside of another element. In your case, with three different strings to fit in a 300x80 window, it's a bit crowded. I tried to place things in a logical position to demonstrate.
By placing a container in the footimage div with relative position, you can then place every element inside the footimage div absolutely relavtive to the footimage div, rather than to the entire page.
For example, what you had:
#footer .footmid
{
position: absolute;
top: 50%;
left: 50%;
}
Will place the div of class footmid at a position 50% of the page height from the top of the page and 50% of the page width from the left of the page:
This will work if every user that visits your page has the exact same resolution, however it causes problems when the don't. Obviously, this isn't a perfect world, so different resolutions will visit your page.
What you can do is use relative positioning!
Basically I tell CSS that instead of moving 50% from the top and left of the window, move 50% from the top and left of the nearest parent element with relative positioning:
You can modify the bottom, left, and right attributes of my fiddle to move the footmid elements within the relative element .footimageContainer that is the same size and in the same position as the .footimage.
As far as your arrows, I wasn't quite sure what you were trying to accomplish; your question was pretty vague, so I simply made them fade out slightly when you mouseover them. Any mouseover/out events can be handled using CSS psuedo-elements.
.element //Native and mouseout
{}
.element:hover //onmouseover
{}
Remember that if you use pseudo-elements, you have to specify the attribute that will be changing in both the native and :hover rules.
.element
{color:red;}
.element
{color:black;}
If you have any additional questions on the arrows, let me know and I'll revise my answer.

http://jsfiddle.net/D8SJD/4/
Instead of using absolute positioning, you can just take advantage of the text-align center and images and text will center automatically.
If you want offset from center, try position:relative, and top, left, right etc and it will move relative to it's central position.
Elements that are display:inline; or display:inline-block; will align according to parents text-align property, in this case text-align:center.
#footer .footimage {
display:inline;
position:relative;
top:-10px;
}
#footer .footmid {
top: 50%;
width:100%;
position: absolute;
font-size: 15px;
}
#footer .footmidtwo {
top: 70%;
width:100%;
position: absolute;
font-size: 15px;
}

As per issue 2, i could be wrong but when targeting the image through the structure of the site
i.e.
headImg a img{...}
The style wouldn't work. But if you add classes to the images the style will work; the case could be that there are some unclosed divs or elements messing with the architecture.
<div class="headimage">
<img class="placeholder" src="http://placehold.it/300x80"/>
</div>
#media screen and (max-width: 640px) {
.placeholder {
display: none;
}
}
JsFiddle here - http://jsfiddle.net/Q5bEb/

DIVs overlapping. Need to move it over so they don't

Basically what the title says. Though the spacing needs to be the same on any resoulution. I tried to do it with css but on different resolutions it moves around a bit. It dosn't matter how you do it (javascript, css, html), as long as it works.
You can view the site that im having issues on here.

If the error is the Fatal Error. Check Code. bit at the top, then do this
Change
#newscontent {
top: 4px;
left: 14%;
position: fixed;
}
to
#newscontent {
top: 4px;
left: 18%; //CHANGE HERE
position: fixed;
}
This will keep the text from overlapping the Latest News bit, at least until the page shrinks smaller than the BB.
Even better would be to make #newscontent a span and place it inside the #news div, so there would be no overlapping or separation no matter what the screen size.

only #topbar should be positioned absolute (if needed), child divs can have float left and margin/padding right

OK, so bottom line is you don't want to solve this using absolute or fixed positioning with left-offset percentages. This approach will fail depending on screen resolution and length of text. A better approach is to float the items, which will allow them to "push" the next element to the right, if need be. Try this:
First, remove all your CSS for your #serverstats, #news, and #newscontent selectors.
Second, on all three of those divs, add a menu-item class:
<div id="serverstats" class="menu-item">...</div>
<div id="news" class="menu-item">...</div>
<div id="newscontent" class="menu-item">...</div>
Third, add the following CSS to your style sheet:
.menu-item {
float: left;
font: bold 120% Arial,Helvetica,sans-serif;
margin-left: 15px;
padding-top: 3px;
text-decoration: none;
}

Floating menu bar using HTML/CSS?

wondered if any one knew of a way of creating a floating menu bar that sticks to a point on a page until the browser window gets far enough down the page and unsticks it and then the menu bar begins to scroll along with it. The effect I want is the exact same as this http://www.jtricks.com/javascript/navigation/floating.html javascript menu. However, I really want to do this with CSS. I am aware I can make the div Absolutely positioned and it will move down the page, I tried making one DIV relative positioned (parent div) and then another div inside this which was absolute positioned, but I could not get this to work. Does any one know how to make this work with CSS or does it need to be JS?
Thanks in advance.
Jon.

I believe using javascript is the only solution to get the effect you described. Here's a quick demo of a banner that starts in a absolute position and goes to fixed when the user scrolls.
<div style="height:1000px;width:500px;">
<div id="floatbar" style="background:gray;
width:200px;
height:40px;
position:absolute;
left:0;top:200px;">
</div>
</div>
$(window).scroll(function(){
if ($(window).scrollTop() >= 200)
{
$("#floatbar").css({position:'fixed',left:'0',top:'0'});
}
else
{
$("#floatbar").css({position:'absolute',left:'0',top:'200px'});
}
});

well if you do NOT need the animation, than just use
position: fixed;
in the css.
if you want it animated you need to use javascript.
for example in jquery:
$(window).scroll(function(){
$('#menu').css({
right: 0,
top: 0
})
})

Well you can't do it with absolute positioned div inside of a relative. Fixed position is basically an absolute positioned div, positioned relatively to the window. I'd say you definately need javascript here.

This should be rather easy with a fixed sidebar, and a floating content section. Try something like this...
#container {
width: 960px;
margin: 0 auto;
overflow: hidden;
position: relative;
}
#sidenav {
width: 300px;
position: fixed; /*--Fix the sidenav to stay in one spot--*/
float: left; /*--Keeps sidenav into place when Fixed positioning fails--*/
}
#content {
float: right; /*--Keeps content to the right side--*/
width: 620px;
padding: 0 20px 20px;
}

This is old post but CSS has changed a lot since then, we can do a floating menu with plain CSS. See sample code below. Credit to https://www.quackit.com/css/codes/css_floating_menu.cfm
main {
margin-bottom: 200%;
}
.floating-menu {
font-family: sans-serif;
background: yellowgreen;
padding: 5px;;
width: 130px;
z-index: 100;
position: fixed;
right: 0px;/* You can change float left/right */
}
.floating-menu a,
.floating-menu h3 {
font-size: 0.9em;
display: block;
margin: 0 0.5em;
color: white;
}
<!DOCTYPE html>
<title>Example</title>
<main>
<p>Scroll down and watch the menu remain fixed in the same position, as though it was floating.</p>
<nav class="floating-menu">
<h3>Floating Menu</h3>
CSS
HTML
Database
</nav>
</main>

I believe it needs to be JS. I can imagine it can be rather simple with jQuery and I really cannot think of any way to achieve this only with CSS. I'll try to think about it, but I doubt I'll find a solution.