I have problems with hover css.
Text in the class don't change the color when I hover on the picture but changes when traffic on the word.
I want to make the color change when the hover on the picture as well because the background of the picture is the same as the original font color.
HTML
<li class="category-location">
<div id="category-location-table">
<div class="category-location-row">
<div class="category-location-description">
<h3>description</h3>
</div>
</div>
</div>
</li>
CSS
ul.subcategories-location{
float :right;
list-style: none;
margin: 0;
}
ul.subcategories-location li{
float :right;
display: inline-block;
margin-left: 10px;
margin-bottom: 30px;
width: 230px;
vertical-align: top;
}
ul.subcategories-location li h3 a{
font-family: #fancyFont;
font-size: 17px;
font-weight: normal;
}
#category-location-table{
color:#F7A51E;
margin-left: 65px;
background: url('design/img/category-itmes-1.png') no-repeat;
height:60px;
width:230px;
display: table;
display: table-row;
float :right;
}
#category-location-table a{
color:#A20734;
}
#category-location-table a:hover{
color:#fff;
}
#category-location-table :hover{
background: url('design/img/category-itmes-2.png') no-repeat;
height:60px;
width:230px;
color:#fff;
}
I hope this makes sense and somebody will be able to help.
Is it something like this?
#category-location-table:hover .category-location-description a {
color: #fff;
}
There's a typo on the last line. #category-location-table:hover not #category-location--table :hover.
Related
So here's my code:
.nav-item {
display: inline;
color: white;
padding: 30px 10px;
font-style: bold;
font-family: sans-serif;
font-size: 20px;
width: 1000px;
margin: 0 auto;
}
.nav-container {
background-color: black;
}
<nav class="nav-container">
<span class="nav-item">ABOUT ME</span>
<span class="nav-item">CONTACT ME</span>
<span class="nav-item">PORTFOLIO</span>
</nav>
I want to make my navigation bar centered in the middle of the page, with margin: auto, but for some reason, it doesn't work. When I set display: block, it works, but doesn't display in a line. Could someone tell me why this is?
Thanks a ton...
Inline elements behave just like text, so you need to put the alignment on the parent.
In your CSS, remove the margin:0 auto; and add text-align: center; on .nav-container:
.nav-item{
display:inline;
color:white;
padding:30px 10px;
font-style:bold;
font-family:sans-serif;
font-size:20px;
width:1000px;
}
.nav-container {
text-align: center;
}
http://jsfiddle.net/5v7Lppkf/
For inline elements like this, use text-align:center on the parent element, so add to your css:
.nav-container { text-align:center }
Just add the following rule to your CSS:
.nav-container { text-align: center; }
This should do all the magic.
I would like to know what is the 'correct' way to change my current menu, that looks like this:
to this:
The problem I have is making the buttons into these blocks that would change background on hover, and the vertical alignment, do I use padding? blocks? table? Help :S
(The color doesn't matter)
CSS:
.menu{
clear: both;
background-image:url(meniuBG.jpg);
height:55px;
line-height: 10px;
}
.menu a{
text-align: center;
text-decoration: none;
font-style:italic;
color:rgb(193,193,193);
margin-right: 25px;
margin-left: 25px;
}
HTML (for no apparent reason):
<div class="meniu">
NAUJIENOS
KREPSINIO VADOVAS
TRENIRUOTES
IDOMYBES
GALERIJA
APIE MUS
</div>
.menu {
...
height:55px;
/* line-height: 10px; delete this */
}
.menu a {
...
line-height: 55px; /* add this */
}
Because you want to center vertically your <a> , there is many way to do this you can search on google there's many tuto.
the solution i give you is to make line-height equal to the heigh (55px). this solution work when your text is just on one line.
and for the hover just make <a> display: inline-block; and replace margin with padding
.menu a{
text-align: center;
text-decoration: none;
font-style: italic;
color: rgb(193,193,193);
/* margin-right: 25px; */
/* margin-left: 25px; */
padding: 0 25px;
line-height: 55px;
display: inline-block;
}
here's a FIDDLE
try to add this
.menu a{
text-align: center;
text-decoration: none;
font-style:italic;
color:rgb(193,193,193);
margin-right: 25px;
margin-left: 25px;
line-height:55px;
display: inline-block;
}
.menu a:hover{
background-color: #E7550C;
}
I have some CSS buttons that are bigger when hovered over. I have also made the text bigger however I would like to move the text down a few px without messing with the background image being used.
help?
my code looks like this:
<div id="nav">
Home
<a id="headrush">Beer Bongs</a>
<a id="thabto">Novelty</a>
</div>
#nav a {
background: url(Images/Button.png);
height: 28px;
width: 130px;
font-family: "Book Antiqua";
font-size: 12px;
text-align: center;
vertical-align: bottom;
color: #C60;
text-decoration: none;
background-position: center;
margin: auto;
display: block;
position: relative;
}
#nav a:hover {
background: url(Images/Button%20Hover.png);
height: 34px;
width: 140px;
font-family: "Book Antiqua";
font-size: 16px;
text-align: center;
color: #C60;
text-decoration: none;
margin: -3px;
z-index: 2;
}
#nav a:active {
background: url(Images/Button%20Hover.png);
height: 34px;
width: 140px;
font-family: "Book Antiqua";
font-size: 14px;
text-align: center;
color: #862902;
text-decoration: none;
margin: 0 -3px;
z-index: 2;
}
Use the line-height CSS property.
Use the following style for link:
#nav a:link {
background: #ff00ff url(Images/Button.png);
height:28px;
width:130px;
font-family:"Book Antiqua";
font-size:12px;
text-align:center;
vertical-align:bottom;
color:#C60;
text-decoration:none;
background-position:center;
display:block;
position:relative;
}
In :hover and :visited define only what you want to change (background, font-size, etc.).
#nav a:hover {
background: #f000f0 url(Images/Button%20Hover.png);
}
In your code links have different size:
a - height:28px; width:130px;,
a:hover height:34px; width:140px;,
a:visited - height:34px; width:140px;),
That's why you getting different size, position (in a you use margin:auto - 0px), but for a:hover margin has change, so your link also change position.
line-height can work depending on your situation.
Problem with line-height can be if you have a background color and then it will also expand.
For something I was doing, I'm nesting some divs
I used position:relative; top:20px;
<div class="col-lg-11">
<div style="position:relative; top:20px;">CR</div>
</div>
This inline style is ONLY TEMPORARY
If you want to move the text down, use padding-top.
Vertical align does the trick
.text-to-align {
vertical-align: bottom;
}
I have a CSS/HTML list that is using an image as the background and a different image when the mouse is hovered over.
The only problem is that the hover image doesn't line up correctly and has a small but noticable gap.
I have placed a link to a test version to help you to see exactly what I mean.
I am also using Blueprint CSS as a CSS framework.
The source code is below.
As always, thanks in advance
#navbar{
background-image: url('../images/navbar.png');
color: white;
font: 20px arial,sans-serif;
height: 45px;
}
#navbar a{
color: white;
text-decoration: none;
}
#navbar ul{
list-style: none;
margin:0;
padding:0;
}
#navbar li{
border-right: solid 1px white;
display: inline-block;
height: 45px;
line-height: 45px;
padding-bottom: 1px;
padding-left: 10px;
padding-right: 10px;
padding-top: 1px;
}
#navbar li:hover{
background-image: url('../images/navbar-selected.png');
background-repeat: repeat-x;
}
<div class="container" id="container">
<div class="prepend-top">
<div class="clear" id="navbar">
<ul>
<li>Home</li>
<li>Start HaardHout Vergikelleen</li>
<li>In Jouw Regio</li>
</ul>
</div>
</div>
</div>
Set float: left; for your li elements.
#navbar li { float:left; }
I have a simple HTML/CSS list that is displayed inline. I am using a background image for the list and another variant for the onhover command of that list.
The on hover background image does not seem to sit correctly. It is displayed slightly too big and seems to have some default padding,
What is the best way to control the size, padding and margin of the background-image for the onhover command in CSS?
Thanks in advance
#navbar{
background-image: url('../images/navbar.png');
color: white;
font: 20px arial,sans-serif;
height: 45px;
}
#navbar a{
color: white;
text-decoration: none;
}
#navbar ul{
list-style: none;
margin:0;
padding:0;
}
#navbar li{
border-right: solid 1px white;
display: inline-block;
height: 45px;
line-height: 45px;
padding: 1px 10px 1px 10px;
}
#navbar li:hover{
background-image: url('../images/navbar-selected.png');
}
<div class="clear" id="navbar">
<ul>
<li>Home</li>
<li>Stock</li>
<li>Overview</li>
</ul>
</div>
You could do it like this:
#navbar li:hover{
background-image: url('../images/navbar-selected.png');
background-size: 50%;
background-position: center;
}