I have a horizontal menu bar with a fixed width for my site. Some of my words are too big for the widths of the buttons and they become off centered or sometimes they don't render correctly. Is there a way to make the top level buttons different sizes to fit the words correctly with the fixed width of the entire bar. This is my site if you want to check out what I mean.
http://www.rsd17.org/test
You'll see that community and quicklinks are not centered. on chrome-Linux browswer they over lap and don't look correct. Any help would be great. Im sure there is something in the CSS that can be tweaked, just not sure which.
You can remove the left / right padding on the links and instead set them to text-align: center:
ul.MenuBarHorizontal a {
padding: .66em 0;
text-align: center;
}
Related
We have long table and I want the horizontal scrollbar to always appear in the bottom of the viewport.
We don't want to use a custom sidebar.
I've seen this question: How can I make the horizontal scrollbar for a DIV always appear fixed on the bottom of the page? but I want the table to be long (and not to set height on it) and to have one main scrollbar on the page (we have more widgets).
I tried:
.containerClass::-webkit-scrollbar { position: fixed; bottom: 0px;}
but it didn't work.
Any idea?
I have more than 2 image items placed in various positions against a full screen background image (container). I only need the two image items in the center to align horizontally down the middle of the page/screen. This also needs to be responsive ie. when the browser window is contracted horizontally I want the two items to move towards the middle in tandem with each other. With the code I am trying, one of the two items is not lining up with the other, and is in fact moving a little left of center when the browser screen is contracted to mimic portrait mode. What is the issue? I am positioning absolutely and using margin: auto on both. Here is the code. Would appreciate any light.
PS, for some reason the arrow is moving up and down in the jfiddle, while retaining its horizontal alignment; this is not happening in my case; in my case the arrow is only retaining its vertical position (as i want it), but moving off centre when i contract the browser width (which is not what i want; i need it to keep it horizontal position at the center as well).
If you want the two divs horizontally and vertically (i.e. the dead center of the screen!) you can use the following CSS...
#div1,
#div2 {
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
margin: auto;
}
If you want the images to respond to the screens width then adding a maximum width on the images would fix that.
img {max-width: 100%;}
I am trying to create a menu using CSS, but I have a problem with its actual placement.
Right now, no matter what I tried it is always on the left side of the screen and not stretched. I would like to have it in the center and possibly stretch to 100% of the screen. I tried changing the width parameter, margins, text-align, but I always got something different than I wanted or it didnt work at all.
The menu can be seen here:
http://jsfiddle.net/98tW6/10/
As I said, all I want is to have it in the center top of the page and possibly stretched so that the background image repeats all over the screen at the top with the buttons in the center.
I think the crucial lines are within this part of the code:
div#menu
but I am not sure
Remove float and add this to the <ul>:
width:100%;
text-align:center;
Then remove the float from the <li> items and make them inline-block elements, because they are inline-block now they will respond to the text-align:center of the parent, and will be centered:
display: inline-block;
fiddle:
http://jsfiddle.net/98tW6/17/
I was trying out the on hover scroll bar style that is used in many places but ran into a problem. The appearance of the scroll bar on hovering causes text to jump which looks jarring.
#scroll {
width: 200px;
height: 200px;
overflow: hidden;
}
#scroll:hover {
overflow-y: scroll;
}
This Fiddle shows the jumping text on mouse hovering
Could I somehow prevent the jumping of text while keeping the appearance of scroll bar on hover?
just use <p> tag for your text like this:
http://jsfiddle.net/pdbYz/6/
UPDATE for firefox:
http://jsfiddle.net/pdbYz/19/
I propose to have another container within div#scroll with fixed, slightly smaller width.
This way your text won't 'jump' when scroll appears. Since scrollbars have different width on different OS (Windows, Mac, Linux) you should leave some free space to the right, where scrollbar appears.
Please see my fiddle here: http://jsfiddle.net/5RXSW/
To make containers more visible I've applied paddings and background colors. You can tweak these styles for your needs, but please reserve some pixels to the right of div#scroll for scrollbar.
You can change the width of the container on hover, so that when the scrollbar appears, it pushes outwards instead of inwards. This prevents the text from moving.
http://jsfiddle.net/pdbYz/3/
To achieve this I've added this line to your CSS:
#scroll:hover {
width: 360px;
}
The website in question is http://oxfordbeach.com/bynight/
If you resize the browser, the nav bar will eventually go into a drop down menu for iPhone.
But when it's around 900px wide, the nav bar cannot fit the "contact" list item.
I apologize for the elementary CSS question, but I've tried:
Resizing the header to a %
Resizing the nav bar class to a %
Resizing the individual list items
However, I cannot seem to get around the fact that when the browser is around 900px, give or take a 100, the nav bar does not render properly.
Any help would be greatly appreciated!
reducing the padding on the links from 30px to 25px will do:
.sf-menu li a {
padding: 0 25px;
}
you can also set this padding to be % instead of fixed px to make the menu more responsive - I will leave the calculation to you!