position of text in a link displayed as block element
the text now is top left. now the question: what the best way to get this text to example: bottom-left or bottom-right? i prefer CSS solution without any new elements inside the A-Tag. Some opinions?
Is it not possible to set another wrapper element around the link or would you just rather not? Adding another element would make this simple enough.
3 Answers 3
You could also make use of display:table-cell — however, that won’t work in
you can’t select content to sit along the bottom. By using padding (padding-top) you can manually make it look like ist’s justified to the bottom. so in the above example try
display: block; width: 100px; height: 14px; background: #000000; padding-top: 86px is this the best solution? i mean theres also vertical align for tables, line-height and stuff like that.
@JorgeLuisBorges I was replying to you. Based on the response to ptriek’s answer I didn’t think it was a useful answer on its own.
display: block; width: 100px; height: 100px; background: #000000; line-height:188px; font-size:12px; color:#fff; text-decoration:none; If you change your font-size than reduce than value from 200px 🙂 means if you are using 18px font than line-height would be 182px so total no will be 200px;
hmm. than padding is the solution. but it that you won’t get exact value and you need to trial and error to set your height. Even that also might give you trouble with multiple lines. If multiple lines is the case for you than best solution as I believe is what ptriek gave you. As you dont want to add any tag inside anchor than its very hard to set for multiple lines unless you use ptriek given solution.
a combination of line-height and padding means there is no trial and error. line-heght: 20px paddong-top: 180px = 200px for one line of text, 220px for two etc
not combination of both rather only padding. Set only top padding. something like. padding-top:80px etc.
How to control position and colour of title text in HTML href element? [duplicate]
Using HTML and CSS, but not JS, how can I alter the position, text colour and background colour of the title text that shows when a link is hovered over? I would like to centre the title text below the midpoint of the link text.
a:link a:hover, a:active a:visited
You can’t. You’d need to make a custom tooltip to do that. There are libraries for that if you don’t want to roll your own.
1 Answer 1
After finally figuring out what OP meant is that the solution originally works fine with one exception, the attribute title ‘s default behavior is not suppressed, therefore an extra tooltip follows the customized tooltip.
The solution is this: Do not use the title attribute Without JavaScript you are at the mercy of many default behaviors you cannot control with CSS. But don’t get discouraged because there is an alternative that you can use that’s not only valid and semantic (if labeled correctly,) it is functionally flexible as well.
Use the data-* attribute ( * = any string in lower caps no spaces—use dashes instead.)
- We can use any string at any length
- We can name it anything we want (within the previously stated restrictions)
- We can have as many data-* attributes on an element and.
- . that element can be any element.
See the last two examples in Snippet below.
Use the ::before and ::after pseudo-elements with the attr() value. It’s not limited to title which is nice, take a look at the Snippet below.
div < margin: 50px; position: relative; >a:link < text-decoration: none; color: #000; border-bottom: 2px solid #f00; >a:visited < text-decoration: none; color: black; border-bottom: 2px solid #888; >a:hover, a:active < text-decoration: none; color: #f00; border-bottom: 2px solid #f00; >a:hover::after < content: attr(title); color: blue; position: absolute; top: 3ex; left: -.5ch; border-bottom: 0 none transparent; >a[name]:hover::after < content: attr(href); background: black; color: cyan; border-bottom: 0 none transparent; >a[target]:hover::after < content: attr(target); left: -1.5ch; background: red; color: white; border-bottom: 0 none transparent; >a[data-node]:hover::after < content: attr(data-node); left: -4ch; border-bottom: 0 none transparent; background: black; color: gold; >a[data-anything]:hover::after
text text Where do I go to? Target Data-* Use Data-* How to position an href element under a p element?
So I am trying to add some web links but I want them positioned underneath my p element. As of right now I currently have my href elements in line with my p element. So here is my current code:
3 Answers 3
You have your anchor tags wrapped inside a p tag. Either place it outside the p tag or add a span to the text and make it 100% wide (using bootstrap class) .
Wrap your p tag text with span tag
Since you are using bootstrap you can use the class col-xs-12
Here are a few links which may provide some insight to Lisa:
The code example doesn’t work in the general case. It depends on the bootstrap stylesheet (which the code the OP uses implies they are using, but isn’t mentioned anywhere in the question or the tags). (I’m not sure it even works properly there, aren’t col-* classes only supposed to appear in children of class=»row» elements?) If that does work, then wrapping the links with that spen will wouldn’t put them under the paragraph, just on a new line inside a bigger paragraph.
+Quentin .. _(I’m not sure it even works properly there, aren’t col-* classes only supposed to appear in children of elements?)_ it is the child of ‘row’ class. It is not the direct child but it’s a child so it works.
The terms you are looking for are «children» and «descendants». «Direct children» is a nonsense term.
Link to position on web page using class
I know that I can link to a position on a webpage by using an id. But is it possible for me to do that using a class. With an id it looks like this: href=#id . First you put the #, which is the id selector, and then the id. This works out very nice with id’s because there’s only one on a page. But there are usually multiple instances of a class, so in javascript to specify a single one you do class[index]. With this in mind, I would assume that to link to classes I would do this: href=.class[index] . The . is the class selector, and [index] is to specify which class I’m pointing to. This obviously doesn’t work (why else am I asking the community), so what I’m asking, in short, is: How do I get a link within a webpage that only has a class as a selector.
1 Answer 1
What you are asking for simply cannot be done.
The difference between IDs and classes is that IDs have to be unique, whereas classes don’t. Because of this, a ‘jumplink‘ cannot know which element you’re intending to jump to. While it might make sense to simply jump to the first class present, this is not how jumplinks operate.
However, the same functionality can be achieved with JavaScript’s .scrollTo() method:
document.getElementsByClassName("top")[0].addEventListener("click", function()< window.scrollTo(0, document.querySelector(".bottom").offsetTop); >);