I have created a simple typing effect, as Illustrated here: http://jsfiddle.net/kitsonbroadhurst/fzf70ttg/9/
My issue is that as the large text is typed it moves the whole line up and down.
Is it possible to keep the text all on the same level as multiple fonts styles and sizes are added? (i.e. as large fonts are added the smaller text does not move vertically)
I have tried to use a position: relative wrapper div and then position: absolute to keep everything on the same line, but this did not work.
.wrapper {
position: relative;
}
.text-box {
position: absolute;
bottom: 0;
}
I would rather not use any type of plugin and would prefer a coded solution.
Set a line height so it won't jump:
p { line-height: 75px; }
With the box model, the browser will calculate the height dynamically according to text size. Putting a hard size on the element will prevent this.
Related
I have a game-level map image like this and I code by manual HTML - CSS - JS. I want to attach
the level number based on the coordinates of the image but it moves to another position for another screen. I have used relative position for the parent element and absolute position for child elements. (I tried using px, em, rem, in, cm unit, but it hasn't worked well)
I just want an idea for this problem. Thank you!
I think there are several ways to solve that problem.
You mentioned like (I tried using px, em, rem, in, cm unit, but it hasn't worked well), it's true you failed because you tried with fixed amount.
In order to make sure the child image is fixed on the certain place of parent image, you should use dynamic amount like following alternative solutions.
CSS
You can use percent in styling like.
.map {
position: absolute;
width: ###%;
height: ###%;
x: ###%;
y: ###%;
}
You can use javascript.
When loads the initial screen, you can calculate the ratio of the parent width to screen's width. And you can apply it to the styling using CSS selector or ID.
Update the design.
I think it's the proper and best solution. So you can update the design with map and markers together.
Hope it works for you!
I'm not sure if I get it right. You are trying to position the numbers relative to the whole background image? What are the other screen you refer? Can you show an actual screenshot of the issue?
I would do:
<div class="image">
<span id="span-1">1</span>
<span id="span-2">2</span>
</div>
and then use PERCENTAGES to the determine the position of the numbers:
.image {
position: relative;
background: red;
width: 100px;
height: 100px;
}
span {
position: absolute;
}
#span-1 {
left: 55%;
}
#span-2{
left: 20%;
top: 75%;
}
Sandbox
I'm trying to make my application responsive.
For that, the first thing I did was placing my buttons and logo by using percentages instead of pixels.
The problem is that when I resize my window to a smaller one, the buttons and logo are moving but they are also cropped on the side like this:
Here is what the button looks like before resizing:
And here is what it looks like after resizing to a smaller one:
How can I make it move but still appear in its entirety ?
Here is my CSS for this button:
#next-step{
position: absolute;
top: 90%;
left:88%
}
Change the CSS as follows:
#next-step{
position: absolute;
bottom: 1em;
right: 1em;
}
By using bottom and right instead of top and left, the reference will be the bottom right corner of your container. This way your button will never crop. You can play with the values to adjust the position of the button as you like.
Changing the position values to bottom and right might help you out. You could try this CSS code and maybe adjust the percentage values to your liking:
#next-step{
position: absolute;
bottom: 10%;
right: 12%;
}
This comes down to the way you're positioning the element.
#next-step{
position: absolute;
top: 90%;
left:88%
}
Is positioning the button based on the top-left corner.
If you were to instead use:
#next-step{
position: absolute;
bottom: 10%;
right:12%
}
It'll set the position to a similar place on-screen, but based on the bottom-right corner (you'll need to fine tune the numbers).
However, one thing to note: when using percentages, once you get below a certain screen size it can get messy, so it'd be worth looking at media queries too.
I have what seemed like a simple issue but cant quite figure this one out. I am using bootstrap version 3 to create my base layout. I have a footer that needed to be at the bottom of the page so i made it position: absolute; bottom: 0; and worked fine if I zoom out. When the content start getting lengthy it creates the vertical scroll bar and when scrolling the DIV floats around instead of staying at the bottom.
I tried giving the container a position: relative; but dosent seem to do anything. Would anyone have any ideas?
Heres an example of my layout, if you resize the preview section to force the vertical scroll bar you will see that when you scroll the DIV floats around instead of staying in place.
https://jsfiddle.net/DTcHh/10301/
try with fixed
.footer {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
}
js fiddle example
non-fixed, see the below:
your problem is (from what I gather) the footer is floating dependent on the content and and you want it to stay put where you call it.
.footerElement {
// base styles all styles
display: inline-block; // add this, does as you imagine
}
"Displays an element as an inline-level block container. The inside of
this block is formatted as block-level box, and the element itself is
formatted as an inline-level box" -W3schools
scrollbar, see the below:
As for the element that has a scrollbar resolving.
.elementwithScrollbar {
// base styles all styles
overflow:hidden; // or use overflow-y:hidden; or x
}
fixed, see the below:
If you want it to be fixed; adding position: fixed; and the value coordinates should all you have to do there. (ie. position:fixed; and where you want it)
"Do not leave space for the element. Instead, position it at a
specified position relative to the screen's viewport and don't move it
when scrolled. When printing, position it at that fixed position on
every page." -MDN
Using fixed only anchors it to the bottom of the screen regardless of which part of the page you are viewing. I think you want to have the footer at the bottom of the page rather than constantly sitting at the bottom of the screen.
To fix, amend your spelling mistake here:
.contrainer-fluid { <-- should be container
position: relative;
}
I've having an issue with the background images i have embedded into my carousel. click here I've noticed when i click from one slide to another the background image on my site moves out of place. The margin-top for my carousel is current set to margin-top:-275px; and the background image is set to margin-top:-64px; I am slight concerned about these settings.
Does anyone have a solution to this problem?
In order to activate the slides click the thin red tab under the nav bar
I guess that's because you have
.rslides li {
top:0;
}
It does nothing with position:relative (and the current slide has it), but it moves down the slide with position:absolute (hidden slides).
When you click a tab, there's a moment in which the new one is fading in, but it doesn't have position:relative yet. Then, in that moment, the new slide isn't where you want.
So remove that line.
The jumping is occurring because you are switching the LI items from position: absolute; to position: relative; at the end of the animation toggle. This can be avoided by removing your CSS rule:
.rslides li { left: 0; top: 0; }
Specifying width and height is fine, but as soon as you specify left and top - then switch from relative to absolute positioning, you get that jump you're seeing.
As for the positioning of each panel - it has to do with the way you are laying out your boxes. The sizes you are specifying are not large enough for the content you are providing. For instance: <div id="header"> is 37px tall, which is the appropriate size for the social media buttons, but you also have it as the container for the #nav-menu UL - which is another 102px tall.
It appears that in order to correct this and make things overlap, you are using negative margins - which is getting you all thrown off.
My suggestion would be to use a standardized layout system, such as any of the following:
http://cssgrid.net/
http://960.gs/
http://www.1kbgrid.com/
http://foundation.zurb.com/docs/grid.php
And use it to perform your layout tasks, rather than trying to self-craft overlapping layers with mixed absolute/relative positioning.
Alternatively, if you're going to go the overlapping layers route (again, not suggested), really commit to it. Position things absolutely throughout the layout.
In order to accomplish this, you might consider CSS rules like:
#header {
display: block;
position: absolute;
left: 50%; top: 0px;
height: 139px; /* Your Social media links height + nav buttons height */
width: 1018px; /* Your current width */
margin-left: -509px; /* Half the width - centers on page */
}
Again - this is MUCH more work, MUCH harder to maintain and MUCH less elegant - but will yield you at least a consistent spacing / sizing.
I have a <input /> field and an <a><img /></a> icon which I want to put inside the input.
Of course I can't put an image inside of the input since it's not that kind of tag, but I'd be happy with it just overlapping.
If I use position: relative (which makes positioning it correctly easy) the icon continues to take up invisible space where it would have been.
If I use position: absolute I cannot position the icon relative to its previous sibling, the positioning values are in relation to the parent, which is not great because different browsers render the <input> with different sizes.
Is there a workaround for this?
http://jsfiddle.net/iambriansreed/u7DUv/
Wrap the input and a in a wrapper and absolutely position the a off the relatively positioned div wrapper.
CSS
input {
font-size: 24px;
width: 200px;
}
div {
position: relative;
width: 200px;
}
div a {
display: block;
position: absolute;
top: 4px;
right: 0;
z-index:99;
}
I think I know what to do now. I make a <span> where my icon was, it will have position:relative with no offset and it will contain the icon with position:absolute. This way the absolute offset from the span is effectively the relative offset wrt the page.
Use position:relative, and use padding-left as amount of image's width in input tag, there will not be hidden space.
Just use a negative margin-left on the image element to let it show up above the input.