I see that this question has been asked many times but I think my case is slightly different.
The navigation for the site I am working on is constructed with an unordered list like so:
<div class="nav_root nav_area_top">
<ul class="nav_root_wrap">
<li class="nav_parent first">
<a href="california.providence.org/torrance/pages/Locations.aspx">
Locations
</a>
</li>
<li class="nav_parent first">
<a href="california.providence.org/torrance/pages/Locations.aspx">
Health Services
</a>
</li>
</ul>
</div>
...
.nav_area_top ul.nav_root_wrap > li
{
background-image: url(../images/vert_bg_blue.jpg);
background-color: #0C83BB;
padding: 4px 15px 4px 15px;
float: left;
font-size: 13px;
margin-left: 3px;
-moz-border-radius: 5px 5px 0 0;
-webkit-border-radius: 5px 5px 0 0;
border-radius: 5px 5px 0 0;
min-height: 36px;
text-align: center;
border: 0px;
}
.nav_area_top ul.nav_root_wrap > li > a
{
color:#fff;
padding: 0px;
line-height: 18px;
}
Which renders to:
As you can see some of the nav items are one line and some are two.
Is it possible for me to vertical-align: middle the one line items?
add this style (override if necessary)
.nav_area_top ul.nav_root_wrap > li {
line-height: 36px;
}
.nav_area_top ul.nav_root_wrap > li > a {
line-height: normal; /* or just choose another value: e.g. 1.5; */
vertical-align: middle;
display: inline-block;
*zoom: 1;
*display: inline;
}
last two properties are inline hacks necessary for IE<8 to properly render inline-blocks element
It's hard without a fixed height for your <li>. If you do have a fixed height you could:
<style>
#centerMe{
line-height:4em
}
</style>
<p id="centerMe">
This line is vertically centered!
</p>
You'd set the line height to your liking.
I also saw this from Nerds to Geeks:
#container li{
display: table-cell;
vertical-align: middle;
text-align: center;
font-size:28px;
}
I Changed the p element to li; it should still work.
Related
I have two menus: one is at the very top and another one right under it. I can't get the two menus to align properly to the right on top of each other. I want to align the last menu items of each of them vertically.
Here's the link: http://bit.ly/1KJjaOZ
CSS:
#header-text {
float: left;
border-radius: 25px;
border: 1px solid #CCC;
padding: 0 1em 2.35em 1em;
width: 15.30em;
height: 2em;
margin: 0 0 0 560px;
}
.top-menuv2 ul {
list-style-type: none;
margin: 10px 20px 0 90px;
font-size: 0.80em;
float: none;
}
.top-menuv2 li {
display: inline-block;
position: relative;
}
.top-menuv2 ul li {
display: inline;
margin-left: 20px;
font-family: 'Open Sans Bold', sans-serif;
line-height: 1.8;
}
You have to restructure your codes. Adding a huge margin to certain div is not a good solution. Since your top menu is right aligned, why don't you use float: right; instead?
Here is my solution. It's recommendable for you to make a backup because I technically redo your top menu html and css styles.
HTML:
<div class="top-navigation top-menuv2">
<ul>
<li>Contacts</li>
<li>Our Partners</li>
<li>Careers
<ul>
<li>Vacancies</li>
<li>Corporate Culture</li>
</ul>
</li>
</ul>
<div id="header-text">
<div class="header-text cc"> Customer Service 02 753 57 11</div>
</div>
</div>
And the style:
.top-menuv2 ul {
list-style-type: none;
margin: 15px 63px 0px 10px;
font-size: 0.8em;
float: right;
}
#header-text {
border-radius: 25px;
border: 1px solid #CCC;
padding: 0px 1em 2.35em;
width: 15.3em;
height: 2em;
float: right;
margin: 10px 0px 0px;
}
I won't use such a huge margin for my divs as it will ruin your design when it goes responsive. Hope it helps!
All you have to do is add this class :
.top-navigation.top-menuv2 ul {
text-align: right;
padding-right: 42px;
}
you can use this class..
.top-menuv2 {
display: inline-block;
margin: 10px 0 0 0;
}
.top-menuv2 ul {
list-style-type: none;
margin: 10px 20px 0 30px;
font-size: 0.80em;
float: none;
display: inline-block;
}
try to add margin left 14px to "search-icon" div. (return your menus to the previous positions before doing that)
JSFIDDLE
It may be a trivial question, but I can't seem to find the answer. In the case you can see in JS Fiddle, when the < div > in which the < ul >'s are wrapped doesn't have a certain height specified, it ignores the div in general and moves the bottom < div > behind everything.
Can anyone explain why?
Here is the code:
<div style="width: 750px; margin-left: auto; margin-right: auto; background-color: silver; ">
<div class="divWidgetList">
<ul class="WidgetList">
<li><sup>One</sup>
</li>
<li><sup>Two</sup>
</li>
<li><sup>Three</sup>
</li>
</ul>
<ul class="WidgetList">
<li><sup>Four</sup>
</li>
<li><sup>Five</sup>
</li>
<li><sup>Six</sup>
</li>
</ul>
<ul class="WidgetList">
<li><sup>Seven</sup>
</li>
<li><sup>Eight</sup>
</li>
<li><sup>Nine</sup>
</li>
</ul>
</div>
</div>
<div style="background-color: yellow">-----Something-----</div>
And the CSS
.divWidgetList {
width: 740px;
height: auto;
clear: left;
float: left;
}
.WidgetList,.WidgetList li{
color: #373737;
min-width: 240px;
display: block;
float:left;
font-family:'segoe ui', 'century gothic', arial, sans-serif;
font-size: 22px;
font-style: normal;
font-variant: normal;
font-weight: lighter;
height: auto;
width: 33.33%;
line-height: 40px;
list-style-image: none;
list-style-position: outside;
list-style-type: none;
margin: 0px 0px 5px 0px;
padding: 0px 0px 0px 0px;
cursor: pointer;
}
.WidgetList li {
padding-left:35px;
}
.WidgetList li a:link
{
color: #373737;
text-decoration: none;
}
.WidgetList li a:visited
{
text-decoration: none;
color: #373737;
}
.WidgetList li a:hover
{
color: #f07c01;
}
When you apply float to an element it is no longer part of the regular flow layout. As such the parent, which by default sizes to fit to its children, doesn't have any height at all when all its children are floating.
Possible solutions:
Give the parent container a fixed height to accomodate its children.
Use display:inline-block to position the elements next to eachother instead of float.
Use an element with a clear rule to break to below all floating elements.
The 'float everything' method - a floating element will resize to its floating children. This is generally a bad solution since you'll end up floating everything as the name implies.
I am building a CSS only two-level horizontal navigation bar with relative sub-navigation to the parent. All menu items are inline. Dependent upon the classes 'right' or 'left', the sub-nav aligns to the parent. This is what I've managed to accomplish so far:
html:
<body>
<div class="navbar">
<ul class="topnav left">
<li>nav</li>
<li>menu1
<span class="subnav">
<ul class="subnav subnav-left">
<li>item1-1</li>
<li>item1-2</li>
<li>item1-3</li>
</ul>
</span>
</li>
<li>menu2
<span class="subnav">
<ul class="subnav subnav-left">
<li>item2-1</li>
<li>item2-2</li>
<li>item2-3</li>
</ul>
</span>
</li>
</ul>
<ul class="topnav right">
<li class="right">menu3
<span class="subnav subnav-right">
<ul class="subnav subnav-left">
<li>item3-1</li>
<li>item3-2</li>
<li>item3-3</li>
</ul>
</span>
</li>
<li class="right">menu4
<span class="subnav subnav-right">
<ul class="subnav subnav-left">
<li>item4-1</li>
<li>item4-2</li>
<li>item4-3</li>
</ul>
</span>
</li>
</ul>
</div>
</body>
css:
body {
font-family: arial;
margin: 0;
}
.navbar {
height: 40px;
background-color: black;
}
ul.topnav {
margin: 0;
padding: 0;
}
.subnav {
position: absolute;
}
.subnav-right {
right: 0;
}
ul.subnav {
position: relative;
margin: 4px 0 0 -8px;
padding: 0;
display: none;
}
ul.topnav li{
list-style: none;
display: inline-block;
color: white;
padding: 4px 8px;
font-weight: bold;
line-height: 32px;
float: left;
clear: none;
box-sizing: border-box;
}
ul.subnav li {
background-color: red;
list-style: none;
display: inline-block;
color: white;
padding: 4px 8px;
font-weight: bold;
position: relative;
line-height: 32px;
float: left;
clear: none;
box-sizing: border-box;
}
.topnav li:hover {
background-color: red;
}
.topnav li:hover ul.subnav {
display: inline-block;
background-color: red;
}
.nav ul li:hover {
background-color: black;
}
.nav ul li {
width: 100%;
}
.nav li ul {
display: inline-block;
clear: none;
position: absolute;
background-color: red;
margin: 4px 0 0 -8px;
padding: 0;
}
.left {
float: left;
}
.right {
float: right;
}
The jsfiddle:
jsfiddle.net/aLZqZ
Here is what I'm trying to accomplish:
image to nav menu
I got this for you http://jsfiddle.net/aLZqZ/99/. In under 100 tries, too. I became a little obsessed and spent at least 5 hours total. A good challenge for me and I have never really fiddled with sub navs before.
This issue was three fold:
Using float:right for a horizontal nav bar is usually not good in my experience because it causes unexpected issues, also it is negated and ignored by browsers if the same element is positioned relative or absolute (you had a lot of superfluous code, btw). I changed float:right to text-align:right where necessary. See this for horizontal nav I fixed for someone recently: Aligning/floating my nav bar to the right
The li element containing the sub menu was not positioned, therefore, the position:absolute and right:0 on the ul within it moves according to the closest containing element that is position:absolute or :relative. In this case there was not one so that element was html; thus the ul would be pushed all the way right to the end of the page. I added position:relative to these li elements which then made the right:0 behave as expected, but did not put all the li element on one line and stacked them instead.
You had tags with display:inline-block when :inline would have done it, but more importantly, no one ever really mentions that white-space:nowrap on the same elements to do what you are trying here is important. inline-block and nowrap together should force one line block like elements that you can align or float as whole as if they were a paragraph. BTW, IE7 needs some special attention for inline-block. See here: http://robertnyman.com/2010/02/24/css-display-inline-block-why-it-rocks-and-why-it-sucks/
I made special css at the bottom of yours in your fiddle to separate the left and right navs, and I basically left your original css alone. I also adjusted the html a bit. Here it all is.
HTML for the right nav (follows the HTML for the left nav):
<ul class="rightNav">
<li>menu3
<ul class="rightSubNav">
<li>item3-1</li>
<li>item3-2</li>
<li>item3-3</li>
</ul>
</li>
<li>menu4
<ul class="rightSubNav">
<li>item4-1</li>
<li>item4-2</li>
<li>item4-3</li>
</ul>
</li>
</ul>
CSS that I added to separate the right and left nav:
ul.rightNav {
margin:0;
padding:0;
text-align: right;
}
.rightNav li:hover {
background-color: red;
}
ul.rightNav li{
list-style: none;
display: inline-block;
color: white;
padding: 4px 8px;
font-weight: bold;
line-height: 32px;
position:relative;
}
ul.rightSubNav {
position: absolute;
right:0;
margin: 4px 0 0 -20px;
padding: 0;
display: none;
white-space:nowrap;
}
ul.rightSubNav li {
background-color: red;
list-style: none;
display: inline;
color: white;
padding: 4px 8px;
font-weight: bold;
position: relative;
line-height: 32px;
}
.rightNav li:hover ul.rightSubNav {
display: inline-block;
background-color: red;
}
If this helped I would appreciate the up votes and answer select. If you figured something else out and got it working differently please post. I would love to see it.
I have a Div bar with a white background in which my breadcrumb lives.
Here you can see a screenshot:
How can i align the text vertically?
Here is my CSS:
/* Breadcrumb */
#breadcrumb {
position: relative;
background: white;
padding: 4px;
border-radius: 2px;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
behavior: url(/scripts/PIE.htc);
font-size: .9em;
color: #526472;
}
#breadcrumb ul {
margin: 0;
padding: 0;
list-style: none;
}
#breadcrumb li {
float: left;
padding-left: 5px;
}
#breadcrumb a {
padding-right: 10px;
background: url(../images/div_breadcrumb.gif) no-repeat right center;
color: #526472;
margin-right: 5px;
}
And my HTML:
<div id="breadcrumb" class="clearfix">
<ul>
<li style="white-space: nowrap;">
<a style="white-space: nowrap;" href="">Home</a>
</li>
<li style="white-space: nowrap;">
Visual collaboration solutions
</li>
</ul>
<div id="shareThis" class="fl_right"> Share: </div>
</div>
Due to incomplete code, it's a bit hard to tell, but I'm guessing that you're either missing some markup, or that there are other styles messing with your breadcrumbs.
The following works just fine to display items in a horizontal row (your styles, my HTML).
<html>
<head>
<style>
#breadcrumb { position: relative; background: white; padding: 4px; border-radius:2px; -moz-border-radius: 2px; -webkit-border-radius: 2px; behavior: url(/scripts/PIE.htc); font-size: .9em; color: #526472;}
#breadcrumb ul { margin: 0; padding: 0; list-style: none; }
#breadcrumb li { float: left; padding-left: 25px;}
#breadcrumb a { padding-right: 10px; background: url(../images/div_breadcrumb.gif) no-repeat right center; color: #526472; margin-right: 5px;}
</style>
</head>
<body>
<div id="breadcrumb" class="clearfix">
<ul>
<li>Home Visual collaboration solutions</li>
<li>La</li>
<li>Ti</li>
<li>Da</li>
</ul>
</div>
</body>
</html>
If you are using ul and li tags properly, you might try using Firebug or the Chrome developer tools to detect whether or not other styles are being applied.
Try:
li{display: inline}
You could also use
li{display:inline-block}
That way your li elements wont lose their block properties
Here's the example :
http://jsfiddle.net/bFe35/1/
Try to edit your CSS file, by adding vertical-align:middle; to your #breadcrumb ID, like this:
#breadcrumb {
position: relative;
background: white;
padding: 4px;
border-radius: 2px;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
behavior: url(/scripts/PIE.htc);
font-size: .9em;
color: #526472;
vertical-align:middle;
}
How can I make it stay on the same line? I want "How ya doin?" to be on the same line as the menu.
<div class="header">
<b>How ya doin?</b>
<ul class="menu">
<li>Home</li>
<li>Registration</li>
<li>Terms of Use</li>
<li>Support</li>
</ul>
</div>
THe CSS:
* { margin: 0; padding: 0; }
.header {
background: #CCC;
font-weight: bold;
padding: 5px 5px 3px 16px;
}
ul {
padding-left: 10px;
color: #444;
list-style: none;
margin: 0px 0px 5px 10px;
}
.menu {
font-weight: normal;
background: #CCC;
color: #000;
text-align: right;
}
.menu li {
display: inline;
margin-right: 8px;
}
This is what I get:
I'd give the b and the ul both a width, say 50% for making it easy, then float one right and one left.
You'll need a div to clear it afterwards to fix the layout though.
Something like:
.header b {
width:50%;
float:left;
}
.header ul {
width:50%;
float:right;
}
then underneath
<div style="clear:both"></div>
to avoid messing things up.
Try
ul {
display:inline;
/* ... */
}
something like:
.header b{display:block; width: 100px; float:left}
.menu {width:150px; float:left}
Good luck
what about using absolute / relative positions?
this is really a simple and nice solution for header text, easy to add another elements as well
.header{
position: relative;
}
.header > b{
position: absolute;
left: 10px;
top: 5px;
}
.header > ul{
position: absolute;
top: 5px;
right: 10px;
}
<div class="header">
<!-- float to left -->
<b style="float: left;">How ya doin?</b>
<!-- float to right, or you can add float to .menu in css -->
<ul style="float: right;" class="menu">
<li>Home</li>
<li>Registration</li>
<li>Terms of Use</li>
<li>Support</li>
</ul>
<!-- clearing float -->
<br style="clear:both;" />
</div>
I changed your CSS to this and it seemed to do the trick (additions noted):
* { margin: 0; padding: 0; }
.header {
background: #CCC;
font-weight: bold;
padding: 5px 5px 3px 16px;
float:left; /* ADDED */
width:100%; /* ADDED */
}
b {
float:left; /* ADDED */
}
ul {
padding-left: 10px;
color: #444;
list-style: none;
margin: 0px 0px 5px 10px;
}
.menu {
font-weight: normal;
background: #CCC;
color: #000;
text-align: right;
}
.menu li {
display: inline;
margin-right: 8px;
}
The ul is a block element, so by default it starts on a new line, taking 100% of the available width. You need to tell it to behave differently.
Easiest should be to set display: inline; on the ul element.
Another is to set float: left; on both the <b> and the <ul>, and give them both a width.
If you take the latter (float) approach, you'll need to tell .header to contain the floats. Easiest way to do that is height: 1%; overflow: hidden;.