I have a menu where each link is a div box. This div box have a gray border-bottom, however, when the link is visited it turns black. I just can't figure why.
On the following image I've clicked the Rediger profil and Log af links.
JSFiddle: http://jsfiddle.net/LpGbT/
HTML
<div id="design_sidebar">
<div id="design_sidebar_head">
Patrick Reck
</div>
<div class="design_sidebar_menu_item">Besøgende</div>
<div class="design_sidebar_menu_item">Mine favoritter</div>
<div class="design_sidebar_menu_item">Rediger profil</div>
<div class="design_sidebar_menu_item">Log af</div>
</div>
CSS
a {
text-decoration: none;
}
#design_sidebar {
width: 200px;
float: left;
border: 1px solid #d6d6d6;
-moz-border-radius: 2px;
border-radius: 2px;
background-color: white;
}
#design_sidebar_head {
width: 165px;
height: 30px;
font-family: Segoe;
font-size: 14px;
font-weight: bold;
color: #333333;
padding-top: 10px;
padding-left: 35px;
border-bottom: 1px solid #d6d6d6;
background-image: url('../img/icons/user.png');
background-repeat: no-repeat;
background-position: 10px 11px;
background-color: #f7f7f7;
}
.design_sidebar_menu_item {
padding: 5px;
padding-left: 10px;
font-size: 14px;
color: #333333;
border-bottom: 1px solid #d6d6d6;
}
.design_sidebar_menu_item:hover {
color: white;
background-color: #a6242f;
}
You may define a copied version of your div selector with a :visited suffix in order to set new colours for visited objects.
Aldo div classes are prefixed with a dot (.) instead of a sharp (#) character. Just a reminder. :)
.design_sidebar_menu_item:visited {
border-color: <your_color>;
}
If it doesn't harm your design etc. I would suggest this:
HTML:
<div id="design_sidebar">
<div id="design_sidebar_head">
Patrick Reck
</div>
Patrick Reck
Besøgende
Mine favoritter
Rediger profil
Log af
</div>
CSS:
div#design_sidebar a {
text-decoration: none;
padding: 5px;
padding-left: 10px;
font-size: 14px;
color: #333333;
border-bottom: 1px solid #d6d6d6;
display: block;
}
div#design_sidebar a:hover {
color: white;
background-color: #a6242f;
}
#design_sidebar {
width: 200px;
float: left;
border: 1px solid #d6d6d6;
-moz-border-radius: 2px;
border-radius: 2px;
background-color: white;
}
#design_sidebar_head {
width: 165px;
height: 30px;
font-family: Segoe;
font-size: 14px;
font-weight: bold;
color: #333333;
padding-top: 10px;
padding-left: 35px;
border-bottom: 1px solid #d6d6d6;
background-image: url('../img/icons/user.png');
background-repeat: no-repeat;
background-position: 10px 11px;
background-color: #f7f7f7;
}
EDIT:
How about adding:
a {
text-decoration: none;
display: block;
border-bottom: 1px solid #d6d6d6;
}
And removing border-bottom: 1px solid #d6d6d6; from .design_sidebar_menu_item {...}
The others will need links around them for this to work.
It doesn't..
I changed border-bottom color to 'green'. Now you have a clear view.
Check jsFiddle : check it out
.design_sidebar_menu_item {
padding: 5px;
padding-left: 10px;
font-size: 14px;
color: #333333;
border-bottom: 1px solid #00FF00;
}
Related
On the main page of my site there are 4 hyperlinks that I want to appear on every page in the same way. Except I want the link of the page I'm on to be the same color as when I put my mouse on it.
I thought I could get that with this code:
.navigation {
padding: 40px 0px;
position: relative;
text-align: center;
width: 100%;
font-size: 30px;
}
.navigation a {
background: black;
border: 1px solid grey;
border-radius: 7px;
color: white;
display: inline-block;
margin: 100px 35px;
padding: 14px;
text-decoration: none;
opacity: 0.75;
font-family: impact;
}
.navigation a:hover {
background: white;
border: 1px solid black;
color: black;
}
#contact {
background: white !important;
color: black !important;
}
<div class="navigation">
Mes productions
DJ
<a target="_blank" href="./CV.pdf">Mon CV</a>
<div id="contact">
Me contacter
</div>
</div>
Problem is that it keeps the black background color with white font color and it goes under the other links and not inline with them.
But I think that it's a bad practice to place the link in the "div" in this situation. You can simply register a class for the link and compose styles for this class.
.navigation {
padding: 40px 0px;
position: relative;
text-align: center;
width: 100%;
font-size: 30px;
}
.navigation a {
background: black;
border: 1px solid grey;
border-radius: 7px;
color: white;
display: inline-block;
margin: 100px 35px;
padding: 14px;
text-decoration: none;
opacity: 0.75;
font-family: impact;
}
.navigation a:hover {
background: white;
border: 1px solid black;
color: black;
}
#contact a {
background: white !important;
color: black !important;
}
<div class="navigation">
Mes productions
DJ
<a target="_blank" href="./CV.pdf">Mon CV</a>
<div id="contact">
Me contacter
</div>
</div>
.navigation {
padding: 40px 0px;
position: relative;
text-align: center;
width: 100%;
font-size: 30px;
}
.navigation a {
background: black;
border: 1px solid grey;
border-radius: 7px;
color: white;
display: inline-block;
margin: 100px 35px 0px 35px;
padding: 14px;
text-decoration: none;
opacity: 0.75;
font-family: impact;
}
.navigation a:hover {
background: white;
border: 1px solid black;
color: black;
}
#productions a {
color: black !important;
background: white !important;
}
<div class="navigation">
<div id="productions">
Mes productions
</div>
DJ
<a target="_blank" href="../CV.pdf">Mon CV</a>
Me contacter
</div>
my links are white with black background but i want one of them (production) to be black with white background. i did that:
weird thing is that it worked on an other page with the link dj and i just copy paste my code and changed the id dj to productions but it doesn't work anymore. i must have made some mistake but i can figure out where.
<div class="navigation">
<div id="productions">
Mes productions
</div>
DJ
<a target="_blank" href="../CV.pdf">Mon CV</a>
Me contacter
</div>
.navigation {
padding: 40px 0px;
position: relative;
text-align: center;
width: 100%;
font-size: 30px;
}
.navigation a {
background: black;
border: 1px solid grey;
border-radius: 7px;
color: white;
display: inline-block;
margin: 100px 35px 0px 35px;
padding: 14px;
text-decoration: none;
opacity: 0.75;
font-family: impact;
}
.navigation a:hover {
background: white;
border: 1px solid black;
color: black;
}
#productions a {
color: black !important;
background: white !important;
}
I'm trying to style each button and a.btn to look the same across all browsers. Using the following styles the 2 elements don't line up in Chrome and Firefox.
#wrap {
border: 2px solid red;
}
button::-moz-focus-inner {
padding: 0 !important;
border: 0 none !important;
}
a.btn, button {
display: inline-block;
border: 2px solid transparent;
border-radius: 3px;
color: #fff;
background-color: #777;
padding: 2px 5px;
font-family: sans-serif;
font-size: 16px;
line-height: 16px;
height: 27.2px;
text-decoration: none;
opacity: .85;
cursor: pointer;
box-sizing: border-box;
}
<div id="wrap">
Link
<button>Link</button>
</div>
I've tried changing the vertical-align to bottom, but while that does move the elements into a more aligned state, the text on the button itself looks mis-aligned still (demo below).
#wrap {
border: 2px solid red;
}
button::-moz-focus-inner {
padding: 0 !important;
border: 0 none !important;
}
a.btn, button {
display: inline-block;
border: 2px solid transparent;
border-radius: 3px;
color: #fff;
background-color: #777;
padding: 2px 5px;
font-family: sans-serif;
font-size: 16px;
line-height: 16px;
height: 27.2px;
text-decoration: none;
opacity: .85;
cursor: pointer;
box-sizing: border-box;
vertical-align: bottom;
}
<div id="wrap">
Link
<button>Link</button>
</div>
How can I make both elements display the same way in both Chrome and Firefox?
Erase the height setting from the rule and fine-tune the height only with the paddingparameters:
#wrap {
border: 2px solid red;
}
button::-moz-focus-inner {
padding: 0 !important;
border: 0 none !important;
}
a.btn, button {
display: inline-block;
border: 2px solid transparent;
border-radius: 3px;
color: #fff;
background-color: #777;
padding: 2px 5px;
font-family: sans-serif;
font-size: 16px;
line-height: 16px;
text-decoration: none;
opacity: .85;
cursor: pointer;
box-sizing: border-box;
}
<div id="wrap">
Link
<button>Link</button>
</div>
Chrome and Firefox both use different rendering engines to display html (Chrome uses Blink and Firefox uses Gecko). Different browsers use different rendering engines so I don't think it will look exactly the same across all browsers.
So what im trying to do is to make space between middle line and middle text. This is my fiddle: https://jsfiddle.net/abqy4w1f/. So i want that left and right side is 10px from circle. Any suggestion?
.outter-h2 {
width: 200px;
text-align: center;
border-bottom: 1px solid #cccccc;
line-height: 0.1em;
margin: 35px auto 35px;
}
.outter-span {
background: #fff;
padding: 0 10px;
border: 1px solid #cccccc;
border-radius: 50%;
color: #bec3c7;
}
<h2 class="outter-h2"><span class="outter-span">?</span></h2>
For this particular example you ca do this:
.wrapper{
display: inline-block;
}
.outter-h2 {
float: left;
width: 100px;
text-align: center;
border-bottom: 1px solid #cccccc;
margin-top: 4%;
}
.outter-span {
float: left;
background: #fff;
padding: 0 10px;
border: 1px solid #cccccc;
border-radius: 50%;
color: #bec3c7;
margin: 0 10px;
}
<div class="wrapper">
<div class="outter-h2"></div>
<span class="outter-span">?</span>
<div class="outter-h2"></div>
</div>
You can easily create a fake space using CSS box-shadow property (this is assuming the shadow color and the background color are the same)
All you have to do is add this line to .outer-span:
box-shadow:0 0 5px 20px #FFF;
This solution keeps the HTML intact.
Demo:
body {
background: #FFF;
}
.outter-h2 {
width: 200px;
text-align: center;
border-bottom: 1px solid #cccccc;
line-height: 0.1em;
margin: 35px auto 35px;
position: relative;
z-index:1;
}
.outter-span {
background: #fff;
padding: 0 10px;
border: 1px solid #cccccc;
border-radius: 50%;
color: #bec3c7;
position: relative;
z-index:3;
box-shadow:0 0 5px 20px #FFF; /*add space using box-shadow*/
}
<h2 class="outter-h2"><span class="outter-span">?</span></h2>
<h2 class="outter-h2"></h2><span class="outter-span">?</span><h2 class="outter-h2"></h2>
.outter-h2 {
width: 100px;
text-align: center;
border-bottom: 1px solid #cccccc;
line-height: 0.1em;
margin: 20px auto 35px;
float:left;
}
.outter-span {
background: #fff;
padding: 0 10px;
border: 1px solid #cccccc;
border-radius: 50%;
color: #bec3c7;
margin: 10px;
float:left;
}
try this i think this is the solution you wanted. please let me know if i am correct or not
This is done(corrected) exactly what you want.
.outer-h2 {
width: 100px;
text-align: center;
border-bottom: 1px solid #cccccc;
line-height: 0.1em;
margin: 20px auto 35px;
float:left;
}
.outer-span {
background: #fff;
padding: 0px 10px;
color: #bec3c7;
margin: 10px;
float:left;
}
<h2 class="outer-h2"></h2><span class="outer-span">?</span><h2 class="outer-h2"></h2>
<h2 class="outter-h2"></h2><span class="outter-span">?</span>
<h2 class="outter-h2"></h2>
Click here for DEMO
I want a text-area with black background to be within DIV with white background. Text-area should not fill the complete DIV so the DIV's white color is still seen around text-area. DIV itself should occupy only 80% of the screen's width (or browser's tab). The problem is that the DIV's white background ain't seen around text-area.
.mydiv {
vertical-align: middle;
width: 80%;
text-align: left;
padding-top: 10px;
padding-left: 20px;
padding-right: 20px;
background: white;
}
.mytextarea {
height: 100px;
width: 100%;
position: relative;
padding: 2px 2px;
font-size: 12px;
font-weight: bold;
float: left;
border-radius: 10px;
font-family: 'Helvetica', cursive;
color: white;
text-decoration: none;
background-color: black;
border-bottom: 4px solid #2980B9;
border: 2px solid blue;
outline: 0;
}
You can use display:inline-block; instead of float:left;
.mytextarea {
height: 100px;
width: 100%;
position: relative;
padding: 2px 2px;
font-size: 12px;
font-weight: bold;
display: inline-block;
border-radius: 10px;
font-family: 'Helvetica', cursive;
color: white;
text-decoration: none;
background-color: black;
border-bottom: 4px solid #2980B9;
border: 2px solid blue;
outline: 0;
}
Jsfiddle
.mydiv {
vertical-align: middle;
width: 80%;
text-align: left;
padding-top: 10px;
padding-left: 20px;
padding-right: 20px;
background: red;
}
.mytextarea {
height: 100px;
width: 100%;
position: relative;
padding: 2px 2px;
font-size: 12px;
font-weight: bold;
display: inline-block;
border-radius: 10px;
font-family: 'Helvetica', cursive;
color: white;
text-decoration: none;
background-color: black;
border-bottom: 4px solid #2980B9;
border: 2px solid blue;
outline: 0;
}
<div class="mydiv">
<textarea class="mytextarea"></textarea>
</div>