I have a div which have a text and then a button. but the button's position drops down by a few pixels when I add an element before it.
The html:
<div id="profile-header-bottom">
<span id="thetitle">My website</span><button class="action-button">Add to friends</button>
</div>
The css:
#profile-header-bottom{position:relative;width:935px;height:40px;background-color:#F0F0FF;margin:auto;padding-left:10px;}
#thetitle{font-family:arial;font-size:25px;}
.action-button{border:1px solid #000080;background-color:#AAAACC;}
that's the result I get:
the only way I can make the button positioned correctly at the top of the div is to give it an absolute position. that's the result I want:
How can I obtain this result without making the button's position absolute?
Try this:
span, button {
vertical-align: middle;
}
The correct code for this would be:
.action-button {
/*
Insert rest of css.
*/
vertical-align: middle;
}
EDIT: It works by setting both of the 'anchor point' to the middle of the object, rather than wherever it is by default. So with the code above you put the two middle points against each other, instead of two random points.
I added a MS Paint picture explaining it further.
You can use the css item:
vertical-align:middle
and put it in the button's class or style tag and then add it to the text
Related
i have been fiddling around with this for a few hours now.
I have a vertical elementor nav menu and i want to apply a hover affect to it.
So far so good, but i only seem to be able to select the whole column and apply the affect onto that, not only the length of the text.
Here is an example of how it currently looks, the closing "brakets" are always at the same width at the end of the column:
Example 1:
Example 2:
What i want it to be like is on the end of the text - which is differnet for each menu item.
Like This:
My current selector is .elementor-7 .elementor-element.elementor-element-1cf0e88 .elementor-nav-menu--main .elementor-item: - i tried with "a" as well which made it not work at all.
Thank you.
Max
You can not select only text. The text must be inside a html tag.
For example:
div {
color: green;
}
p {
color: red;
}
span {
color: blue;
}
<div>
<p>I am selectable with p { }</p>
I am not selectable as I am a text element of root div tag.
<span>Again I am selectable as I am wrapped with span tag.</span>
<div>
A link to the site would be helpful.
But the problem here is probably, that the element you're targeting is "display: block" or similar, making is a full-width element.
Try setting the a-tag to "display: inline" or "display: inline-block", which will make the width fit the element - not the parent div.
Alternatively, you could target each link as "nth"-elements of a list, but I would need to see the actual page to determine that, as Elementor is rarely just "Elementor". Your theme and additional addons play a part here as well.
Level of expertise in HTML & CSS: Beginner
Goal: Use HTML & CSS to add text that surrounds the outside of a circle just like this one:
Circle of Fifths
Progress: https://codepen.io/annieg4123/pen/GGPayQ
Issue: When I position one letter, it affects the positioning of the others. For instance, if I add left: 855px;to #Gb-Fsharp, the position of #C is changed.
Question: Why does this happen? Is my current way of positioning the letters incorrect? If so, what should I do instead?
You have to give the right id to the CSS file and give the fixed position of letters.
I created a sample of your issue https://codepen.io/anon/pen/bKOyKQ
#circle {
border: 1px solid black;
border-radius: 50%;
padding-bottom: 30%.......
Your text got shifted because you are using relative positioning. Whenever you will add new text it will align according to that text. Suppose you have a text left-align:50px to then if you add new text in between then it will shift all the older texts and elements. so you have to give fixed position or absolute position to the text and elements.
I put a Div box in a table cell that should slide up once its hovered over. When I hover over it, it doesn't do anything. I have tried the code below without success.
I also tried the Javascript way which didn't work either.
<td>
Product 1
<div id="p1" class="bottombox"></div></td>
.bodytable td #p1{
bottom:-10px;
}
.bodytable td #p1:hover{
bottom:-130px;
width: 50%
}
Hovering is actually working. Try to give background color to the div and you will see it.
Also if you haven't specified div position as absolute than bottom property will not work like this. Perhaps you wanted to have margin-bottom or padding-bottom?
EXAMPLE HERE
you can´t see what happens on hover because your p1 class is empty.
Try:
<div id="p1" class="bottombox">Product 1</div>
Is this what you're looking for? It uses the height property. http://jsfiddle.net/vBdne/
If you want the hidden to stick, you're gonna want to use javascript.
Let's say that I have a span and I set an image as the background of the span like this:
<span style="background:url("my_image.png") no-repeat;"></span>
As you can see above, my span is empty. If I put some content in my span like:
<span style="background:url("my_image.png") no-repeat;">Some content...</span>
I can see the background image of the span with no problem. But If I leave the span empty I don't see the background image. I figured that I could solve this issue by adding some padding to my span like:
<span style="background:url("my_image.png") no-repeat;padding:20px;"></span>
But is there another way I can do this without adding some padding to my span and keep my span empty?
Thank you
You get the same effect by using inline-block but setting width and height instead of using padding.
<span style="background:url('my_image.png') no-repeat; display: inline-block; width: 40px; height: 40px;"></span>
Also, something else that could trip you up is you are using double-quotes inside of an HTML attribute, which would confuse a parser and could lead to unexpected results. I've changed them to single quotes in the code I posted above, although no quotes would do just as well.
just don't make it empty: put a 'blank' inside. There are three ways, to do that:
simple space and add style white-space: pre; to it
Non-breaking Space or
The non plus ultra is, to let css do the trick for you:
add this style to your span:
:before {
content: "\200D";
display:inline;
}
What happens:
you add a content before (or better "in front inside") your span, that displays a ZERO WIDTH JOINER, and your span is not empty enymore
By default spans are inline page elements (rather than 'block' elements). This means they won't take up any more space in the page than that assigned to them—for example, if you place text in them (as you have found). To achieve what you want, you need a little CSS to define a height and width for the span, but you also need to make it a block element so that it is rendered consistently.
Alternatively, you could switch to something like a div, which is already a block element. Note however that defining a block element means it will take up space in your page. If you want something more dynamic consider some on-the-fly manipulation of the element with Javascript or similar.
(Either way, ignore the advice elsewhere on this page about single and double quotes in HTML attributes: that is utter nonsense).
try
<span style="background:url('my_image.png') no-repeat; display:block; height: 40px;"></span>
You have to specify a width and height to show the background. When you're typing something in it you force both with the text.
<span style="background:url("my_image.png") no-repeat; width: 50px; height: 25px"></span>
You should set a width and height.
In the following SO-Question is a tip, how to get the size of the background-image: How do I get background-image size in jQuery
I have a div in the size of 900x30
I have a form in this div, but when I try to put an image after the < / form > (the image is still inside the same div as the form), I see the image on a new line.
How can i prevnt it and make the image show in the same line as the form ?
im using CSS btw...
thanks
You might try white-space: nowrap;
You probably need to float the image to the left or right:
.myDiv img {
float: right;
}
If you post your markup it'll be easier for someone to give a more accurate answer :)
Have you tried setting the display attribute of both form and image to 'inline', just in case it's doing a block display?