so i was wondering if this where possible.
i am building a navigation.
<nav id="navigation">
<div class="nav_buttons">home</div>
<div class="nav_buttons">system</div>
<div class="nav_buttons">studies</div>
<div class="nav_buttons">approach</div>
<div class="nav_buttons">about</div>
<div class="nav_buttons">contact</div>
</nav>
but what i would like is so that when i hover over one of them both the border of the div and the color of the < a > tags text change at the same time
i tried this
#navigation {
text-align: center;
height: 150px;
padding-top: 100px;
}
.nav_buttons {
display: inline;
height: 40px;
width: 100px;
border-bottom: 1px solid black;
margin-left: 20px;
}
#navigation a{
margin-right: 50px;
font-size: 20px;
text-decoration: none;
color: black;
}
div.nav_buttons:hover {
border-bottom: 1px solid #ff3300;
}
div.nav_buttons:hover a{
color:#ff3300;
}
but that only changed the boder. i am willing to use javascript but i saw that you can change a child element buy hover overing the parent.
div#parent_element:hover div.chil_element {color: red;}
any suggestions doing it simply in CSS would be epic??
it depends for a matter of (previous) rule specificity, since you assigned the style with #navigation a selector. So try this
#navigation > div:hover a {
color:#ff3300;
}
or try simply with !important
div.nav_buttons:hover a {
color:#ff3300 !important;
}
As a side note: you could also avoid to use a repeated class name for every div in the markup and use instead #navigation > div to refer those elements
Your code is fine. But I think some existing styles are overriding your current style. So I suggest to use relative styling technique like below to achieve the desired result:
#navigation div.nav_buttons:hover {
border-bottom: 1px solid #ff3300;
}
#navigation div.nav_buttons:hover a{
color:#ff3300;
}
See a DEMO
Related
So I have a containing element whose width gets smaller as the screen get smaller #Aa, this element has a <nav> element that contains a <ul> element and some <li> elements as menu items.
When #Aa can no longer contain all the <li> elements the page layout is broken.
What I would like to happen is what is suppose to happen when
overflow:hidden is used. I applied this rule to #Aa.
I thought this was the purpose of overflow:hidden. I entered it manually through the web inspector.
Here is some of the relevant CSS
nav {
white-space: nowrap;
float: right;
}
nav ul li a {
display: inline-block;
padding: 0 20px;
line-height: 60px;
color: #2e2c60;
font-size: 14px;
text-transform: uppercase;
letter-spacing: .1em;
}
nav ul li {
display: inline-block;
float: left;
border-left: 1px solid #ffffff;
position: relative;
list-style: none;
background: rgba(255, 255, 255, .25);
}
nav ul li:hover{
background: rgba(255, 255, 255, 0.5);
}
nav ul li:last-child{
border-right: 1px solid #ffffff;
}
Please try below code,
nav {
float: right;
width: 75%;
height: 60px;
overflow: hidden;
}
and add float:left to logo image
Well, you'll have to put codes for "nav" according to the resolution in your media queries.
In short:
You need to define the height, or max-height (more suitable for this example) in order for overflow to work, otherwise it would just expand, since is the expected behavior
element {
display: none;
}
Try removing this from the inline style of the #left-column element:
<section style="display:none;" id="left-column">
Apologies for what is probably quite a basic question, but I've not found a solution to this online.
I have a simple CSS menu, here's the CSS:
#nav {
width: 100%;
float: left;
margin: 0 0 3em 0;
padding: 0;
list-style: none;
opacity:1;
border-bottom: 1px solid #ccc;
border-top: 1px solid #ccc;
}
#nav li {
float: left;
}
#nav li a {
display: block;
padding: 8px 15px;
text-decoration: none;
font-weight: bold;
color: #069;
border-right: 1px solid #ccc;
}
#nav li a:hover {
color: #c00;
background-color: #fff;
}
/* End navigation bar styling. */
This is from an online tutorial, so not my code.
Here's the HTML:
<!-- language: lang-html -->
<ul id="nav">
<li>About Us</li>
<li>Our Products</li>
<li>FAQs</li>
<li>Contact</li>
<li>Login</li>
</ul>
All I want to do is have different colo(u)rs for each menu item when hovered over.
I assume you need to create a separate id (or class) for each item, but I am unsure of the syntax and no matter what I try it simply won't work.
Many thanks for any assistance.
add a class to the href links and then in your css call the hover state and then style accordingly. Here is an example using your code: http://jsfiddle.net/LGL37/
The HTML:
TEXT
The CSS
.about:hover { background: yellow; }
EDIT: this is a much better solution than the other answer as it is cross browser compatible and if you need to style more in the future you'll have individual classes to target rather than nth which can get confusing.
If you don't use the :nth-child() selector, you can add a unique class to each li in the nav
<li class="about"></li>
and set a hover effect in your stylesheet for that specific class
#nav li.about a:hover { background-color: red; }
You can use :nth-child selector but it won't work in some legacy versions of IE.
JsFiddle
#nav li:nth-child(1) a:hover {
color:green;
}
#nav li:nth-child(2) a:hover {
color:blue;
}
etc.
You could use nth-child:
li:nth-child(2) a:hover{
color: red;
}
http://jsfiddle.net/fAbFg/
This example affects the second item.
I believe it's simple, but since I'm new to this I don't have a clue of how to do it. I just want to change the background color of a li tag - just for fashioning, nothing else.
This is my HTML:
<ul id="abas">
<li>PROGRAM</li>
<li>PROC</li>
<li>DDNAME</li>
</ul>
Sorry for being a noob but, this is the css part right?
#abas li a
{
text-decoration:none;
background-color:3B31FF;
color:#FFFFFF;
float:left;
margin-right:20px;
border-top-left-radius:23px;
border-top-right-radius:0px;
-moz-border-radius-topleft:5px;
-moz-border-radius-topright:5px;
-webkit-border-radius-topleft:5px;
-webkit-border-radius-topright:5px;
border-bottom-left-radius:0px;
border-bottom-right-radius:0px;
-moz-border-radius-bottomleft:5px;
-moz-border-radius-bottomright:5px;
-webkit-border-radius-bottomleft:5px;
-webkit-border-radius-bottomright:5px;
padding-top: 10px;
padding-right: 100px;
padding-bottom: 10px;
padding-left: 10px;
}
I noticed that here>>> "background-color:3B31FF;" is where I change the
color of the background, but doing this, changes all the background colors of course
... I only need 1 "li" tab to change and any html tutorial would be nice too.
Css code:
#abas li {
background-color: ... ;
}
fill in color code where dots are, like this:
background-color:#000000; //color black
Single tag:
Css code:
li.selected {
background-color: ... ;
}
Html code:
<ul>
<li></li>
<li class="selected"></li>
<li></li>
</ul>
First any css color code needs to have # followed by a 6 digit value(or 3 if they are repeating i.e #FF33FF as #F3F) and to solve your second part do this
CSS
#abas li {
background-color: #xxxxxx ;
//your other style goes here
}
#abas li.current {
background-color: #xxxxxx ;
//your other style goes here
}
HTML
<ul id="abas">
<li class="current">PROGRAM</li>
<li>PROC</li>
<li>DDNAME</li>
</ul>
To change the background color simply style it:
<li style="background-color:blue;">Program</li>
You will likely also want to set some height and width parameters.
This will make the first item have a red background:
<li style="background: red">PROGRAM</li>
If you want to for example add green to a <li> tag you can do the following:
<li style="background: green;">PROGRAM</li>
But this isn't really best practice because normally you want to keep your HTML and CSS separated. So in CSS you would do it like this:
li { background: green; }
or use hex color codes:
li { background: #00ff00; }
If you only want to change one specific <li> tag you can add a class to it:
<li class="precious">
and then apply a css rule to this class:
.precious { background: #00ff00; }
and only this <li> tag with the .precious class is going to get styled.
Live Example: http://jsfiddle.net/pulleasy/WEdmt/
You can also make your life a whole lot easier with the border-radius element. for what you are doing it would be:
#abas li a {
text-decoration: none;
background-color: 3B31FF;
color: black;
float: left;
margin-right: 20px;
border-radius: 23px 0px 0px 0px;
padding-top: 10px;
padding-right: 100px;
padding-bottom: 10px;
padding-left: 10px;
}
This will give you the same result. Also for example sake, you will need to add a height and a width to get some sort of result. so if that were the case you would need to do this:
#abas li a {
text-decoration: none;
background-color: 3B31FF;
color: black;
float: left;
margin-right: 20px;
border-radius: 23px 0px 0px 0px;
padding-top: 10px;
padding-right: 100px;
padding-bottom: 10px;
padding-left: 10px;
height: 100px;
width: 100px;
}
This will give you the result that I think you were looking for. If you are looking to use pixels instead of percents for a fluid layout, the you will need to use this. (Note this is only for the width, height and positioning).
#abas li a {
text-decoration: none;
background-color: 3B31FF;
color: black;
margin-right: 20px;
border-radius: 23px 0px 0px 0px;
padding-top: 10px;
padding-right: 100px;
padding-bottom: 10px;
padding-left: 10px;
position: absolute;
height: 10%;
width: 10%; /*Replace these percentiles with your width and height*/
}
I will assume that you know how to make the
An alternative to using hex code is using RGB / RGBA:
background-color:rgb(255,0,0);
background-color:rgba(255,0,0,0.5);
This gives you even more control over your color by adding alpha and transparency support, but unfortunately, it's not supported by some browsers (IE, namely, although I don't know about IE 10).
I am having a problem with the following code. I cannot pad the logo (x12creatiΩns) down from the top. I have tried top:10px as above but it doesn't do anything.
HTML
<div id='header'>
<span id='logo'>
x12creatiΩns
</span>
<span id='sublogo'>Just another portfolio...</span>
</div>`
CSS
span#logo {
font-size:2.2em;
color: black;
padding-left:10px;
text-shadow:0px 1px 0px white;
top:10px;
}
a#logo {
text-decoration: none;
color: black;
}
a#logo:hover {
padding-top:10px;
text-decoration: none;
color: #555;
}
div#header {
background-color:#DDD;
width:100%;
height:44px;
border-bottom-style:solid;
border-bottom-width:1px;
border-bottom-color:#CCC;
}
Try taking off the a
Like this
#logo:hover{}
Or if you need to acces the anchor try this
#logo a:hover{}
add display: inline-block to your a#logo - http://jsfiddle.net/tmaHx/1/ - and then you can use margins/paddings
a#logo {
text-decoration: none;
color: black;
display: inline-block;
margin-top: 20px
}
Add display:inline-block to your span#logo declaration and and just add some top margin and that should work. Also, you're repeating your "logo" ID twice; Once in your span tag and again in your logo a tag, that won't validate.
because a is an inline element you have to add display:block; then you can add margins and paddings !
I have an unordered list full or anchors. I have a CSS :Hover event that adds borders to it but all the anchors to the left slightly adjust when i hover because it is adding 1px to the width and auto adjusting. how do i make sure the positioning is absolute?
div a:visited, #homeheader a{
text-decoration:none;
color:black;
margin-right:5px;
}
div a:hover{
background-color:#D0DDF2;
border-radius:5px;
border:1px solid #102447;
}
div li{
padding:0;
margin:0px 10px;
display:inline;
font-size:1em;
}
<div>
<ul>
<li>this</li>
<li>that</li>
<li>this again</li>
<li>that again</li>
</ul>
</div>
I made a JS Fiddle demo here.
You can add a transparent border to the non-hover state to avoid the "jumpiness" when the border appears:
http://jsfiddle.net/TEUhM/3/
#homeheader a:visited, #homeheader a{
border:1px solid transparent;
}
You can also use outline, which won't affect the width i.e. so no "jump" effect. However,support for a rounded outline may be limited.
You could use a box shadow, rather than a border for this sort of functionality.
This works because your shadow doesn't 'take size in the DOM', and so won't affect the positioning, unlike that of a border.
Try using a declaration like
box-shadow:0 0 1px 1px #102447;
instead of your
border:1px solid #102447;
on your hover state.
Below is a quick demo of this in action:
DEMO
#homeheader a:visited,
#homeheader a {
text-decoration: none;
color: black;
margin-right: 5px;
}
#homeheader a:hover {
background-color: #D0DDF2;
border-radius: 5px;
box-shadow: 0 0 1px #102447;
}
#homeheader li {
padding: 0;
margin: 0px 10px;
display: inline;
font-size: 1em;
}
<div id="homecontainer">
<div id="homeheader">
<ul>
<li>this
</li>
<li>that
</li>
<li>this again
</li>
<li>that again
</li>
</ul>
</div>
</div>
Add a margin of 1px and remove that margin on hover, so it is replaced by the border.
http://jsfiddle.net/TEUhM/4/
After taking a long time pressure i found a cool solution.
Hope that it will help others.
on the add the folloing code :
HTML
<div class="border-test">
<h2> title </h2>
<p> Technology founders churn rate niche market </p>
</div>
CSS
.border-test {
outline: 1px solid red;
border: 5px solid transparent;
}
.border-test:hover {
outline: 0px solid transparent;
border: 5px solid red;
}
Check live : Live Demo
Hope it will help.
No one has mentioned it here, but the best and simplest solution to this in my opinion is to use "box shadow" instead of borders. The magic is on the "inset" value which allows it be like a boarder.
box-shadow: inset 0 -3px 0 0 red;
You can offset the X or Y to change top/bottom and use -negative value for opposite sides.
.button {
width: 200px;
height: 50px;
padding: auto;
background-color: grey;
text-align: center;
}
.button:hover {
box-shadow: inset 0 -3px 0 0 red;
background-color: lightgrey;
}
<div class="button"> Button </div>
You can use box-shadow which does not change your box-size, unlike border.
Here is a little tutorial.
Just add the following code into your css file
#homeheader a {
border:1px solid transparent;
}
The CSS "box-sizing" attribute fixed this problem for me. If you give your element
.class-name {
box-sizing: border-box;
}
Then the width of the border is added to the inside of the box when the browser calculates its width. This way when you turn the border style on and off, the size of the element doesn't change (which is what causes the jittering you observed).
This is a new technology, but the support for border-box is pretty consistent. Here is a demo!
The easiest method I found was using 'outline' instead of 'border'.
#home:hover{
outline:1px solid white;
}
instead of
#home:hover{
border:1px solid white;
}
Works the best!
https://www.kirupa.com/html5/display_an_outline_instead_of_a_border_hover.htm
Add a negative margin on hover to compensate:
#homeheader a:hover{
border: 1px solid #102447;
margin: -1px;
}
updated fiddle
In the fiddle the margin: -1px; is a little more complex because there was a margin-right getting overridden, but it's still just a matter of subtracting the newly-occupied space.
I too was facing the same problem. The fix mentioned by Wesley Murch works! i.e. adding a transparent border around the element to be hovered.
I had a ul on which :hover was added to every li. Every time, I hovered on each list item, the elements contained inside li too moved.
Here is the relevant code:
html
<ul>
<li class="connectionsListItem" id="connectionsListItem-0">
<div class="listItemContentDiv" id="listItemContentDiv-0">
<span class="connectionIconSpan"></span>
<div class="connectListAnchorDiv">
Test1
</div>
</div>
</li>
</ul>
css
.listItemContentDiv
{
display: inline-block;
padding: 8px;
right: 0;
text-align: left;
text-decoration: none;
text-indent: 0;
}
.connectionIconSpan
{
background-image: url("../images/connection4.png");
background-position: 100% 50%;
background-repeat: no-repeat;
cursor: pointer;
padding-right: 0;
background-color: transparent;
border: medium none;
clear: both;
float: left;
height: 32px;
width: 32px;
}
.connectListAnchorDiv
{
float: right;
margin-top: 4px;
}
The hover defn on each list item:
.connectionsListItem:hover
{
background-color: #F0F0F0;
background-image: linear-gradient(#E7E7E7, #E7E7E7 38%, #D7D7D7);
box-shadow: none;
text-shadow: none;
border-radius: 10px 10px 10px 10px;
border-color: #AAAAAA;
border-style: solid;
}
The above code used to make the containing elements shift, whenever I hovered over connectionsListItem. The fix was this added to the css as:
.connectionsListItem
{
border:1px solid transparent;
}
Use :before to create the border, that way it won't modify the actual content and gives you more freedom. Check it out here:
http://codepen.io/jorgenrique/pen/JGqOMb
<div class='border'>Border</div>
<div class='before'>Before</div>
div{
width:300px;
height:100px;
text-align:center;
margin:1rem;
position:relative;
display:flex;
justify-content:center;
align-items: center;
background-color:#eee;
}
.border{
border-left:10px solid deepPink;
}
.before{
&:before{
content:"";
position:absolute;
background-color:deepPink;
width:10px;
height:100%;
left:0;
top:0;
}
&:hover{
background-color:#ccc;
&:before{
width:0px;
transition:0.2s;
}
}
}
Be careful if you also use padding.
In my case, I had a 5px padding inside the hover defn. It should be moved inside the actual class of the element you want to hover over.
Code snippet