I have a big problem and I can't solve it.
I have a top menu with a image on the left and a search box on the right.
I want this search box to stay in the middle, but line-height is not working there... I don't know what to do.
http://jsfiddle.net/5mdz2zp9/
body {
margin: 0;
padding: 0;
//background-color:#eee;
background-color:#F5F6FA;
font-family: 'Open Sans', sans-serif;
font-size:12px;
}
*{
margin: 0;
padding: 0;
list-style: none;
}
#menu {
background-color: rgba(35,35,35,.9);
//border-bottom:1px solid #eee;
position:fixed;
width:100%;
top:0;
margin:0;
//padding: 0;
color: #fff;
text-align: center;
height:50px;
z-index:100;
}
#menu a:link, #menu a:visited, #menu a:hover{
color: #fff;
}
#menu ul{
display:table;
width:100%;
list-style-type: none;
}
#menu li{
text-align:left;
display: table-cell;
width:50%;
border:1px solid yellow;
}
.right{
text-align:right !important;
padding-right:10px;
}
#menu img{
margin-left:10px;
max-height:40px;
}
.search{
padding-left:10px;
padding-right:10px;
padding-top:4px;
padding-bottom:4px;
border:1px solid #fff;
border-radius:7px;
color:#555;
font-weight:bold;
}
html
<div id="menu">
<ul>
<li><img src="https://infooab.examtime.com/wp-content/themes/learn/img/flashcard_shortcode_icon.png"></li>
<li class=right><form class="searchform"><input type="text" name="search" class="search" placeholder="search"></form></li>
</ul>
</div>
How can I align input in the middle vertically without let image size on the left interfearing?
Thank you friends!
So posting as answer..
Please add this in your css and your box will be in middle..please be in mind when you are using display;table-cell then use vertical-align..hope it will help..:)
#menu li{vertical-align:middle;}
Change this:
#menu ul {
display:table;
width:100%;
list-style-type: none;
}
to this:
#menu ul {
display:table;
width:100%;
list-style-type: none;
height: 100%;
}
and this:
#menu li {
text-align:left;
display: table-cell;
width:50%;
border:1px solid yellow;
}
to this:
#menu li {
text-align:left;
display: table-cell;
width:50%;
border:1px solid yellow;
vertical-align: middle;
}
Here is the JSFiddle demo
css
#menu li {
border: 1px solid yellow;
display: table-cell;
text-align: left;
vertical-align: middle;
width: 50%;
}
working jsfiddle
Related
Currently I have a header and above it I have my navbar. On my editor it is centered but when I stretch the page or view it in a different format it won't appear to be on top of the center of the header. Any ideas on what I should do?
#nav{
list-style-type: none;
position:absolute;
padding: 0;
overflow: hidden;
margin-top:-25px;
margin-left:50px;
}
#nav li{
float:left;
}
#nav a:link, #nav a:visited {
display: block;
width: 120px;
font-weight: bold;
color: #FFFFFF;
background-color: darkorange;
text-align: center;
padding: 4px;
border:2px solid black;
border-top-right-radius:10px;
border-top-left-radius:10px;
text-decoration: none;
text-transform: uppercase;
border-bottom:none;
}
#nav a:hover{
background-color: orangered;
}
#nav a:active{
color:black;
}
#header{
height:150px;
background-color:darkred;
margin-top:45px;
border:2px solid black;
border-radius:15px;
overflow:hidden;
position:relative;
}
#innerheader{
background-color:burlywood;
height:100px;
margin-left:auto;
margin-right:auto;
overflow:hidden;
width:50%;
border-radius:25px;
border:3px solid black;
position:Relative;
margin-top:22px;
}
#innerheader h1{
position:relative;
margin-left:auto;
text-align:center;
margin-top:30px;
-webkit-text-stroke-width:0.6px;
-webkit-text-stroke-color:black;
color:saddlebrown;
}
<body>
<ul id="nav">
<li>Home</li>
<li>Photos</li>
<li>Statistics</li>
<li>Chat</li>
<li> Biography </li>
</ul>
<div id="header">
<div id="innerheader">
<h1>
General Information
</h1>
</div>
</div>
</body>
Much of what I provided will not be useful to this question, and I apologize for that, but I just want to provide as much information as possible to get help. Thanks!
Hi now try to this css
#nav {
list-style-type: none;
padding: 0;
overflow: hidden;
margin: 0 auto;
display: block;
text-align: center;
font-size: 0;
}
#nav li {
display: inline-block; // add this
font-size: 14px; // add this
}
#header {
/* margin-top: 45px; */ // remove this line
}
Demo
#nav {
list-style-type: none;
/* position: absolute; */
padding: 0;
overflow: hidden;
margin: 0 auto;
/* margin-left: 50px; */
display: block;
text-align: center;
font-size: 0;
}
#nav li {
display: inline-block;
font-size: 14px;
}
#header {
height: 150px;
background-color: darkred;
/* margin-top: 45px; */
border: 2px solid black;
border-radius: 15px;
overflow: hidden;
position: relative;
}
#nav a:link, #nav a:visited {
display: block;
width: 120px;
font-weight: bold;
color: #FFFFFF;
background-color: darkorange;
text-align: center;
padding: 4px;
border:2px solid black;
border-top-right-radius:10px;
border-top-left-radius:10px;
text-decoration: none;
text-transform: uppercase;
border-bottom:none;
}
#nav a:hover{
background-color: orangered;
}
#nav a:active{
color:black;
}
#innerheader{
background-color:burlywood;
height:100px;
margin-left:auto;
margin-right:auto;
overflow:hidden;
width:50%;
border-radius:25px;
border:3px solid black;
position:Relative;
margin-top:22px;
}
#innerheader h1{
position:relative;
margin-left:auto;
text-align:center;
margin-top:30px;
-webkit-text-stroke-width:0.6px;
-webkit-text-stroke-color:black;
color:saddlebrown;
}
<body>
<ul id="nav">
<li>Home</li>
<li>Photos</li>
<li>Statistics</li>
<li>Chat</li>
<li> Biography </li>
</ul>
<div id="header">
<div id="innerheader">
<h1>
General Information
</h1>
</div>
</div>
</body>
Add these properties to your existing classes.
#nav{
list-style-type: none;
position:absolute;
padding: 0;
overflow: hidden;
margin-top:-25px;
margin-left:50px;
width:100%;
text-align:center;
}
#nav li{
display:inline-block;
}
This should solve your issue.
Make your nav bar take full width, and center the inner contents horizontally using text-align:center;
I have a dropdown menu which works exactly as expected in Chrome.
The dropdown list is with position absolute, and the parent with position relative. However, it seems to render differently in Firefox. The dropped menu appears to be relative to the ul element rather than the li element
This dropdown is activated using javascript, adding a display:block on click
Any ideas why?
I did not use a table.
Fiddle
http://jsfiddle.net/eyJ8e/1/
HTML
<div id="menubar">
<div class="container">
<ul class="menu-container title" style="float:left;">
<li>NEW
</li>
<li class="dropdown"> <a class="click-dropdown" href="#">MEN</a><span class="caret"></span>
<ul class="dropdown-menu" style="display:block"> <li>Jeans</li>
<li>Pants</li>
<li>Shirts</li>
<li>Shorts</li>
<li>Tees</li>
</ul>
</li>
</ul>
</div>
</div>
CSS
body
{
width: 100%;
margin: 0px;
padding: 0px;
font-family: Calibri, Candara, Segoe, "Segoe UI", Optima, Arial, sans-serif;
font-size: 10pt;
/* background-color: #f0f0f0; */
}
.title{
/*font-family: Impact, Charcoal, sans-serif;*/
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
text-transform: uppercase;
font-family: SourceSans Pro Bold;
}
.container{
width:1024px;
margin:0 auto;
}
a, a:active, a:visited
{
color: #000000;
text-decoration: none;
outline: none;
}
a:hover
{
text-decoration: none;
}
#menubar {
width:100%;
min-width:1000px;
height:75px;
background-color:#000;
line-height: 75px;
color:white;
}
#menubar .brand{
display: block;
height:75px;
width: 120px;
margin-right:30px;
margin-top:3px;
float:left;
color:white!important;
}
#menubar .menu-container{
list-style:none;
margin:0px;
}
#menubar .menu-container li:first{
border-left: 1px solid grey;
}
#menubar .menu-container li{
position:relative;
display:inline;
padding:0px 15px;
font-size: 14px;
text-transform: uppercase;
border-right: 1px solid grey;
height:75px;
}
#menubar .menu-container > li.shopping-bag-wrapper:hover{
text-decoration: none;
}
#menubar .menu-container li.shopping-bag-wrapper{
border-right:none;
padding-right:0px;
}
#menubar .authentication-fb-form{
display:inline;
}
#menubar .menu-container li a{
color: white!important;
}
#menubar .menu-container li:last-child{
border:none;
}
#menubar .menu-container .dropdown ul.dropdown-menu > li:hover{
background-color:#555555;
}
#menubar .menu-container ul.dropdown-menu{
border:none;
position:absolute;
z-index:1000;
background-color:black;
display:none;
margin-top:-20px;
}
#menubar .menu-container .dropdown-menu li{
display:block;
min-width:150px;
max-width: 250px;
height:auto;
}
#menubar .menu-container .dropdown-menu a{
display:block;
line-height:25px;
padding: 5px 0px;
height:auto;
border: 2px solid white;
border-bottom:0px;
}
#menubar .menu-container .dropdown-menu a:last-child{
border: 2px solid white;
}
ul{
list-style: none;
margin:0px;
padding:0px;
}
.inline-block{
display: inline-block;
}
.pull-right{
float:right!important;
}
.caret{
display: inline-block;
width: 0;
height: 0;
margin-left: 2px;
vertical-align: middle;
border-top: 4px solid;
border-right: 4px solid transparent;
border-left: 4px solid transparent;
}
There are a couple of issues here. Firstly, you are nesting <li>'s within <a>'s which is invalid. You need to fix this:
<ul class="dropdown-menu">
<li>Jeans</li>
<li>Pants</li>
<li>Shirts</li>
<li>Shorts</li>
<li>Tees</li>
</ul>
secondly, you arent actually giving your nested <ul> a left position which FF seems to need:
#menubar .menu-container ul.dropdown-menu{
left: 0;
}
You will then also need to move your border from the <a> to the <li> to keep the styling that you had before making these changes.
DEMO
just put left:0 in #menubar
.menu-container ul.dropdown-menu{left:0}
refer http://jsfiddle.net/aashi/eyJ8e/8/
For a drop down menu you may check this demo link :
The html part:
<ul class="menubar">
<li>NEW</li>
<li>MENU
<ul class="dropmenu">
<li>JEANS</li>
<li>PANTS</li>
<li>SHIRTS</li>
<li>SHORTS</li>
<li>TEES</li>
</ul>
</li>
</ul>
the CSS part:
*{ margin:0; padding:0;}
ul.menubar{
margin:0 auto;
width:100%;
background:#000;
height:40px;
display:block;
}
ul.menubar li{
list-style-type:none;
display:inline-block;
float:left;
position:relative;
}
ul.menubar li a{
display:block;
text-decoration:none;
color:#fff;
padding:10px;
}
ul.menubar li ul.dropmenu{
position:absolute;
width:120px;
padding:10px 10px 10px 0;
display:none;
}
ul.menubar li:hover ul.dropmenu{
display:block;
top:30px;
}
ul.menubar li:hover ul.dropmenu li{
background:#222;
width:100%;
}
ul.menubar li:hover ul.dropmenu li a:hover{
background:#333;
}
Here is the JS fiddle:
http://jsfiddle.net/ameysawant/LPdqV/1/
I'm running into a problem with a CSS submenu I created where the mouse will not highlight the entire submenu bar, but will only highlight an amount relative to the text length.
HTML:
<body>
<div id="page">
<div id="header">
<div>
<ul class="main-nav">
<li>
Menu One
</li>
<li class="nav-primary-middle">
<a href="shops.html" >Shops Listing</a>
<ul class="subnav">
<li>Ice Cream Shop
</li>
<li>Auto Mechanic
</li>
<li>Dentist
</li>
<li>Long Shop Name
</li>
<li>Ace
</li>
</ul>
CSS:
div#page {
width:100%;
}
div#page div#header {
background:url("../images/bg-header.png") no-repeat scroll center bottom transparent;
width:100%;
height:140px;
margin:0 0 90px 0;
}
div#page div#header div {
width:960px;
height:140px;
margin:0 auto;
position:relative;
}
div#page div#header div a.logo {
position:absolute;
left:370px;
top:7px;
display:block;
z-index:999;
}
div#page div#header div ul.navigation {
list-style-type:none;
margin:0;
padding:0;
position:absolute;
top:65px;
}
div#page div#header div ul.navigation li {
float:left;
}
div#page div#header div ul.navigation li.middle {
margin:0 170px 0 0;
}
div#page div#header div ul.navigation li.nav-primary-middle {
margin:0 170px 0 0;
}
div#page div#header div ul.navigation li a {
font-family:'didact_gothicregular';
font-size:16px;
color:#b0b6c4;
text-decoration:none;
padding:0 40px;
}
div#page div#header div ul.navigation li a:hover {
font-family:'didact_gothicregular';
font-size:16px;
color:#5b6a9f;
}
div#page div#header div ul.navigation li a.active {
font-family:'didact_gothicregular';
font-size:16px;
color:#5b6a9f;
}
main-nav {
position: relative;
width: 100%;
height: 67px;
background: #f2f2f2;
}
div#page div#header .subnav {
display: none;
position: absolute;
top: 15px;
left: 150px;
width: 205px;
list-style-type: none;
background: #fff;
margin: 0;
border:solid 2px #eeeeee;
border-radius: 10px;
z-index:0;
padding:0;
}
div#page div#header .subnav li {
display: block;
border-bottom: solid 1px #eeeeee;
width: 100%;
margin:0;
}
div#page div#header .subnav li a {
color: #333;
height:48px;
padding:0px 0;
font-size:13px;
}
div#page div#header .subnav li a:hover {
background:#e3e3e3;
width: 215px;
border-radius: 3px;last
}
div#page div#header .subnav2 {
display: none;
position: absolute;
top: 19px;
left: 735px;
width: 205px;
list-style-type: none;
background: #fff;
margin: 0;
border:solid 2px #eeeeee;
border-radius: 10px;
z-index:0;
padding:0;
}
div#page div#header .subnav2 li {
display: block;
border-bottom: solid 1px #eeeeee;
width: 100%;
margin:0;
}
div#page div#header .subnav2 li a {
color: #333;
height:48px;
padding:0px 0;
font-size:13px;
}
div#page div#header .subnav2 li a:hover {
background:#e3e3e3;
width: 215px;
border-radius: 3px;last
}
div#page div#header li:hover .subnav {
display: block;
}
div#page div#header li:hover .subnav2 {
display: block;
}
div#page div#header div ul.main-nav {
list-style-type:none;
margin:0;
padding:0;
position:absolute;
top:65px;
}
div#page div#header div ul.main-nav li {
float:left;
}
div#page div#header div ul.main-nav li.middle {
margin:0 170px 0 0;
}
div#page div#header div ul.main-nav li.nav-primary-middle {
margin:0 170px 0 0;
}
div#page div#header div ul.main-nav li a {
font-family:'didact_gothicregular';
font-size:16px;
color:#5b6a9f;
text-decoration:none;
padding:0 40px;
}
div#page div#header div ul.main-nav li a:hover {
font-family:'didact_gothicregular';
font-size:16px;
color:#3f4c7b;
}
div#page div#header div ul.main-nav li a.active {
font-family:'didact_gothicregular';
font-size:16px;
color:#3f4c7b;
}
See the image below as an example of "Dentist" not having a full grey highlight for the entire width of the submenu when you mouse over it:
(Edit, oh, I don't have enough rep to post an image. Please see the JSFIDDLE link, select "Shops Listing" and you can see the submenu not highlighting the entire bar.)
![dropdown menu highlight in gray][1]
Please see this *this jsfiddle link.*
Any help is appreciated, thanks.
you can simply remove the background style from your div#page div#header .subnav li a:hover block. Then, add this
div#page div#header .subnav li:hover{
background:#e3e3e3;
}
Demo
Add the rules below to your CSS.
.subnav { overflow: hidden }
.subnav > li > a { display: block }
Check this fiddle. http://jsfiddle.net/q3xR5/
There is a comment called my edit in there. Please note you need to
adjust paddings on your elements.
I have some navigation links at the top of the page that I am having trouble placing in the centre of the screen. Can anybody suggest where I'm going wrong in the CSS?
Image:
http://i.imgur.com/SUTWr.png
Here's the CSS:
#nav {
list-style-type:none;
text-align:center
}
ul li {
display:inline-block;
border-radius:10px;
background:#EEE;
margin:5px;
}
li a {
float:left;
padding:30px;
text-decoration:none;
color:black;
text-shadow: 1px 1px #DDD;
border-radius:10px;
box-shadow:3px 3px black;
}
li a:hover {
background:#CCC;
color:#333;
}
li a:active {
background:#555;
color:white;
text-shadow: 1px 1px #000;
}
Thanks
Hi actually i have updated your css now i hope this work will for you :-
DEMO
CSS
#nav {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
background: none repeat scroll 0 0 #B8B8B8;
height: 400px;
list-style-type: none;
margin: auto;
padding: 40px 0;
width: 400px;
}
ul li {
display:inline;
}
li a {
text-decoration:none;
color:black;
text-shadow: 1px 1px #DDD;
border-radius:10px;
background:#EEE;
margin:5px;
padding:30px;
box-shadow:3px 3px black;
}
li a:hover {
background:#CCC;
color:#333;
}
li a:active {
background:#555;
color:white;
text-shadow: 1px 1px #000;
}
Here's a quick demo of how to center a UL: http://jsfiddle.net/73Mum/1/
<div class="wrap">
<ul>
<li>one</li>
<li>two</li>
<li>three</li>
<li>four</li>
<li>five</li>
</ul>
</div>
.wrap {
text-align:center;
background:#999;
padding:100px 0;
}
ul {
width:500px;
margin:0 auto;
}
ul li {
display:inline-block;
padding:10px;
background:#ccc;
}
Try wrapping these <ul>-tags with a <div style="margin-left: auto; margin-right: auto">.
This way you center all <ul>-tags at once.
If "1,2,3,4,5" in your picture are the ul-elements and #nav is the id of your surrounding div, you can just add margin-left: auto; margin-right: auto to #nav in your stylesheet.
I've got the following inside a div. I'd like to center the menu elements. Currently they appear like so...
| Home | Blog | About | Contact |
I'd like it to center so something like...
| Home | Blog | About | Contact |
Here's my CSS, what would I need to change?
ul#menu
{
margin:0;
padding:0;
list-style-type:none;
width:auto;
position:relative;
display:block;
height:30px;
font-size:12px;
font-weight:bold;
background:transparent url(images/nav_bg.png) repeat-x top left;
font-family:Arial, Helvetica, sans-serif;
border-bottom:1px solid #000000;
border-top:1px solid #000000;
}
ul#menu li
{
display:block;
float:left;
margin:0;
padding:0;
}
ul#menu li a
{
display:block;
float:left;
color:#999999;
text-decoration:none;
font-weight:bold;
padding:8px 20px 0 20px;
}
ul#menu li a:hover
{
color:#FFFFFF;
height:22px;
background:transparent url(images/nav_bg.png) 0px -30px no-repeat;
}
ul#menu li a.current
{
display:inline;
height:22px;
background:transparent url(images/nav_bg.png) 0px -30px no-repeat;
float:left;
margin:0;
}
To center your menu, give your menu a width and use:
maring:0 auto;
The final result is something like this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Page</title>
<style>
.menu
{
width:270px;
margin:0 auto;
}
ul#menu
{
margin: 0;
padding: 0;
list-style-type: none;
width: auto;
position: relative;
display: block;
height: 30px;
font-size: 12px;
font-weight: bold;
background: transparent url(images/nav_bg.png) repeat-x top left;
font-family: Arial, Helvetica, sans-serif;
border-bottom: 1px solid #000000;
border-top: 1px solid #000000;
}
ul#menu li
{
display: block;
float: left;
margin: 0;
padding: 0;
width:60px;
text-align:center;
}
ul#menu li.divider
{
width:5px;
}
ul#menu li a
{
display: block;
float: left;
color: #999999;
text-decoration: none;
font-weight: bold;
padding: 8px 20px 0 20px;
}
ul#menu li a:hover
{
color: #FFFFFF;
height: 22px;
background: transparent url(images/nav_bg.png) 0px -30px no-repeat;
}
ul#menu li a.current
{
display: inline;
height: 22px;
background: transparent url(images/nav_bg.png) 0px -30px no-repeat;
float: left;
margin: 0;
}
</style>
</head>
<body>
<div class="menu">
<ul id="menu">
<li class="divider">|</li>
<li>Home</li>
<li class="divider">|</li>
<li>Blog </li>
<li class="divider">|</li>
<li>About </li>
<li class="divider">|</li>
<li>Contact</li>
<li class="divider">|</li>
</ul>
</div>
</body>
</html>
Update:
If you didn't want to use pipes in the divider, you could always use:
ul#menu li.divider
{
width:2px;
background-color:Black;
}
instead which will give a similar look and make screen readers not blow up at you.
I think you're looking for something like this: http://jsfiddle.net/sp45g/
div { // Container around the UL
text-align: center;
background-color: blue;
}
ul { // Inline block to shrink-wrap to contents
display: inline-block;
background-color: red;
}
li { // Inline to display in a row
display: inline;
}
I cleaned it up a little bit...
ul#menu{
margin:0;
padding:0;
list-style-type:none;
display:block;
height:30px;
font-size:12px;
font-weight:bold;
font-family:Arial, Helvetica, sans-serif;
border-bottom:1px solid #000000;
border-top:1px solid #000000;
}
ul#menu li{
display:block;
float:left;
margin:0;
padding:0;
}
ul#menu li a{
color:#999999;
text-decoration:none;
padding:8px 20px 0 20px;
height:22px;
background:transparent url(images/nav_bg.png) repeat-x top left;
}
ul#menu li a:hover, ul#menu li a.current{
color:#FFFFFF;
background:transparent url(images/nav_bg.png) 0px -30px no-repeat;
}
add a wrapper around the ul:
<div id="wrapper">
<ul id="menu">
<li><a>link</a></li> |
<li><a>link</a></li> |
...
</ul>
</div>
and add folling:
#wrapper{
width:100%;
}
ul#menu{
margin:0 auto;
}
I didn't test it, so maybe u have to change some values...