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.
Related
Is it possible to make a capsule shape using border-radius without a set width or height and include between delimeter?
Yes, You can try this way
.container {
width: 90%;
padding:20px;
margin: 10px auto;
background:#000;
}
ul {
list-style: none;
padding: 7px;
background: #333;
border-radius: 12px;
display: inline-flex;
}
li {
padding: 0 10px;
border-right: 1px solid #999;
line-height: 1;
color: #999;
font-size: 12px;
display: inline-block;
vertical-align: middle;
}
li:last-child {
border-right: none;
}
<div class="container">
<ul>
<li>abc</li>
<li>def</li>
<li>ghi</li>
</ul>
</div>
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;
}
JavaScript
nav{
width: 100%;
height: 60px;
background: linear-gradient(to bottom, #fff, #bbb);
border-bottom: 1px solid #fff;
}
.wrapper{
max-width:1200px;
margin:0 auto;
}
li{
float:left;
width: 15%;
list-style: none;
margin-top: 5px;
}
a{
text-decoration: none;
box-sizing: border-box;
display: block;
padding: 10px 10px;
text-align: center;
color: #052537;
}
.nav01,
.nav03,
.nav05{
border-right: 1px solid #999999;
border-left: 1px solid #fff;
}
.nav02,
.nav04{
border-left: 1px solid #fff;
border-right: 1px solid #999999;
}
<nav>
<div class="wrapper">
<div class="nav-global">
<ul>
<li class="nav01">go1</li>
<li class="nav02">go2</li>
<li class="nav03">go3</li>
<li class="nav04">go4</li>
<li class="nav05">go5</li>
</ul>
</div>
</div>
</nav>
Nav bar
Hello, everyone, I have the problem to design the nav bar very first and the last border. I want to make borders like in the shared picture. I can't figure it out how to design nav01 first border and nav 05 last border because I want a combination of two borders as I did in nav02,nav03 and nav04. Please help me
One way is to use border and use different properties of border to get your desired result. You can experiment and be as creative as you can. Just for once, go through all the possibilities and what CSS is capable of. Then you can easily figure out which properties to combine to make your own prototype into code.
nav {
width: 100%;
background: #e4e4e4;
font-family: 'arial';
}
.navbar-ul a {
text-decoration: none;
list-style-type: none;
display: block;
float: left;
font-size: 20px;
width: 120px;
border: 1px solid #000;
text-align: center;
margin: 10px 0px;
border-left: none;
border-top: none;
border-bottom: none;
color: #1f1f1f;
}
ul a:last-child {
border-right: none;
}
li {
margin: 5px;
}
a:hover {
text-decoration: none !important;
}
li:hover {
margin: 5px;
background: #1f1f1f;
color: white;
text-decoration: none !important;
transition: all .2s;
border-radius: 4px;
}
.navbar-ul a:hover {
cursor: pointer;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<nav class="clearfix">
<ul class="navbar-ul">
<a>
<li>Home</li>
</a>
<a>
<li>Profile</li>
</a>
<a>
<li>Contact</li>
</a>
<a>
<li>Blogs</li>
</a>
</ul>
</nav>
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;
}