I currently have the following code. I am trying to get the second, third, and fourth "li" elements to vertically-align in the middle of the nav bar. The first "li" is an image, and the second-fourth are all text.
Here is a screenshot of it currently.
http://i49.tinypic.com/bfesl3.png
I have tried using "vertical-align:middle" and padding. Note that the second, third and fourth "li" elements appear vertically-aligned in the middle if viewed in Firefox but not in other browsers.
Here is the code I have.
<ul class = "nav">
<li><img src="img/randomtitle.png" style="padding-left:8px;padding-top:8px;"/></li>
<li>about me</li>
<li>films</li>
<li>contact me</li>
<span class="navlinkimages">
<li><img src="social/social_vimeo.png" height = "30px" style = "margin-right:-14px;"/></li>
<li><img src="social/social_youtube.png" height = "30px" style = "margin-right:-14px;"/></li>
<li><img src="social/social_facebook.png" height="30px" style = "margin-right:-14px;"/></li>
<li><img src="social/social_twitter.png" height = "30px" style = "margin-right:-14px;" /></li>
</span>
</ul>`
CSS Code:
.nav {
list-style-type:none;
padding-left:0;
margin-left:0;
font-family:DinC;
padding-bottom:5px;
background-color: #000000;
border-radius:5px;
height:35px;
}
.navlinkimages {
float:right;
padding-top:5px;
}
.nav li {
display:inline;
vertical-align:middle;
}
ul.nav a:hover {
color:#FA4B2A;
}
.nav li img {
vertical-align:middle;
}
ul.nav a{
text-decoration:none;
margin-right:27px;
color:#FFFFFF;
}
Is there a way to make it vertically-aligned on all browsers?
Thanks!
Try this:
.nav li {
display:inline;
vertical-align:middle;
line-height:35px;
}
Give each of those li a's a class middle:
<li>
<a class="middle" href="aboutme.html" style="REDACTED">about me</a>
</li>
Define middle like:
.middle {
line-height: 35px; /** or same as ul height */
}
Inline elements are always vertically centered within their line-height.
DEMO
Related
This following inline block li elements are not perfectly centered, I can send the full code if you need it. Do you know a way to have them perfectly centered keeping their position at default?
<div id="abovenavigation">
<ul id="container">
<li><h1 class="Home">HOME</h1></li><!--
--><li><h1 class="About">ABOUT</h1></li><!--
--><li><h1 class="Blog">BLOG</h1></li><!--
-->
</ul><!--ends container-->
</div><!--ends upper navigation-->
<div id="undernavigation">
<ul id="container">
<li><img class="facebook" src="Facebook.png" width="53px" height="50px" onclick="this.src='Facebookhov.png'" onmouseover="this.src='Facebookhov.png'" onmouseout="this.src='Facebook.png'"/></li>
<li><img class="twitter" src="Twitter.png" width="53px" height="50px" onclick="this.src='Twitterhov.png'" onmouseover="this.src='Twitterhov.png'" onmouseout="this.src='Twitter.png'" /></li>
<li><a href:"mailto:gaaren03#gmail.com"><img class="mailto" src="Mailto.png" width="53px" height="50px" title="gaaren03#gmail.com" onclick="this.src='Mailtohov.png'" onmouseover="this.src='Mailtohov.png'" onmouseout="this.src='Mailto.png'" /></a></li>
</ul>
</div><!--ends undernavigation-->
li {
margin:0 20px;
font-size:18px;
display:inline-block;
text-align:center;
}
Just add text-align: center to the ul. :)
codepen: http://codepen.io/anon/pen/xGgpLK
li {
margin:0 20px;
font-size:18px;
display:inline-block;
}
ul {
text-align: center;
}
You could either give the list items a fixed width seeing as you have them set to display: inline-block. Or if you are supporting IE8 and above you could set the ul to display:table with a 100% width and the li to display: table-cell.
Fiddle
ul {
display:table;
width: 100%;
}
li {
padding: 10px;
font-size:18px;
display:table-cell;
text-align:center;
}
Hope this helps.
I have some sort of space in between my li tags I don't where it's coming from? How can i remove this?
Also, I'd like to change the color of the font to white on hover of the li
JSFIDDLE http://jsfiddle.net/omarel/tfyxL66c/
CSS
.nav_container {
text-align: center;
width:100%;
}
.nav_container ul {
/* margin-top:15px; */
margin-left:30px;
}
.nav_container ul li {
display: inline-block;
text-align: center;
padding-left:40px;
padding-right:40px;
margin:0px;
height:80px;
cursor:pointer;
}
.nav_container ul li:hover {
background-color:#08298A;
}
.nav_container a:hover {
color:#fff;
}
header {
width:100%;
margin: auto;
box-shadow:0 0 8px rgba(0,0,0,0.1);
min-width:410px;
}
.navlogo {
z-index:99;
}
.navlogo img {
width:100px;
margin:10px 10px 10px 10px;
}
.floatleft {
float:left;
}
.floatright {
float:right;
}
.centerdiv {
margin:0 auto;
}
#media only screen and (min-width:700px) {
header {
max-width:1250px;
}
.container {
max-width:1250px;
}
.box2 {
width:32%;
height:300px;
float:left;
}
.box2left {
width:65%;
height:600px;
float:left;
}
}
div {
border:solid 1px #E6E6E6;
position:relative;
}
ul li {
border:solid 1px #E6E6E6;
}
HTML
<div class="navlogo floatleft">
<img src="images/logo.png" />
</div>
<div class="floatleft">
<div class="nav_container">
<ul>
<li>Link 1</li>
<li>Link 2</li>
</ul>
</div>
</div>
<div class="floatright">
<div class="nav_container">
<ul>
<li>Profile</li>
<li>Sign out</li>
</ul>
</div>
</div>
</header>
<div style="clear:both;"></div>
Answering your second question first as the answer is shorter: use the :hover pseudo class.
EXAMPLE
li:hover a{color:#fff;}
More information on pseudo classes
To answer your first question, then; setting an element's display property to inline or inline-block will cause the white space surrounding it to be treated just like the space surrounding any other inline element.
You can workaround it in a number of ways
Remove all line breaks from within your list:
<ul><li>Item 1</li><li>Item 2</li><li>Item 3</li></ul>
Use comments to hide the line breaks from the browser:
<ul><!--
--><li>Item 1</li><!--
--><li>Item 2</li><!--
--><li>Item 3</li><!--
--></ul>
Use CSS to set the font-size of the parent element to 0 and then "reset" it for the child elements:
html{font-size:20px;}
ul{font-size:0;}
li{font-size:1rem;}
Alternatively, if you're not 100% set on using display:inline-block, you can use floats or flexbox instead.
To change the color of the links to white, use this css:
.nav_container ul li:hover a {
color:white;
}
However, only the text will be clickable, the li element won't be clickable. Another way to do the same thing is to apply all width/height/background styling to the link, instead of the li.
As Shaggy mentioned, to eliminate extra spacing when using inline-block you should remove all spaces in your html between your menu li items.
As for changing the link color on hover you should add the following to your css code:
.nav_container li:hover a {
color:#FFF;
}
I need to align dropdown menu along the length of the page. I have a menu :
<ul class="nav navbar-nav menu">
<li>About the company
<img src="images/arr1.png" ></img>
<ul>
<li class="first_li">Mission</li>
<li>History</li>
<li>Vacancy</li>
<li>Best Experts</li>
</ul>
</li>
</ul>
Then I have some css styles to make this dropdown menu to be align in as I thougth right manner.But it doesn't work correctly.
.menu li{
list-style: none;
float: left;
line-height:84px;
}
.menu li:hover > ul {
display: block;
background-color: rgb(231,231,231);
position:absolute;
top:84px;
left : 0px;
width: 100%;
text-align:center;
padding:0;
z-index:1;
}
.menu .language:hover > ul {
display:block;
width:84px;
line-height:30px;
}
Part of the problem looks like you have most of your list style in the 'hover' part. Try putting that into the general menu style.
The following is the code for the nav inside my header. The image refuses to budge whatever i try. i need the image to vertically align with the text in the buttons next to it.
I've tried display:table-cell but maybe i placed it wrongly.
<nav id="headerNav">
<ul>
<li>
<a href = "#" id="logoLink" style="padding-top:15px">
<img src="images/Logo.png" />
</a>
</li>
<li>
<a href = "#" id="logoHeader" style="padding-left:0px; margin-right:15%;">
Something
</a>
</li>
<li>About</li>
<li>...</li>
<li>Support</li>
<li>Case Studies</li>
<li>Contact Us</li>
</ul>
And the CSS :-
#headerNav
{
margin-top:2%;
margin-bottom:1%;
padding-bottom:2%;
}
header nav ul {
margin:1em 0;
padding:0;
width:100%;
}
header nav ul li
{
display:inline;
list-style-type:none;
}
header nav ul li a img
{
width:auto;
height:auto;
max-height:100%;
max-width:100%;
}
header nav ul li a {
font-family:'OpenSansReg', sans-serif;
color:#4D4D4D;
font-size:1.0em;
font-weight:400;
padding:1.7%;
text-decoration:none;
background-color:white;
}
Please check updating your html/css code as mentioned below:
remove inline style for padding-top from <a href = "#" id="logoLink" style="padding-top:15px"> and make it like: <a href = "#" id="logoLink">
add following css properties to your #headerNav ul li a (in your code above it mentioned as header nav ul li a) class:
display: inline-block;
vertical-align: middle;
Hope it will help you!
I'm using an ordered list in order to get numbering, which works perfectly fine when the list is vertical. However, once I make it horizontal, the numbering disappears.
The display attribute in the li CSS seems to be the culprit.
CSS and HTML:
#QuickSteps {
width:723px;
height:75px;
border:solid 2px #b9c7d9;
background-color:#e5ecf2;
}
#QuickSteps h2{
padding-top:2px;
padding-left:7px;
}
#QuickSteps ol{
color:#003366;
}
#QuickSteps li {
display:inline;
}
#QuickSteps li.selected{
font-weight:bold;
}
<div id="QuickSteps">
<h2>5 Quick Steps</h2>
<ol>
<li class="selected">Account Info ></li>
<li>About Me ></li>
<li>Preferences ></li>
<li>Habits ></li>
<li>Your Avatar</li>
</ol>
</div>
Instead of displaying them inline, you could float them
#QuickSteps li {
float:left;
margin-left:50px;
}
Good luck...