I haven't really ever done a background navigation rollover, I usually just change the colour of the text once it's been rolled over. However I'm try to do this now but can't seem to get it right.
I'm trying to do it all with CSS as I believe there is a way however I do see a lot of others using sprites and image rollovers. Which way is the best? I might end up having a lot of images on my website so I'm trying to stay away from them so I myself, am thinking strictly CSS. There is a way right?
This is my website
CSS
#main-navigation { width: 100%; height: 100px; background: url(../img/NAV-BG.jpg) top center no-repeat; text-transform: uppercase; font-size: 1em; letter-spacing: 1px; line-height: 90px; /*border: 1px solid #000;*/ }
#main-navigation ul { width: 860px; list-style: none; margin: 0 auto; text-align: center;}
#main-navigation li { float: left ;margin-left: 30px; }
#main-navigation li a { display: block; text-decoration: none; color: #000; }
#main-navigation li a:hover { color: #c7bd89; background-color: #900; width: 120%; height: 30px; -moz-border-radius: 5px; border-radius: 5px; margin: 0 auto; margin-top: 20px;}
HTML
<nav id="main-navigation">
<ul id="main-nav-left">
<li class="current">Home</li>
<li>About</li>
<li>Current Season</li>
<li>Past Seasons</li>
<li>Contact</li>
<li>Partners/Sponsors</li>
</ul>
</nav>
But I want it to look like this
What am I missing?
Use this
#main-navigation li a:hover {
color: #c7bd89;
background-color: #900;
width: 120%;
line-height: 30px;
-moz-border-radius: 5px;
border-radius: 5px;
margin-top: 30px;
}
All the problem is that you're defining a height ... You should define a line-height instead and it will work flawlessly ... But I still can find a space for improvement in terms of padding and margin.
see the fiddle for code and demo
fiddle: http://jsfiddle.net/quR4E/3/
demo: http://jsfiddle.net/quR4E/3/embedded/result/
screen shot:
Try changing your #main-navigation li a to this:
#main-navigation li a {
/*display: block;*/
text-decoration: none;
color: black;
padding: 5px;
}
Using display block was pushing the text outside the box. Adding the padding will give you some spacing around the text.
Sprites are definitely better than using multiple images but in the end they are essentially going to be the same thing. If you can create your images small enough (for bandwidth performance) it won't affect your site that much. Sprites are nice to group images. Using background colors and borders around text is also a very efficient way to go.
Have a look at what I did here: http://torontobanfffilmfest.com/splash
Each of the eight blocks has a single image in two versions, one light and one dark, attached side-by-side. In the top-left corner, for example, is an image, splash_buy_tickets_m.png, that is 582 pixels wide. But the space in which it's displayed is 291 pixels wide. We only see half the full image, and WHICH half depends on :hover.
The CSS that makes the image change on rollover is pretty simple:
#b1:hover, #b2:hover, #b3:hover, #b4:hover, #b5:hover, etc. {
background-position: -291px 0;
}
If each of the buttons in your button bar consists of an "active" and an "inactive" version, then you can just change the image position within the DIV in which it's shown, shifting horizontally or vertically.
Related
html,body{
background-color: #5f5f5f;
margin: 0;
padding: 0;
font-family: sans-serif;
}
div.container{
max-width: 1200px;
margin: 0;
padding: 0 30px;
}
header{
background-color: #000000;
float: left;
width: 100%;
}
header h1{
color: #ffffff;
text-transform: uppercase;
float: left;
}
.nav {
float: right;
list-style-type: none;
list-style: none;
padding: 10px 100px;
}
.nav li {
display: inline-block;
}
.nav ul li a{
color: #ffffff;
text-transform: uppercase;
text-decoration: none;
font-size: 15px;
font-family: "Roboto", sans-serif;
}
.nav li a:hover{
color: #D3D3D3;
border: 1px solid white;
}
.nav li.active a{
border: 1px solid white;
}
.banner-image {
width: 100%;
}
<DOCTYPE html>
<head>
<title> GWS News</title>
<link rel="stylesheet" type="text/css" href="stylesheet.css"/>
</head>
<body>
<header>
<div class="container">
<h1> Grass World Sport News</h1>
<ul class="nav">
<li class="active">Home</li>
<li>World Cup</li>
<li>Sports</li>
<li>Schedule</li>
<li>About</li>
</ul>
</div>
<div class="banner">
<img class="banner-image" src=img/banner1.jpeg>
</div>
</header>
</body>
I want to fix up my navigation bar but do not know how to do it.
Improvement I want to make are:
How do I change the font colour to white (I have tried font: #ffffff as you can see in the coding)?
How do I make the link spaced out?
How do I move the links to the very right (float does not seem to be working as you can see in the coding)?
How do I make the font bigger for the navigation bar (font: 20px does not seem to be working as you can see in the coding)?
How do I make the title "Grass World Sport News" bigger?
How do I change the font colour to white (I have tried font: #ffffff as you can see in the coding)?
The problem is your selector, should be ul.nav li a and not .nav ul li a
How do I make the link spaced out?
Just add to link element a left margin (since you want it to float right):
ul.nav li {
margin-left: 1rem // for example
}
How do I move the links to the very right (float does not seem to be working as you can see in the coding)?
The float is working correctly but you have a max width on parent container so it gets only to the far right of the container. If you want it to the right of the window remove max-width.
div.container{
margin: 0;
padding: 0 30px;
}
How do I make the font bigger for the navigation bar (font: 20px does not seem to be working as you can see in the coding)?
Same problem as number 1. Just set the selector to be ul.nav li a
How do I make the title "Grass World Sport News" bigger?
If you mean a bigger font just set a higher font-size.
header h1 {
// for example
font-size: 30px;
}
This is very broad, and looking at the code it appears much was either copy/pasted from another site expecting the same results which is not how coding works.
Here's a pen: https://codepen.io/codespent/pen/BVXyWO
To answer your questions:
To change font color, you use color: #fff in the parent rule.
Spacing can be done in multiple ways, but just learn box model before you start playing with anything so you know why you're using paddings or margin.
Moving the links to the right is also contextual, there's many ways you can do so, but you need to understand why you're doing it this way. text-align:right; may work, but Flexbox is recommended.
font is an outdated property. You may use font-size:20px; to change the font size.
This is also a broad question as there are many ways that are contextual to how you feel is best.
To understand these fundamentals, I highly recommend taking freeCodeCamp's Basic CSS courses and as well, you should see StackOverflow's "How to Ask" knowledge object to grasp how you should be presenting your questions when coming here for help.
This question already has answers here:
Image inside div has extra space below the image
(10 answers)
Closed 6 years ago.
I can't figure out how to remove this space from my navbar and the picture..
The CSS code I have for the navbar and the image is:
a {
text-decoration: none;
color: white;
padding-right: 5px;
padding-left: 5px;
padding-top: 0;
}
a:hover {
color: black;
}
header {
background-color: #C0C0C0;
margin: 3px 60px 0;
}
li {
display: inline;
border-right: 1px solid black;
border-left: 1px solid black;
border-bottom: 1px solid black;
border-top-left-radius: 0px;
border-top-right-radius: 0px;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
}
nav {
position: relative;
text-align: center;
}
ul {
list-style-type: none;
}
#bikebanner {
position: relative;
left: 65px;
}
#bikebanner is the image id.
And the html goes like so:
<header>
<img src="images/bicyclebanner.jpg" id="bikebanner" alt="People riding bikes." title="Biking">
<h1 id="pagetitle">Cycling Tours</h1>
<nav>
<ul>
<li>About Us</li>
<li>Ask Us</li>
<li>Destinations</li>
<li>FAQ</li>
<li>Reviews</li>
<li>Seminars</li>
<li>Trip Prep</li>
</ul>
</nav>
</header>
Looking for a universal fit as I have other things with white space between them as well.
Thanks.
Try adding this to your css:
img{
display:block;
}
img is of type inline-block which adds a little space which is hard to find.
setting it to block should fix it.
what space you are talking about ?
Keep in mind h1 by default has white space around it
every h1-h6 tag has a margin top and bottom by default. i think if you overwrite this in your css you have what you want.
h1 {
margin: 0;
padding: 0;
}
look at this jsfiddle https://jsfiddle.net/zn7wtdLp/
This drives a lot of people crazy initially and the solution is not obvious, but images, lists and list items end up with a small space like this due to the font size inherited by or set on the img or ul. If you do nothing, the img and ul inherit the body font size (often 14px - 16px) with results in this 0.25rem (or 3.5px - 4px) space issue.
Nav Items
There are two popular solutions:
Float your list items left and make sure that you add a clearfix to your ul or its container, or
My preferred solution: Set the font-size on the ul to 0 and then the font-size on the li to 1rem (or whatever).
So my CSS would look something like this:
ul {
font-size: 0;
list-style: none;
margin: 0;
padding: 0;
}
li {
display: inline-block;
font-size: 1rem;
}
Images
If you set the image to display: block, this would kill the space below the image. This comes with its own caveats as well. For example, if you want it centered after you switch it to display: block;, you'll need to set the side margins to auto. Something like this:
header img {
display: block;
margin: 0 auto;
}
The problem is display:inline. This treats the elements like text, so if you have
<li>...</li>
<li>...</li>
you have the problem you mentioned, because the linebreaks cause a space.
Try to put your list elements like this:
<li>...</li><li>...</li>
For other solutions see here
I'm not happy with my code which uses a sprite image to show different images for each item in a list. The code can be seen here:
http://jsfiddle.net/spadez/JBuE6/45/
Before it was possible to click anywhere along the width of the column and it would select the list item because I used display: block.
However, because my sprite requires:
width: 0px;
It means I have to click on the actual list text in order to select it. Removing the width: 0px from the class .nav li achieves the affect I want. Can anyone show me how to do this, with some clean efficient code.
I'd take advantadge of CSS pseudo-elements, like ::before. You can do it in this way:
http://jsfiddle.net/franciscop/JBuE6/53/
HTML:
<nav>
<ul>
<li>
User
</li>
...
CSS:
nav a {
color: gray;
display: block;
line-height: 26x;
width: 100%;
}
nav li a::before {
display: inline-block;
content: "";
background:url('http://www.otlayi.com/web_images/content/free-doc-type-sprite-icons.jpg');
height: 20px;
width: 20px;
}
#user::before {
background-position: -10px -6px;
}
OLD ANSWER [alternative]:
I would change the padding left and the sprite to the <a>, so that you can click them also.
.nav li {
}
.nav li a {
color: gray;
display: block;
line-height: 26x;
padding-left: 30px;
background:url('http://www.otlayi.com/web_images/content/free-doc-type-sprite-icons.jpg');
height: 20px;
width: 0px;
}
http://jsfiddle.net/franciscop/JBuE6/50/
You should be putting your images on the links, not the list. Use display:block and padding-left: to provide enough room. In general, put all non-positional styling on the A-tag, not the LI.
Other than that, you are doing it the right way.
This question already has answers here:
Why is there an unexplainable gap between these inline-block div elements? [duplicate]
(6 answers)
Closed 8 years ago.
When I hover over the navigation links, the hover changes the background color and link color however there is a tiny sliver of a space between the right border and hover fill. How can have the hover fill reach the border? I have tried playing around with padding etc and moving the border to another element but nothing is working. I'm sure it's something so small.
HTML
<nav id="bottomNavWrap">
<nav id="bottomNav" class="fl">
<ul>
<li>汽车首页</li>
<li>购车必读</li>
<li>新车导购</li>
<li>新车排行榜</li>
<li>最新促销</li>
<li>维修问答</li>
<li class="last">车行搜索</li>
</ul>
</nav>
CSS
#bottomNavWrap {
height: 34px;
width: 900px;
margin-left: auto;
margin-right: auto;
}
#bottomNav {
display: inline-block;
}
#bottomNav ul {
color: #fff;
font-size: 120%;
font-weight: 500;
text-align: left;
}
#bottomNav ul li {
display: inline;
}
#bottomNav li a {
border-left: solid 1px #454b95;
width: 80px;
padding-bottom: 7px;
padding-top: 7px;
padding-left: 10px;
padding-right: 10px;
text-decoration: none;
color: #fff;
}
#bottomNav li a:hover {
color: #000;
background-color: #FFF;
}
#bottomNav li.last a {
border-right: solid 1px #454b95;
}
There are several methods to removing the white space. Some suggest having literally no white space in the code as follows:
<ul><li>First Link</li><li>Second Link</li></ul>
However, this may become difficult to read for the coder. Another suggestion is to use HTML comments between code gaps like so:
<ul>
<li></li><!--
--><li></li><!--
--><li></li><!--
--><li></li>
</ul>
Another alternative is to put the closing tag's final character right before the next tag, so that the white space is inside a tag:
<ul>
<li></li
><li></li
><li></li
><li></li>
</ul>
While these two methods are easier on the eyes than the first, coders who like to see everything neat would also have a problem with this. I am one such coder, and I prefer to use another method.
Add the following to your CSS:
*{font-size:small;}
.fl>ul{font-size:0;}
The first will set literally every single item's font-size attribute to small, and the second will set the font-size attribute of the <ul> within the .fl class to 0, but the > selector makes sure that only the ul, and none of its children (ie, the <li>) get affected by this. At a font size of 0, you don't see the white space on the page at all, and the gaps are removed.
You can play around with this method to get it the way you want it, but this is the quickest method to do it.
Ok this is simple thing. I firstly created a usual "Home" Button linking to the Home Page of the website, but the word "Home" looked too obvious. Hence I tried to insert an icon in place of that word, but its not fitting properly. I have tried some things in my css but its messing up the whole (used to create the navigation menu). The screenshot is attached. Please if someone can see whats wrong.
CSS:-
ul#menu
{
padding: 0px;
position: relative;
margin: 0;
}
ul#menu li
{
display: inline;
text-decoration:solid;
}
ul#menu li a
{
color: black;
background-color: #f5b45a;
padding: 10px 20px;
text-decoration: none;
line-height: 2.8em;
/*CSS3 properties*/
border-radius: 4px 4px 0 0;
}
HTML:-
<ul id="menu">
<li id="Home_Link"><img src="../../Image_Data/Home_Icon.ico" id="Home_Icon"/></li>
<li>MEN</li>
<li>WOMEN</li>
<li>KIDS</li>
<li>DESIGN!!</li>
With your current styles you will need to play around with the vertical-alignment and margins for the image, something like:
ul#menu li#Home_Link a img {
vertical-align: text-bottom;
margin-bottom: -5px;
}
As a side note, your use of ID's for elements is not recommended - use classes if needed. And reduce the specificity of your style declarations, e.g. .home-link img