i am trying to build a basic hover menu with blank background images and text.
I have created two images with normal and hover state, and for the text the code is in a table with one row and multiple td's. This is an example of one:
<td align="center">
<div id=menu>
<ul style="padding:0px;">
<li>WHO WE ARE</li>
</ul>
</div>
I have a CSS running to control the hover color and background change.
#menu ul li{
font-family:Arial, Helvetica, sans-serif;
font-weight:700;
font-size:14px;
color:#666;
display:block;
background-image:url(resource/try.gif);
height:35px;
background-repeat:no-repeat;
width:186px;
}
#menu ul li a:hover{
font-family:Arial, Helvetica, sans-serif;
font-weight:700;
font-size:14px;
color:#FFF;
display:block;
background-image:url(resource/try2.gif);
height:35px;
background-repeat:no-repeat;
width:186px;
}
#menu ul li a:visited{
text-decoration:none;
color:#666;
}
The problem is that although all this works fine my text is aligned to the top and i am unable to change its position
I have tried every possible trick, worked with vertical-align property but it doesn't seem to work.
Could any one help me with this please?
Thanks in advance.
you need to add line-height for everything
I'd use padding-top.
http://www.w3schools.com/css/css_padding.asp
I see that you use "padding:0px" That locks your stuff to the upleft-corner.http://www.tizag.com/cssT/padding.php shows you how to use padding.
try using: padding-top:25px; padding-bottom:25px; padding-right:50px; padding-left:50px; you will see that it has moved.
Maybe you should work with the padding-top property of your li element, try adding something like padding-top: 10px. If it aligns with the bottom border then add the same value to the padding-bottom property of the element.
EDIT:
Try this way:
#menu ul li {
...your attributes...
vertical-align: middle;
line-height: 35px;
}
Related
I´m trying to put a border-bottom to my ul li a menu element that appears when menu item is clicked.
I already have this effect working, but my border-bottom appears a bit down and its like behind my nav menu.
Can someone give me a little help understanding what is happening?
My Html:
<nav id="menu">
<ul>
<li>Home</li>
<li>About</li>
<li>Contacts</li>
</ul>
</nav>
My CSS:
#menu
{
width:960px;
height:auto;
margin:0 auto 0 auto;
background:green;
}
#menu ul
{
list-style-type:none;
}
#menu ul li
{
height:46px;
line-height:46px;
font-family:'arial';
font-weight:300;
display:inline-block;
position:relative;
}
#menu ul li a
{
text-decoration:none;
color:#ccc;
display:block;
margin-right:5px;
height:46px;
line-height:46px;
padding:0 5px 0 5px;
font-size:20px;
}
// this boder is behind the menu!
#menu ul li.active a
{
color:#fff;
border-bottom:1px solid #000;
}
My jsfiddle:
http://jsfiddle.net/mibb/Y4HKF/
It's because you set the display:block for your a, so the border will be around the box (which has height set to 46px). Looks like you explicitly set padding-bottom to 0 and then it still should work (the bottom border should be close to the link text?) but not really, because you also set the line-height to be equal to the height (both are 46px), so the text is centered vertically and give a space between the baseline and the border-bottom.
To solve this problem, simply remove the line display: block; in your css for the a tag. You don't need that at all, removing will solve your problem:
#menu ul li a {
text-decoration:none;
color:#ccc;
margin-right:5px;
height:46px;
line-height:46px;
padding:0 5px 0 5px;
font-size:20px;
}
Just add the box-sizing:
#menu ul li.active a {
box-sizing: border-box;
}
you set the border to an anchor. an anchor will just take the space of whatever element its in/around,
so setting border to an anchor is like setting it to the <li> itself.
you should wrap your text in the anchor with a span, that takes the space of the text and set the border to the span.
here is an example:
http://jsfiddle.net/TheBanana/Y4HKF/5/
I'm not sure your JSFiddle represents your problem accurately, but I'll suggest a solution based on that anyway.
Your JSFiddle example doesn't show a border on "li.active a" at all (if you remove the green background on the ul element, you'll see that there is no border present.) The reason, at least in the JSFiddle example, is that the comment "// this boder is behind the menu!" was not recognized as a CSS comment, thus preventing the code following it from working. I actually could swear I've seen this work fine in some environments, but it definitely wasn't working in this case.
See this thread on Stack Overflow: Is it bad practice to comment out single lines of CSS with //?
Besides that, your code seems to work just fine (I assume your JavaScript works, so I added class="active" to one of your li tags.)
In the following code, the black border is showing just below the bottom of the ul. If you want to change where it shows up, you should only have to change the height of the a element.
The HTML:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<nav id="menu">
<ul>
<li class="active">Home</li>
<li>About</li>
<li>Contacts</li>
</ul>
</nav>
The CSS:
#menu
{
width:960px;
height:auto;
margin:0 auto 0 auto;
background:green;
}
#menu ul
{
list-style-type:none;
}
#menu ul li
{
height:46px;
line-height:46px;
font-family:'arial';
font-weight:300;
display:inline-block;
position:relative;
}
#menu ul li a
{
text-decoration:none;
color:#ccc;
display:block;
margin-right:5px;
height:46px;
line-height:46px;
padding:0 5px 0 5px;
font-size:20px;
}
/* this boder is behind the menu! */
#menu ul li.active a
{
color:#fff;
border-bottom:1px solid #000;
}
The JSFiddle:
http://jsfiddle.net/mibb/Y4HKF/
I am new to CSS3 and HTML5. I want to know how can I remove spacing between my navigation bar buttons.
My HTMLCode is:
<nav id="menu">
<ul>
<li>
GET HELICOPTER TOURS</li><li>
GET PARTY BUS</li><li>
GET BUS TICKET</li><li>
GET BUS TOURS</li>
</ul>
</nav>
And my CSS3 code is:
#menu li{
position:relative;
font: bold 14px Tahoma;
color: #FFFFFF;
float:right;
margin-right:100px;
margin-top:35px;
list-style:none;
}
I made a quick JSFiddle
ul li{
display:inline-block;
list-style:none;
margin-left:20px;
}
Two things you need to do:-
display:inline;
margin-right:10px;
margin can be adjusted according to your requirement
I have a link that I've tried to center using text-align:center and display:inline-block but it appears to be slightly off center. I've included pics and my code down below. Any help would be great, Thanks! The that is giving me trouble is under the class "button"
pic:
http://imgur.com/eqOUI3q
HTML:
<div class="headerContent">
<nav>
<ul class="navDown">
<li>Intro</li>
<li>Wind</li>
<li>Solar</li>
<li>Nuclear</li>
<li>End</li>
</ul>
<p class="menu"></p>
</nav>
Scroll
Scroll
<h1 class="title bigTitle">Going Green.</h1>
<p class="headerText">
A change is coming- and that change will be making the switch to green forms of energy. If you are interested in learning how you can help the environment and save money over time- you have come to the right place. It is time to Energize Change. <br><span class="emphasis">Click below to find the perfect green energy source for you and your family!</span>
</p>
<p class= "noElechouse"></p>
<div class="select">
<a class="button" href="links/calculator.html">Find Now</a>
</div>
</div>
CSS:
.headerContent {
position:relative;
width:55%;
margin:auto;
height:100%;
text-align:center;
}
.title {
font-family: 'Oxygen', sans-serif;
font-weight:700;
color:white;
font-size:90px;
padding-bottom:15px;
padding-top:15px;
}
.headerText {
position:absolute;
bottom:35%;
font-family: 'Oxygen', sans-serif;
font-weight:400;
font-size:18px;
line-height:27px;
width:90%;
margin:auto;
display:block;
left:0;
right:0;
}
.select {
text-align:center;
}
.button {
position:absolute;
display:inline-block;
font-family: 'Oxygen', sans-serif;
font-weight:normal;
font-size:30px;
color:white;
bottom:10px;
text-decoration:none;
padding: 10px 20px;
}
I could completely center it when using
nav ul{
padding: 0;
}
Your main issue is with the usage of inline-block, which actually adds about 4px worth of space to the left. To remove this, either add -4px to your margins for the element, or as brouxhaha suggested, you can set the font-size to zero for the parent, and then reset it to whatever value you desire for the .button elements.
If you want more information regarding the inline-block issue, check this question I answered a few months ago: CSS Inline-block Dimension Discrepancies
display: inline-block adds extra white-space to elements. There are some fixes for this (http://css-tricks.com/fighting-the-space-between-inline-block-elements/). I would recommend the "Set font size to 0 on parent" option for you since you don't have multiple items next to each other and you already have a font-size set on .button.
.select {
font-size: 0;
}
You also have position: absolute set on .button. Remove that as well. If you actually need it positioned absolutely, I would recommend positioning the containing div.
Here's a Demo
OR you could just remove display: inline-block from .button.
I am making a vertical list of links, but I don't want just plain text, I want a background. I have added this, and have set "padding-right" and added 25px. After this, I noticed that the sizes are different depending on text.
I realize that I could just edit it in HTML, but I also want it to change depending on if its being hovered or not.
Also, I tried setting the width, but that did not work.
Thanks in advance.
HTML
<ul id="sidelinksleft">
<li>Quick Start</li>
<li>Tag Helper</li>
<li>HTML</li>
<li>CSS</li>
<li>Photoshop</li>
</ul>
CSS
#sidelinksleft{
width:90%;
margin-left:auto;
margin-right:auto;;
height:25px;
position:relative;
clear: right;
float:left;
}
#sidelinksleft li{
position:relative;
top:2px;
padding-right:20px;
list-style-type: none;
}
#sidelinksleft li a{
color:#777777;
font-size:13px;
font-family: sans-serif;
text-decoration:none;
background-color:#B2FF99;
height:17px;
position:relative;
border:1px solid black;
padding-right:25px;
}
#sidelinksleft li a:hover{
color:#a3a3a3;
font-size:13px;
font-family: sans-serif;
text-decoration:none;
}
#sidelinksleft li a:active{
color:#00B2EE;
font-size:13px;
font-family: sans-serif;
text-decoration:none;
}
If you remove width:90% from #sidelinksleft and then add the following they will end up as the same size:
jsFiddle
#sidelinksleft li a {
width:100%;
display:block;
margin-bottom:2px;
}
So what this is doing is expanding all a elements out to fill 100% of its parent which in turn is width of the largest child.
FYI You need to apply it to the a element (not just li) if you want the entire area to trigger the link.
Currently, your background color and padding are specified for your a elements, which vary in size depending on their contents because they're inline. This is also why you can't change the width on the anchors - they're inline instead of block.
You'd probably be better off moving your background color and border styles to the li elements, and adding a little margin and width to spread them out. Example:
#sidelinksleft li a { /* remove border and bg declarations */ }
#sidelinksleft li {
background-color:#B2FF99;
border:1px solid black;
margin: 5px;
width: 40%;
}
what im trying to do is have a vertical list with a solid border on the left side, but with 1 or 2 px space between each li. I can't use margin-bottom because then the border would break. I'm ultimately trying to have a list with a solid color on it's left side(no spaces), and when i hover the individual li for it to actually go left, over the existing border.I'm not set about using borders, but i've tried to do it with a wrapper div and i just can't seem to get it right, so any suggestions are welcome :)Oh and the vertical list is gonna be changing in height, so just putting a div as a background without having the height to auto to the list element is a no go.Heres the working link http://jsfiddle.net/hDHDF/ and i have the following code
<div id="menu">
<ul class="menu">
<li class="openmaincategory"><span>###</span></li>
<ul class="categories">
<li class="subcategory"><span>###</span></li>
<li class="subcategory"><span>###</span></li>
<li class="subcategory"><span>###</span></li>
</ul>
<li class="maincategory"><span>###</span></li>
</ul>
</div>
and the corresponding css:
#menu{
position:absolute;
right:0px;
left:0px;
top:120px;
height:auto;
width:190px;
margin-top: 35px;
margin-left:67px;
}
.menu {
list-style-type:none;
padding-right:10px;
color:#6c6762;
}
.maincategory{
background-color:#ada397;
height:40px;
}
.openmaincategory{
height:40px;
background-color:#ada397;
}
.menu li a{
display:inline-block;
height:100%;
width:100%;
}
.menu li{
border-left:solid #6c6762 40px;
}
.menu li:hover{
border-left:solid #6c6762 20px;
padding-left:10px;
}
.menu span a{
color:#5b5856;
font-size:20px;
padding-left:4px;
padding-top:6px;
}
.menu a{
text-transform:none;
text-decoration:none;
color:#6c6762;
}
.subcategory {
background-color:#d7d1c9;
height:40px;
}
It sounds like you want to use padding rather than margin. I set up an example here based on your code.
Key parts are moving the subcategory class to the span from the li and adding the .last so you can play around with final spacing.
.categories li span{
background-color:#d7d1c9;
height:40px;
padding-top:2px;
}
.subcategory .last{
padding-bottom:2px;
}
Update with the padding for the anchor on the last li.
Have the border on the list itself, not on the list items.
I fixed it by adding the border to the list itself and making the hover effect margin-left:-20px.