I am trying to work on this really simple hover effect but I am not understanding where I am going wrong.The only thing I want to do is change the color of the text to black on hover. My code is as follows:
This is the css for a left menu
/* === Left Menu === */
.leftmenu{
width:200px;
text-align:center;
}
.leftmenu ul
{
list-style-type:none;
width:200px;
margin:0;
padding:0;
}
.leftmenu ul li
{
width:200px;
text-align:center;
border-bottom: 1px solid #005680;
}
.leftmenu ul li a
{
display:block;
text-decoration:none;
background-color:#fff;
color: #999;
font-family:Arial, Helvetica, sans-serif;
font-size:16px;
padding:8px;
cursor:pointer;
}
.leftmenu a:hover
{
display:block;
colour:#000;
display:inline;
}
This is the html code:
<div class="leftmenu" align="center">
<ul>
<li>About Us</li>
<li>Nutrition Facts</li>
<li>Trade With Us</li>
<li>Get In Touch</li>
</ul>
</div>
Syntax Error : colour:#000; should be color, also you need to get rid of display: inline; property
Demo
Remove display:inline and color spelling is wrong
.leftmenu a:hover
{
display:block;
color:#000;
}
DEMO
Related
I am trying to center my nav bar. I checked my sites but nothing works
and I'm completely stumped as to why it won't center, here is my navigation bar HTML that I want to center:
<div class='nav'>
<ul class='menu' id='menu'>
<li><a expr:href='data:blog.homepageUrl'>home</a></li>
<li><a class='drop-ctg' href='#'>PORTFOLIO</a>
<ul>
<li><a href='http://effectsforshare.blogspot.com/p/trailer.html'>TRAILER</a></li>
<li><a href='http://effectsforshare.blogspot.com/p/motion-graphics.html'>MOTION GRAPHICS</a></li>
<li><a href='http://effectsforshare.blogspot.com/p/trapcode-particular.html'>TRAPCODE PARTICULAR</a></li>
</ul>
</li>
<li><a href='http://effectsforshare.blogspot.com/'>TEMPLATES</a></li>
<li><a href='http://effectsforshare.blogspot.com/p/my-blog.html'>MY BLOG</a></li>
<li><a href='http://effectsforshare.blogspot.com/p/contact-me.html'>CONTACT ME</a></li>
</ul>
</div>
and here is the CSS
*{
margin:0;
padding:0;
outline:0;
}
.nav {
width:950px;
height:auto;
border-bottom:1px solid #eee;
margin:10px auto 5px;
display:inline-block;
}
.menu {
width:auto;
list-style:none;
font:$pagenavifont;
text-align:center;
margin:0 auto;
}
.menu a {
float:left;
color:#999;
text-decoration:none;
text-transform:uppercase;
width:auto;
line-height:36px;
padding:0 20px;
}
.menu a:hover,li.menuhover a{
color:#111;
}
.menu li {
position:relative;
float:left;
width:auto;
}
.menu li:last-child {
background:none;
}
.menu ul{
display:none;
position:absolute;
top:36px;
left:0;
background:#fbfbfb;
display:none;
list-style:none;
}
.menu ul li{
float:none;
border-top:1px solid #e3e3e3;
border-right:1px solid #e3e3e3;
border-left:1px solid #e3e3e3;
width:auto;
background:none;
}
.menu ul li:last-child {
border-bottom:1px solid #e3e3e3
}
.menu ul li a{
float:none;
display:block;
background:none;
line-height:36px;
min-width:137px;
width:auto;
text-align:left;
padding-left:10px;
color:#444;
}
.menu ul li a:hover{
background:#fdfdfd;
color:#777;
}
I would give you a link to the page but it's being done in Dreamweaver and is not up yet. The logobar.jpg is the logo for the webpage. I love how it looks, but it needs to be centered and not be cut off or taken to the next line when I shrink my screensize.
I tried each of float: right, float: left, and float: none on almost all of the classes; text-align: center on each class on the html side; I have tried align=center on each class; display: inline, inline-block on ul and li classes.
Thank you for your help!
On your .menu class, you do have text-align:center set. We can certainly use that to center the child nodes.
So within your .menu li css property, add display:inline-block and remove the floats. This will center your list items.
See the fiddle: http://jsfiddle.net/RGREA/
<style>
div.nav{margin: 3px auto;}
</style>
I am relatively new to CSS and I'm having trouble getting my navigation bar aligned horizontally. I tried the display:inline; function with no success. When using the float:left function, I get all the li aligned horizontally, but in this case, I cannot center it on the page. Also the margin:0 auto; does not do it in this case.
The navigation bar is created via an ul inside a DIV, which is also contained inside a "wrapper div".
Is the problem linked to the various ID selectors used and the nesting of the various elements?
Please find the jsfiddle below for visualisation:
JsFiddle
Any help would be greatly appreciated :)
Thanks, Danny
HTML
<div id="wrapper">
<div id="navigation">
<ul>
<li>HOME</li>
</ul>
<ul>
<li>GALLERY</li>
<li class="sublinks">
PORTRAITURE
NATURE
</li>
</ul>
<ul>
<li>BLOG</li>
</ul>
<ul>
<li>ABOUT</li>
</ul>
<ul>
<li>MODEL RELEASE</li>
</ul>
<ul>
<li>CONTACT</li>
</ul>
</div>
</div>
CSS
ul {
list-style:none;
margin:0px 5px;}
ul li {
display:inline;}
ul li a {
color:#ffffff;
background:#09F;
padding:0px 0px;
margin:0 auto;
font-weight:bold;
font-size:14px;
font-family:'sans open', Arial, Helvetica, sans-serif;
text-decoration:none;
display:block;
width:auto;
height:40px;
line-height:15px;
text-align:center;
-webkit-border-radius:5px;
-moz-border-radius:5px;
border: 1px solid #560E00;}
ul li a:hover {
color:#cccccc;
background:#06F;
font-weight:bold;
text-decoration:none;
display:block;
width:auto;
text-align:center;
-webkit-border-radius:5px;
-moz-border-radius:5px;
border: 1px solid #000000;}
ul li.sublinks a {
color:#000000;
background:#f6f6f6;
border-bottom:1px solid #cccccc;
font-weight:normal;
text-decoration:none;
display:block;
width:100px;
text-align:center;
margin-top:2px;}
ul li.sublinks a:hover {
color:#000000;
background:#FFEFC6;
font-weight:normal;
text-decoration:none;
display:block;
width:100px;
text-align:center;}
ul li.sublinks {
display:none;}
Your ul needs inline-block and the menu wrapper needs text-align:center plus some width to make menu center regardless of an ammount of menu items.
I've updated your fiddle here: jsFiddle
You just need to make the the ul and ul li display inline-block. I also added text-align: center; to the #navigation element.
Here is the working code example on JsFiddle: http://jsfiddle.net/hhjfypmt/
You could do as said above, but if you also want to align it to the left/right, you can add a float:right (or left) instead, to your ul li:
ul {
list-style:none;
margin:0px 0px;
}
ul li {
display:inline-block;
float:left;
}
ul li a {
color:#ffffff;
background:#09F;
padding:0px 0px;
margin:0 auto;
font-weight:bold;
font-size:14px;
font-family:'sans open', Arial, Helvetica, sans-serif;
text-decoration:none;
width:auto;
height:40px;
line-height:15px;
text-align:center;
-webkit-border-radius:5px;
-moz-border-radius:5px;
border: 1px solid #560E00;
}
ul li a:hover {
color:#cccccc;
background:#06F;
font-weight:bold;
text-decoration:none;
width:auto;
text-align:center;
-webkit-border-radius:5px;
-moz-border-radius:5px;
border: 1px solid #000000;
}
ul li.sublinks a {
color:#000000;
background:#f6f6f6;
border-bottom:1px solid #cccccc;
font-weight:normal;
text-decoration:none;
width:100px;
text-align:center;
margin-top:2px;
}
ul li.sublinks a:hover {
color:#000000;
background:#FFEFC6;
font-weight:normal;
text-decoration:none;
width:100px;
text-align:center;
}
ul li.sublinks {
display:none;
}
/* CSS For Dropdown Menu End */
<div id="wrapper">
<div id="navigation">
<ul>
<li>HOME</li>
</ul>
<ul>
<li>GALLERY</li>
<li class="sublinks">
PORTRAITURE
NATURE
</li>
</ul>
<ul>
<li>BLOG</li>
</ul>
<ul>
<li>ABOUT</li>
</ul>
<ul>
<li>MODEL RELEASE</li>
</ul>
<ul>
<li>CONTACT</li>
</ul>
</div>
</div>
I'am trying to make this in css. Trying to make this navigation bar. Any help would be great.
This is what iam trying to do:
So the first pic is how it should look like when the user enter the website. Then if they hover over the any of the tabs it should just change color. Any help on trying to make this would be great. I tried this but wont work.
HTML:
<div class="horizontal">
<ul>
<li>Home</li>
<li>Register</li>
<li>Rules</li>
</ul>
</div>
Just need to see what the css would look like. Thanks again
EDIT what i have done as people want 2 see:
div.horizontal
{
width:809px;
height:63px;
position:relative;
top: -1046px;
left: 104px;
}
div.horizontal ul
{
list-style-type:none;
margin:0;
padding:0;
}
div.horizontal li
{
display: inline-block;
margin-left: 5px;
}
div.horizontal a
{
display:block;
width:809px;
}
div.horizontal a:link,div.horizontal a:visited
{
font-weight:bold;
color:#FFFFFF;
background-color:#000000;
text-align:center;
padding:4px;
text-decoration:none;
text-transform:uppercase;
}
div.horizontal a:hover,div.horizontal a:active
{
background-color:#999999;
}
Like i said this is not right but this is all i can do atm. Thanks
Using your HTML, you can do something like this:
CSS
ul{
list-style:none;
}
li{
float:left;
width:100px;
height:50px;
background:black;
border:2px solid gray;
text-align:center;
}
a{
color:white;
text-decoration:none;
font-size:24px;
font-weight:bold;
line-height:50px;
font-style:italic
}
li:hover{
background:gray;
}
JSFiddle.
Just change the colors.
I have made a drop down menu for a website I'm creating, it looks nice I think, though there is this one px space between the horizontal nav bar and the vertical drop down bars. When you hover your mouse on the space the vertical menu disappears again and since you sometimes put your mouse on the one px space it's very confusing for the users.
This is my html;
<div class="nav">
<div class="links">
<ul id="dropdown">
<li class="currentpage">
Tetterode
<ul>
<li>Project</li>
<li>Promenade</li>
<li>Brochure</li>
<li>Impressies</li>
</ul>
</li>
<li>
Woningen
<ul>
<li>Oplevering</li>
<li>Impressies</li>
<li>Kavelkaart</li>
</ul>
</li>
<li>
Locatie
<ul>
<li>Ligging</li>
<li>Routplanner</li>
<li>Situatie</li>
</ul>
</li>
<li>
Financiering
<ul>
<li>Hypotheken</li>
<li>Fiscale mogelijkheden</li>
</ul>
</li>
<li>
Contact
<ul>
<li>Makelaars</li>
<li>Gegevens</li>
</ul>
</li>
</ul>
</div>
</div>
And this is my css;
.nav{
width: 100%;
height:50px;
background-image:url("bg.jpg");
background-repeat:repeat;
text-align:center;
padding-bottom:0px;
margin-bottom:0px;
}
.links ul li {
list-style-type: none;
padding-right: 17px;
height:50px;
position:relative;
display:inline-block;
padding-top:0px;
line-height:50px;
padding-left:17px;
text-shadow: 3px 3px 2px rgba(0, 0, 0, 0.50);
margin-top:0px;
}
.links ul li:hover {
height:50px;
background-color:#b2071a;
display:inline-block;
margin:0px;
}
.links a {
text-transform:uppercase;
font-family:helvetica;
font-size:18px;
color:#fff;
display:inline-block;
font-size:20px;
text-decoration:none;
}
.links a:hover {
background-color:transparent;
}
#dropdown ul{
background-color:#b2071a;
list-style:none;
position:absolute;
left:-9999px;
z-index:20;
font-size:16px;
padding-top:0px;
margin-top:0px;
}
#dropdown ul li{
float:none;
}
#dropdown ul a{
white-space:nowrap;
font-size:16px;
}
#dropdown li:hover ul{
left:0;
}
#dropdown li:hover a{
text-decoration:underline;
}
#dropdown li:hover ul a{
text-decoration:none;
}
#dropdown li:hover ul li a:hover{
color:#000;
}
.currentpage{
height:50px;
background-color:#b2071a;
display:inline-block;
}
I don't see any margin/padding that causes the 1 px space and I don't know how to solve this. I hope someone can help me, thank you.
Your code and style sheet are pretty good, easy to read and follow.
A solution is to tweak the top margin of #dropdown ul to -2px as follows:
#dropdown ul{
background-color:#b2071a;
list-style:none;
position:absolute;
left:-9999px;
z-index:20;
font-size:16px;
padding-top:0px;
margin-top:-2px;
}
Negative margins are allowed and can be quite useful. The problem you encountered is quite common in pull-down menus and this fix is a typical one.
For reference, see the fiddle: http://jsfiddle.net/audetwebdesign/Ygn6X/
Roll over the text and the blue block below moves along the blue line. If I do it via position relative and set the blue block to top 20px, it also moves the text down.
Is there a way I can do this purely in CSS, or should I use a background image with the top half set as a transparent gif and the bottom blue?
The code I've tried so far is:
#menu ul {
list-style:none;
margin:0;
padding:10px;
text-align:center;
}
#menu ul li {
display:block;
float:left;
list-style:none;
margin-right: 40px;
font-family: Arial, Helvetica, sans-serif;
color: #FFF;
font-size: 14px;
padding-top: 5px;
padding-bottom: 5px;
height: 39px;
}
#menu ul li a {
display:block;
margin:0px;
padding:0px;
color:#FFF;
text-decoration:none;
font-family: Arial, Helvetica, sans-serif;
margin-right: 5px;
margin-left: 5px;
padding-left: 10px;
padding-right: 10px;
}
#menu ul li a:hover {
color:#fff;
margin-bottom:5px;
padding-bottom:5px;
}
#menu ul li a.active,
#menu ul li a.active:hover {
color:#fff;
background-color: #0488C5;
font-weight:bold;
}
I am still learning so excuse any mistakes!
Click here for a demo.
<ul>
<li>Home</li>
<li>About</li>
<li>Products</li>
</ul>
ul {
width: 100%;
border-bottom: 3px solid blue;
overflow: hidden;
}
li {
float: left;
margin: 0 20px 0 20px;
}
li a {
border-bottom: 20px solid #fff;
display: block;
}
li a:hover, .active {
border-bottom: 20px solid blue;
}
You can then use the hover state for another class called something like "active" that you can apply when on that page.
You should be able to tweak this example to suit your needs.
You don't need any images. CSS is more than capable of doing this for you.
....................................
Live demo
Hi now this is possible used to after in css
as a simple example is this
HTML
<ul>
<li>Home</li>
<li>Home</li>
<li>Home</li>
<li>Home</li>
<li>Home</li>
<li>Home</li>
</ul>
Css
ul{
list-style:none;
border-bottom:solid 10px blue;
}
li{
display:inline-block;
vertical-align:top;
background:red;
}
li a{
text-decoration:none;
display:inline-block;
vertical-align:top;
position:relative;
padding-left:10px;
padding-right:10px;
padding-bottom:10px;
}
li:hover a:after{
content:'';
position:absolute;
left:0;
right:0;
bottom:0;
height:10px;
background:blue;
}
LIve demo
Place three anchors in an unordered list and have them displayed in-line by setting the list display to none an floating the list items. Further add an empty span to each anchor which you can style with the :hover pseudo selector.
Learn CSS, its fun!