I have a menu that needs a dotted border on hover, is it possible to stop it nudging the list items to the right on hover?
http://jsfiddle.net/mkTvp/
It will be in a CMS so I can't set a width on the LI's
Give the items 2px transparent borders: http://jsfiddle.net/mkTvp/1/
Just add a border to the original style the same color as the background:
li {
display: block;
float: left;
padding: 3px;
border: 2px solid #fff; /*same as background color*/
}
Example here.
a {
background-color: #F78F1E;
color: #fff;
display: block;
font-family: helvetica, sans-serif;
font-size: 0.688em;
font-weight: bold;
padding: 12px 12px;
text-decoration: none;
text-transform: uppercase;
width: auto;
}
li {
display: block;
float: left;
padding: 1px;
border: 2px solid white; /** Same as background-color */
}
li:hover { border: 2px dashed #F78F1E;}
Related
Hey I can't understand if there is any easy way to solve this:
I want the black border to be on top of the blue border not extend the height of the navigation.
I've looked at inset and adding bottom in the a but I want to override the one from .navigationbar
HTML
<nav class="navigationbar">
<ul>
<li>
One
</li>
<li>
Two
</li>
<li>
Three
</li>
</ul>
</nav>
CSS
* {
margin: 0;
}
.navigationbar {
background-color: #000000;
width: 100%;
border-bottom: .1em solid #0000FF;
}
.navigationbar ul {
list-style-type: none;
overflow: hidden;
}
.navigationbar ul li {
float: left;
color: #FFFFFF;
}
.navigationbar ul li a {
height: 100%;
display: block;
color: #FFFFFF;
text-align: center;
text-decoration: none;
padding-left: 1em;
padding-right: 1em;
padding-top: 1em;
padding-bottom: 1em;
}
.navigationbar ul li a:hover {
background: #0000FF;
color: #FFFFFF;
border-bottom: .1em solid #000000;
}
.navigationbar img {
float: left;
}
https://jsfiddle.net/55r2e9bq/
Why not just set the border and change its color later?
.navigationbar ul li a
{
border-bottom: .1em solid transparent;
}
.navigationbar ul li a:hover
{
border-bottom-color: #000000;
}
The border you are seeing comes from the rule .navigationbar ul li a:hover{...} where you have border-bottom: .1em solid #000000;. It is not extending to 100% of width of the navigation bar, but is causing it becomes higher.
If you want the navigationbarstays of the same height you should assign the border also to the normal state of the a element then you can change its color to whatever you want.
This way:
.navigationbar ul li a {
height: 100%;
display: block;
color: #FFFFFF;
text-align: center;
text-decoration: none;
padding-left: 1em;
padding-right: 1em;
padding-top: 1em;
padding-bottom: 1em;
border-bottom: .1em solid #ffcc00; /* add this property with the same value of the `:hover` state */
}
You can add border-bottom: 0.1em solid #000000; to .navigationbar ul li a to avoid that movement/height increase:
https://jsfiddle.net/p7L7adhe/1/
When you hover the sentence, the bottom-border isn't a crisp 1px line, like when you hover over photography. I've set margin:0; and padding:0; also. http://imdarrien.com/#
.project-link-1 {
display: inline;
text-align: left;
margin-bottom: 14px;
}
.project-link-1 a:hover {
border-bottom: 1px solid #000;
}
.project-link-1 > a {
font-family: 'NimbusSansNo5TOT-Regular';
border-bottom: 1px solid transparent;
font-size: 13px;
line-height: 16px;
word-spacing: 2px;
text-decoration: none;
color: #000;
}
It's because you use transform with percentages. Your content gets antialiased. You could try to remove the transform from .project_miniwrap or position it pixel perfect.
I'm doing a CSS exercise wherein the old BBC's site is to be cloned. The original problem was that the white bottom borders of the #topmenu li's appeared wonky (I included this code in the page below as a comment)
That has been fixed by adding the right red border using pseudo elements. However, the anchor tags have been disabled. I think it's due to the red border's "absolute" position, but I can't get the menu to appear as it should without the absolute position. Now, it looks how I want it, but the top menu links don't work anymore: http://jsbin.com/poginowibe/1/edit?output
Any ideas on how this can get sorted out? Any help would be appreciated.
/* This is the original code when the white bottom borders appeared weird */
#topmenudiv li {
list-style: none;
height: 100%;
padding: 14px 15px 11px 15px;
border-right: 1px solid #990800;
float: left;
position: relative;
z-index: 1;
}
#topmenudiv li:hover {
color: #ffffff;
text-decoration: none;
padding: 14px 15px 8px 15px;
border-bottom: 3px solid #FFFFFF;
outline: 0;
}
/* This is the code after the wonky appearance is fixed but the tags were disabled */
#topmenudiv li {
list-style: none;
height: 100%;
padding: 14px 15px 11px 15px;
float: left;
position: relative;
z-index: 1;
}
#topmenudiv li:hover {
color: #ffffff;
text-decoration: none;
padding: 14px 15px 8px 15px;
border-bottom: 3px solid #FFFFFF;
outline: 0;
}
#topmenudiv li::after {
content: "";
position: absolute;
bottom: 0; top: 0; left: 0; right: 0;
border-right: 1px solid #990800;
}
With some tweaks to Joerg's code, I was finally able to make it work!
#topmenudiv ul {
margin-top: 0px;
padding: 0;
}
#topmenudiv li {
list-style: none;
height: 38px;
line-height: 40px;
float: left;
position: relative;
z-index: 3;
}
#topmenudiv li:hover {
color: #ffffff;
text-decoration: none;
border-bottom: 3px solid #FFFFFF;
outline: 0;
}
#topmenudiv li a {
height: 100% !important;
font-size: 1em;
line-height: 40px;
border-right: 1px solid #990800;
display: block;
padding-left: 15px;
padding-right: 15px;
}
#topmenudiv li a:hover {
text-decoration: none;
}
Thanks a bunch! :)
Remove the #topmenudiv li::after from your css and change #topmenudiv li in this way:
#topmenudiv li {
list-style: none;
height: 100%;
padding: 14px 15px 11px 15px;
float: left;
position: relative;
z-index: 1;
border-right: 1px solid #990800;
}
Update
Use this code and see the remarks below:
#topmenudiv ul {
height: 40px;
margin: 0;
padding: 0;
}
#topmenudiv li {
list-style: none;
height: 40px;
float: left;
border-bottom: 3px solid #FFFFFF;
}
#topmenudiv li:hover {
color: #ffffff;
text-decoration: none;
border-bottom: 3px solid blue;
outline: 0;
}
#topmenudiv li a {
height: 40px !important;
font-size: 1em;
line-height: 40px;
border-right: 1px solid #990800;
display: block;
padding-left: 15px;
padding-right: 15px;
}
#topmenudiv li a:hover {
text-decoration: none;
}
Remove all your topmenudiv stuff in CSS, also this one above the comments.
I made the border-bottom line for hovering blue, so you can see that it works.
You are using an image on the right site of the topbar, #sphere. This should be an background-image in CSS, so you have not to handle with z-index and then the rest of the links will work.
What I have done is, give the a tags some height and line-height and bind the red border-left to it. I also removed some paddings and margins.
I want to add a white gap between menu elements but Im encountering a weird problem. See this jfiddle: http://jsfiddle.net/ERYat/1/
Here is the CSS code:
/* a styling */
ul#menu-menu-services a {
display: block;
font-size: 20px;
color: #000;
text-decoration: none;
padding: 5px;
border-bottom: 2px solid #fff;
border-left-style: solid;
border-left-width: 3px;
border-left-color: #000;
}
/* li fix */
ul#menu-menu-services li {
margin: 0;
padding: 0;
border: none;
}
/* Sub Menu */
ul#menu-menu-services li ul.sub-menu {
display: block;
margin-left: 0px;
}
ul#menu-menu-services li ul.sub-menu li a {
padding-left: 15px;
font-size: 14px;
}
I can't figure out why is the border diagonal on the left. Anyone knows?
Borders come together like this:
||
||______
|/______
You should use margin-bottom instead of border-bottom fiddle:
ul#menu-menu-services a {
display: block;
font-family: 'Droid Sans', arial, serif;
font-size: 20px;
color: #000;
text-decoration: none;
padding: 5px;
margin-bottom: 2px;
border-left-style: solid;
border-left-width: 3px;
border-left-color: #000;
}
And if you need a white line, consider using :after:
ul#menu-menu-services a { position: relative; }
ul#menu-menu-services a:after {
content: '';
width: 100%;
position: absolute;
height: 2px;
background: #fff;
left: 0;
bottom: -2px;
}
It's because it's drawing the corner of the two borders. Try changing your bottom border to something other than white and you'll see more clearly what it's doing.
To get rid of this effect, you need to get rid of the bottom border.
If you need the gap that the bottom border is currently giving you, you could use padding-bottom or margin-bottom instead.
I'm new to css, I have a top nav but I couldn't set its width. It seems different when I test with Dreamweaver, ie9, ie6, Firefox and Opera. Here's my code:
#charset "utf-8";
/* CSS Document */
html {
background: url(images/light-tile.gif) repeat;
}
body {
overflow: auto;
width: 54.35em;
margin: 0 auto;
background-color: #fff;
padding-left: 0.25em;
padding-right: 0.4em;
border: 0.07em solid #97b4e0;
overflow: visible;
}
#main {
background-color: #fff;
}
ul#top-nav {
list-style: none;
margin: .9em .9em .9em 0;
padding: 0;
width: 110%;
}
ul#top-nav li {
display: inline;
}
ul#top-nav li a {
text-decoration: none;
font-size: 0.75em;
font-family: Arial, Helvetica, sans-serif;
padding: 0.90em 0;
width: 18.5%; /* for 5 items */
background: #99CCFF;
color: #3F4037;
font-weight: bold;
float: left;
display: inline-block;
text-align: center;
border-right: 0.05em solid #fff;
border-left: 0.05em solid #fff;
border-bottom: 0.2em solid #97b4e0;
}
ul#top-nav li a:hover {
color: #000;
font-weight: bolder;
background: #D7EBFF;
border-bottom: 0.2em solid #e9e9e9;
}
...
<body>
<div id="main">
<div id="top-info">Kumcuğaz Köyü İlköğretim Okulu</div>
<img id="top-image" src="../images/top_image.png" alt="üst resim" width="869" height="159" />
<ul id="top-nav">
<li>ANASAYFA</li>
<li>GALERİ</li>
<li>PERSONEL</li>
<li>İLETİŞİM</li>
<li>ZİYARETÇİ DEFTERİ</li>
</ul>
<div class="clear"></div>
<div id="faux">
...
If it isn't possible it to view same on all browsers, I'll have to use a table. Thanks for helping.
Sincerely
What's the reason for making it 110% wide? That's wider than the window. Also, you have 5 menu items each set to 18.5% wide... that adds up to only 90.5% total.
What happens when you make it 100% wide and each of the 5 items is 20% wide?
http://jsfiddle.net/u78Ks/2/
It looks like this might be the issue
width: 18.5%; /* for 5 items */
in here
ul#top-nav li a {
text-decoration: none;
font-size: 0.75em;
font-family: Arial, Helvetica, sans-serif;
padding: 0.90em 0;
width: 18.5%; /* for 5 items */
background: #99CCFF;
color: #3F4037;
font-weight: bold;
float: left;
display: inline-block;
text-align: center;
border-right: 0.05em solid #fff;
border-left: 0.05em solid #fff;
border-bottom: 0.2em solid #97b4e0;
}
Browsers could be interpreting this differently based on the font sizes, window sizes, etc.
Try setting this to a static width in pixels.