My current project wants to have a decoration in front of some of the anchors (A), so far this is done by using ::before. However, it shows up that some of the links will line-break and then the second and eventual additional lines will align left with the decoration where it's nicer if it aligns with the text on first line.
There's a fiddle which I hope explains what we are trying to achieve. The .fake class is just for demonstration how it should look, it's of course not an attempt to solve it: https://jsfiddle.net/p0jLoyqz/
.decorated::before {
content: ">",
font-weight: 800
}
One solution could be to wrap the anchor in another element and add the decoration to the wrapper, but it would be good to keep down the markup as much as possible.
You can make the pseudo element position:absolute; and position it left:0; and give the container a padding of 10px or15px
.small-box {
width: 120px;
border: 1px solid gray;
padding-left: 10px;
position: relative;
}
.small-box a::before {
content: '>';
display: inline-block;
position: absolute;
left: 0px;
}
<div class="small-box">
<a class="fake" href="#">my link that line breaks</a>
</div>
Related
I am looking for some direction pointing as I am a bit lost.
I have a container div with a :before style I am using to add some information on a page. This works well as I found an example using SO at How can I add a large faded text background via css?. What I want is that when the "main" div is expanded, that it covers up the :before pseudo element's content.
I have tried various combinations of div structuring (containers) and palyed with the z-index of the pseudo element and the main div. NOTE that I can not put a "z-index" of -1 on the "title" text ... as that actually hides it behind content I actually want to see in my actual application.
HTML
<div class="show-title" data-div-title="Div Title">
<div class="center-me">
This is my box!
</div
<div>
<button id="set500">500px</button>
<button id="set1000">1000px</button>
<button id="set1500">1500px</button>
CSS
.show-title::before {
color: dimgrey;
content: attr(data-div-title);
display: block;
font-size: 1.2em;
line-height: 1;
position: absolute;
top: 10px;
left: 10px;
-ms-writing-mode: vertical-lr;
writing-mode: vertical-lr;
text-orientation: upright;
padding: 3px;
background-color: gainsboro;
border: 1px solid darkgray;
border-radius: 3px;
z-index:1;
}
.center-me {
color: dimgrey;
padding:10px;
background-color: gainsboro;
border: 1px solid maroon;
width: 500px;
height: 300px;
margin-left: auto ;
margin-right: auto ;
overflow: auto;
z-index:10;
}
JavaScript (just for enlarging the main content div, not apart of the actual question!)
(function($){
$("#set500").on("click", function() {
$(".center-me").width("500px");
})
$("#set1000").on("click", function() {
$(".center-me").width("1000px");
})
$("#set1500").on("click", function() {
$(".center-me").width("1500px");
})
})(jQuery);
I created a little jsFiddle to show what I am referring to. When the "box" is expanded, I would like it to go "over" (basically hiding) any of the "Title" text. (Any little bit left over showing is fine!)
http://jsfiddle.net/uLohn3e4/3/
Any direction pointing would be useful as I just could not find what I was trying to accomplish. Even if that is to try a new layout altogether (that achieves something similar). If I am missing any useful information, please ask ... thanks in advance.
Simply add position:relative; to your .center-me element
in order for your z-index to apply z-index#MDN.
http://jsfiddle.net/uLohn3e4/5/
I am trying to show a tool tip box on hover an image. I won't be able to use jquery or any other plugin. I have to use pure css. I have seen a demo working here.
http://netdna.webdesignerdepot.com/uploads7/how-to-create-a-simple-css3-tooltip/tooltip_demo.html
My code:
<a class="tooltip" title="This is some information for our tooltip." href="#"><img id="graph_one" alt="" src="https://www.onlandscape.co.uk/wp-content/uploads/2013/09/Doug-Chinnery-ICM-Images-4-45x45.jpg" class="graph one"> </a>
Jsfiddle :
http://jsfiddle.net/txeF2/
For some reason I can't get the tooltip box.
UPDATED : http://jsfiddle.net/Md5E6/4/
Here is one solution: EXAMPLE HERE
Change .tooltip from inline to inline-block:
.tooltip {
display: inline-block;
position: relative;
}
Then remove the absolute positioning from the child img element. This was causing the main problem; as the element was removed from the flow of the document, thus causing the parent element to have no dimensions and collapse upon itself.
use like this to show tooltip
<a title="Create Simple Tooltip Using CSS3" class="tooltip">Some Sample CSS3 Tooltip</a>
.tooltip
{
display: inline;
position: relative;
}
.tooltip:hover:after
{
background: #333;
background: rgba(0,0,0,.8);
border-radius: 5px;
bottom: 26px;
color: #fff;
content: attr(title);
left: 20%;
padding: 5px 15px;
position: absolute;
z-index: 98;
width: 220px;
}
If you want to view complete code with demo here is a full tutorial Create CSS3 Tooltip
For me the reason was my parent div had an attribute "pointer-events: none". Removing this fixed my tooltip not showing issue for the child div.
Here is my code.
The HTML:
<div class=column1of4>
<a rel="Appendix" href="images/watermarks/watermark_pic1.jpg" title="Bottle in the mirror"><img src="images/250-width/pic1.jpg" alt="" width="250px" height="250px" id="Bottleinthemirrorpic"></a>
<span id="Bottleinthemirror" class="spanlink"><p>Bottle in the mirror<p></span>
</div>
<div class=column1of4>
<a rel="Appendix" href="images/watermarks/watermark_pic9.jpg" title="The empty glass"><img src="images/250-width/pic9.jpg" alt="" width="250px" height="250px"></a>
</div>
<div class=column1of4>
<a rel="Appendix" href="images/watermarks/watermark_pic10.jpg" title="The last drop"><img src="images/250-width/pic10.jpg" alt="" width="250px" height="250px"></a>
</div>
The CSS:
#Bottleinthemirror {
width: 250px;
height: 90px;
position: absolute;
background-color: rgba(0,0,0,.55);
margin-top: 10px;
color: white;
line-height: 20px;
font-size: 12px;
}
.column1of4 {
margin: 50px;
float: left;
}
The Javascript:
$('#Bottleinthemirror').hide();
$('#Bottleinthemirrorpic, #Bottleinthemirror').hover(function(){
//in
$('#Bottleinthemirror').show();
},function(){
//out
$('#Bottleinthemirror').hide();
});
Basically, I have three pictures, two of them beside each other and the third one is below the first one. Which I hover over the first picture, I want the #bottleinthemirror span to appear, which it does. The problem is, even when the span is hidden, it still rearranges the layout of the website and moves the picture below it to another place even though it's position is set to absolute. Any idea why? When I remove the span, the website layout is normal. It changes when I put in the span even though the spans position is absolute.
Probably the problem is that span can not contain p, and in your code there are technically 2 p elements in the span (both p tags are opening). When browsers fix this incorrect markup, part of the last p may appear outside the span. If there is a need to have p inside .spanlink, it's better to use div instead of span. But is the p really necessary here?
Add
display: block;
to
#Bottleinthemirror
I set this up in a jsfiddle: http://jsfiddle.net/r2XG2/1/ and it appears to be working for me in Chrome. What browser are you in? I would try the following if it's still not working for you:
Set z-index: 100 to see if that will force it to appear over the other elements. You could also try setting the top or left values in css, that may also force it to appear in the correct place. Adding display: block; couldn't hurt either.
Edit: Updated fiddle with latest update from asker it also appears that IE won't load jsfiddle. I added position: relative to the parent div to see if that helps.
#Bottleinthemirror {
width: 250px;
height: 90px;
position: absolute;
background-color: rgba(0,0,0,.55);
margin-top: 10px;
color: white;
line-height: 20px;
font-size: 12px;
z-index: 100;
display: block;
}
.column1of4 {
margin: 50px;
float: left;
position: relative;
}
I'm trying to make a header's background color look like a rectangular speech bubble by adding a text element ◥. Below you can see the spanned text for the background shape and the style for ◥. But this creates a blank space between the bottom of the border and the ◥, and I would like the two to line up in order to look like a speech bubble.
Image of fail in action.
http://i.imgur.com/1T09F.png
{block:Link}
<h1><span class="Headers"><a href="{URL}" {Target}>{Name} ☞</a></span>
<div class="triangle">◥</div>
</h1>
{block:Description}{Description}{/block:Description}
{/block:Link}
.triangle{
margin-left: 10px;
font-size: 35px;
color: #123033;
}
span.Headers{
display: block;
background-color: #123033;
padding: 8px
}
I tried the trick with adding a parent group in which the font size is 0, and that didn't work. Nor did setting the margin on the header to 0. Putting the ◥ div on the same line hasn't done anything either. I spent about an hour looking through other questions to see what I could do, and I couldn't find a solution, but I am nub so forgive me if I missed something obvious.
It is unreliable to use text to create the effect. Different devices will render it differently, which is not what you want.
In your case, it would be best to use an image with the same colour, placing it in a <div/> below the heading, ensuring that they touch each other. Then, add some padding on the left, as you did with the .triangle style.
I have created an image for you to use: Grab it here
All in all, your markup would look like this:
HTML:
{block:Link}
<div class="header">
<h1><a href="{URL}" {Target}>{Name} ☞</a></h1>
<div class="triangle"></div>
</div>
{block:Description}{Description}{/block:Description}
{/block:Link}
CSS:
div.header > h1 {
background-color: #123033;
padding: 8px
}
div.header > div.triangle {
background: url('Arrow.png') top left no-repeat;
height: 50px;
padding-left: 10px
}
Do let me know if this works for you.
If you're able to use generated content (which, I suppose, depends on your site's users), then I'd suggest (with the slightly amended HTML for demo purposes):
<h1><span class="Headers">a name</span></h1>
The following CSS:
h1 {
display: block;
position: relative;
background-color: #ffa;
padding: 0.5em;
}
h1::after {
content: '';
border: 1em solid #ffa;
position: absolute;
top: 100%;
left: 2em;
border-bottom-color: transparent;
border-left-color: transparent;
}
JS Fiddle demo.
In terms of compatibility caniuse suggests that generated content is supported in IE from version 8 onwards.
References:
CSS generated content compatibility, from caniuse.com.
This is my code snippet :
Html
<div class="app-cont">
<div class="app-head">
Additional Comments :
</div>
<div class="app-main">
balallalalalallalalalala
<br/>
jaslnflkasnlsnlksanlknslnwkin
<br />
lknlkanfklnlk
</div>
</div>
CSS:
div {
color:white;
}
.app-cont {
background: black;
width: 90%;
padding-top: 2.5px;
padding-bottom: 2.5px;
margin-bottom: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
.app-head {
background: #484848;
width: 25%;
margin-bottom: auto;
display: inline-block;
border-top-right-radius:2px;
-moz-border-top-right-radius:2px;
border-bottom-right-radius:2px;
-moz-border-bottom-right-radius:2px;
}
.app-main {
display: inline-block;
text-align: justify;
}
demo
It works till i dont add enough content on the div with class app-main. But when i add enough content in the div the div with class app-head gets to the bottom.
While i want it in the middle.
How can i do this ?
Just add vertical align style.
.app-head,.app-main{
vertical-align:middle;
}
You can use it on inline-block elements to position near other inline-block elements or near inline elements.
Well I wasn't sure entirely what the goal was, but if I understood you correctly, you wanted to keep the block holding the additional comments text in the middle of the text to the right?
I've updated your fiddle to see if I've got the solution you need: Updated Fiddle
I've positioned .app-head absolutely, and used a top:50% and a negative margin to keep it centred vertically. You also have to give .app-cont a relative position for this to work, and the comments section needs a left-margin slightly greater than the width of .app-head.
Anyway, hope that helps!
I did some other changes as well..
http://jsfiddle.net/Ues8Q/4/
..but the main idea is this:
Outer container has: position: relative;
The thing you want to center has: position: absolute; left: 0px; top: 50%; margin: -exactly half of the height of this element; height: whatever it is;
and requirement is that the element you want to center has fixed height...