I have a problem of vertical alignment of inlined list items in the horizontal navigation menu of a header. I can't use floats because of the rest of the layout.
I was thinking that I could use a larger line-height for the list items, but it doesn't really help that much this time. The list items more or less just sit there, at least when I use the Google Droid font. I also tried vertical-alignment, but nothing.
The basic structure is header -> header-content ->navigation > li > a
All of the list items are set to display:inline.
There's also a list item enclosed h1 element which has an enclosed image: li > h1 >img and a submenu in there: li > ul > >li > a, of which the image complicates things as it has a fixed height of 39px.
The header div sets the height of 4 ems and also a background color. It's within these 4 ems that I need to vertically align the content of my navigation.
I need some ideas how to accomplish this kind of vertical alignment. Suggestions? :-)
You can find a full code example of the problem here: http://pastebin.com/zcLspjJz
I need to support modern browsers and IE7 and upwards. But any ideas are welcome, really.
You can try these methods and if it helps:
Use height and line-height properties and use the same value for both. (E.g. height:20px;line-heigt:20px;)
OR set the display:table-cell; vertical-align:middle;
Related
I'm trying to get this logo image to extend outside of the header so that it dips into the content when you scroll. It's essentially look like the logo is too big for the header and is hanging off the bottom.
Here's the website: http://185.56.86.90/~onetoncr/test3.com/
Here's an example where the logo (green square) extends past the header: http://185.56.86.90/~onetoncr/friedmanpr.com.
They both use Bodega theme in wordpress and the only difference is that the green FMPR is a different menu/header setting which means the header is in a div class called container and container_inner as well as all the other divs in the red One Ton site.
Tried adjusting the height and putting in z-indexes but it seems like it is contained in the header container. Is there a way to extend the logo outside of the header parent.
Add in your css
.header_inner_left{
top: 2em !important;
background: #fff;
}
and remove width:150px !important in .header_inner_left from your custom.css, well its upto you though.
Looks like the line height on your menu items are pushing your header to the full 150px. nav.main_menu > ul > li > a has a line-height: 150px if you change that to 100px and then set your .header_bottom to have a height of 100px you logo will then stick out.
Just some general recommendation. Your markup and selector rules are really heavy.
nav.main_menu > ul > li > a could easily just be .main_menu a which would take your specificity from 5 to 2 making it much easier to override later.
As for that huge line-height, that's gonna make your items clickable above and under in all that white space. That may be what you are going for but just keep in that in mind, you may want to make the hover more obvious just to provide the user with some better feedback that they are over a "button"
You could also reduce a lot of your mark up and styles by using Flexbox to center your menu items and stick them on either end. https://css-tricks.com/snippets/css/a-guide-to-flexbox/
I have a drop down navigation that works perfectly when positioned via a left CSS property.
http://jsfiddle.net/durilai/nmME4/1/
You can see that the dropdown adjusts to the width of the content, however I would like to position right. When I do the width of the drop down will not adjust to the content. You can see this behavior at the fiddle below.
http://jsfiddle.net/durilai/cTSJt/2/
Any help is appreciated, also any knowledge into what is causing this behavior is also appreciated.
The right: 100px in ul seems to be setting a width of 100px.
If that does not need to be positioned absolute, then use float: right; and use margin-right: 100px; instead.
JSFiddle: http://jsfiddle.net/cTSJt/12/
Ok so basically, from what I can see, the issue was being caused by using the element (in this case ul) directly as the selector.
I believe this was interfering with the below ul elements within your CSS. Simply changing the first CSS rule from ul to your ID (Navigation_Main) fixes the issue.
Fixed example > http://jsfiddle.net/cTSJt/10/
Thanks
Have you tried using div's instead of the unorder list (ul) element. As you are using CSS to striping off all the default styling that makes a "ul" a list element why not use a div to start with. I can't guarantee it will solve the problem but it eliminates unnecessary CSS and you might beable to spot the issue more easily
And in reality shouldn't a ul only be used for bullet point items, in a text document?
This is a problem that I run into frequently:
Given some horizontal nav links, what ways are there to ensure that the links don't squash together such that they'll push up or down onto two lines?
I thought that just setting a min-width for the container of those nav links would work (e.g. setting the ul or a container div of the ul to min-width:500px) but as the example shows, that isn't enough. I feel like I'm just missing something simple, but it's an unknown unknown.
Edit: I removed some margin on the li elements and it finally stopped wrapping to two lines. I still don't understand why added padding was causing the wrapping as opposed to simply expanding the width of the containing elements, though.
So what techniques do you guys have for making nav links stay in a horizontal bar formation?
Here is a jsfiddle with roughly the current example that I'm working with:
http://jsfiddle.net/tchalvakspam/nE8yU/5/
Do you want them to be visible? One option if you don't want them to wrap is to just have them not be shown. If you want to do that, this will work:
#admin-header {
overflow: hidden;
white-space: nowrap;
}
I need help to align CSS buttons. I tried many different variations and I just cannot center my button the way I want.
Firstly, have a look at this url: http://www.front-end-developer.net/cssbuttons/example.htm
I'm using 2 images to form a button (this could be done on 1 image, but in this case we've got two). Everything works as expected as long as we apply float:left or float:right to the parent div element, to 'limit' width of the div and close it as soon as the content of the div ends. You can remove float:left from the button to see what I mean.
But what about center positioned buttons? I cannot add float:left/right because I want align it in the middle.
In theory, I could set
{
width:XXpx;
margin:0 auto;
}
And I will get what you can see on this picture:
(source: front-end-developer.net)
But I don't know the length of the text inside. Having different translations my button can be very short, or 5 times that long.
I also tried to use <span> instead of <div>, but unfortunately nested inline elements don't respect their padding correctly...
And yes, I must use <a> inside, so buttons can be accessed by web crawlers.
I'm really stuck on this one.
.button {display:inline-block;}
Seems to do the trick.
inline-block browser-support: http://www.quirksmode.org/css/display.html
More about how to work around the browser issues related to inline-block:
http://foohack.com/2007/11/cross-browser-support-for-inline-block-styling/
I'm using a background image to add a custom bullet to list items in my content. In the content there are also images floated left. When an image and a list item are next to each other, the bullet appears where it would do if the image wasn't there, but the text wraps around the image.
Here is an example:
http://golf2.test.textmatters.com/content/greenkeepers/turfgrass/turfgrass_speci/cool_season_gra
is there a way to make the bullet appear where is should (i.e. next to the text)?
In Firebug / Firefox (you'll have to check other browsers) I solved your problem adding a:
li {
overflow:hidden;
}
Don't know why exactly, but that magical line solves lots of problems around floated stuff :-)
Edit: Solution if you can change the html slightly
If you have any control over the html, you could perhaps use paragraph tags instead of list items:
p.list_item {
background: transparent url(/++resource++stylesheets/images/bullet.gif) no-repeat scroll left 0.45em;
padding-left: 11px;
}
However, that would kind of change the semantic meaning of the list items...
This is an old topic... but thought I would add how I usually do this in case someone stumbles in here via a search...
If I have an image on the left, and plan to have graphic bulleted unordered list (UL) to the right of it, I place the image statement inside DIV tags, and add a float:left style to that DIV.
Then, I wrap my UL tags inside a DIV, and give that DIV a float:left style as well, causing it to appear to the right of the first DIV.
If I have additional text that I would like to resume UNDER my UL, then I give the second DIV a width that equals the total width of the page/column minus the graphic width - basically, to account for all of the space to the right of the image. That will force continuing text to flow directly under the UL DIV, and if the UL is shorter than the graphic, the text will flow to the right of the graphic and then under the graphic as expected.
If the UL extends lower than the graphic, then the text will just start under the image, as expected.
If you want the text to simply start UNDER the left graphic regardless of the height of the UL, then you could just apply a clear:both style to the ensuing , i.e.
In general this approach works so long as the UL isn't too much taller than the left image, because obviously in this scenario, the list itself isn't going to wrap under the image, leaving whitespace - so to make a long list look right may require some purposeful image sizing, or stacking a couple of images in the first DIV, or whatever other solution you might have.
If you really want to get whacky, I've had a few times where I've used the two DIV method described above, but setting the first DIV to position:relative, and placing the second DIV containing the UL INSIDE the first, with a position:absolute and of course top:??px and right:??px, set of course to absolutely position my UL to the right of the image. It takes the right kind of layout to use this method, obviously...
OK that's all I had to say, hope this makes sense & good luck to whomever!
Try wrapping your list items in a <p> tag, and then give that tag a left margin.
Why do you have div.fig width set to 0 in the html?
<div class="fig" style="width: 0px;"><img src="/images/43_Fescue.jpg" float="0"/></div>
Remove that and the list will float around the image.
Well, it's not the best fix from a stylistic point of view, but floating the images right avoids this problem. Thanks for everyones suggestions
If you want the whole ul to NOT float under the image try adding overflow:hidden to the ul