Hi guys.. I just got to say I love this site! :) I am still pretty new at css and html but I am starting to get a hold of it better and better thanks to sites like this..
I am having some problem positioning the cite under my blockquotes on my site and was wondering if anyone could help me out? If you take a look at the blockquote on this post http://www.spetakkel.org/european-design-awards/. I am trying to position it closer to the blockquote and right-aligned..
I managed to style it using this code(under) but I can't figure out how to position it…
Hey StigBratvold, when the element you have is position: relative; it's not relative to it's parent container, and adding right: 10px; will not "snap" it to the right side. What you need is position: absolute; right: 10px; and your container to have position: relative; this way it will snap. Try this bit of code:
@stigbratvold I'm not really a big fan of absolute positioning unless it's strictly necessary as it removes the element from the natural flow of the document.
I'd recommend combining float: right; and a negative margin to achieve the same effect.
Regarding having a footer element inside a blockquote - I know there were discussions about this before whether it would be officially valid markup, I think that it might not have made it into spec.
@theCSSguru, when an element is position: relative it is not relative to it's parent container. It's relative to it's normal static position and that position is retained for the document layout.
@andy_unleash, float also removes an element from the document flow. I think either version would work here. I'd recommend a bottom padding on the blockquote to reserve space for the cite.
Another alternative would be to make the cite block level and text-align: right;
andy_unleash: So is there any other best practices about how you can ad the "cite" under the blockquote? It was the only solution I came across googling the issue some…
I would love to hear it if there is any better ways…
I mentioned previously, adding a bottom padding to reserve space for the cite, however, its already taken care of with the bottom margin on the p inside the blockquote...
Hi guys.. I just got to say I love this site! :) I am still pretty new at css and html but I am starting to get a hold of it better and better thanks to sites like this..
I am having some problem positioning the cite under my blockquotes on my site and was wondering if anyone could help me out? If you take a look at the blockquote on this post http://www.spetakkel.org/european-design-awards/. I am trying to position it closer to the blockquote and right-aligned..
I managed to style it using this code(under) but I can't figure out how to position it…
I guess I am doing something wrong?
Hey StigBratvold, when the element you have is
position: relative;it's not relative to it's parent container, and addingright: 10px;will not "snap" it to the right side. What you need isposition: absolute; right: 10px;and your container to haveposition: relative;this way it will snap. Try this bit of code:@stigbratvold I'm not really a big fan of absolute positioning unless it's strictly necessary as it removes the element from the natural flow of the document.
I'd recommend combining float: right; and a negative margin to achieve the same effect.
Regarding having a footer element inside a blockquote - I know there were discussions about this before whether it would be officially valid markup, I think that it might not have made it into spec.
It worked perfectly! :) Thanks theCSSguru
@theCSSguru, when an element is position: relative it is not relative to it's parent container. It's relative to it's normal static position and that position is retained for the document layout.
@andy_unleash, float also removes an element from the document flow. I think either version would work here. I'd recommend a bottom padding on the blockquote to reserve space for the cite.
Another alternative would be to make the cite block level and text-align: right;
andy_unleash: So is there any other best practices about how you can ad the "cite" under the blockquote? It was the only solution I came across googling the issue some…
I would love to hear it if there is any better ways…
@wolfcry911, So where would I ad that code?
which code? There are three proposed options. I wouldn't hesitate on using any of the three. You've already used the AP, so I'd just stick with it.
Allright, yeah it looks exactly how I want it to look now so I'll stick with it…
Thanks again for advice :)
I mentioned previously, adding a bottom padding to reserve space for the cite, however, its already taken care of with the bottom margin on the p inside the blockquote...