I need some help. I am trying to make a horizontal navigation using only CSS and HTML. I don't want to have the menu labels as images, in case they change in the future. I have most of it working, but the issue is when I try to include an icon (image) for one of the LI. I want the icon to swap out as well. Here's my code so far:
CSS:
body {
padding: 50px;
margin: 0;
}
ul {
padding: 5px;
margin: 10px 0;
list-style: none;
background-color: #fff;
float: left;
clear: left;
}
ul li {
float: left;
display: inline; /*For ignore double margin in IE6*/
margin: 0 9px;
}
ul li a {
text-decoration: none;
float:left;
color: #111;
cursor: pointer;
font: 14px/22px "Segoe UI", Arial, Helvetica, sans-serif;
}
ul li a span {
margin: 0px 10px 0px -10px;
padding: 1px 4px 1px 14px;
position: relative; /*To fix IE6 problem (not displaying)*/
float:left;
}
ul.green li a:hover {
color: #fff;
background: url(images/green.png) no-repeat top right;
}
ul.green li a:hover span {
background: url(images/green.png) no-repeat top left;
}
ul.green li.home {
color: #111;
background: url(images/home-idle.png) no-repeat;
background-position: -1px;
padding-left: 18px;
}
ul.green li.home a:hover {
background: url(images/home-over.png) no-repeat -10px;
}
HTML:
<ul class="green">
<li class="home"><span class="home">Home</span></li>
<li><span>Archives</span></li>
<li><span>Rooms & Resources</span></li>
<li><span>Productivity</span></li>
<li><span>Get Training</span></li>
<li><span>FAQs</span></li>
</ul>
Like I said, here's what I am attempting do have happen:
Use CSS for the navigation (aside from the icon & background)
Change the background to a green, rounded corner rectangle (I used a
.png image for the background)
Change the Home icon from blue to white
Please let me know if anyone can help.
Related
i want 2 of my buttons to be stacked (on top of each other). however, after using display: block, the buttons are still side by side. here are my html & css code!
does anyone know why? i had done my research and display:block is the way to code my buttons to make them on top of each other. would appreciate any help!
thank you in advance for everyone that have helped me! i'm really grateful. :)
.homepage_viewcurrentproject
{
font-family : Times New Roman;
font-size : 28px;
color : #FFFFFF;
color : rgb(255, 255, 255);
}
nav#button
{
float: left;
padding: 15px;
width: 150px;
height:350px;
margin-top: 15px;
margin-left: 65px;
text-align: center;
}
nav#button ul li
{
margin: 0; /*Setting margins and padding to 0 to remove browser default settings*/
padding: 0;
list-style-type: none; /*remove the bullets*/
color: white;
}
nav#button li a
{
display: block; /*to allow changes of- width,height, padding and margin around the link*/
width: 350px; /* length of button */
padding: 5px 10px; /*top and bottom:5px left and right:10px*/
background-color: #25374C;
text-decoration: none; /* remove the underline of hyperlink */
margin:10px;
padding: 30px 40px;
background: #25374C;
border-radius: 18px;
}
nav#button a:link{
color: white;
text-decoration: none;
}
nav#button a:visited{
color: white;
}
nav#button li a:hover, /*add a style to an element when you mouse over it*/
button li a:focus /*add a style to an element that has keyboard input focus*/
{
background-color: #2c425c;
color: #CCFFC5;
}
nav#button li a:active /*add a style to an element that is activated*/
{
background-color: #25374C;
}
<nav id="button" class="homepage_viewcurrentproject">
<ul>
<li>
Check out my Python Study
</li>
<li>
View latest project
</li>
</ul>
</nav>
enter image description here
You can use this method:
nav ul {
display: flex;
flex-direction: column;
}
I'm trying to position a website title (div) to the left of my navigation bar. I thought of creating another
<li><a>
element and put that as the website title, but I don't want it to have some of the propertise like font family and hover.
This is currently what I have:
and this is what I would like to achieve:
So in summary I would like to add a div to put my website title to the left of the navigation buttons.
#nav {
width: 100%;
height: 50px;
float: left;
margin: 0 0 1em 0;
padding: 0;
background-color: #3D3D3D;
}
#nav ul {
list-style: none;
width: 1000px;
margin: 0 auto;
padding: 0;
}
#nav li {
float: left;
}
#nav li a {
display: block;
padding: 8px 15px;
height: 50px;
text-decoration: none;
font-family: 'Quicksand', sans-serif;
font-size: 20px;
color: #FFFFFF;
}
#nav li a:hover {
color: #FF4343;
background-color: #FFFFFF;
}
<div id="nav">
<ul>
<li>Prev 1
</li>
<li>Prev 1
</li>
<li>Prev 1
</li>
</ul>
</div>
I think you've got too much in your CSS. Just changing the ul to:
display:inline;
and then setting some line-height does the trick.
See this fiddle: https://jsfiddle.net/x20mkx1n/5/ where I've taken out much of your CSS.
I would like add a border-bottom that displays when I hover over it with the mouse. I want it to override the border underneath so it looks like it changes colour. An example of this can be found here http://www.formaplex.com/services (in the nav bar)
Here is a jsfiddle https://jsfiddle.net/ey006ftg/
Also, a small question: does anyone know why there is a small gap in-between the the links (can be seen when hovering from link to link) and how to get rid of it.
Thanks
Just add this to your css:
nav a {
border-bottom: solid transparent 3px;
}
Here's a jsfiddle with the above code: https://jsfiddle.net/AndrewL32/ey006ftg/1/
You can use a negative margin to overlay the border below, as shown:
nav {
border-top: 1px solid grey;
border-bottom: 3px solid black;
width: 100%;
font-size:0;
}
nav ul {
width: 1056px;
margin: 0 auto;
text-align: center;
width: 1056px;
}
nav ul li {
display: inline-block;
width: 17%;
}
nav ul li a {
display: block;
padding: 21px 0;
font-size: 18px;
text-align: center;
letter-spacing: 1px;
text-transform: uppercase;
}
nav a:hover {
color: orange;
transition: 0.2s;
border-bottom: solid orange 3px;
margin-bottom: -10px;
}
a {
color: black;
text-decoration: none;
outline: 0;
}
<nav>
<ul>
<li>Home</li>
<li>Products</li>
<li>About</li>
<li>Careers</li>
<li>Contact</li>
</ul>
</nav>
As for fighting the inline gap, seeing as you defined a font-size later for the a tag, I would just add a font-size:0, which I added to nav in the above Snippet.
fiddle demo
Simply set your default border to transparent - change color on hover
nav ul li a {
display: block;
padding: 21px 0;
font-size: 18px;
text-align: center;
letter-spacing: 1px;
text-transform: uppercase;
border-bottom: solid transparent 3px; /* add this! */
transition:0.3s; /* or even this :) */
}
Try this fiddle
To set border-bottom the way you want, you have to add border to anchor tag like this:
nav ul li a {
display: block;
padding: 21px 0;
font-size: 18px;
text-align: center;
letter-spacing: 1px;
text-transform: uppercase;
border-bottom: 3px solid black;
}
and to make sure the space between menu items is gone use a little fix adding negative margin to your li tags inside menu like this:
nav ul li {
display: inline-block;
width: 17%;
margin-right: -4px;
}
I have this select that is behaving strange on IE9.
First of all links that should open wiki page not working only on IE9 browser and second problem is on hover, why when cursor pass over help and log off the icon is overridden by hover background color?
<ul id="main">
<li class="username" tabindex="1" > <a>USER</a>
<ul class="curent_buser">
<li class="help">Help</li>
<li class="logoff">LogOff</li>
</ul>
</li>
</ul>
CSS:
ul#main {
color: gray;
width: 120px;
border-left: 1px solid #f2f2f2;
border-right: 1px solid #f2f2f2;
border-top: 1px solid #f2f2f2;
list-style: none;
font-size: 12px;
letter-spacing: -1px;
font-weight: bold;
text-decoration: none;
height:30px;
background:green;
}
ul#main:hover {
opacity: 0.7;
text-decoration: none;
}
#main > li{
background: url('http://cdn1.iconfinder.com/data/icons/crystalproject/24x24/actions/1downarrow1.png') 100% 0 no-repeat;
outline:0;
padding:10px;
}
ul#main li ul {
display: none;
width: 116px;
background: transparent;
border-top: 1px solid #eaeaea;
padding: 2px;
list-style: none;
margin: 7px 0 0 -3px;
}
ul.curent_buser li a {
color: gray;;
cursor: pointer;
}
ul.curent_buser{
background:lime !important;
}
ul#main li ul li a {
display: block;
padding: 5px 0;
position: relative;
z-index: 5;
}
#main li:focus ul, #main li.username:active ul {
display: block;
}
.help{
background: url("http://cdn1.iconfinder.com/data/icons/musthave/16/Help.png") no-repeat 100% center ;
height: 25px;
margin-bottom: 2px;
border-bottom: 1px solid white;
}
.help:hover{
background: #f4f4f4;
}
.logoff{
background: url("http://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/16x16/on-off.png") no-repeat 100% center ;
height: 25px;
}
.logoff:hover{
background: #f4f4f4 ;
height: 25px;
}
.help a,.logoff a{
color:gray;
font-family: Museo700Regular,sans-serif;
letter-spacing: 0;
font-size: small;
}
Fiddle: http://jsfiddle.net/RwtHn/1455/
I can at least help you with the Icon issue. The issue is that you are overidding the background with a color. You can have a color or a background image. Not both. You will need to either have a different image in the background that is essentially the same but with different colors, do without the image when you hover or do without the color when you hover.
I'm sorry I can't be more helpful with the IE problem. I sincerely hate IE for things like this.
EDIT: This is something that you can do as mentioned in the comment below
.logoff:hover{
background: #f4f4f4 url("http://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/16x16/on-off.png");
height: 25px;
}
Thanks ANeves for this information. I learnt something here too.
OK, for the overridden icon issue credits goes for "ANeves",
but you may use below CSS for preventing extra code lines:
#main > li > ul > li:hover
{
background-color: #f4f4f4;
}
for the IE9 clicking issue, just add below CSS:
#main ul:hover
{
display: block;
}
and that's it
thanks to http://www.cssplay.co.uk/menus/cssplay-click-click.html
On hover you are overriding the background property. Since this property has both the colour and the image, you are overriding the image as well.
Set only the colour, then:
.help:hover{
background-color: #f4f4f4;
}
.logoff:hover{
background-color: #f4f4f4 ;
}
http://jsfiddle.net/RwtHn/1456/
So I'm working on a personal project and I'd like to add icon images to the left of each nav menu item. 3 things are bugging me;
I can't get the icons to sit left of the menu items
I can't get the icons to resize using the max-width property
I also need the icons to remain in place on hovering.
http://www.toastcafebar.com/nav/
<nav role="navigation">
<ul>
<a class="cinema" href="cinema.html">Movies</a>
<a class="tv" href="tv.html">T.V Shows</a>
</ul>
</nav>
...and the CSS
nav[role="navigation"] ul {
display: inline-block;
text-align: center;
margin-top: 50px;
}
nav[role="navigation"] ul a {
width: auto;
margin: 0 50px;
font-size: 2em;
padding: .5em;
width: auto;
}
a.cinema {
display: block;
background: url(images/pop.png) no-repeat left center;
padding-left: 75px;
}
.tv {
display: block;
background: url(images/tv.png) no-repeat;
padding-left: 100px;
}
nav a:link, a:visited {
font-weight: normal;
text-decoration: none;
outline: none;
color: #000;
}
nav a:hover {
color: #999;
background: #666;
-moz-border-radius: .5em;
border-radius: .55em;
padding: .25em;
}
Any suggestions?
Cheers in advance
Your markup is a bit funky. If you have a <ul> element, you should only have <li> children.
HTML:
<nav role="navigation">
<ul>
<li><a class="cinema" href="cinema.html">Movies</a></li>
<li><a class="tv" href="tv.html">T.V Shows</a></li>
</ul>
</nav>
CSS:
nav[role="navigation"] ul {
display: inline-block;
text-align: center;
margin-top: 50px; }
nav[role="navigation"] ul li {
font-size: 2em;
margin: 0 50px;
display: inline-block; }
nav[role="navigation"] ul a {
background-position: .5em 50%;
background-repeat: no-repeat;
text-decoration: none;
outline: none;
color: #000;
padding: .5em .5em .5em 75px;
display: block; }
nav[role="navigation"] ul li a.cinema { background-image: url(http://www.toastcafebar.com/nav/images/pop.png); }
nav[role="navigation"] ul li a.tv { background-image: url(http://www.toastcafebar.com/nav/images/tv.png); }
nav[role="navigation"] ul li a:hover {
color: #999;
background-color: #666;
-moz-border-radius: .5em;
border-radius: .55em; }
Preview: http://jsfiddle.net/Wexcode/bGNgr/
What you need to do is the <a> tags to display:block;, and have the icon as a background image, aligned left with no-repeat. Then make sure you apply padding-left on the <a>so the text doesn't overlap the image. For example:
a.cinema {
display: block;
background: url(/path/to/img.png) no-repeat left center;
padding-left: 90px;
}
Use that as a base! No need for max-width...
To get the icon to autoresize to fit the "button size" you could use the CSS3 property "background-size". But I think the best way is to resize the icons manually, some browsers does not support CSS3 properties correct yet.
http://www.css3.info/preview/background-size/
Use both classes as follows, you may reach to answer,
nav a:hover {
-moz-border-radius: 0.5em 0.5em 0.5em 0.5em;
background: url(images/pop.png) no-repeat scroll left center #666666;
color: #999999;
}
a.cinema {
display: block;
background: url(/path/to/img.png) no-repeat left center;
text-indent: 35px;
}