Here's the HTML :
<nav>
<ul class="menu">
<li class="li_pc">PC</li>
<li class="li_one">ONE</li>
<li class="li_ps3">PS4</li>
<li class="li_360">360</li>
<li class="li_ps3">PS3</li>
<li class="li_wiiu">WiiU</li>
</ul>
</nav>
and here's the CSS :
nav {
padding: 0;
margin: 0;
widht: 1200px;
height: 100px;
}
ul li {
display: inline;
font-family: Verdana, Geneva, sans-serif;
float: left; /* IE */
list-style-type: none;
}
ul li a {
display: block;
float: left;
width: 190px;
height: 60px;
padding: 0;
background-color: transparent;
color: white;
text-decoration: none;
text-align: center;
}
.li_pc a:hover {
background-color: #cc9a34;
}
.li_one a:hover {
background-color: #149a14;
}
.li_ps4 a:hover {
background-color: #040264;
}
.li_360 a:hover {
background-color: #9cce04;
}
.li_ps3 a:hover {
background-color: #0406b4;
}
.li_wiiu a:hover {
background-color: #5c12ac;
}
My goal is to vertically center the text in the cells. I'm using text-align:center; to center it horizontally, but when I use vertical-align:middle; it doesn't even move a pixel. I tried a lot of different ways but it always destroys the thing and makes the design look like my face on sunday morning.
How can I center these vertically please ?
Thanks in advance :)
If you anchor links are 60px tall
line-height:60px
should do it.
JSFiddle
Related
I am learning CSS while writing CSS I got some issue.
I need to remove this space from my displaying web page.
.grouping:before,
.grouping:after {
content: " ";
display: table;
}
.grouping:after {
clear: both;
}
nav {
background-color: white;
position: fixed;
top: 0px;
right: 0px;
left: 0px;
}
nav figure {
position: absolute;
}
img {
width: 100px;
}
.primary-nav {
float: right;
}
.primary-nav>li {
display: block;
float: left;
}
.primary-nav>li>a {
float: left;
padding: 25px 0;
width: 100px;
border-left: 1px solid;
}
nav li a {
font-family: Arial, Helvetica, sans-serif;
color: black;
text-transform: uppercase;
font-size: 15px;
text-align: center;
}
nav li:first-child a {
border-left: none;
}
nav li a:focus,
nav li a:hover {
background: red;
background-color: red;
}
body {
background-color: grey;
}
<nav class="grouping">
<figure>
<img src="images/logo.png" alt="LOGO">
<ul class="primary-nav">
<li>Home</li>
<li>Home2</li>
<li>Home3</li>
<li>Home4</li>
<li>Home5</li>
</ul>
</figure>
</nav>
Using this code resultant output must be like this:
Expected Result Image
But getting this result with spaces at corner indicated as an arrow in next image:
Generated Result Image
1) There is some margin on ul element rendered by the browser defaults in general, to fix this do:
ul {
margin: 0
}
2) Also figure element has default margins
figure {
margin: 0
}
Try to inspect the output of the browser to see exactly how the browser defaults renders that margin to see it better.
https://jsfiddle.net/t8netg8j/4/
I would use display: inline-block for the image and the li elements, erase some of the floats and reset some of the margins to 0 as shown below:
(note: I reduced the width of the elements from 100 to 80 px to fit them into the narrow snippet window, but of course you don't have to do that for a wider viewport)
(note #2: i added empty HTML comments at line ends and beginnings for all li elements to avoid the whitespace resulting from the use of inline-blocks which would cause the hover background not to fill the full space between two vertical borders)
html, body {
margin: 0;
}
nav figure {
position: absolute;
width: 100%;
margin: 0;
}
img {
width: 80px;
display: inline-block;
}
.primary-nav {
float: right;
margin: 0;
}
.primary-nav>li {
display: inline-block;
}
.primary-nav>li>a {
float: left;
padding: 25px 0;
width: 80px;
border-left: 1px solid;
}
nav li a {
font-family: Arial, Helvetica, sans-serif;
color: black;
text-transform: uppercase;
font-size: 15px;
text-align: center;
}
nav li:first-child a {
border-left: none;
}
nav li a:focus,
nav li a:hover {
background: red;
background-color: red;
}
body {
background-color: grey;
}
<nav class="grouping">
<figure>
<img src="images/logo.png" alt="LOGO">
<ul class="primary-nav">
<li>Home</li><!--
--><li>Home2</li><!--
--><li>Home3</li><!--
--><li>Home4</li><!--
--><li>Home5</li><!--
--></ul>
</figure>
</nav>
I have a NavBar with my name left aligned(green background color), and then links to other pages which are right aligned(no background color). When re-sizing to less than 640px I need to move the right aligned links to a new line, and center all NavBar content. I cannot get the links to move to a second line.
HTML:
/* menu bar */
header{
background-color: #ffffff;
height: 60px;
margin: 0;
padding:0;
}
ul{
list-style-type: none;
margin: 0;
padding: 0;
display:block;
}
/* align right */
li{
float:right;
}
/*link formatting*/
li a{
display:block;
padding: 8px;
color:black;
text-align: center;
padding:10px 16px;
text-decoration: none;
font-weight: bold;
}
/* name with background color*/
li:last-child{
font-size: 34px;
background-color: #4aaaa5;
position:absolute;
float:left;
}
#media screen and (max-width: 640px) {
li:last-child{
font-size: 34px;
background-color: #4aaaa5;
position:absolute;
width: 100%;
text-align: center;
top: 0px;
}
}
<ul>
<li><a id="bottomlinks"href="index.html">About</a></li>
<li><a id="bottomlinks"href="portfolio.html">Portfolio</a></li>
<li><a id="bottomlinks"href="contact.html">Contact</a></li>
<li> Mark Ring</li>
</ul>
Here is a basic demo of what it looks like you're attempting to achieve. As you can see I've simplified the HTML and CSS a bit.
Hope it helps!
body {
margin: 0;
}
ul,
li {
margin: 0;
padding: 0;
list-style: none;
}
header {
text-align: center;
overflow: hidden; /* clearfix */
}
.brand {
display: block;
background-color: #4AAAA5;
line-height: 60px;
}
#media ( min-width: 640px ) {
header {
text-align: left;
height: 60px;
}
.nav {
float: right;
}
.nav li {
float: left;
line-height: 60px;
}
.brand {
display: inline-block;
padding: 0 1rem;
}
}
<header>
<a class="brand" href="#">Brand</a>
<ul class="nav">
<li>About</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</header>
In your code you were absolute positioning the brand element on top of the other links (couldn't see them) and didn't undo the float (which kept them from stacking vertically).
So I'm looking at creating a navigation bar that'll sit at the top of my webpage and stick to it no matter where I scroll, but it always gets caught and disappears as I scroll away?
Not only that, but this is what happens when I hover over it:
Is it possible to also only have the darker background fill the actual black bar it sits inside?
This is the snippet from my style sheet as well:
body {
background-color: #ecf0f1;
margin: 0;
font-family: Arial;
}
header {
background-color: #333;
}
.navbar {
height: 5%;
overflow: auto;
margin: auto;
width: auto;
min-height: 60px;
top: 0;
text-align: center;
}
.title {
display: block;
}
.navbar ul {
list-style-type: none;
position: fixed;
top: 0;
padding: 0;
overflow: hidden;
}
.navbar li {
display: inline-block;
}
.navbar li a {
padding: 25px;
display: block;
height: 100%;
color: white;
text-decoration: none;
}
/* Change the link color to #111 (black) on hover */
.navbar li a:hover {
background-color: #111;
}
All help is greatly appreciated! First time playing around with CSS!
EDIT:
Here is the snippet of HTML that creates this header
<link rel="stylesheet" type="text/css" href="style/style.css">
<header>
<div class="navbar">
<ul>
<li>Home</li>
<li>About Us</li>
<li>Contracts</li>
<li>Other</li>
</ul>
</div>
</header>
Fix the header...not the navbar or the menu.
body {
background-color: #ecf0f1;
margin: 0;
font-family: Arial;
}
header {
background-color: #333;
position: fixed;
top: 0;
width: 100%;
}
.navbar {} .title {
display: block;
}
.navbar ul {
list-style-type: none;
padding: 0;
margin: 0;
overflow: hidden;
}
.navbar li {
display: inline-block;
}
.navbar li a {
padding: 25px;
display: block;
height: 100%;
color: white;
text-decoration: none;
}
/* Change the link color to #111 (black) on hover */
.navbar li a:hover {
background-color: #111;
}
body {
height: 2000px; /* so you can see the header NOT moving */
}
<header>
<div class="navbar">
<ul>
<li class="hvr-underline">Home
</li>
<li>About Us
</li>
<li>Contracts
</li>
<li>Other
</li>
</ul>
</div>
</header>
Okay after a lot of googling I finally found out how to centre the menu links in the middle of the nav bar. After that I came across another problem...adding a logo in the navigation bar.
My problem is, the logo doesn't come into the navigation bar, it instead goes above the bar.
I would like to have the logo floating to the left in the nav bar.
I have tried a few things, including adding display: inline-block/inline to all the main elements, but no difference. Though I tried adding display: inline to the nav ul, but the background of the nav bar disappears (see second image) and I can't add a background via adding height and width.
P.s Excuse me If there are few amateur mistakes, I have only started to code a few months ago.
Thanks for your time!
How the nav bar looks now:
How the nav bar looks with display: inline;
Here is my HTML and CSS:
#logo {
height: 50px;
width: auto;
float: left;
}
nav ul {
list-style-type: none;
overflow: hidden;
margin: 0;
padding: 0;
background-color: #1a1a1a;
text-align: center;
border: 1px solid #e7e7e7;
display: inline-block;
width: 100%;
}
nav li {
display: inline-block;
}
nav a {
display: inline-block;
padding: 16px 15px;
text-decoration: none;
font-family: arial;
font-weight: bold;
color: white;
}
nav a:hover {
background-color: orange;
color: white;
}
<nav>
<img id="logo" src="https://67.media.tumblr.com/f607af5bc60d1b2837add83c70a2aa45/tumblr_inline_mrwv19q8fE1qz4rgp.gif"></img>
<ul>
<li>Game 1
</li>
<li>Game 2
</li>
<li>Game 3
</li>
</ul>
</nav>
Just insert it inside your ul.
#logo {
height: 50px;
width: auto;
float: left;
}
nav ul {
list-style-type: none;
overflow: hidden;
margin: 0;
padding: 0;
background-color: #1a1a1a;
text-align: center;
border: 1px solid #e7e7e7;
display: inline-block;
width: 100%;
}
nav li {
display: inline-block;
}
nav a {
display: inline-block;
padding: 16px 15px;
text-decoration: none;
font-family: arial;
font-weight: bold;
color: white;
}
nav a:hover {
background-color: orange;
color: white;
}
<nav>
<ul>
<img id="logo" src="https://67.media.tumblr.com/f607af5bc60d1b2837add83c70a2aa45/tumblr_inline_mrwv19q8fE1qz4rgp.gif"/>
<li>Game 1
</li>
<li>Game 2
</li>
<li>Game 3
</li>
</ul>
</nav>
The easiest way is to probably do a position:absolute
https://jsfiddle.net/fj1r6b1e/
#logo {
height: 50px;
width: auto;
position:absolute;
}
Also, img tag should be written like this <img src="..." /> instead of <img></img>
Give the logo img position: fixed. This will not affect the position/centering of the menu items.
https://jsfiddle.net/kjmm3du5/
I am a bit confused. I am not getting any image in my navigation, if I am using background-image in my CSS. If am doing it with HTML img tag I got an image, but if I try it with CSS I got nothing. :(
I tried it like this: https://stackoverflow.com/a/16194594/3701753
But nothing happens. I guess, there is something wrong with my CSS?!
Here is my code:
HTML:
<nav>
<ol>
<li class="home">
</li>
<li>Info
</li>
<li>Projects
</li>
<li>Contact
</li>
</ol>
</nav>
CSS:
/*******************************************
Links
*******************************************/
a:link {
font-family:'Iceland';
font-style: normal;
font-size: 30px;
font-weight: 700;
text-decoration: none;
color: #666;
}
a:visited {
color: #666;
}
a:hover {
color: #F90;
}
a:active {
}
/*******************************************
Navigation
*******************************************/
nav {
width: 100%;
bottom: 0;
left:0;
height: 60px;
position: fixed;
background-color: #333;
}
ol {
list-style: none;
text-align: center;
height: 100%;
}
li {
display: inline;
margin-right: 40px;
}
li a {
}
/*******************************************
Class
*******************************************/
.home {
background: url(../pics/home_button.png);
}
/*******************************************
ID's
*******************************************/
#main {
background-color: #C90;
width: 90%;
height: 84%;
margin: 5% auto;
}
Here is it in fiddle: http://jsfiddle.net/373Bc/2/
I made in icon and I would like to display it in the navigation!
There is some other issue which I am not able to get, may be with character code, indentation, or markup etc.
Because when I TidyUp your code in jsfiddle it works. I am not sure why is this happening.
Demo
.home {
background: url(http://explorelaromana.com/wp-content/themes/explorelaromana/images/home_icon.jpg);
width: 40px;
height: 32px;
line-height: 60px;
}
li {
display: inline-block;
margin-right: 40px;
}
Demo 2
Update the following CSS:
.home {
background:url (http://explorelaromana.com/wpcontent/themes/explorelaromana/images/home_icon.jpg) no-repeat;
display: inline-block;
height: 36px;
width: 43px;
vertical-align: bottom;
}
Hope this hepls. :)