I have created a CSS button on the main menu of a site that I adopted (did not design myself) and the button looks great when at the top of the page. However, once I scroll down and the menu compresses into the sticky menu, the text misaligns with the button background. The text drops down to below the button background and I'm not sure how to fix that.
I've tried adjusting the padding, instead of creating a set height & width to the button, but the padding wasn't working on the right and left side so I went back to the static size. My current button code is below.
.button-menu {
background-color: #0051a3;
width: 100px;
height: 30px;
text-align: center;
vertical-align: central;
border-radius: 10px 10px 10px 10px;
}
.button-menu:hover {
background: #fbb714;
text-decoration: none;
}
I just want the text to be centered within the button background in the vertical alignment when the menu is in scrolling mode.
Your button has a fixed width and height but the text inside of it is going to drop down into multiple lines as that's a browser default behavior. You could try playing around with
.button-menu{ word-wrap: break-word; }
or maybe also try using a min-width and min-height instead of setting the width and height.
Related
I am trying to render a angular datepicker in the bootstrap's modal window. However the calendar is getting clipped.
Attached is the screenshot for the same.
I tried to fix it with z-index. However failed very badly.
Pre-Conditions :
The header and footer of the modal are fixed.
Only modal -body will scroll.
The modal-body will have max-height to occupy the remaining height of the browser
The content in the modal may increase or decrease. Hence the modal will extend to utilize the remaining browser height with the scrollbar only for the content.
As <uib-datepicker> has a fixed size and cannot be resized, you can customize the size of the small buttons (days).
For example define .custom-size .btn-sm CSS rule:
.custom-size .btn-sm {
padding: 4px 8px;
font-size: 11px;
line-height: 1.5;
border-radius: 3px;
}
and then apply the custom-size class to uib-datepicker:
<uib-datepicker ng-model="dateTo" starting-day="1" min-date="dateFrom" show-weeks="false" class="custom-size"></uib-datepicker>
In the Firefox navigationbar I only have the back/forward buttons on the one side
and the menu button on the other side of the urlbar.
Now I'd like to horizontally center the urlbar on the remaining space of the navigationbar with a custom userstyle.
In my css, I've added the following code:
#urlbar {
width: 800px;
margin: 0 auto !important;
}
But that doesn't work. Can you maybe point me in the right direction?
Thanks!
I think this is the right way to make the urlbar a fixed width (it's how I have set it on my profile):
#urlbar, #urlbar-container {
min-width: 250px !important;
max-width: 550px !important;
}
Don't know how to make the urlbar centered in the navbar through userchrome.css, but you can achieve the same result with Classic Theme Restorer Extension (or any other that lets you customize the navbar with flexible spaces).
My application should look good on small screens. When it is normal size, everything looks good. But when the screen is too small my buttons starting to mess up.
Red square represents an image, yellow represents some text and blue represents buttons.
Normally, the top version is displayed (the correct one)
When the screen is small, the second situation happens, when the bottom button jump to a new line.
Ideally, both buttons should stay one above the other. This is my css code:
{
background-color: #6b89ac;
border: 1px solid #89a9d0;
border-bottom-color: #1d4474;
color: white;
font-weight: bold;
text-decoration: none;
padding: 2px 5px 2px 5px;
margin-bottom: 3px;
text-align: center;
display: inline-block;
width: 100px;
}
It happens on small screens because the button is being pushed far enough down to slide under the picture. Try wrapping the text and buttons together in a div. The buttons would then be bound by the left edge of that new div.
Depending on your code that new div might also need overflow: hidden.
In the 1st situation, the 2nd blue box being held to the right only because the red box is tall enough to prevent it from clearing.
To ensure the blue boxes stay to the right right, float them right {float:right}
You should then wrap each set in a div so that the 2nd red box doesn't run up into the middle of the 1st group. And you'd probably need to apply a cleafix solution to that div to ensure its height grows approprirately with the addition of floats.
clearfix references:
1. What methods of ‘clearfix’ can I use?
2. The New Clearfix Method
(I prefer #2)
You can give the body a fixed width. Then, your layout doesn't change when the window width is reduced. You can use the overflow-x property to control the scrollbar behaviour
Is there any way of getting rid of the scroll track entirely? Or making it overlay the content rather than pushing it aside? Like iOS/Lion scrollbars?
The following gets pretty close, but even though the track is transparent, the content of the scrollable region is pushed over and the page background shows through.
::-webkit-scrollbar {
width:8px;
height:8px;
-webkit-border-radius: 4px;
}
::-webkit-scrollbar-track,
::-webkit-scrollbar-track-piece {
background-color:transparent;
}
::-webkit-scrollbar-thumb {
background-color: rgba(053, 057, 071, 0.3);
width: 6px;
height: 6px;
-webkit-border-radius:4px;
}
Hmm, I thought I answered this one previously, maybe not:
Hide the overflow on the body
wrap the entire content of the site or whatever you're scrolling with a div,
Incude css properties for the
div (overflow:scroll or overflow-y:scroll).
Now you can set the track css to any opacity using rgba(0,0,0,0.3) because the scroll is not part of the body.
Another tip for customizing firefox scroll bar if you want to experiment is to:
Do the overflow thing and to overlay the scrollbar (via z-index) with a transparent div of whatever color you like,
Position the div over the entire scroll section (probably something like position:absolute; right:0; if you're using the scroll for the entire window)
Use pointer-events: none; on the divs css to make it semi-transparent.
It will give the firefox scroll a little color/ texture. (May be ideal to force the scroll to the right for comparability)
I've not tried it yet but it's do-able
I have tried using firebug to locate the problem, but cannot find the solution to the following at this url :
How to get rid of the space between the image and the text? For example, the gap between the image of lego-like bags and the text "AboveHere Concept"
How to align these two social buttons in one line? I have set the twitternews class width to 90px and the facebooknews iframe to a width of 90px, but this does not work. I also have these two buttons in a block with a width set to 200px, but this does not seem to work either.
your
<p>
tags in the post-body divs have a top and bottom margin of 1em. that's why there's a lot of space in there. take those out
.post-body p {
margin: 0;
}
you need to set .facebooknews div to have a smaller width, not the iframe
div.grid-item .facebooknews {
clear: none;
float: left;
padding-right: 5px;
width: 100px;
}
1) Add the style margin-top: 0px to the P tag that the "AboveHere Concept" text is in. Also remove the <br> thats right before the text. It will move everything up.
2) facebooknews add a width: 100px; and it will fit.