I have used the perfect codrops css3 rotating words according to my needs, but I can´t make the appearing words align right in the center. All I need is make the sentence align in center and so the rotating words.
But because it´s position absolute, and floating left, the word starts on left 50% position.
Can anyone help with this? I have tryied a lot of experiments but nothing seems to work.
Here is a jsfiddle: http://jsfiddle.net/nzAPr/
Setting the container to position:relative and the span to 100% seemed to work.
.rw-words{
display: block;
position: relative;
}
.rw-words-1 span{
position: absolute;
width: 100%;
...
}
http://jsfiddle.net/willemvb/9Xubs/
try removing the indent here:
.rw-words{
display: block;
text-indent: 10px;
}
I am not sure if you are still looking for a solution for this.
The animation can only set a centre start point and that's why your words show up shiftet to the right.
You can fix that if you give every child a negative margin and space it out manually.
This is what I got when I was playing around with the code:http://jsfiddle.net/9Xubs/109/ margin-left: -35px;
Related
after reading this article:
http://css-tricks.com/absolute-positioning-inside-relative-positioning/
i am trying to achieve vertically stacked divs each containing 2 child divs positioned to the far left and right of each parent div. i found the same concept here:
Position absolute but relative to parent
but I can't figure out why mine isn't working.The in-progress file can be viewed here:
https://dl.dropbox.com/u/10388895/newPeterSalvatoDotCom/index.html
Any help would be greatly appreciated.
One way to fix this would be to give the projectDivs a height. They currently collapse to 0. Add the following to your stylesheet and see what happens:
.projectDivs{height:600px}
I think setting these rules to the .projectDivs class get what you want done. Let me know if they don't.
.projectDivs {position: relative;
margin-bottom: 50px;
clear: both;
float: left;
margin-left:auto;
margin-right: auto;
width: 100%;
}
i set the margins individually because you have a margin bottom set already.
I would like to do this from my website here: http://project.jazzassite.tk
and be able to place the contents into a div that I can center or do whatever I want with them. The only problem is, If I float it, it doesn't work, and if I use position:relative They create a stair case effect.
I was hoping I would be able to do this purely with CSS, and not use any tables, ect.
Any help appreciated,
Jazza
Are you wanting to center the navigate div which contains all the 6 children? If so, this should work:
#navigate {
position: absolute;
top: 50%;
left: 50%;
margin-left: -540px;
margin-top: -15px;
}
The margin-left is the half the width of the contents and then made negative. The margin-right is half the height of the contents and then made negative. This will vertically and horizontally center your objects. Is this what you're looking for or did I miss the point?
I've been looking at this for the past days now and I'm at the point where I need to ask for help.
http://cub.northnodes.com/index.php/about/mission/
I need the donate now column to float all the way to the right, but it only goes halfway. I can't figure out why it's stopping there, there's no containing div that ends there. I've tried to take it out of the #center div, and have placed it both before it with no better results. Placing it after the #center div makes it float left all the way beautifully, but below the #center where I don't want it to be.
In case others come later:
I had a similar issue where float right would only move halfway across its containing div. Neither it, its siblings, or container had position relative. However, the containing div's prior sibling also had a child with a float: right; (coincidence that it was the last child; not sure?). I solved my problem by adding a clear: both; to the div containing the offending floater. This was on Chrome.
This happened to me because I had set max-width on a parent container. I removed that and my element floated all the way to the right properly.
In my case clear: both; didn't solve a thing. Somewhere above there must have been a margin-right: 2em or something like that which was being carried over.
In my CSS then I just had to insert margin-right: 0px; and the image was then flush to the right side of the page.
Had a similar issue, Items were floating right/left/center (just not all the way right or center).
I fixed it by putting justify-content: space-between; in the parent container.
My final css for the parent looks like:
parent {
position: fixed;
bottom: 0px;
width: 100%;
display: inline-flex;
justify-content: space-between;
}
This is a very simple layout, and the menu and navigation are suppose to stay fixed to the left, use any modern browser appart from IE to see how its suppose to look.
IE7 seems to fix the div's but pushes there position to the right, im not sure if this is a Position: fixed problem, or a float problem, or something else...
http://snapclicker.com/
Thanks.
It's a problem with position: fixed.
#sandeep has the right idea (explicitly define top and left), but I'm going to add specifics, because I just found them.
To #header, add left: 5px and top: 5px.
To #nav, add left: 5px and top: 151px. Remove the margin-top rule.
Hey, gods
if given position:fixed .so, there is no need to given float .Basically define position attributes.
try this:
position:fixed;
top:0px;
left:0px;
both sandeep and thirtydot are right.. to avoid re-calculating position though.. wrap the left column (both the fixed divs) in a div and float it at 233px width, then add position: relative to it too - also remove the floats from the fixed divs, they aren't doing anything
#sidebar {
float: left;
width: 233px;
position: relative;
}
the your existing fixed divs should still work and you can change the padding (on the #container) without re-calculating
Can you please go to: http://www.binarymark.com/Products/ColorPickerPro/default.aspx and note the page's layout.
What I want to do is to stick or "glue" some small div to the right side of the page, that is so that it's just outside of the right frame of the page.
However, vertically I want the div to be fixed to a Window, that is no matter how much the page is scrolled, it should remain a fixed 300px from the top edge of the window.
Here's what it should look like http://www.binarymark.com/layexp.png
Can you help me please?
Seems easy, but I have no idea how to combine vertical fixed positioning and horizontal relative/absolute positioning and making sure it supports all major browsers.
Thanks.
position: fixed;
right: 0;
top: 50%;
Edit: try inserting this div as the first child of your <div id="content">...
<div class="right-tab">TEXT</div>
CSS:
.right-tab {
position: fixed;
top: 50%;
width: 1100px;
background-color: red;
text-align: right;
}
That should get you started. The width will specify how much past the content you want your tab to show (so in this case it's about 100 px). The red background is just so you can more easily see the div.