I'm having CSS question on aligning an element vertically.
Please take a look at this URL:
http://leisureonly.com/gravedigger/grow-up [Possibly NSFW]
If you look at the sidebar to the right, at the bottom there's a block with an image saying 'Grave Digger'. I want this block to be aligned at the bottom of the sidebar.
I've tried wrapping it in a div and applying vertical-align: bottom to the grave-digger element, but that doesn't offer the desired results.
What is the correct way of doing this?
Well, beginning with, sidebar_gravedigger is at the bottom of the side_bar, so, the first problem is that the sidebar is that long. If you want that element positioned at the bottom of the container (the parent container of the side_bar), I recommend this:
.sidebar_gravedigger {
position: absolute;
bottom: 20px; /*container padding*/
}
#sidebar {
padding-bottom: 500px; /*when the content is short, gravedigger won't be over the bar content.*/
}
.container{
position: relative;
}
Something like this might help:
.sidebar {
position: relative;
height: 100%;
}
.module {
position: absolute;
bottom: 0;
}
Related
Good evening,
I have this blog: http://bloganacastro.com/ where I have below the logo some last posts. It's almost done. I just can't figure out how to center the text exactly in the middle no matter how many characters have in it. For example, this blog: sempreglamour.com.br works exactly as I want. I already tried to copy some CSS from this blog but won't work too.
EDIT:
Print Screen with the difference about these two blogs http://imageshack.com/a/img661/7620/kr6Ov7.png
As you can see, the image from the right have all exactly perfect padding/margin and no matter the size of the text it always fill exactly. In the example from the left, depending on the size of the text it doesn't fill and it's never really centralized.
I got your problem fixed by just adding position: absolute on the <h3>, so try it out.
.caption-text h3 {
position: absolute;
}
UPDATE:
.caption {
width: 100%;
height: 100%;
}
.caption-text h3 {
margin-top: 0;
margin-left: 0;
position: absolute;
width: 100%;
height: 100%;
}
.caption-text a {
position: absolute;
display: block;
top: 50%;
transform: translateY(-50%);
}
and the last thing to remove the existing padding you've applied on .caption-text h3
Now I'm going to tell you that the main thing to vertically align the text in middle was set on .caption-text a, you'll see transfrom and top, those do the vertical centering. Now no matter whatever the length of the text, it will be in center. The width and height on other elements were necessary so that they expand fully inside the li and then the centering can happen easily.
If you are talking about centering text horizontally, this should do it:
.class {
text-align: center;
}
I have web pages on http://rygol.cz/qlife/ and when I zoom out, the id="contacts" goes anywhere every iteration when I zoom out. I need something like
border: 0;
Because I need that text of will be every of bottom of
any ideas how to do that?
To align a div at the bottom of the content add {position: relative;} to the content div and {position: absolute; bottom: 26px;} to the div you want to align.
CSS:
#content-wrapper {
position: relative;
}
#leftcolumn {
padding-bottom: 110px; /* this will prevent the normal content in the left column to go under the aligned div */
}
#contacts {
margin-top: 0;
position: absolute;
bottom: 26px;
}
Demo: http://jsfiddle.net/NMDCF/
First of all, try to validate your HTML by using the following link : HTML Validation
try to fix those errors before trying to fix your id="contact"
as for the id="contact" use position:absolute or position:relative; that may solve your problem. if that did not work, use this display:block; or display:inline-block; both could help you achieve your goals.
The red footer gets up in the middle. How to make it keep it self at bottom? Like clear: both and overflow: hidden.
I have tried many things, is there something I am doing wrong?
Demo
The code is too large to be pasted here (30000 chars limit). Please, send me working fiddle.
update: it works now.
#footer {
position: relative;
height: 274px
bottom: 0;
margin-top: 274px;
}
You have
#footer {
margin:-274px 0 0;
}
Which is giving it a negative top margin and moving the footer up. Try removing that line. Though you may also need to tweak the content of the page. You should use the clearfix on the content so it doesnt go behind the footer.
Try this :
#footer {
position:fixed;
bottom:0;
}
clear: both is invalid with position: absolute elements, because they are out of the normal flow.
set a position: absolute; bottom: 0; style on the div.gallery element and it will be on the bottom of its container.
But it won't be enough for you, you should yet move your <div class="gallery"> to move out of its container div.
Please see here: http://jsfiddle.net/gFTeG/
I'm having trouble discovering the necessary CSS to have this align to the right (I can do text-align:right; for the text inside of the container, but the container stays aligned to the left side of the action button).
Any ideas?
Thanks.
You have to use right: 0; on the .ILdropdown .ILdropdown_content class of your css, and you'll have it align to the right:
.ILdropdown .ILdropdown_content {
display: none;
position: absolute;
border: 1px solid #777;
padding: 0px;
background: white;
top: 100%;
right: 0;
}
Check this DEMO
Hope it helps!
Sorry, I misunderstood.
Add right: 0; to your dropdown, so it aligns to the right side of the action button.
If I understand you correctly, you want the dropdown menu to appear to the right of the button. As you have your .ILdropdown .ILdropdown_content with position: absolute, you could add the position: absolute to the parent class and add/change left: 100% and top: 0% to the content class as shown below.
.ILdropdown .ILdropdown_button img {
...
position: absolute;
}
and
.ILdropdown .ILdropdown_content {
...
top: 0%;
left: 100%;
}
That should give the right aligned effect, shown in this demo. You may need to add a position: relative to a parent class if you want them to align horizontally. If I did misunderstand you on the position of the drop down, simply adjusting the top and left or right attributes will position it wherever you want.
This article from A List Apart might help with the layers of position attributes. http://www.alistapart.com/articles/css-positioning-101/
I have an absolute positioned logo on the bottom left of my website... BUT the problem is that ive positioned it to stick to the right of the page but it leaves a invisible barrier to the left of it that spreads across the page. So lets say a link is placed in alignment with that footer element, I won't be able to click it, the absolute positioned layer is spreading over it (even though nothings in it)
Heres my CSS for the logos position:
#basemenu {
margin-right: auto;
position: fixed;
bottom:0px;
width: 100%;
height: 40px;
text-align:right;
right:1%;
}
It sounds like you have an img inside of a <div id='basemenu'></div>. Is that right?
We could really use a block of HTML if you wouldn't mind posting it.
What I don't understand is why you can't target the logo itself with a bit of CSS like this:
#basemenu img {
height: 40px;
position: fixed;
bottom: 0px;
left: 0px;
}
Use the following block property display : none; to hide the block