I have some html (auto generated) like this :
<a>Save</a> <a>Cancel</a>
These two buttons are auto-generated via a framework so I have little control over the space between these two links. I want to include some more space in between the two buttons.
I have added some css
.fw-link {
margin-left: 6px!important;
margin-right: 6px!important;
}
but again this adds margin to the right of Cancel and Left of Save link - wasting much space.
Is it possible to write some CSS that applies based on the text value of LINK?
Your CSS can be:
a {
margin-left: 6px!important;
margin-right: 6px!important;
}
a:first-child {
margin-left: 0 !important;
}
a:last-child {
margin-right: 0 !important;
}
What this will do is:
1. Add space between all links
2. Remove left margin from first link
3. Remove right margin from last link
Sample codepen link
use something like:
a:nth-child(1) { //1st a
margin-right: 6px //!important needed?
}
a:nth-child(2) { //2nd a
margin-left: 6px //!important needed?
}
Try using the attribute name.
<a name="save">Save</a> nbsp; <a name="cancel">Cancel</a> nbsp;
Then in your CSS file:
a[name=save] {
margin-right: 6px!important;
}
a[name=cancel] {
margin-left: 6px!important;
}
Related
I am trying to add padding after a <details> tag because the next <p> is basically touching it...
I tried adding padding-bottom but it just makes the grey tag larger and doesn't add space...
The CSS I currently have is:
// Start Drop Down Details
details {
padding: .8em;
background: #353535;
border-radius: 20px
}
summary::-webkit-details-marker {display: none; }
details summary::before {
content:"►";
padding: .7em;
}
details[open] summary::before {
content:"▼";
padding: .7em;
}
If you want to see what it looks like live you can see it here: https://www.seekadventure.net/d/198-myog-backpacking-quilt-outdoorink
Padding adds space between the content and the border i.e. making the grey tag bigger.
Margin adds space between the border of an element and the border of other elements.
If you want to add space between the two elements you will need to add margin.
details {
margin-bottom: 1rem;
padding: .8em;
background: #353535;
border-radius: 20px
}
When changing the html dir attribute from ltr to rtl, all directed margins and paddings need to be reversed :
[dir='ltr'] {
margin-left: 80px;
}
[dir='rtl'] {
margin-right: 80px;
}
Is there another better approach?
If you are sure that you need to reverse every instance of e.g. margin and you are using some css preprocessor such as sass. You could create the following mixin:
#mixin horizontal-margin($left: initial, $right: initial) {
&[dir="ltr"] {
margin-left: $left;
margin-right: $right
}
&[dir="rtl"] {
margin-right: $right;
margin-right: $left;
}
}
And then use it like this:
p {
background: blue;
#include horizontal-margin(16px, 48px);
}
and in your html
<p dir="ltr"> some text</p>
Hope this helps.
I have below HTML and CSS and I want to make to text align to middle(which is present in cardheader element) of the Card Element . But its not working can you please check what is wrong.
And also please suggest me is it good practice to have CSS as below
JSFiddle
#card {
margin : 3%;
padding: 2%;
border : 1%;
}
#c1,
#c2,
#c3 {
vertical-align: top;
margin : 1%;
display : inline-block;
width : 30%;
height : 600px;
box-shadow : 0 4px 10px 0 rgba(0,0,0,0.8);
transition : 0.2s;
border-radius : 8px;
}
#c1:hover,
#c2:hover,
#c3:hover {
box-shadow: 0 8px 25px 0 rgba(0,0,0,0.8);
}
#c1 {
background-color: #ecf0f1;
}
#c2 {
background-color: #ecf0f1;
}
#c3 {
background-color: #ecf0f1;
}
cardheader {
font-size : 20px;
font-weight: bold;
text-align : center;
}
<cardheader> is not a valid HTML tag. I've changed your code to be a <div> with a class for the cardheader:
Not valid:
<cardheader>Option 1</cardheader>
So change it to:
<div class="cardheader">Option 1</div>
And in CSS, change cardheader to .cardheader
https://jsfiddle.net/479nk6so/2/
Adding display:block; to cardheader resolves the text alignment issue.
All you have to do is add display: block to your #cardheader id
Here is an updated fiddle: jsFiddle
About your question if this is a good practice. I would suggest you use the same class for each card as it will have the same style from what I can see. This will make your css cleaner (having to style 1 class instead of many id's), and will help avoid confusion in the long run.
Hope this helps!
Right now I'm working on a bilingual website and kinda confuse about how to handle the RTL CSS codes. I have 2 things in my mind as follows;
1. Single CSS file - Overriding LTR default codes.
.content {
position: relative;
padding: 5px 10px 5px 240px;
}
.rtl .content {
padding-right: 240px;
padding-left: 10px;
}
2. Single CSS file - Without overiding
.content {
position: relative;
padding-top: 5px;
padding-bottom: 5px;
}
.ltr .content {
padding-left: 240px;
padding-right: 10px;
}
.rtl .content {
padding-right: 240px;
padding-left: 10px;
}
Using the first method, there will a lot of overrides. Also using the second method there will be a lot of codes in the css file. I know both will do the trick but curious to know which is the best method. Kindly suggest me if there is another method too.
If you are looking for a more robust solution, I would suggest you these approaches:
CSS Preprocessor
Learn and use a CSS preprocessor like LESS (if necessary, use a plugin like Bi-App-Less) and conditionally add the correct stylesheet.
Back-end controlled variable
Use CSS mixed with some back-end variable like:
direction: <%=rtl%>;
padding-<%=right%>: 10px;
padding-<%=left%>: 240px;.
RTL Tool
Use a RTLer tool.
CSS can display your text right to left with this:
.rtl
{
direction:rtl;
}
I prefer to handle padding and margins on a single line:
.content {
position: relative;
padding:5px 10px 5px 240px;
}
.rtl .content {
padding:0 240px 0 10px;
}
You could try doing something like this
.content {
width: 500px;
padding: 5px 10px;
border: 1px solid #ddd;
}
.content.rtl {
float: right;
direction: rtl;
}
try to hardcode the minimum amount of paddings/margins specific to a direction, heres an example http://jsfiddle.net/icodeforlove/UNS5L/
I am trying to create a button for my link which has the name on the button
and allows the user to click on it and go to the link.
Also I'm not sure why but my link "click-able range" seems to be extended.
Here is the Code:
<body>
<div id="container">
<div id="link">My Favorite Website</div>
</div>
</body>
Here is the CSS:
#container {
width:960px;
margin-left: auto;
margin-right: auto;
padding: 30px 0px;
}
a {
padding: 7px 100px;
border-radius: 10px;
background-size: 80px 60px;
background-color: green;
text-decoration: none;
}
#link {
padding: 7px;
font-size: 15px;
font-weight: bold;
font-style: italic;
}
Thanks!
Your link is inline element so you need to make it block or inline-block to add your styles so:
CSS
a {
display:inline-block;
}
Having a block element within an inline one is causing your problems.
By default, anchors are displayed inline. You need to display it a little differently, as inline-block:
a {
padding: 7px 100px;
border-radius: 10px;
background-size: 80px 60px;
background-color: green;
text-decoration: none;
display:inline-block;
}
JSFiddle
Remove div tag into a tag..
Demo
<div id="container">
My Favorite Website
</div>
just add this to #link in css
appearance:button;
-moz-appearance:button;
-webkit-appearance:button;
is an inline element. To make it behave like a block level element, you need to define its display property in CSS.
a {display:block;} or a {display:inline-block;}
and your link "click-able range" seems to be extended, because you are using a , which is a block level element, inside your tag.
Block level elements take the entire width of its container.
You need to redefine its bevavior.
link{display:inline-block;} or #link{display:inline;}