I know I have gotten past this this before a long time ago but I can't seem to recall what I did. The text in the the buttons for the vertical spry menu bar can be aligned horizontally with text-align but I've tried to vertically align and have gotten nothing using the vertical align. I'm wondering if there is a property I need to define first or if I'm just being an idiot and missing it entirely. It is an update for www.eauclairetowing.com using a vertical spry menu bar not unlike the one currently on there.
I see your answers. I am currently at work but will try them on my lunch break. This site is going to be my new found love :D
If your menu items are in single lines only (no line breaks), give them a line-height that is equal to the height of the menu item.
Example:
.menu li a {
height: 100px;
line-height: 100px;
}
If it has more then one line per menu item, give it the display of table-cell and give it a vertical-align: middle
.menu li a {
display: table-cell;
vertical-align: middle;
}
Use padding-top like you've done in the current site:
ul.MenuBarHorizontal a {
padding-top:0.5em
}
Related
I'm trying for some days to vertically align the .sl_container.
I have tried vertical-align: middle, but that doesn't work.
If i specify a height and width for the .slideshow, then using top: 50%; and transform: translateY(-50%);, that works. See here.
The problem is that if i remove the height and width for the slider to take up the available space and adapt, then the this will make the inner div appear moved upwards. See here.
display: table-cell; was not an option as it would have the arrows at the sides of the full width of the parent div instead of on the image.
I've tried flex before, and it gets vertically aligned, but if the parent DIV width is bigger than the child DIV, for some reason it goes to
As I said, I’ve tried multiple ways and there is not a single one that gets it done well without breaking the arrow positions.
What I’ve done until now: JSFiddle
The before mentioned settings are commented out in the CSS section.
Any insight to this would be helpful as to a way or how to get it aligned without breaking the whole slide and arrows.
FYI: There is a bleeding effect from the DIV's or images expanding like 1-2px to the bottom, reason why I have each DIV coloured to see if I can fix it. I'm sure it something silly and if you know what it is, please say so. It’s not important so I don’t really care much. xD
Add this to your slideshow element, using flexbox. Flex Needs prefixing for IE11 (caniuse)
.slideshow {
display: flex;
align-items: center;
}
Edit: I enabled the commented height and width styles in your jsFiddle, but this method will vertically align slideshow child regardless of width and height.
Try using flexbox, it's the most elegant solution for vertical alignment
E.g.
<div class='parentDiv'>
<div class='childDiv'>
</div>
</div>
.parentDiv {
display: flex;
align-items: center;
justify-content: center;
}
Take a look -> here
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;
}
Site URL: http://scc.maxworks.org/wo-wp0001/
I needed to get the search box into the nav menu at the top of the site, which I did (it's a div inside an unordered list) and it places where i want it to when on a computer screen. now i'm trying to get it to behave as I would like to when on a tablet or phone - which is that I'd like to to align to the left side of the screen when you click the menu icon to open the list. (Actually i'd like the search box to appear next to the menu icon but i think thats beyond my skill to do at this time. So i'm trying to align it to the left when in the smaller views.
I am using bootstrap.
in bootstrapwp.css
find
ul#main-menu.nav li form#searchform div {
display: block;
overflow: hidden;
padding: 0 0 0 380px;
}
remove padding
ul#main-menu.nav li form#searchform div {
display: block;
overflow: hidden;
}
I think you want to check this out. You could use the Responsive utility classes. So put 2 searchboxes in and hide on the not wanted resolution. Might be not the ultra super best way but it works and it is quick.
There might be some fancy js way to accomplish this, can't help you there.
I am working on the following website http://bestofdesigns.be/studioregenbogen/index.html.
Can somebody please look at the css and tell me why the footer is not attached to the content and why there is a gap between the menu and the contentwrapper?
I have looked at this for 2 days and cannot seem to find what goes wrong.
Thanks,
Ben
#footer p {
padding-top: 5px;
margin: 0;
}
why there is a gap between the menu and the contentwrapper?
The gap is due to the margin applied by default by each browser to the list <ul> element and the title <h1>.
Remove it or adjust it
Screenshot
hi now give to #footer overflow:hidden and give to your footer p tagmargin :0;`
as like this
#footer{
overflow:hidden;
}
#footer p{
margin:0;
}
I am suggesting one more thing did you ever opened your design using firebug and checked how your middle content looks. It's bad design. Use div tags extensively don't use padding much.In the body style put text-align:justify property.
Your error is in
#footer p {
padding-top: 5px;
margin: 0;
}
Divide the content wrapper class into two vertical div classes and then divide the below vertical classes into another two vertical classes. Divide the first vertical tag into two horizontal div classes. In that put your image in first horizontal tag and in second your paragraph. In the bottom vertical class your second paragraph.
I'm making a menu. Looks something like thing:
<div>
<ul>
<li><a>menu/<br/>item</a></li>
</ul>
</div>
I want to center the text vertically. I usually go with
ul li { height: 50px; line-height: 50px; }
for example. But obviously this does not work since it is a tag in the menu. I need the text to look like
menu/
item
in the menu. Any ideas how to solve this? Thanks!
You could just set a smaller line height and equal padding top and bottom, like so:
ul li {
padding: 20px 0;
line-height: 14px;
}
This method assumes each item list contains two lines of text for them all to be equal height.
It would look something like this - http://jsfiddle.net/ajcw/fVamh/
Vertical Align is only supported in table cells. You can either adjust your padding to move the text around (will only work for your particular font size and if that changes you will have to re-adjust your padding), or as Dan Andrews mentioned above, you can use display: table-cell, however, this is only supported by the newer browsers, so depending on your audience, it may not be a viable solution.
For table-cell support, see QuirksMode.com