Fiddle to see what I have so far: http://jsbin.com/udegux/1/edit
HTML
<span id="test" class="drag-hint"><span>drag</span>Mouse and drag</span>
CSS:
.drag-hint {
position:relative;
}
.drag-hint > span{
display:none;
}
.drag-hint:hover > span {
display:inline;
position:absolute;
top: -25px;
left: 30px;
}
As you can see, I am currently manually centering the hover drag tip over the text by specifying the "top" and "left" attributes. If the text was longer or shorter, I would have to manually change those values to make the tip look centered.
I am looking for a way to automatically center the word "drag" above the phrase "Mouse and drag" using pure CSS.
If you position the block on top of the text and above and set text-align: center, there shouldn't be any need to use JavaScript.
.drag-hint:hover > span {
display: inline;
position:absolute;
top: -25px;
left: 0;
right: 0;
text-align: center;
}
JSBin.
Related
I am looking to create this effect with css: https://i.stack.imgur.com/zpzVC.png
Since I don't know how this effect is called, I haven't been able to find a solution online and I can't make it work on my own unfortunately.
The effect repeats a few times on different titles with different sizes. The border should begin on the half of the first letter.
Who can help me?
I'd use the :after pseudo class on the span element to accomplish this.
body {
background: #3E9CE2;
color: white;
font-family: sans-serif;
} /* Just for looks */
h1 span {
position: relative;
display: inline-block;
}
h1 span:after {
position: relative;
display: block;
content: "";
background: #DE2F2D;
z-index: -5;
height: 22px;
top: -19px;
left: 7px;
}
<h1>This is our <span class="offset-background">showcase</span></h1>
The position and display attributes on the span itself make sure the :after element is properly positioned (directly underneath the span) and has the same width as the text.
The pseudo element has to define its height and a position offset, as well as a negative z-index to make sure it's drawn behind the text.
Here is an example of what you seem to be looking for. The solution I used is to offset a box around the text and negatively offset the text the same amount.
h1 span { position: relative; display: inline-block; }
.blue-sq{
background-color:blue;
display:inline-block;
}
.offset-red{
position:relative;
top:22px;
background-color:red;
height:18px;
}
.inner-text{
position:relative;
top:-22px;
left:-6px;
}
<div class="blue-sq">
<h1>View our
<span class="offset-red">
<span class="inner-text">showcase</span>
</span>
</h1>
</div>
I'm attempting to align text to the right of an image;
css
.p1 {
position: absolute;
width: 100px;
height: 50px;
top: 40%;
left: 70%;;
}
html
<img src=../images/diagram1.png alt="Diagram"/>
<span class="p1">This is a testtttttttttttttttttttttttttttttt </span>
The code works for a short amount of text, but for a large amount of text it gets squished and forms a really long paragraph. Here is what I mean;
[image] [tes
ttt
ttt
tt]
I want the text to appear as a normal paragraph block.
[image] [testttt
ttttttt]
Hi #Eggy Please find fiddle
.container{
width:100%;
overflow:hidden;
}
.container img{
display:inline-block;
margin-right:20px;
float:left;
}
A simple way is to remove the absolute positioning and give the img and text inline-block displays. You may also want to remove your width of the paragraph or increase it: JS Fiddle
CSS
img {
display: inline-block;
}
.p1 {
display: inline-block;
height: 50px;
width: 300px;
top: 40%;
left: 70%;
}
I have an image and need to add the text "click to enlarge" underneath the image but can ony do this using CSS.
This is what I have so far, however, I cannot seem to position it properly. It seems to float to the right of the image. How can I get this to go directly under the image and to the left?
#main_image:after{
content:"click image to enlarge";
text-align:left;
position:relative;
left:0;
clear:both;
margin-bottom:10px;
}
Here is one way of adding the caption using pseudo elements.
Your HTML might look like:
<a class="main_image" ><img src="http://placekitten.com/300/200" /></a>
and your CSS could be:
.main_image {
border: 1px solid blue;
padding: 10px 10px 40px 10px;
display: inline-block;
position: relative;
}
.main_image img {
vertical-align: top;
}
.main_image:after {
content: "click image to enlarge";
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 40px;
background-color: beige;
text-align: center;
}
Add the pseudo element to the <a> tag and then position it as needed.
I used absolute positioning but there are other options.
See demo at: http://jsfiddle.net/audetwebdesign/fQyhj/
Just add display: block: http://jsfiddle.net/fQyhj/4/
#main_image:after{
content:"click image to enlarge";
text-align:left;
position:relative;
margin-bottom:10px;
display: block;
}
I'm assuming that your #main-image is not the image itself, but some wrapper around it since you're seeing the text.
As a reference, pseudo elements do not work on "replaced" elements: http://www.red-team-design.com/css-generated-content-replaced-elements
You have to add another <div> to do that. See the Fiddle
I have used margin-top: -80px; to put the text on image.
Is there any way to align element (div in our case) to bottom of flex?
Fiddle here: http://jsfiddle.net/djeQv/1/
#images div {
position:relative;
bottom: 0px;
margin-top: -10px;
padding-top: 10px;
cursor: default;
}
This usual way didn't worked this time.
Why not position the text absolute? Something like this:
#images div {
position:absolute;
bottom: 0;
text-align: center;
width: 100%;
}
Since this takes the text out of the flow of the document, you will need to add some padding to the bottom of your link to prevent the text from overlapping the image.
I updated your fiddle to demonstrate: http://jsfiddle.net/djeQv/2/
Take a look at this screenshoot first:
That white box is ON the orange background, I want it to be under it exactly as pointed with the arrow. The rest should be visible of course: it should just hide this from being on the orange background.
Here is the orange background style and the white box itself:
Orange background:
body {
margin: 0;
padding: 0;
background: url("../img/back.png") repeat-x top #fff;
text-align: left;
color: #8a5225;
}
White box:
#box {
background: url("../img/box.png") no-repeat;
width: 163px;
height: 41px;
float: right;
position: relative;
}
Hope you give me some solutions for that. I've been trying using the z-index but it doesn't bring any results...
You won't be able to do this based on your current html structure. Z-index only works for positioned elements. ie relative, absolute or fixed. You won't be able to apply these to the body element. You can try, but I tried and it didn't work. Instead put the orange background into another div and draw the lower one up under it.
http://jsfiddle.net/5bsty/
<div class="one">First div</div>
<div class="two">Second div</div>
div.one {
background: #c74d12;
z-index: 3;
position: relative;
}
div.two {
position: relative;
top: -10px;
z-index: 1;
background: white;
}
use a z-index and you should be done.. give the orange background a higher z-index
I think you look like this
You take two div and parent div define position relative and child div define absolute properties and z-index is compulsory .
css
div.one {
background: #c74d12;
position: relative;
z-index:2;
}
div.two {
position: absolute;
top:11px;
background: green;
left:0;
right:0;
z-index:1;
}
Html
<div class="one">First div</div>
<div class="two">Second div</div>
Check to live demo http://jsfiddle.net/rohitazad/5bsty/3/
http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_style_zindex
Reffer this..:( ?