I have this layout that needs to be a bunch of boxes stacked on top of each other, they all have a 1px border.
In order to have the border always be 1px I put a margin-bottom of -1px to all of the boxes, but when I change the border color on hover it doesn't quite work as intended. Here's an example:
How can I make it so it doesn't overlap on hover?
My code:
.main-content ul li a {
margin-bottom:-1px;
padding:15px 23px;
display:block;
border:1px solid #545353;
color:#545353;
}
.main-content ul li a:hover {
border-color:#fff;
color:#fff;
}
I tried giving them all a z-index and then making that higher on hover, but it didn't work either...
Any ideas?
Thanks!
EDIT Adding HTML
<div class="row main-content">
<div class="container">
<div class="col-md-8 col-md-offset-2">
<ul>
<li>Bienvenida</li>
<li>¿Por qué es la decisión correcta?</li>
<li>¿Cómo funciona este servicio?</li>
<li>¿Cuánto cuesta este servicio?</li>
<li>Estoy interesado, ¿qué hago?</li>
<li>Registro</li>
</ul>
</div>
</div>
</div>
You can use the property:
box-sizing: border-box;
so that elements are exactly the width and height you want them to be. The border will be 1px within the element instead of stretching out to other ones.
ewfaeg
To keep the border at 1px, use this css:
.main-content ul li a {
position: relative;
z-index: 30;
margin-bottom:-1px;
padding:15px 23px;
display:block;
border:1px solid #545353;
color:#545353;
}
.main-content ul li a:hover {
border-color:#fff;
color:#fff;
z-index: 99;
}
The changes I made was setting a z-index for both unhovered links and hovered links. The position:relative is added because z-index does not reflect unless there is a position specified.
Try this https://jsfiddle.net/L565nwaL/1/
<div class="main-content">
<ul>
<li>item one</li>
<li>item two</li>
<li>item three large</li>
<li>item four</li>
</ul>
</div>
CSS
.main-content ul li a {
padding:15px 23px;
display:block;
border:1px solid #545353;
border-bottom: transparent;
color:#545353;
}
.main-content ul li a:hover {
border:1px solid #fff;
color:#fff;
}
.main-content {
background: #161616;
box-sizing: border-box;
}
Related
I have this sample:
link
CODE HTML:
<ul>
<li>MENIU 1</li>
<li>MENIU 2</li>
<li>MENIU 3</li>
<li>MENIU 4</li>
</ul>
CODE CSS:
ul {list-style-type:none;}
ul li:hover{
border-left:5px solid red;
}
My problem is simple ... when you put the arrow on the menu, the menu item moves a few pixels in right.
How can I prevent it from moving?
EDIT:
Perhaps I did not explain well ... I do not want another rim ... just when you put an item in the list arrow appears red headboard and my text goes in the right
You are adding some space that is not there before, that`s causing the selected item to move right. All you need to do is to add a transparent border, when item is not on hover.
ul {list-style-type:none;}
ul li{border-left:5px solid transparent;}
ul li:hover{border-left:5px solid red;}
Try setting default trasparent border:
ul li {border: 5px solid transparent;}
The menu lis are moving because you are adding a 5px border where there was none before. This increases the size of your overall box and shifts it to the right to make room for the border.
You can cure this by having a 5px border all the time, but make it transparent until hovered, so the 5px is always there and the box won't shift.
Just add a CSS rule for the li when not hovered:
ul li {
border-right: 5px solid transparent;
}
add a transparent border.
ul {list-style-type:none;}
ul li{border-left:5px solid transparent;}
ul li:hover{
border-left:5px solid red;
}
working demo https://jsfiddle.net/geekrose/ebepwj1m/2/
Add a default transparent border to the li's:
ul li{ border-left:5px solid transparent }
Hi now you can used to padding as like this
ul {list-style-type:none;}
ul li{padding-left:5px;}
ul li:hover{
border-left:5px solid red;
padding-left:0;
}
Demo Example
ul {list-style-type:none;}
ul li{padding-left:5px;}
ul li:hover{
border-left:5px solid red;
padding-left:0;
}
<ul>
<li>MENIU 1</li>
<li>MENIU 2</li>
<li>MENIU 3</li>
<li>MENIU 4</li>
</ul>
Add transparent border to the ul li class.
ul li{
border-left: 5px solid transparent;
}
following will be your final css
ul {list-style-type:none; }
ul li{
border-left: 5px solid transparent;
}
ul li:hover{
border-left:5px solid red;
}
I have some sort of space in between my li tags I don't where it's coming from? How can i remove this?
Also, I'd like to change the color of the font to white on hover of the li
JSFIDDLE http://jsfiddle.net/omarel/tfyxL66c/
CSS
.nav_container {
text-align: center;
width:100%;
}
.nav_container ul {
/* margin-top:15px; */
margin-left:30px;
}
.nav_container ul li {
display: inline-block;
text-align: center;
padding-left:40px;
padding-right:40px;
margin:0px;
height:80px;
cursor:pointer;
}
.nav_container ul li:hover {
background-color:#08298A;
}
.nav_container a:hover {
color:#fff;
}
header {
width:100%;
margin: auto;
box-shadow:0 0 8px rgba(0,0,0,0.1);
min-width:410px;
}
.navlogo {
z-index:99;
}
.navlogo img {
width:100px;
margin:10px 10px 10px 10px;
}
.floatleft {
float:left;
}
.floatright {
float:right;
}
.centerdiv {
margin:0 auto;
}
#media only screen and (min-width:700px) {
header {
max-width:1250px;
}
.container {
max-width:1250px;
}
.box2 {
width:32%;
height:300px;
float:left;
}
.box2left {
width:65%;
height:600px;
float:left;
}
}
div {
border:solid 1px #E6E6E6;
position:relative;
}
ul li {
border:solid 1px #E6E6E6;
}
HTML
<div class="navlogo floatleft">
<img src="images/logo.png" />
</div>
<div class="floatleft">
<div class="nav_container">
<ul>
<li>Link 1</li>
<li>Link 2</li>
</ul>
</div>
</div>
<div class="floatright">
<div class="nav_container">
<ul>
<li>Profile</li>
<li>Sign out</li>
</ul>
</div>
</div>
</header>
<div style="clear:both;"></div>
Answering your second question first as the answer is shorter: use the :hover pseudo class.
EXAMPLE
li:hover a{color:#fff;}
More information on pseudo classes
To answer your first question, then; setting an element's display property to inline or inline-block will cause the white space surrounding it to be treated just like the space surrounding any other inline element.
You can workaround it in a number of ways
Remove all line breaks from within your list:
<ul><li>Item 1</li><li>Item 2</li><li>Item 3</li></ul>
Use comments to hide the line breaks from the browser:
<ul><!--
--><li>Item 1</li><!--
--><li>Item 2</li><!--
--><li>Item 3</li><!--
--></ul>
Use CSS to set the font-size of the parent element to 0 and then "reset" it for the child elements:
html{font-size:20px;}
ul{font-size:0;}
li{font-size:1rem;}
Alternatively, if you're not 100% set on using display:inline-block, you can use floats or flexbox instead.
To change the color of the links to white, use this css:
.nav_container ul li:hover a {
color:white;
}
However, only the text will be clickable, the li element won't be clickable. Another way to do the same thing is to apply all width/height/background styling to the link, instead of the li.
As Shaggy mentioned, to eliminate extra spacing when using inline-block you should remove all spaces in your html between your menu li items.
As for changing the link color on hover you should add the following to your css code:
.nav_container li:hover a {
color:#FFF;
}
Using background cover image with some transparency making my top navigation menu links text ugly and harder to read. How can I make it correct?
HTML -
<div id="wrapper"> <!-- wrapper starts here -->
<div id="header"> <!-- header starts here -->
<h1>example.com</h1>
</div> <!-- header ends here -->
<div id="top_nav"> <!-- nav starts here -->
<ul>
<li>Menu 1</li>
<li>Menu 2</li>
<li>Menu 3</li>
<li>Menu 4</li>
<li>Menu 5</li>
</ul>
<div class="clr"></div>
</div> <!-- nav ends here -->
<div style="height:1000px;"></div>
</div>
CSS -
html
{
background:url(http://www.designmyprofile.com/images/graphics/backgrounds/background0172.jpg) no-repeat center center fixed;
-webkit-background-size:cover;
-moz-background-size:cover;
-o-background-size:cover;
background-size:cover;
}
#wrapper
{
width:980px;
margin:0 auto;
background-color:#FFFFFF;
background-color:rgba(255, 255, 255, 0.7);
}
#top_nav
{
width:100%;
background-color:#3079ED;
position:relative;
}
#top_nav ul
{
margin:0;
padding:0;
list-style-type:none;
}
#top_nav ul li
{
float:left;
}
#top_nav ul li a
{
background-color:#3079ED;
display:block;
text-align:center;
text-decoration:none;
padding:8px 16px;
color:#FFFFFF;
font-size:14px;
border-right:1px solid #6199DF;
}
#top_nav ul li:last-child a
{
border-right:none;
}
#top_nav ul li a:hover
{
background-color:#6199DF;
}
So please tell me how can I make my menu link text clean and more readable as regular text while keeping the background image transparency.
Here is DEMO
Read back again and see your main problems are how you chose to do the background, and that the bar doesn't extend across as the CSS says it should. Try to make these modifications.
In #topnav {}
Below
width: 100%;
add
height: 32px;
The height being 0px is causing the short menu bar error. Also you can remove
position:relative;
It is assumed in this case already.
I would also change the background of wrapper from
background-color:rgba(255, 255, 255, 0.7);
to
background-color:rgba(75, 75, 75, 0.45);
and add
h1
{
color: #fff;
text-shadow: 2px 2px #000;
}
This tends to do better on backgrounds comprised at least half of darker tones.
Should fix your short nav bar problem and make everything easier to read. As well as show off your background better.
DEMO
I have the following menu
The two lines are both 'hr' tags and the menu is a div containing a ul. I have been googling for a while now and trying adjusting the css with margin and padding but I want to reduce the white space between the lines and the text bringing them closer to the text.
HTML:
<hr id="header_line"/>
<div id="menu_bar">
<ul>
<li>Add new Form</li>
<li>View old forms</li>
<li>Reports</li>
<li>Site Administration</li>
</ul>
</div>
<hr id="under_menu_line"/>
CSS:
#menu_bar ul {
list-style:none;
padding-left:0px;
}
#menu_bar ul li {
display:inline;
padding-left:10px;
}
#menu_bar ul li a {
text-decoration:none;
color:Black;
font-family:Century Gothic;
font-size:12pt;
}
#menu_bar ul li a:hover {
color:#007C5A;
}
#header_line {
margin-top:5px;
}
#under_menu_line {
margin-top:5px;
}
Any ideas?
The best solution would be to drop the <hr>s, and use border-top and border-bottom in conjunction with padding on the div.
<hr> should be used as a horizontal rule. For instance, a hard separation of paragraphs or a long break. And not as a visual element.
Just like with any other element, the <hr> is controlled by CSS. The space you want to control is just the margin. This is the default from Firefox:
hr {
-moz-box-sizing: border-box;
-moz-float-edge: margin-box;
border: 1px inset;
color: gray;
display: block;
height: 2px;
margin: 0.5em auto;
}
So, the following will make the space 0.1em instead of 0.5em:
hr { margin: 0.1em auto; }
Try this and tell me if this is what you wanted.
#header_line { margin-top:5px; margin-bottom:-10px;}
#under_menu_line { margin-top:-10px; }
Use
#header_line{
margin-bottom:0px;
}
#under_menu_line{
margin-top:0px;
}
I have two DIVs one contain new release and must, another one contain whole data.
both div have a red border. I remove bottom border of first div.
I want to remove the border where I marked with red rectangle:
Have your active tab have position:relative and z-index higher then the content box. Then add border-bottom: 1px solid white and give it margin-bottom: -1px.
From a current project: http://jsfiddle.net/aVZLH/1/
Maybe you have some additional work for IE. But rudimentary it should show you a way to solve your problem... Without additioanl markup in your document.
<ul>
<li class="current">Tab #1</li>
<li>Tab #2</li>
</ul>
<div class="content">
<p>MY AWESOME CONTENT</p>
</div>
/*CSS*/
ul {
overflow: hidden;
position: relative;
top: 1px;
z-index: 2;
}
li {
color:#fff;
background:red;
float:left;
border:1px solid red;
padding:5px 10px;
position:relative;
top:1px;
}
.current {
background: #FFFFFF;
border-bottom: 0;
color: red;
}
.content {
padding:20px;
border:1px solid red;
position:relative;
z-index:1;
}
You can create another div to occupy the space to the right of the "Must" tab. Set this div's bottom border to "1px solid red". Then, remove the border-top from the news box, and the border-bottom from the tabs themselves.