I have implemented my webpage menu by inline li-s of ul. li has a colored border and contains a. Now onmousehover I need to change color of the text inside a and move it 2px up by not moving the li border. How can I do that?
The trick is to remove the top padding a bit and increase the bottom padding a bit to maintain the markup integrity.
I have set up a simple example of what you want. Check it on the fiddle here
The HTML:
<ul>
<li>Home</li>
</ul>
The CSS:
ul { width: 200px; margin: 20px; }
li { border-top: 2px #000 solid; padding: 5px; }
li a { padding: 5px; display: inline-block; }
li:hover a { padding: 3px 5px 7px 5px ; }
Add this to your CSS:
a:hover.jump {
color: [Insert whatever];
position: relative;
bottom: 2px;
}
And then add a class to your link
<ul>
<li>My Link Text</li>
</ul>
You can add background colors or whatever else you need on the hovering text. The cliche-named but pretty useful website CSS Ninja has a bunch of examples
Related
This question already has answers here:
Image inside div has extra space below the image
(10 answers)
Closed 6 years ago.
I can't figure out how to remove this space from my navbar and the picture..
The CSS code I have for the navbar and the image is:
a {
text-decoration: none;
color: white;
padding-right: 5px;
padding-left: 5px;
padding-top: 0;
}
a:hover {
color: black;
}
header {
background-color: #C0C0C0;
margin: 3px 60px 0;
}
li {
display: inline;
border-right: 1px solid black;
border-left: 1px solid black;
border-bottom: 1px solid black;
border-top-left-radius: 0px;
border-top-right-radius: 0px;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
}
nav {
position: relative;
text-align: center;
}
ul {
list-style-type: none;
}
#bikebanner {
position: relative;
left: 65px;
}
#bikebanner is the image id.
And the html goes like so:
<header>
<img src="images/bicyclebanner.jpg" id="bikebanner" alt="People riding bikes." title="Biking">
<h1 id="pagetitle">Cycling Tours</h1>
<nav>
<ul>
<li>About Us</li>
<li>Ask Us</li>
<li>Destinations</li>
<li>FAQ</li>
<li>Reviews</li>
<li>Seminars</li>
<li>Trip Prep</li>
</ul>
</nav>
</header>
Looking for a universal fit as I have other things with white space between them as well.
Thanks.
Try adding this to your css:
img{
display:block;
}
img is of type inline-block which adds a little space which is hard to find.
setting it to block should fix it.
what space you are talking about ?
Keep in mind h1 by default has white space around it
every h1-h6 tag has a margin top and bottom by default. i think if you overwrite this in your css you have what you want.
h1 {
margin: 0;
padding: 0;
}
look at this jsfiddle https://jsfiddle.net/zn7wtdLp/
This drives a lot of people crazy initially and the solution is not obvious, but images, lists and list items end up with a small space like this due to the font size inherited by or set on the img or ul. If you do nothing, the img and ul inherit the body font size (often 14px - 16px) with results in this 0.25rem (or 3.5px - 4px) space issue.
Nav Items
There are two popular solutions:
Float your list items left and make sure that you add a clearfix to your ul or its container, or
My preferred solution: Set the font-size on the ul to 0 and then the font-size on the li to 1rem (or whatever).
So my CSS would look something like this:
ul {
font-size: 0;
list-style: none;
margin: 0;
padding: 0;
}
li {
display: inline-block;
font-size: 1rem;
}
Images
If you set the image to display: block, this would kill the space below the image. This comes with its own caveats as well. For example, if you want it centered after you switch it to display: block;, you'll need to set the side margins to auto. Something like this:
header img {
display: block;
margin: 0 auto;
}
The problem is display:inline. This treats the elements like text, so if you have
<li>...</li>
<li>...</li>
you have the problem you mentioned, because the linebreaks cause a space.
Try to put your list elements like this:
<li>...</li><li>...</li>
For other solutions see here
I've created a basic nav with the following structure:
<div class="nav">
<ul>
<li>Home</li>
<li>Another Link</li>
<li>Another Link</li>
</ul>
</div>
The nav is a typical horizontal one with lis floated to the left. The thing is, the nav is dynamic per user, and the nav will never take up 100% the width of the screen.
However, I want the hovered/current nav link to have a red underline, and the rest of the nav across the remaining width of the site container to have a different colored bottom border.
Here's an image of what I want:
I can do this by attaching a background image of the default border color to the nav div, but I'm not sure how to do this with pure CSS.
Is this possible?
Thank you.
Edit: Here's the CSS (and please note that the CSS does not give me the intended effect):
.nav ul {
border-bottom: #DDD solid 5px;
list-style: none;
overflow: hidden;
}
.nav li {
float: left;
}
.nav a {
border-bottom: #FFF solid 5px;
display: block;
font-size: 16px;
font-weight: bold;
padding: 5px 20px;
text-decoration: none;
}
.nav_link:hover {
border-bottom: #F00 solid 5px;
color: #F00;
}
.current_page {
border-bottom: #F00 solid 5px;
color: #F00;
}
Here's a possible solution.
Set a top and bottom border on your nav element. Then with your a tags, set them with a bottom border matching the non-hover color and size. Set a negative margin-bottom on the a tag equal to the size of the nav border-bottom. And then change the border color of the a element on hover.
Here's a fiddle showing it: http://jsfiddle.net/FNLmf/
*Note: I did not use floats, I used inline-block. You can use floats, just be sure to clearfix your nav element.
I have a strange issue. Everything displays fine in both Chrome and IE, but not FireFox. See below:
The code for the navigation seen above is as follows
<nav>
<ul>
<li>Home</li>
<li>About Us</li>
<li>Products</li>
<li>Contact Us</li>
</ul>
</nav>
And the CSS
nav {
margin: 0 0 10px 0;
text-align: center;
background: #0054a6;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
nav li {
display: inline-block;
margin: 10px -4px 10px 0;
}
nav li a {
padding: 12px 75px;
text-decoration: none;
background: #0054a6;
color: #ffffff;
}
nav li a:hover {
background: #ffffff;
color: #000000;
}
Why is the container not the same height as it's contents? I'm not looking for a fix, just an explanation as to why it does this with my code.
You're seeing the effects of top and bottom padding on an inline element, your anchors. See this previous answer for some background. I've also made a little fiddle here which boils down your problem to something fairly obvious, I hope. (Basically, if the vertical padding exceeds the line-height on an inline element, the element can extend beyond the bounds of the container.)
So, your anchor elements are breaking out of their container, because they're inline, but with top and bottom padding set. To fix this (and as a bonus make their entire container clickable, rather than just the text) I'd turn them into blocks:
nav li a {
display: block; /* Fix breakout problem */
padding: 12px 75px;
text-decoration: none;
background: #0054a6;
color: #ffffff;
}
You should also wrap your li elements in a ul; they're not allowed to be children of the nav element.
(I'd probably consider getting rid of that wrapping div, too, and just targeting the nav element for your styling. I'm not sure it's adding anything. This JSFiddle is my final adjustment to your code.)
I'm a CSS-beginner. Basically I have the following html:
<ul>
<li>О нас</li>
<li>Галерея</li>
</ul>
I want to have a thick underline when hovering my a tags, but I use a custom font with big descenders, so if I use the common trick for this:
a:hover {
text-decoration: none;
border-bottom: 2px solid;
padding: 0;
margin: 0;
}
The underline is far below the base line: But I want it to look like this:
I tried to do it like this:
<ul>
<li class="over">О нас</li>
<li class="over">Галерея</li>
</ul>
.over{
font-size: 30px;
height:30px; // makes the text overlap this element
overflow:visible;
}
.over:hover {
border-bottom: 2px solid #ec6713;
}
But the width of the underline is the same for all the strings now:
Then I added display: inline-block; for .over. But I got this:
Then I changed inline-block to table, but the underline is again far below:
I ended up adding an extra span, so now I have:
<ul>
<li><span class="over">О нас</span></li>
<li><span class="over">Галерея</span></li>
</ul>
.over{
font-size: 30px;
height:30px; // makes the text overlap this element
overflow:visible;
display:inline-block;
}
.over:hover {
border-bottom: 2px solid #ec6713;
}
And this gives me finally the desired behaviour (the underline width is adjusted to the string width, and it's positioned close to the baseline). But is it a good practice to add an extra span for this purpose? Doesn't it look hacky?
A span is a meaningless tag, so it won't give extra 'weight' to your code. Therefor, imho, it is okay to use it (but better to avoid).
Alternatively you could do the following:
<ul>
<li>О нас</li>
<li>Галерея</li>
</ul>
a {
font-size: 30px;
text-decoration: none;
position: relative;
}
a:hover:after {
content: "";
border-bottom: 2px solid #ec6713;
position: absolute;
left: 0;
right: 0;
bottom: 3px;
}
And a DEMO.
Please note that the :after is overlapping the a. I've tried adding a z-index, but that didn't fix it.
OPTION 2
Add a background-image to your a.
I'm sure this is an easy one but I just can't figure it out. I have this HTML
(http://jsfiddle.net/qzr3X/)
<div id="wrapper">
<ul id="tabs">
<li>Dashboard</li>
<li>Second Tab</li>
<li>Third Tab</li>
</ul>
<div id="content"></div>
and CSS:
* {
margin: 0;
padding: 0;
}
ul#tabs {
list-style-type: none;
overflow: hidden;
}
ul#tabs li {
float: left;
}
ul#tabs li a {
z-index: 99;
display: block;
margin: 0 0.416em -6px 0;
padding: 1.66em 0.833em;
border: 1px solid lightgray;
background: lightgray;
border-bottom: none;
}
div#content {
background: lightgray;
height: 100px;
border: 1px solid black;
}
and I want to make it look like a navigation menu. However, as it's usual, I want to have the border of the content area covering all but the active tab (in this case, that would be "Dashboard"):
I already tried to increase z-index but it doesn't work. What am I missing?
Regards
I'm not 100% certain what it is your'e after.
From what I gather you want the border to appear around inactive tabs and have no border separating the active tab from the content. Is that correct?
This is basically don't by tricking the active tab into covering the content border with a border color which matches the content.
You can see a demo here
But you'll need to note the class which is added to the "dashboard" tab. It's that active class which covers the border at the bottom of the tab it's applied to.
I have added some jquery to dynamically alter the borders when you click tabs.