.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;
}
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>
The links were all horizontally aligned until i put one of them in it's own div to change it's color when i'm on the page it is linking to.
Now i can't get him to go back in line.
<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;
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;
display: inline-block !important;
}
You need to set display: inline-block on #contact, not #contact a.
I am trying to create a button that shows a loading spinner when waiting for a response. But there is some weird things going on which I do not understand at all.
I have the following HTML with a bunch of CSS:
<button type="submit" disabled="true" class="btn btn-blue btn-loading">
<div class="btn-loading-text">Update profile</div>
<div class="btn-loading-spinner"></div>
</button>
If you comment out the spinner element, then the "Update profile" aligns itself in the center even tho I did not ask it to.
* {
box-sizing: border-box;
}
.btn-loading {
border-radius: 2px;
font-size: 13px;
font-family: arial, helvetica, sans-serif;
text-decoration: none;
display: inline-block;
font-weight: bold;
outline: 0;
background: #f5f5f5 !important;
border: 1px solid #ddd !important;
color: #aaa !important;
cursor: default !important;
overflow: hidden;
height: 40px;
}
.btn-loading-text {
float: left;
margin: 0px 15px 0px 15px;
}
.btn-loading-spinner {
float: left;
height: 25px;
width: 25px;
margin: 7px 15px 6px -5px;
position: relative;
animation: rotation .9s infinite linear;
border-left: 3px solid #ddd;
border-right: 3px solid #ddd;
border-bottom: 3px solid #ddd;
border-top: 3px solid #aaa;
border-radius: 100%;
}
#keyframes rotation {
from {
transform: rotate(0deg);
}
to {
transform: rotate(359deg);
}
}
<button type="submit" disabled="true" class="btn-loading">
<div class="btn-loading-text">Update profile</div>
<!--<div class="btn-loading-spinner"></div>-->
</button>
But when the spinner element is there it suddently goes to the top. I have no idea what's going on.
* {
box-sizing: border-box;
}
.btn-loading {
border-radius: 2px;
font-size: 13px;
font-family: arial, helvetica, sans-serif;
text-decoration: none;
display: inline-block;
font-weight: bold;
outline: 0;
background: #f5f5f5 !important;
border: 1px solid #ddd !important;
color: #aaa !important;
cursor: default !important;
overflow: hidden;
height: 40px;
}
.btn-loading-text {
float: left;
margin: 0px 15px 0px 15px;
}
.btn-loading-spinner {
float: left;
height: 25px;
width: 25px;
margin: 7px 15px 6px -5px;
position: relative;
animation: rotation .9s infinite linear;
border-left: 3px solid #ddd;
border-right: 3px solid #ddd;
border-bottom: 3px solid #ddd;
border-top: 3px solid #aaa;
border-radius: 100%;
}
#keyframes rotation {
from {
transform: rotate(0deg);
}
to {
transform: rotate(359deg);
}
}
<button type="submit" disabled="true" class="btn-loading">
<div class="btn-loading-text">Update profile</div>
<div class="btn-loading-spinner"></div>
</button>
The content of a button element are vertically aligned to the middle.
When you only have .btn-loading-text, that element is 16px tall, and the button is 38px tall, so .btn-loading-text is aligned to the middle.
However, when you also include .btn-loading-spinner, which is 38px tall (including borders and margins), the content of the button is as tall as the tallest of the elements, so 38px. So the alignment to the middle is not noticeable.
If you want to align each element to the middle, instead of aligning the content as a whole, you can use display: inline-block instead of float: left, and vertical-align: middle.
.btn-loading-text, .btn-loading-spinner {
float: none; /* Initial value */
display: inline-block;
vertical-align: middle;
}
* {
box-sizing: border-box;
}
.btn-loading {
border-radius: 2px;
font-size: 13px;
font-family: arial, helvetica, sans-serif;
text-decoration: none;
display: inline-block;
font-weight: bold;
outline: 0;
background: #f5f5f5 !important;
border: 1px solid #ddd !important;
color: #aaa !important;
cursor: default !important;
overflow: hidden;
height: 40px;
}
.btn-loading-text, .btn-loading-spinner {
display: inline-block;
vertical-align: middle;
}
.btn-loading-text {
margin: 0px 15px 0px 15px;
}
.btn-loading-spinner {
height: 25px;
width: 25px;
margin: 7px 15px 6px -5px;
position: relative;
animation: rotation .9s infinite linear;
border-left: 3px solid #ddd;
border-right: 3px solid #ddd;
border-bottom: 3px solid #ddd;
border-top: 3px solid #aaa;
border-radius: 100%;
}
#keyframes rotation {
from {
transform: rotate(0deg);
}
to {
transform: rotate(359deg);
}
}
<button type="submit" disabled="true" class="btn-loading">
<div class="btn-loading-text">Update profile</div>
<div class="btn-loading-spinner"></div>
</button>
I have this JsFiddle, and I can not figure out why the buttons extend outside of the divs.
How can I get them to be inside of the divs?
Here is the CSS
.btn-link {
font-variant: small-caps;
text-decoration: none;
font-size: 1.2em;
padding: 8px 15px 12px 15px;
border-radius: 3px;
background-color: #7dc36b;
color: #ffffff;
}
div.left-nav {
float: left;
width: 200px;
}
div.left-nav > div {
clear: both;
width: 100%;
border: solid 1px red;
}
Here is the HTML:
<div class="left-nav">
<div>new story
</div>
<div>My Stories
</div>
</div>
You can specify display:inline-block; on the buttons, so the div expands to hold the anchors completely.
.btn-link {
font-variant: small-caps;
text-decoration: none;
font-size: 1.2em;
padding: 8px 15px 12px 15px;
border-radius: 3px;
background-color: #7dc36b;
color: #ffffff;
display:inline-block;
}
Fiddle
div.left-nav > div {
overflow: auto; /* removed clear: both; */
width: 100%;
border: solid 1px red;
}
div.left-nav > div > a {
display: inline-block;
}
http://jsfiddle.net/ZjvZu/10/
Hey hope this works for you : -
demo
<div class="left-nav">
<div class="btn">new story
</div>
<div class="btn">My Stories
</div>
CSS:-
.btn-link {
font-variant: small-caps;
text-decoration: none;
font-size: 1.2em;
padding: 8px 15px 8px 15px;
border-radius: 3px;
background-color: #7dc36b;
color: #ffffff;
}
div.left-nav {
float: left;
width: 200px;
}
div.left-nav > div {
clear: both;
width: 100%;
border: solid 1px red;
}
.btn{
padding:8px 15px 8px 15px;
}
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;
}