I have an extending line animation on my site using CSS3. It was created using key frames on the width of the div and naturally it seems to be expanding left to right. However i wish for it to expand from right to left. I have tried using 'reverse' in animation-direction but with no joy. Any ideas why? thanks.
Here is my fiddle
http://jsfiddle.net/edrtB/
CSS
.line_left {
height: 6px;
width: 32vw;
background-color: black;
margin-top: 300px;
margin-left: 40px;
border-radius: 5px;
float: left;
-webkit-animation: expand 2s; /* Chrome, Safari, Opera */
animation: expand 2s;
}
/* Chrome, Safari, Opera */
#-webkit-keyframes expand
{
from {width: 0vw;}
to {width: 32vw;}
}
/* Standard syntax */
#keyframes expand
{
from {width: 0vw;}
to {width: 32vw;}
}
UPDATE
It has been made clear, that it is hard to see what im trying to achieve. Here is an image of the site logo, and the lines need to animate from the centre outwards.
Your problem isn't with the animation, it's with how the element is positioned on the page; since it's float:left, it's going to stay as far to the left as possible. If you change it to float:right, it'll move as far right as possible and expand to the left.
Here's an updated version of your fiddle.
If you don't want your expanding bar on the right side of the page, you could wrap it in a containing <div> and position that however you'd like. See this new fiddle update, in which I'm centering the expanding bar by setting the container's width and giving it margin:0 auto.
Edit: If you want the fully-expanded bar to be effectively "left-floated," use the above technique of wrapping it in a <div>, setting that div's width, and floating it left, as in this new fiddle update.
Related
I'm trying to create a vertical progress bar by using a CSS transform. I want the progress bar to take up the full height of the screen.
The problem is that, since I use CSS rotate, the progress bar's height is equal to the width of the screen, not its height. I created a fiddle to demonstrate this: the length of the progress bar will change depending on how wide you make the 'Result' section. This is incorrect: it should always take up the entire screen. Here's the code:
HTML:
<progress max="1" value="0.8"></progress>
CSS:
progress {
margin: 0;
height: 5px;
width: 100%;
-webkit-transform: rotate(90deg);
-webkit-transform-origin: bottom left;
-moz-transform: rotate(90deg);
-moz-transform-origin: bottom left;
/* Reset the default appearance */
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
As it's a progress bar, its size cannot be larger than the screen height, otherwise the progress indication will be off. I've looked at this solution but this won't work for me because screen dimensions can change at anytime (e.g. switching between portrait and landscape on a tablet), so a JavaScript solution won't do.
Is there a way to force the progress bar to take up the full height of the screen using just CSS? Any other solution to create a vertical progress bar without using rotations, would also be great!
I'm not quite sure what you mean, however try replacing width:100%, with width:100vh;.
As #jaunt just said, using width: 100vh would do the trick, as it takes in consideration the viewport height to assign a width for the progress. Below you can find the list of browsers that support this:
http://caniuse.com/#feat=viewport-units
I am trying to create a horizontal position:fixed line at the top of my website. The layout is two vertical columns. One the left is a fixed menu bar, the right is scrolling content. The horizontal fixed line goes across the top of the scrolling content.
I have created a vertical line dividing these columns like so:
HTML:
<div id="vline"></div>
CSS:
#vline {
min-width: 1px; /* thickness of line */
width: 1px; /* thickness of line */
height: 300px; /* length of line (down) */
background-color: #959595; /* Line color */
margin-left: 205px; /* locating on page */
position: fixed; /* fix to window */
}
However, when I add position:fixed to the horizontal line, it just disappears. Obviously leaving it in normal flow or trying to position it by any other means (absolute or relative) causes it to scroll with the rest of the scrolling content. I thought it might be a problem with the line so I have also tried defining a border as shown:
HTML:
<div id="hline"></div>
CSS:
#hline {
border-top: 1px solid #959595;
width: auto; /* width match window size */
margin-left: 205px; /* locating on page */
margin-bottom: 5px; /* offset for text content bellow */
position: fixed;
}
This has the same problem as using a line. It works fine, the line appears where I want it, at the top of the scrolling column, but until I add position:fixed it will of course scroll with the content. As soon as I do add position:fixed, it disappears.
Unless I am doing something obviously wrong or there is another way to position it I haven't tried, the only thing I can think of is that it is a browser rendering bug. I am using the latest version of Google Chrome.
Thanks for your help!
Position the bars using top and left.
For example,
#hline, #vline{top: 0; left: 0;}
That should do it. You might have a few minor width problems. I suggest doing everything with % instead of hard-coding px.
So by default, an absolute positioned div will fall out of view if the window is resized, but only the left side of the div. Is it possible to achieve the same effect to the right?
What I mean can be found here: http://diabetes.connectionsquad.com
If you resize the browser window to anything below 1010px you'll notice the left side of the navbar disappears, but if you scroll right, the right side of the nav bar stays in position.
Basically I have content div that is set to 1000px. My navbar is 1050 and it is centered in that content div with absolute position, so it hangs over the content div 25px on each side. When the browser size falls below 1050px, I want that 25px area to collapse and not be visible. By default browsers do this on the left, but not the right.
Can you clear the right side the same way you can clear the left? I tried researching it, but I got a bunch of junk because the search terms get skewed.
I can't see the problem on Chrome. However, you're not setting top or left, it defaults to 0,0 for top and left, so it is attached to the top left corner of its relative parent. If you want it to be attached to the top right, you can give it
right: 0;
top: 0; /* Don't need this, it's the default;
By "out of view", I am taking it you mean out of your set content width.
Have a look at negative positioning. left:-20px; right:-20px
<style type="text/css">
div { position:absolute; left:-20px; right:-20px }
</style>
Hope helps,
Rob
Your layout doesn't require any absolute positioning, and it will give you monster headaches.
Rather than using a fixed width div in the center, you can do an outer margin or outer padding which is flexible.
/*Mobile*/
.outermargin {padding:0% 0% }
/*Screen*/
#media only screen
and (min-width : 700px) {
.outermargin { padding: 0% 7%; }
}
#media only screen
and (min-width : 1400px) {
.outermargin { padding: 0% 20%; }
}
Use margin or padding depending on your needs... This CSS structure is one way to be more fluid and easier once you are used to it.
Or you could have centered it all using something like:
#mycontainer {
margin: 0 auto; max-width:30em; }
Im trying to markup a picture to show on the bottom right corner of the webpage.
If i set the overall width of the page to 100%
and i set the picture to float right at the bottom it makes the trick perfectly but above
the mentioned picture is a bigger width picture which is around 1600px so when you open the the page in the small window browser then the floated picture is aligned but the scrollbar apears and scrolls to the full width of the page without the floated picture..
body{width:100%;}
thepicture{width: 1289px;
height: 446px;
position:relative;
float:right;}
So the second aproach: to make the body or a wrapper div fix width that is bigger than the upper picture mentioned:
body{min-width:1600px;}
Than looks great until somebody has a bigger screen than 1600px... the float ends at 1600px;
The firs solution needs to be tweaked but i cant figure it out how, some responsive floating would be great jquery maybe?
thanks in forwards
The problem is the pearl:)
Updated
May be this work:
body {
margin: 0;
padding: 0;
width: 100%;
height: 100%
min-width: 1648px; /* the width of the longest element */
}
#bottomwrap {
/* replace with your background color */
background: url(path/to/picture) bottom right no-repeat;
width: 100%;
}
Rememer to reset body margin, padding to zero and set body height to 100%
Update:
I have update the solution for your case, modify the HTML structure, you can review here http://jsbin.com/ulatis/1/edit
It sounds like you need to use a background image here. Put the background on a 100% width div and set the background position to right bottom.
div.background{background: url('images/bg.png') no-repeat right bottom; width: 100%}
Try position: fixed; z-index: -1;, it does exactly what you're looking for. Example
I want to have a GIF that stays in the centre of the page regardless of where the user scrolls. I want there to be the illusion that the image is 'floating above the page' rather than it being on it.
I believe CSS would be the way to go about doing this? Assuming a have an image called foo.gif, what would the CSS be to do this?
Without more specific guidance on what you want, and why, the best I can offer is:
img {
position: fixed; /* forces the element to stay fixed in relation to the viewport */
top: 50%; /* sets the top of the image 50% of the page height */
left: 50%; /* sets the left side of the image 50% across the page */
margin-left: -100px; /* moves the image half of its own width to the left-side of the page */
margin-top: -93px; /* moves the image half its height 'up' the page */
box-shadow: 0.5em 0.5em 0.7em #333; /* to give the illusion of 'floating'
border-radius: 1em;
}
JS Fiddle demo.
It works with iiz's solution if you change position:absolute to position:fixed.
I created a jsfiddle for you to see.
I also included a drop shadow (from here) to make the image "float".
It's all a bit pasted together, but it will work and you can alter it in any way you wish...