Consider the following:
<a>a</a><a>b</a>
How can I align the second anchor (b) to the right?
PS: float is an abuse in this situation. It's not made for this and it causes some problems, so I need other more reasonable solution.
Just do this:
style="float:right"
Like:
<div>
Equipment
Model
</div>
http://jsfiddle.net/umerqureshi/0jx7kf1L/
You'd need separate containers.
<p>
<span>
<a>Left</a>
</span>
<span class="align-right">
<a>Right</a>
</span>
</p>
p {font-size:0; /* Fixes inline block spacing */ }
span { width:50%; display:inline-block; }
span.align-right { text-align:right; }
span a { font-size:16px; }
JSFiddle example.
Try this CSS,
Using CSS3 nth-child()
a:nth-child(2) {
display: inline-block;
text-align: right;
width: 100%;
}
Demo: http://jsbin.com/opexim/3/edit
Note: nth-child is a CSS3 and won't work on older browsers like IE6, 7 and 8
Support for old browsers
Set class to second <a> anchor element and apply the CSS.
<a>a</a><a class="right">b</a>
a.right {
display: inline-block;
text-align: right;
width: 100%;
}
Maybe you can make something like this: <a>a</a><a class="right">b</a>
And CSS like this:
a.right {
position: absolute;
right: 0;
}
Try and use :nth-child():
a:nth-child(2) {
display: inline-block;
text-align: right;
width: 100%;
}
I don’t know if this works for the older browsers.
Assign a class or id to the 'b' containing anchor and give margin-left:100% to it.
For example:
.second{margin-left:100%;}
or else
a:nth-child(2){margin-left:100%;}
or else
you can also do like mentioned below:
css
a:nth-child(1){display:inline-block;width:50%;text-align:left;float:left;}
a:nth-child(2), .second{display:inline-block;width:50%;text-align:right;}
Working Fiddle
You may try the below code:
<a>a</a><a align="right">b</a>
<a>a</a><a style="text-align:right">b</a>
<div class="mydiv">
<a class ="mylink"> test </a>
</div>
.mydiv {
text-align: left;
}
You must enter your styles for the 'a' tag algin give to 'div'.
Related
I've been having trouble with this,I'd like to make a sort of "page navigation" with two links (to go forwards and backwards). On one line, I'd like a link on the far left side, and on the same line, a link on the far right. If the curly braces were the extent of the parent object, it would look something like this:
{Backwards Forwards}
The left side of the left link should be flush with the content boundary (is that what you'd call it? I mean just before padding sets in) and vice-versa.
Thanks.
So many ways to do it... one of them is using inline-block elements, the other one is using floats, etc.
Below are the two examples, the second one featuring a parent-child structure, like you wanted.
div {
display: inline-block;
height: 20px;
width: 300px;
background: #eee;
padding: 20px;
text-align: center;
}
#l {
float: left;
}
#r {
float: right;
}
<a>Backwards</a><div>Content</div><a>Forwards</a>
<br /><br />
<div><a id="l">Backwards</a> Content <a id="r">Forwards</a></div>
float:left to the first one, float:right to the second one.
I do it normally with class names .fl / .fr and and a containing div with a clear:both.
Because of collapsing height of the div use a crossbrowser hack
<style>
/*---------------float / clear-------------*/
.fl {float: left;}
.fr {float: right;}
.clear:after {
content: ".";
display: block;
font-size: 0;
height: 0;
clear: both;
visibility: hidden;
}
.clear {display:inline-block;}
/* Hide from IE Mac \*/
.clear { display:block; }
/* End hide from IE Mac */
* html .clear {height:1px;}
/*---------------clear-------------*/
</style>
<div class="clear">
<a class="fl" href="#">backward</a>
<a class="fr" href="#">forward</a>
</div>
Here is a menu I was working on today actually. You just need to add float: right; to your second <a> tag. Here is my example:
JS Bin
I'm wondering why the following selector won't work.
The html:
<div id="commissie">
<img class="logo" src="http://www.dalcanton.it/tito/code/alcaze/foobar.png">
</div>
The css:
#commissie .logo img {
margin-top: 100px;
}
So simple as that, can someone tell?
You are using it in wrong manner. .logo class is used for img.
use like this.
#commissie img.logo {
margin-top: 100px;
}
You're doing mistake at here,
#commissie .logo img
Change this to,
#commissie img.logo
{
margin-top: 100px;
}
Before :
AFTER:
I'm trying to change style of WORK div when hovering at one of the hexagons. I've put them all into a table as a container, but it doesn;t seem to work.
Maybe you can give me a hint, thank you.
Example
I just answered another question like this (but was specific to a task). I shall use the same example so you can have a look at how it works.
You can do this just using CSS:
HTML:
<img name="image1" src="./goal/images/normalButton.png" style="vertical-align: middle; width : 183px;" />
<h2 class="mnrImageH2"><span class = "mnrImageSpan">Haberler</span></h2>
CSS:
.mnrImageH2 {
position: absolute;
top:1px;
left: 0;
width: 100%;
}
.mnrImageSpan {
font: bold 24px/45px Helvetica, Sans-Serif;
letter-spacing: -1px;
padding: 10px;
}
h2 {
color: white;
}
img:hover + h2 {
color: #000;
}
So using the + selector we can select the h2 when we hover over an img. Take this and do what you need to do with it.
DEMO HERE
If I correctly understand your point the answer is "You cannot with current schema."
You shall use + or ~ selector. They works if elements have the same parent so you can apply CSS rule if any of hexagon is hovered but you cannot determine particular one.
Add the rule to your example to see what i'm saying:
*:hover + * > * > .work-box{
border: solid red;
}
If your elements have the same parent solution is quite simple - Example
There is good site for Russian speakers about ~ selector
This can help you in your problem and if you are not satisfy by this then comment on this post i will try to solve that also.
<div>
<div class="e" >Company</div>
<div class="e">Target</div>
<div class="e" style="border-right:0px;">Person</div>
</div>
<div class="f">
<div class="e">Company</div>
<div class="e">Target</div>
<div class="e" style="border-right:0px;">Person</div>
</div>
And use hover like this,
.e
{
width:90px;
border-right:1px solid #222;
text-align:center;
float:left;
padding-left:2px;
cursor:pointer;
}
.f .e
{
background-color:#F9EDBE;
}
.e:hover{
background-color:#FF0000;
}
I have the following HTML:
<div class="columns clearfix">
<div class="xl float-left gutter-right"
data-ng-show="modal.data.createdDate">
<span class="label">Created</span>
<input class="full-width" type="text" value="{{modal.data.createdDate }}" />
</div>
<div class="xl float-left"
data-ng-show="modal.data.modifiedDate">
<span class="label">Modified</span>
<input class="full-width" type="text" value="{{modal.data.modifiedDate }}"/>
</div>
</div>
I am looking for a way to simplify this HTML with some CSS. Can someone tell me how I could remove the gutter-right and inline and make it so that this is introduced with a class in the top-level <div>? Somehow I want to specify gutter-right but just have it for the first inside <div>. Note I am using IE9 browsers and above. Also if it's possible I would like to have it so I don't need to specify the span.label and the input.full-width.
Note the reason I am trying to do this is because I have many fields set up like that with two fields on a row and a label above each field.
CSS:
.float-left {
float: left;
}
.gutter-right {
margin-right: 2rem;
}
.form label, .form .label {
display: block;
margin-bottom: 0.5rem;
}
.full-width {
box-sizing: border-box;
width: 100%;
}
Just use element:nth-child(1){ /*whatever*/ }
or element:first-child { /*whatever*/ }
You can also use element:nth-of-type(1){ /*whatever*/ }
You can just use E:first-child css selector.
The :first-child selector is used to select the specified selector, only if it is the first child of its parent.
Example
List of CSS selectors
Instead of a rule for .gutter-right, go for .xl:first-child:
.xl:first-child {
margin-right: 2rem;
}
Fiddle first-child on MDN
Is there any way to add both subscript and and superscript to the same element? If I do
Sample Text<sub>Sub</sub><sup>Sup</sup>
the superscript appears after the subscript. One I idea I had is to do something like:
<table>
<tr>
<td rowspan='2' valign='center'>Sample Text</td>
<td>Sup</td>
</tr>
<tr>
<td>Sub</td>
</tr>
</table>
It seems to do the job but is quite ugly. Any better ideas?
Thanks!
This one is similar to CyberDudes approach, additionally it indents the following text depending on the width of sub and sup:
http://jsfiddle.net/jwFec/1/
Some text <span class="supsub"><sup>sup</sup><sub>sub</sub></span> followed by other text.<br />
<style>
.supsub {
display: inline-block;
}
.supsub sup,
.supsub sub {
position: relative;
display: block;
font-size: .5em;
line-height: 1.2;
}
.supsub sub {
top: .3em;
}
</style>
I'm no CSS guru but you could try something along the lines of http://jsfiddle.net/TKxv8/1/
There are a lot of hardcoded values and the effects on other elements around may only be found afterwards but it's a good place to start.
Sample Text
<span class='supsub'>
<sup class='superscript'>Sup</sup>
<sub class='subscript'>Sub</sub>
</span>
.supsub {position: absolute}
.subscript {color: green; display:block; position:relative; left:2px; top: -5px}
.superscript {color: red; display:block; position:relative; left:2px; top: -5px}
I use the following:
.supsub {
display: inline-flex;
flex-direction: column;
justify-content: space-between;
vertical-align: middle;
}
<span class="supsub">
<span>sup</span>
<span>sub</span>
</span>
Well, you can specify position of sup relative to Sample Text's right border.
http://jsfiddle.net/a754h/
Here's a clean solution. Create two CSS classes:
.nobr {
white-space: nowrap;
}
.supsub {
display: inline-block;
margin: -9em 0;
vertical-align: -0.55em;
line-height: 1.35em;
font-size: 70%;
text-align: left;
}
You might already have the "nobr" class as a <nobr> replacement. Now to express the molecular formula for sulfate, use the "supsub" class as follows:
<span class="nobr">SO<span class="supsub">2-<br />4</span></span>
That is, enclose your superscript/subscript within the "supsub" class, and put a <br /> between them. If you like your superscripts/subscripts a bit larger or smaller, then adjust the font size and then tinker with the vertical-align and line-height. The -9em in the margin setting is to keep the superscripts/subscripts from adding to the height of the line containing them; any big value will do.
On addition to the solution of CyberDude here there is a example that you can do using sup and sub tags and css with flexbox.
<div class="expression">
Sample Text
<span class='supsub'>
<sup class='superscript'>Sup</sup>
<sub class='subscript'>Sub</sub>
</span>
</div>
.expression {
display:flex;
align-items: center;
}
.supsub {
display: flex;
flex-direction: column;
margin-left: 2px;
}
.subscript {
color: green;
display:flex;
}
.superscript {
color: red;
display:flex;
}
You can see and test this here JsFiddle
It can be done very simply by using inline style as well. Specifically: style='position: relative; left: -0.4em;'
So an example would be: u<sub>i</sub><sup style='position: relative; left: -0.4em;'>T</sup>
One can vary the position by changing the value after left. It doesn't reproduce here, but it works fine otherwise.