How can I add a tab character to the link text on a URL
i.e. instead of
col1 col2
i have col1 -TAB SPACE HERE- col2
The reason for this, is that Im creating a URL list by concatenating columns, and want to space them out correctly, so the url list looks neat.
Ive tried adding a chr(9) into the gap, as well as but it doesn't work. I also know I can target the link with an a:link {...} but not sure how to use this to get a tab in there.
Any help much appreciated
thx. Richard
There are no Tabs in html. Why don't you use a span inside?
<a href="url">
<span class='column'>col1</span>
<span class='column'>col2</span>
</a>
Then add 'column' to your css:
.column {
width: 50px;
float: left;
}
If you cannot add CSS (you can only modify the text) then you need to add styling inline:
<a href="url">
<span style='width: 50px; float: left;'>col1</span>
<span style='width: 50px; float: left;'>col2</span>
</a>
Related
Using only HTML and CSS, when I use the a tag it is prefixing it with an _
I was thinking I had used the content tag some where, but to my surprise, it persists in a JSFIDDLE
<section>
<h3>Activity</h3>
<a href="#">
<div class="activity">
<div>Some</div>
<div>> 198 days?</div> <!-- why does this render as _> 198 days? -->
<div>Progressing</div>
</div>
</a>
<br />
> does not have underscore despite having >
</section>
CSS
.activity {
background: #3ea18f;
clear: both;
margin-bottom: 2%;
border-radius: 4px;
padding-left: 10%;
}
.activity div {
width: 33%;
display: inline-block;
}
RESULT
Removing the a tag resolves the issue but, I need the a tag
Likewise, removing the CSS .activity div also removes the _ but obviously I need the style
Same issue persists if I use <div>> 198 days?</div>
I don't know it this behaviour is intended or if it is a rendering bug.
In front of the div with the _ there is a space because you have a new line, and if you add an outline around all elements (updated fiddle) you see that the _ is between the two elements.
If you add another element (next fiddle) you see that there is another _. So the underscore appears between all inline-block elements in the row.
The problem is not related to >.
To get around this problem without changing the rest of the appearance you might add text-decoration to none to the surrounding a.
You don't have a > does not have underscore despite having > in front because there is no space between the <a href="#"> and the > does not.
<section>
<h3>Activity</h3>
<a href="#">
<div class="activity"><div>Some</div><div>> 198 days?</div><div>Progressing</div>
</div>
</a>
<br />
> does not have underscore despite having >
</section>
https://jsfiddle.net/y4zpgkfe/
I am attempting to insert an image into an HTML script? Example: How do I choose the image that is utilized where the parentheses are? Thank you!
class="" is not used to insert images. It's a class name. Therefore:
if you're interested in inserting an image using class than probably it's about a backgroud-image:
HTML
<span class="someClassName"></span>
CSS:
.someClassName{
display: inline-block;
width: 100px;
height: 100px;
background-image: url("pathtoimage.jpg");
}
otherwise you need an <img src="pathtoimage.jpg" alt=""> HTML tag inside your SPAN element
I would like to know how to make a newline inside the html tag with CSS. The explanation is as below:
This is the code HTML that I have:
<ul class="dropdown-menu pull-right" id="mess_menu" role="menu"><li style="border-bottom: 1px #D3D3D3;border-bottom-style: solid;"><span style="display:block; width: 200px">The numbers in the table specify the first browser version that fully supports the property.The numbers in the table specify the first browser version that fully supports the property.</span></li></ul>
This is the code CSS (it belongs to the menu):
#mess_menu{
overflow: scroll;
overflow-x: hidden;
height: 360px;
width: 400px;
}
And this is the screenshot what I obtain on the screen:
If I change the code HTML above by adding the tag <a> as below (notice that I put <a href="" style="display:block;">) :
<ul class="dropdown-menu pull-right" id="mess_menu" role="menu"><li style="border-bottom: 1px #D3D3D3;border-bottom-style: solid;"><span style="display:block; width: 200px">The numbers in the table specify the first browser version that fully supports the property.The numbers in the table specify the first browser version that fully supports the property.</span></li></ul>
The menu will appear on my screen as below:
As you can notice from the screenshot above, the content of the <li> has changed and the totality of the text is not shown (only "The numbers in the table specify the first br" is shown").
So, my questions are:
How to make a newline inside the html tag <a> in order to make all the content of the tag (which is contained inside the tag <a>) appear?
If it is possible, how to make it with CSS?
You can use the <br> tag and it is working.
As you discovered, Bootstrap adds white-space: nowrap to a tags within a dropdown-menu.
You can override that by adding this style:
.dropdown-menu > li > a {
white-space: normal;
}
Fiddle
I have a strange problem with my html/css code. I would like to have a tag in another one tag. Here is a basic code of my task:
<a href='2.html'>
<div style="width: 300px; height: 200px; padding-left: 100px; padding-top: 100px;">
text <a href='1111.html'> OK </a> text
</div>
</a>
This solution doesn't help me because of the task and the current code of the application:
<div style="width: 300px; height: 200px; padding-left: 100px; padding-top: 100px;">
<a href='2.html'>text </a><a href='1111.html'> OK</a> <a href='2.html'>text </a>
</div>
I would like to have a tag in another one tag.
You cannot. It is forbidden by the HTML specification.
HTML 5:
Content model:
Transparent, but there must be no interactive content descendant.
a elements are interactive content.
HTML 4:
<!ELEMENT A - - (%inline;)* -(A) -- anchor -->
Note the -(A) which excludes a element descendants.
XHTML 1:
a
must not contain other a elements.
What you're asking for isn't valid. Nested <a> tags are not allowed.
But you may try something like this
<div onclick="window.location='http://www.example.com/a.html'">
text...
<a href='http://www.example.com/b.html'>OK</a>
</div>
That is invalid, you cannot have a hyperlink inside another hyperlink.
The only way of getting around, is to create a hyperlink1, then create hyperlink2, then again write a hyperlink 2 to make it feel like the hyperlink1 is a wrapper around hyperlink2. Which you're already using.
in html language there is some rules that only one hyperlink inside the tag. There is no rule that allow you to insert two links in tag.
OK
This is the syntax that you should use. If you want it to give another link then you have to write the link another time.
As people have previously stated, your code is invalid. <a href='2.html'>text </a> would just turn out as a link to 2.html but when you write <a href='1111.html'> OK <a href='2.html'>text </a> , you are trying to write a link which goes to 2.html and 1111.html at the same time. If you want the link to open two locations at the same time, you are going to have to use JavaScript. To do exactly what you want above, you'd want this:
HTML
<div style="width: 300px; height: 200px; padding-left: 100px; padding-top: 100px;">
<a href='2.html'>text </a><a href='javascript:openTwo();'> OK </a><a href='2.html'>text </a>
</div>
JS
function openTwo(){
window.open("1111.html", "first Window", _blank);
window.open("2.html", "second Window", _blank);
}
I am not sure how to get the following behaviour using a combination of HTML and CSS:
foo = this
foobar = bit
goso = needs
etcetc = aligning
Now I could just insert spaces where required (like I did above), but I'm pretty sure there must be a way to do this "automatically".
I know I could use tables to do this, but would prefer not to. Is there any other way of doing this?
My question boils down to this: How do I automatically align text vertically, in a similar way to tabs in office suites, using HTML/CSS.
Here is an in context example:
<p><span class="a">foo</span> <span class="b">=</span> <span class="c">"abcDeveloper"</span></p>
<p><span class="a">bar</span> <span class="b">=</span> <span class="c">"123"</span></p>
<p><span class="a">foobar</span> <span class="b">=</span> <span class="c">"dfg"</span></p>
<p><span class="a">foobarstar</span> <span class="b">=</span> <span class="c">"456"</span></p>
In this example, I would like text in class b to be aligned vertically.
Thank you in advance!
One method would be to apply display: inline-block; to your span.as, and then give them a set width: http://jsfiddle.net/nzrHn/1/
.a { display: inline-block; width: 100px; }
Add css attribute display: inline-block and min-width: XXXpx