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%;
}
Related
I have a ul with several list items inside made up of h3s and lis with the class id of "close".
I have a hover style that expands the letter spacing on the h3s, the problem is, the items with the close class expand as well. I've tried a few different things before adding the class, like nth child etc (all which are visible in the code). I would like the close classed lis to remain the same size when the h3s are expanded.
Any help is appreciated.
jsfiddle here:
https://jsfiddle.net/snowwhyte/7eLmarnp/7/#&togetherjs=Uq5j49dUG0
CSS:
a {text-decoration:none;
}
li {list-style:none;
}
}
#openClose {
position:absolute;
top:200px;
margin-top:55px;
}
#openClose li{
list-style-type:none;
display:block;
padding-right:-50px;
}
#openClose li:nth-child(2n+2){
margin:30px 0 100px 0;
background-color:#000;
border:2px #fff solid;
text-align:center;
letter-spacing:1rem;
padding:10px 0 10px 0;
}
#openClose li:nth-child(2n+2):hover{
letter-spacing:-0.1rem;
transition:.3s;
}
#openClose li a h3{
font-family:Helvetica, Gotham, Helvetica, Arial, sans-serif;
color:#73a6c2;
}
.close{
}
#openClose li a h3:hover{color:#fff;
text-shadow:2px 1px 2px #000;
transition:.2s;
letter-spacing:1rem;
}
a:visited { text-decoration: none; color:#B8CEDB; }
a:hover { text-decoration: none; color:#D7D8D8; }
a:focus { text-decoration: none; color:#fff;
}
HTML:
<section id="openClose">
<ul>
<li><h3>Tool Descriptions</h3></li>
<li class="close">Close</li>
<li><h3>Key tools</h3></li>
<li class="close">Close</li>
<li><a href="#wrapper3"><h3>Adjustment Layers & <br>
Blending modes</h3></a></li>
<li class="close">Close</li>
</ul></section>
The thing is that you don't have any element with a defined width, so every elements have the width of the largest element.
To do what you're trying to achive, you have plenty of solutions depending on your needs.
You could define a fix width on one of the parents, like the ul for example and add the white-space: nowrap property to the h3 (see the fiddle) :
ul {
width: 200px;
}
#openClose li a h3{
white-space: nowrap;
}
You could also set a fix width on your li with the close button (see the fiddle) :
#openClose li:nth-child(2n+2){
width: 200px;
}
Here is my try. Like you see i changed a little your code joining some things and clean a little, but the point is in the width property of .close
https://jsfiddle.net/7eLmarnp/12/
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/
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.
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;
}
I'm having trouble with cross-browser compatibility.
I have a simple menu (with all JS functionality removed for the purpose of this demonstration). The background of the links are meant to go orange when hovered over.
Firefox (V3.6.17): Works properly.
Chrome (V11.0.696.60): The Main Links expand with :hover, shifting all the other menu items. I think the padding or margins expand on hover
InternetExplorer (V8): The links show in blue despite defining a colour.
I think the problem would easily be recognised by someone who knows CSS well, but my knowledge isn't up to scratch. An explanation would be greatly appreciated!
Here is the code on JS Fiddle
Here is a portion of the CSS:
#mainlinks {
position:absolute;
display:block;
overflow:visible;
margin:0px;
padding:0px;
}
#mainlinks li {
display:block;
position:relative;
float: left;
cursor:pointer;
overflow:hidden;
padding:4px;
margin:45px 3px 2px 3px;
font-family:Arial, Helvetica, sans-serif;
color:#000;
font-size: 14px;
text-decoration:none;
list-style: none;
}
#mainlinks li :visited {
text-decoration:none;
color:#000;
padding:4px;
margin:45px 3px 2px 3px;
}
#mainlinks li :hover {
text-decoration:none;
color:#FFF;
padding:4px;
margin:45px 3px 2px 3px;
background-color:#f1592a;
}
try li:hover instead of li :hover, li:visited instead of li :visited
hope this works ^^
you should try applying the text specific styles (ie: color) to the 'a' tag instead of on the LI