I am making a simple button in CSS and i need to make 4. I want them to have the same style as the first one i created but with different words in them. Is there a way i can reference nav1 styles into nav2 to save on space?
I hope that makes sense.
Thanks
#nav1
{
background-color:white;
-webkit-transition: all .6s;
width:90px;
line-height:50px;
text-align:center;
font-family: sans-serif;
font-weight: bold;
border-radius: 5px;
position:relative;
top: 10px;
}
#nav1:hover
{
background-color:black;
color:white;
}
#nav2
{
background-color:white;
-webkit-transition: all .6s;
width:90px;
line-height:50px;
text-align:center;
font-family: sans-serif;
font-weight: bold;
border-radius: 5px;
position:relative;
top: 20px;
}
#nav2:hover
{
background-color:black;
color:white;
}
Yes. You can add same CSS properties to multiple IDs, Classes, Elements separating them with commas:
#nav1,
#nav2,
..,
#nav100 {
background-color:white;
-webkit-transition: all .6s;
width:90px;
line-height:50px;
text-align:center;
font-family: sans-serif;
font-weight: bold;
border-radius: 5px;
position:relative;
top: 10px;
}
To change just one property overwrite it:
#nav2 {
top: 20px;
}
But in your case you should use classes:
.nav {
..
}
HTML:
<div class="nav"></div>
<div class="nav"></div>
...
use commas (element1, element2, element3 {}) in order to apply the rule to two or more elements, like this:
#nav1, #nav2
{
background-color:white;
-webkit-transition: all .6s;
width:90px;
line-height:50px;
text-align:center;
font-family: sans-serif;
font-weight: bold;
border-radius: 5px;
position:relative;
top: 10px;
}
#nav2
{
top: 20px;
}
#nav1:hover, #nav2:hover
{
background-color:black;
color:white;
}
Use the class attributes on your buttons.
html:
<a href='#' class='myButton'>some text</a>
css:
.myButton
{
background-color:red;
}
all element with the 'class' attribute set to myButton will now have a red background.
Alternatively you can use Catalin Munteanu first solution and add a list of all the id you want separated by ',' before the css block.
If you use class="nav1" instead of id="nav1", you can use the class on all the buttons you want to style this way.
You have to use .nav1 in your css instead of #nav1
Look here: DEMO
Related
I want to be able to write a style in less, where I can apply it to 4 span tags. I want each span to have all the same properties, but I want to have be 30px; of space between each one. An finally, I want the 2nd span to have a different distance from the right than all the others.
Is there a way to do this, or do you need to write a separate style for span 2?
So here is my style for each span, which works fine. But there must be a better way with less...??
.right-lines {
z-index:100;
display:block;
position:absolute;
width:80px;
height:2px;
background-color:#fff;
right:-80px;
margin:40px;
top:140px;
}
.right-lines2 {
z-index:100;
display:block;
position:absolute;
width:80px;
height:2px;
background-color:#fff;
right:-50px;
margin:40px;
top:180px;
}
.right-lines3 {
z-index:100;
display:block;
position:absolute;
width:80px;
height:2px;
background-color:#fff;
right:-80px;
margin:40px;
top:220px;
}
.right-lines4 {
z-index:100;
display:block;
position:absolute;
width:80px;
height:2px;
background-color:#fff;
right:-80px;
margin:40px;
top:260px;
}
If you want the lines to be 30px from one another, use 30px of margin. There is no need for so much absolute positioning. This also allows for fewer specific styles.
body {
background: black;
}
.right-lines {
position: absolute;
top: 140px;
right: 0;
z-index: 100;
font-size: 0;
text-align: right;
}
.right-lines span {
display: block;
width: 80px;
height: 2px;
background-color: #fff;
margin: 0 80px 30px auto;
}
.right-lines span:nth-of-type(2) {
margin-right: 50px;
}
.right-lines span:last-child {
margin-bottom: 0;
}
<div class="right-lines">
<span></span>
<span></span>
<span></span>
<span></span>
</div>
Try making a common class or use the span tag itself to style the common features. You can, of course get even more efficient with other class stylings. And a sample span tag might look like <span class="span_class right-lines">...</span>
/* common styles */
.span_class {
z-index:100;
display:block;
position:absolute;
width:80px;
height:2px;
background-color:#fff;
margin:40px;
}
/* And now make the special ones */
.right-lines {
right:-50px;
top:180px;
}
.right-lines2 {
right:-50px;
top:180px;
}
.right-lines3 {
right:-80px;
top:220px;
}
.right-lines4 {
right:-80px;
top:260px;
}
is there a better way to create this style of "underline" through CSS, other than creating a background image for it?
To be clear, I'm only interested in the "duplicated line" effect, a thicker and shorter line sitting directly atop a thinner and longer line of a different color. Thanks!
You can use pseudo elements here, i.e. :before and :after. Here, what am doing is, using an h1 element which am displaying it as inline-block. Later, we need to use CSS positioning to set both the bottom borders in place, as the borders are smaller than your element.
Later, again by using CSS positioning, we position the small border on top of the bigger one. Note that am using left: 50%; and transform: translateX(-50%) to position the border in horizontally center.
Make sure you don't miss out the z-index as it is important to use here, else the other border will render on top of the smaller one.
#import url('https://fonts.googleapis.com/css?family=Varela+Round');
* {
margin: 0;
padding: 0;
outline: 0;
box-sizing: border-box;
}
h1 {
position: relative;
display: inline-block;
font-family: Varela Round;
font-size: 24px;
text-transform: uppercase;
font-weight: bold;
color: #401f1c;
margin: 40px; /* not required, only for demo purpose */
}
h1 span {
color: #efcc4c;
}
h1:before,
h1:after {
content: '';
position: absolute;
left: 50%;
transform: translateX(-50%);
}
h1:before {
bottom: -11px;
width: 40px;
border-bottom: 3px solid #efcc4c;
z-index: 1;
}
h1:after {
width: 80%;
border-bottom: 1px solid #ddd;
bottom: -10px;
}
<h1>Our <span>Services</span></h1>
Edit: Refactored my code and making the demo more precisee.
Try this
HTML
<div class="text">
<span>our</span>
Services
</div>
CSS
.text{
font-weight:600;
font-size:25px;
color:red;
position: relative;
display:inline-block;
}
.text::after,
.text::before{
content:"";
position: absolute;
left: 0;
right: 0;
bottom: -5px;
margin:auto;
border-radius:5px;
height:0px;
}
.text::before{
width:100%;
border:1px solid #ccc;
}
.text::after{
width:50%;
border:2px solid red;
bottom:-6px;
}
.text span{
color:#000000;
}
Link for reference
hope this helps..
I always create "divider", like:
<div class='divider'>
<div class='divi-1'></div>
<div class='divi-2'></div>
<div class='divi-3'></div>
</div>
CSS:
.divider{
padding-top:15px; //or other
text-align:center;
display:block; // or column in bootstrap like col-md-12
}
.divider .divi-1{
display:inline-block;
height:2px; //or other
width:50px; // or other
background:#e5e5e5;
.
.divider .divi-2{
display:inline-block;
height:2px;
width:50px;
background:#000000;
}
.divider .divi-1{
display:inline-block;
height:2px; //or other
width:50px; // or other
background:#e5e5e5;
}
And that's it. You can also use vertical-align for inline-block so You have some more options to move lines verticaly ... and also it's in the flow so You know what size it have and can be sure that other elements won't overlap it.
Hi I was wondering how I can take styles from another class on a hover state in LESS.
At the moment I have:
.language .active {
background:#de1f24;
color:#ffffff;
padding:7px;
text-align:center;
border-bottom: solid 1px #3A3838;
display: inline-block;
border-bottom-left-radius: 4px;
border-bottom-right-radius:4px;
font-weight:bold;
}
.language a {
color:red;
font-weight:bold;
}
&:hover{
&:extend(.language);
}
.fontSize{
font-size:22px;
}
.box{
color:#fff;
width:50px;
height:50px;
background:red;
font-size:14px;
&:hover{ /*This will add Hover effect to .box */
.fontSize; /*This will inherit the style from the .fontSize class*/
background:blue;
}
}
Codepen Demo : http://codepen.io/anon/pen/rHghJ
I am not sure I understood a question. But try using this construction
.language a {
color:red;
font-weight:bold;
&:hover {color:blue;}
}
.language-2 a {
.language a:hover;
}
I am trying to add two different color underline in same text but not able to set 2nd underline its gone down from the first line.
Here is the link example "click here for exmple"
check the title's underline of this page Other Meetings , Church Services.
.zaptitle {
margin-bottom:20px !important;
}
.home_widget .page_title_s2, .home_widget .page_title_s3, .home_widget .page_title_s4,
.page_title_testimonials, .zaptitle {
border-bottom-color:#EDEDED;
border-bottom-style:solid;
border-bottom-width:1px;
color:#545454;
float:left;
font-family:Arial, sans-serif;
font-size:16px;
font-weight:bold;
margin:0 0 20px;
min-height:30px;
padding:0;
position:relative;
width:100%;
}
And
<div class="zaptitle page_title_s2 ">
<span class="page_info_title_s2" style="border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: rgb(16, 185, 185);">Latest News</span>
</div>
The beauty about CSS is that things don't really have to be like they seem to be. You can create such a line using other elements.
JSfiddle
HTML:
<div id="hello">hello</div>
<div id="left_line"></div>
<div id="right_line"></div>
CSS:
#left_line {
background-color:black;
margin-right:90%;
float:left;
width:10%;
height:1px;
}
#right_line {
background-color:red;
float:right;
width:80%;
height:1px;
position:absolute;
left:10%;
}
Please add the following code in your existing CSS:--
.page_info_title_s2{
position: relative;
float: left;
padding-bottom: 10px;
line-height: 20px;
top: 1px;
vertical-align: baseline;
}
use above code to exact line overwriting. See the working fiddle:--
http://jsfiddle.net/npsingh/RgE2h/1/
you just need to add this class
.page_info_title_s2{
display:block;
float:left;
min-height:30px;
}
this is working Fiddle
Maybe I am trying to much but What I want to do is to put the post title above the featured image on my page. I got it to work by possitioning the text, but of course this stops my page from being a responsive page.
What I am looking for is to have text with a background colour of a certain width (so not spread from left to right) to be automatically centered and in absolute position.
Is this possible?
This is what I have until now:
<style>
.post_title
{
font-family: sans-serif;
font-size: 14px;
color: #fff;
text-align:center;
position: absolute;
background-color: #0E0EFF;
display:table;
margin:auto;
width: 40%;
padding: 3px;
border-radius: 2px;
}
</style>
Any help would be highly appreciated, I have been looking for the answer for hours now.
Thx!
I'm not sure if I understand your question right, but you can try to put a wrapper around the .post_title, let's say div class="titlewrapper"
Apply styles something like this:
div.titlewrapper {
width:100%;
text-align:center;
}
div.titlewrapper .post_title {
font-family: sans-serif;
font-size: 14px;
color: #fff;
width:auto;
background-color: #0E0EFF;
display:inline-block;
margin:auto;
padding: 3px;
border-radius: 2px;
}
Does this answer your question?
Groet, Jeroen
Could THIS work for you?
CSS:
.center_title {
margin-left:auto;
margin-right:auto;
}
.post_title {
font-family: sans-serif;
font-size: 14px;
color: #fff;
text-align:center;
background-color: #0E0EFF;
display:table;
margin:auto;
width: 40%;
padding: 3px;
border-radius: 2px;
}
HTML
<div class="center_title">
<div class="post_title">test</div>
</div>
Try not to use Positions, only if you really need to!