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;
}
Related
h1{
text-align:center;
font-family: 'Nosifer', cursive;
font-size:35px;
}
nav {
border-top: 5px solid black;
padding:5px 5px;
text-align:center;
}
nav a:link,a:visited {
border-radius: 0 0 15px 15px;
padding:0px 15px;
}
nav a {
float: left;
font-weight: bold;
color: #000;
margin: 0 5px;
background-color: #131313;
font-family: 'Nosifer', cursive;
text-decoration: none;
font-size: 20px;
color:red;
}
nav a:hover {
background-color: #D10000;
color: black;
padding-top: 12px;
padding-bottom: 10px;
}
.active{
background-color: #D10000;
color: black;
padding-top: 12px;
padding-bottom: 10px;
}
body{
background-color: #ffe6e6;
}
<nav>
HOME
COMPUTER PARTS
BUILD A COMPUTER
MEDIA
GO TO MAIN
</nav>
Can anyone please help me. I tried to use align="center", text-align:center;
and I tried many other things but for some reason, it's not centering my nav bar in the center of my web page. Also when I tried to display an image at the bottom of the nav bar and center it, it does not center.
Without seeing your markup, it's hard to say. But probably because of float: left on nav a. Remove that from nav a, and add display: inline-block;.
You're not even positioning anything...
Use the properties top: value, left: value, right: value, and bottom: value to position your navigation bar. You can use these properties in combination with transform: translate(X, Y).
text-align will only align text within an element, if there is indeed text. If there isn't any text, it won't do anything.
You need remove 'float: left' from 'nav a' selector and re-write code following way:
nav a {
display: inline-block;
font-weight: bold;
color: #000;
margin: 0 5px;
background-color: #131313;
font-family: 'Nosifer', cursive;
text-decoration: none;
font-size: 20px;
color:red;
}
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.
This is my first ever HTML project and I'm trying to clone the Google Nigeria homepage. I'm about 90% completed, but I have issues that I've tried fixing, to no avail.
The 'app logo' and "Sign in" on the navigation is further up than the other items. I tried using margin-top on those nth items, but it affects the entire nav items.
Here: jsfiddle.net/mux9xbam/
Thanks.
remove float:left; from .first li a{}
write
.first li a {
text-decoration: none;
color: #000;
font-size: .8em;
margin-right: 15px;
margin-top: 13px;
padding: 1px;
}
instead of
.first li a {
text-decoration: none;
color: #000;
font-size: .8em;
margin-right: 15px;
margin-top: 13px;
padding: 1px;
float:left;
}
and adjust margin padding of <ul>
use
img
{
vertical-align: middle;
}
to align image middle.
jsfiddle
I have a side menu on a website. It's inside a floated container named #left_menu, which contains the ul with li elements.
The problem is, I would like the li elements to have their own generated width instead of inheriting it from #left_menu, which they seem to do.
They have to be text-aligned to the right and only as wide as they need to be.
HTML
<div class="left_menu">
<ul>
<li>Derp</li>
<li>Derp</li>
<li>Derp</li>
<li>Derp</li>
</ul>
</div>
CSS
.left_menu{
float: left;
width: 300px;
margin-left: 20px;
line-height: 30px;
padding-top: 3px;
}
.left_menu > ul li{
color: #4c4c4c;
text-align: right;
font-size: 12px;
display: block;
padding: 5px;
}
.left_menu li:hover{
color: white;
background-color: #0072ff;
border-radius: 5px;
}
JSFiddle here.
Float left and then clear left and you should get what (I think) you're looking for:
.left_menu > ul li{
color: #4c4c4c;
text-align: right;
font-size: 12px;
display: block;
padding: 5px;
float:left;
clear:left;
}
JSFiddle
Or float:right and clear:right, depending on which side you are looking to align the buttons.
JSFiddle
Just float your ul left:
.left_menu > ul{
float: left;
}
http://jsfiddle.net/mUP7n/4/
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;
}