I have a header with 2 divs, the first one (floating to the left) is a simple horizontal unordered horizontal list, which is properly centered vertically (header has line-height the same as it's height and vertical-align: middle). The second div is floating to the right, and it also has a horizontal unordered list, however it has round (border-radius: 50%) hyperlinks and no text in them at all (they are going to be used as icons, with background-image).
While the first div is aligned properly no matter what is the size of header, the second one stays at the top.
My code:
#header
{
background-color: #a3a3a3;
color: black;
height: 50px;
line-height: 50px;
vertical-align: middle;
}
#header #icons
{
float: right;
}
#header #icons ul
{
margin: 0;
padding: 0;
}
#header #icons ul li
{
list-style-type: none;
display: inline-block;
float: right;
}
#header #icons ul li a
{
display: inline-block;
text-decoration: none;
width: 35px;
height: 35px;
border-radius: 50%;
background-color: #787878;
}
You can check the code & results here:
https://jsfiddle.net/mf6yg78f/
How can I vertically align the round list elements? I'd prefer to stay away from any flexboxes etc.
Give margin-top: 7px; to #header #icons. There is no other option.
body
{
margin: 0;
padding: 0;
background-color: black;
}
#wrapper
{
width: 80%;
background-color: white;
margin: auto;
}
#header
{
background-color: #a3a3a3;
color: black;
height: 50px;
line-height: 50px;
vertical-align: middle;
}
#header #links
{
float: left;
}
#header #links ul
{
margin: 0;
padding: 0;
}
#header #links ul li
{
list-style-type: none;
display: inline-block;
}
#header #links li:before
{
content: " | ";
}
#header #links li:first-child:before
{
content: none;
}
#header #links ul li a
{
text-decoration: none;
color: inherit;
}
#header #links ul li a:hover
{
color: red;
}
#header #icons
{
float: right;
margin-top: 7px;
}
/* icons on the right side, should also be centered vertically */
#header #icons ul
{
margin: 0;
padding: 0;
}
#header #icons ul li
{
list-style-type: none;
display: inline-block;
float: right;
}
#header #icons ul li:first-child ~ li
{
margin-right: 10px;
}
#header #icons ul li a
{
display: inline-block;
text-decoration: none;
width: 35px;
height: 35px;
border-radius: 50%;
background-color: #787878;
}
<body>
<div id="wrapper">
<div id="header">
<div id="links">
<ul>
<li>Index</li>
<li>Login</li>
<li>Gallery</li>
</ul>
</div>
<div id="icons">
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
</div>
</body>
If you don't want to use flex, then try to display items as table and table cell so that it will behave as table. display:table-cell will make the element behave as <td> and so you can add vertical-align: middle to it effectively
try changing the following style to:
/* icons on the right side, should also be centered vertically */
#header #icons ul
{
margin: 0;
padding: 0;
height: 50px;
display: table;
float: right;
}
#header #icons li
{
list-style-type: none;
display: table-cell;
text-align: right;
vertical-align: middle;
width: 35px;
padding-right: 10px;
}
#header #icons ul li a
{
display: block;
text-decoration: none;
width: 35px;
height: 35px;
border-radius: 50%;
background-color: #787878;
margin: auto 0;
float: right;
}
Related
I've made this navigation with CSS and now I'm trying to make it responsive using media queries, but I can't get the submenus to show properly. In responsive mode, I'd like to display the full menu with all links neatly underneath each other in one box. Would really appreciate some help!
https://jsfiddle.net/4L8ghza0/1/
HTML:
<header>
<div class="nav">
<ul>
<li>Start</li>
<li>Submenu1 <span class="arrow">▼</span>
<ul>
<li>link1</li>
<li>link2</li>
<li>link3</li>
</ul>
</li>
<li>Service</li>
<li>Events</li>
<li>Submenu2 <span class="arrow">▼</span>
<ul>
<li>link4</li>
<li>link5</li>
<li>link6</li>
</ul>
</li>
</ul>
</div>
</header>
CSS:
header {
top: 0px;
background-color: #EFE7D2;
position: fixed !important;
width: 100%;
height: 125px;
z-index: 10;
box-shadow: 0 2px 2px 0 rgba(0,0,0,0.12), 0 2px 10px 0 rgba(0,0,0,0.12);
}
.nav {
float: right;
padding: 40px 80px 0 0;
}
ul {
list-style-type: none;
}
ul li {
font-family: Arial, sans-serif;
font-size: 95%;
text-transform: uppercase;
display: inline-block;
position: relative;
float: left;
margin: 5px;
}
ul li a {
padding: 8px 10px;
display: block;
text-decoration: none;
color: #000000;
}
ul li:hover{
background: #CCB18E;
}
.nav .arrow {
font-size: 70%;
line-height: 0%;
}
ul li ul {
display: none;
position: absolute;
width: 210%;
padding: 0;
}
ul li ul li {
display: block;
text-decoration: none;
background: #CCB18E;
padding: 0px 10px;
margin: 0;
width: 100%;
}
ul li ul li:hover {
display: block;
background: #DAC7AD;
text-decoration: none;
padding: 0px 10px;
margin: 0;
width: 100%;
}
ul li:hover ul{
display:block;
visibility:visible;
}
ul ul li:hover li{
display:block;
}
.current {
background:#CCB18E;
color: #000000;
}
#menu-icon {
display: hidden;
width: 40px;
height: 40px;
background: url(https://cdn0.iconfinder.com/data/icons/social-messaging-productivity-4/128/menu-2-512.png) center;
}
a:hover#menu-icon {
border-radius: 4px 4px 0 0;
}
#media screen and (max-width: 1080px){
#menu-icon {
display: inline-block;
}
ul li ul li a {
display: block;
}
ul, ul:active {
display: none;
z-index: 1000;
position: absolute;
padding: 10px;
background: #EFE7D2;
right: 100px;
top: 60px;
width: 25%;
border: 1px #5F7B65 solid;
}
.nav:hover ul {
display: block;
}
ul li:hover ul li ul li {
display: none;
}
}
#JD26 I find it easier using flex-box. You can set .nav {display: flex; flex-direction:column;} in your media query. This should get you started. Or with block display: .nav {display: block}.
I am trying to vertically align an anchor tag within a list item, i have managed to horizontally align it so far. See code below and check jsfiddle for demo.
HTML
<div id="header-top">
<div id="header-top-middle">
<ul>
<li><a data-icon="" a href="#">1</a></li>
<li><a data-icon="" a href="#">222222222</a></li>
<li><a data-icon="" a href="#">3</a></li>
<li><a data-icon="" a href="#">4</a></li>
</ul>
</div>
CSS
#header-top {
height:30px;
background-color:#303030;
width: auto;
border-bottom: 2px solid #DDDDDD;
}
#header-top-middle {
width:1024px;
margin: 0 auto;
height:30px;
}
#header-top-middle ul {
list-style: none;
margin: 0;
padding: 0;
}
#header-top-middle ul li {
border-right: 1px solid #DDDDDD;
display: inline;
float: left;
overflow-x: hidden;
overflow-y: hidden;
}
#header-top-middle ul li a {
color: #FFFFFF;
display: block;
font-size: 15px;
height: 30px;
text-align: center;
width: 30px;
text-decoration:none;
}
See jsfiddle
You can use display: table for your list:
#header-top-middle ul {
list-style: none;
margin: 0;
padding: 0;
display: table;
}
as well as display:table-cell; and vertical-align: middle; for your link inside list item:
#header-top-middle ul li a {
color: #FFFFFF;
display: block;
font-size: 15px;
height: 30px;
text-align: center;
width: 30px;
text-decoration:none;
display:table-cell;
vertical-align: middle;
}
Updated Fiddle
Add line-height:30px to a:
http://jsfiddle.net/hRadK/1/
#header-top-middle ul li a {
color: #FFFFFF;
display: block;
font-size: 15px;
height: 30px;
text-align: center;
width: 30px;
text-decoration:none;
line-height:30px;
}
This might help: http://css-tricks.com/centering-in-the-unknown/
In the link, Chris deals with centering an element whose width and height are unknown.
#header-top-middle ul li a {
color: #FFFFFF;
//display: block;
font-size: 15px;
height: 30px;
text-align: center;
width: 30px;
text-decoration:none;
display:table-cell;
vertical-align:middle;
}
http://jsfiddle.net/hRadK/8/
Try the approach outlined in this answer of wrapping your hyperlinks in a div and applying the vertical alignment on the div. The only other amendment you will need to make is then to remove the block display of hyperlinks you currently have defined.
#header-top-middle ul li a {
color: #FFFFFF;
/* display: block; - remove this rule */
font-size: 15px;
height: 30px;
text-align: center;
width: 30px;
text-decoration:none;
}
Updated fiddle
I have a navigation dropdown element that I would like to make selectable - currently the link only works when the text is hovered and not the box surrounding it. Is there a way in which I can do this in CSS.
My CSS code:
.main-menu {
position: absolute;
top:90px;
right:0px;
text-align: right;
z-index: 2000;
}
.main-menu ul {
width: 50%;
background-color: #333;
display: inline;
margin: 0;
padding: 20px 5px;
list-style: none;
color: #fff;
}
.main-menu ul li {
display: inline-block;
margin-right: -10px;
position: relative;
padding: 17px 15px;
cursor: pointer;
color: #fff;
font-size: 14px;
font-weight: 700;
}
.main-menu ul li a {
color: #fff;
border: none;
}
.main-menu ul li a:hover {
color: #f1c40f;
}
/* sub menu */
.main-menu ul li ul {
position: absolute;
top: 25px;
left: 0;
min-width: 150px;
opacity: 0;
margin: 10px 0px;
padding: 17px 5px 0px 5px;
visibility: hidden;
text-align: left;
}
.main-menu ul li ul li {
display: block;
color: #fff;
margin: 0px -5px;
}
.main-menu ul li ul li:hover {
background: #666;
color: #f1c40f;
}
.main-menu ul li:hover ul {
display: block;
opacity: 1;
visibility: visible;
}
Jsfiddle is: http://jsfiddle.net/9BdTK/
Method 1
You can simply move the <a></a> outside of <li>.
E.G:
<li>Home</li>
DEMO HERE
Note: I have only done this for the first two links.
Method 2
A better way to do this is the following:
HTML:
<div id="con">
<ul>
<li>Test</li>
<li>Test</li>
<li>Test</li>
</ul>
</div>
CSS:
#con {
width: 100%;
background: #eee;
text-align: center;
}
ul {
list-style: none;
}
li {
display: inline-block;
width: 80px;
height: 50px;
outline: 1px solid #000;
}
a {
display: block;
height: 100%;
width: 100%;
}
Keep <a> inside and set it to display: block;, then set the width and height to 100% and this will take up the whole div creating a div link.
Demo of div link - DEMO HERE
Demo with hover - DEMO HERE
Hope this helps.
I have this on my site, but I also managed to do so from this site.
have a look :
Don't put padding in the 'li' item. Instead set the anchor tag to
display:inline-block; and apply padding to it.By Stussa
As said on : Make whole area clickable
Goodluck
I'm using Weebly to create a website, and I've been trying to modify the navigation bar so that it appears centered rather than left justified. I don't really know any code at all, but I found the navigation code, and I was wondering what I could change to center the bar. Thanks!
#nav-wrap .nav {
float:left;
}
#nav-wrap .container {
clear: both;
overflow: hidden;
position: relative;
background:url(saperator-h.png) repeat-x bottom;
padding-bottom:40px;
}
#nav-wrap .container ul {
list-style: none;
}
#nav-wrap .container ul li {
list-style: none;
float: left;
background:url(nav-saperator.png) no-repeat right center;
margin-right: 10px;
padding-right: 25px;
}
#nav-wrap .container ul > li:last-child, #nav-wrap .container ul span:last-child li {
background:none;
}
#nav-wrap .container ul li a {
display: block;
line-height:14px;
border: 0;
outline: 0;
list-style-type: none;
text-transform:uppercase;
padding:5px;
margin-bottom:4px;
}
#nav-wrap .container ul li#active a,
#nav-wrap .container ul li a:hover {
color:#000;
}
#nav-wrap {
position: relative;
width: /*set width, can't be 100% obivously if you want it centered */
margin: auto;
}
This is a guess, we don't see any HTML , apply this to whatever is the container for the entire navbar
It depends on the HTML structure, but this could work.
#nav-wrap .container ul {
display:block;
width:auto;
margin:auto;
}
#topnav a {
float: left;
display: block;
color: #fff;
font-size: 1.2em;
text-decoration: none;
padding: 11px 60px 60px 15px;
border: 0;
outline: 0;
text-transform: uppercase;
i had to mess with the padding but this centered my nav bar in weebly
Someone asked me to improve his CSS to prevent the navigation menu from changing position when the browser gets smaller, but I can't figure out why it won't work. See the jsFiddle: http://jsfiddle.net/gtvTY/10/
The HTML:
<div id="menu">
<ul>
<li>HOME</li>
<li>VIRAGE</li>
<li>RAPIDE</li>
<li>DBS</li>
<li>DB9</li>
<li>CYGNET</li>
</ul>
</div>
This is the original menu:
ul.menu {
position:absolute;
left:18%;
right:18%;
background: #333;
float: left;
list-style: none;
margin: 0;
padding: 0;
width: 64%;
z-index: 3;
}
ul.menu li {
float: left;
margin: 0;
padding: 0;
}
ul.menu a {
background: #333;
color: #ccc;
display: block;
float: left;
margin: 0;
padding: 8px 12px;
text-decoration: none;
}
ul.menu a:hover {
background: #666;
color: #fff;
padding-bottom: 8px;
}
I have redesigned it a bit to this. But it doesn't work at all...
#menu ul {
position: absolute;
list-style: none;
padding: 0;
margin: 0;
}
#menu li
{
float: left;
margin: 0 0.15em;
}
#menu li a
{
background-color: #333;
height: 2em;
line-height: 2em;
float: left;
width: 9em;
display: block;
color: #fff;
text-decoration: none;
text-align: center;
}
#menu ul a:hover {
background: #666;
color: #fff;
padding-bottom: 2px;
}
Why doesn't this menu stay centered at all times?
Maybe it is something like this you are looking for - jsFiddle in comment
You need to put the menu in a wrapping container. Give it a width and set the margin: 0 auto;
See fiddle here: http://jsfiddle.net/AndrewHenderson/gtvTY/7/
HTML:
<div class="container">
<div id="menu">
<ul>
<li>HOME</li>
<li>VIRAGE</li>
<li>RAPIDE</li>
<li>DBS</li>
<li>DB9</li>
<li>CYGNET</li>
</ul>
</div>
</div>
CSS:
.container{
margin: 0 auto;
width: 800px;
}
Is that what you want? jsfiddle
Menu canter aligned in the bowoser.
Menu Items will not go in the second row.
if this is so the solution is
You have to use position:relative; instead of position:absolute;
<div class="center">
<div id="menu">
<ul>
<li>HOME</li>
<li>VIRAGE</li>
<li>RAPIDE</li>
<li>DBS</li>
<li>DB9</li>
<li>CYGNET</li>
</ul>
</div>
and define a width to your menu css
.center
{
width:auto;
}
#menu
{
width:900px;
margin:0 auto;
position:relative;
}
#menu ul {
list-style: none;
padding: 0;
margin: 0;
}
#menu li {
float: left;
margin: 0 0.15em;
}
#menu li a {
background-color: #333;
height: 2em;
line-height: 2em;
float: left;
width: 9em;
display: block;
color: #fff;
text-decoration: none;
text-align: center;
}
#menu ul a:hover {
background: #666;
color: #fff;
padding-bottom: 2px;
}