i want to create an image inside a div (col-sm-4 three times).
i try to use vertical align bottom on the image but its doesnt work.
but its seem it didnt work.
the img still doest go to bottom
my css is like this.
.initiative-buttons-content-inner{
min-height: 180px;
position: relative;
}
img{
vertical-align: bottom;
}
here the link https://jsfiddle.net/2z4czqhu/
doesany one know why it didnt work?
Make like this
position: absolute;
bottom: 0;
https://jsfiddle.net/2z4czqhu/1/
Read this
https://css-tricks.com/absolute-positioning-inside-relative-positioning/
Related
I'm creating a basic generic web page with a photo gallery as practice here, but for some reason I cannot get the gallery div to float next to the sidebar div so that there isn't a big empty space above it. Floating them just destroys everything. When I inspect element it shows that there's a margin taking up all of the space to the right of the sidebar/above to the gallery, but I've looked through my css over and over and can't find where that margin could be coming from. I'm not 100% sure that's what is causing the issue though.
If anyone knows how I can make this position correctly it would be much appreciated. I feel like I've tried everything and I'm just not getting it.
Here is the link to the code on jsfiddle:
https://jsfiddle.net/laurynm/h6mu6hsb/
.gallery {
width: 80%;
position: relative;
}
#sidebar {
position: relative;
width: 230px;
}
Try this https://jsfiddle.net/h6mu6hsb/4/
#sidebar {
float: left;
position: relative;
width: 230px;
}
I took a stab in the dark, and made a jsfiddle demo for you to try out. In essence, I gathered different sections in wrappers, converted them to inline-block, and hope it looks kinda like what you wanted.
How about something like this so you dont have horizontal scrolling problems:
http://jsfiddle.net/espriella/fdmdwpp5/
Using display as table-cell
.sidebar{
min-width: 200px;
display: table-cell;
}
.gallery{
display: table-cell;
width: 100%;
}
I'm trying to align the elements of my header like on the first image below.
Unfortunately I'm not getting the expected result. The female sign and the image next to it stay stuck to the top of the page.
I've tried to apply a margin-top but the issue if I do that is that it pushes everything else down.
Your help would be much appreciated.
I haven't been able to reproduce this on JSFfiddle, so here is the live link.
Many thanks,
This is what I want (female sign aligned just above the text):
This is what I have:
Try setting position to absolute and then top to 200px I guess.
use position: relative; and change top value. Replace this classes:
.female-sign {
position: relative;
top: 263px;
left: 65px;
}
and
.special-femmes {
position: relative;
top: 230px;
left: 65px;
}
I have been trying for a long time.. But I can not align a section of text inside a link, which is inside a div.
This may sound really confusing. This is an example of what I have:
http://jsfiddle.net/caoj5c36/
As you can see when you scroll over "Pygame" I want the description "Coming Soon.." to be centered inside the button.
Any suggestions?
I have tried using
text-align: center;
in every possible combinations of html tags in my css script
It's because p is absolutely positioned. It makes it run out of the flow of the elements... So, you'll have to make it expand to 100% width of the parent a, and then you can use text-align: center
Updated JsFiddle
#button_layout #info_text {
/*description is invisible until hover */
font-size: 16px;
visibility: hidden;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
text-align: center;
}
Its simple:
#button_layout #info_text {
width: 100%
}
So your Link has the width of the div to center the text in it.
You shouldn't use IDs like this. IDs should only be used once on a page, use classes instead.
I have an absolute positioned div. Inside this div there is an image and underneath it, a caption. Now I want the caption to break to new a line if it reaches 95% width of the image.
But I can't get it to work. The text (no matter what width I say), always moves the image to the left like it would have no breaks.
I made a fiddle for this:
http://jsfiddle.net/hw7t7xyn/1/
The image is set to
right: 0;
top: 10px;
But since the text is too long it moves to the left.
Also the div.caption does not seem to adopt the parents div width.
Can anybody help me out here? Maybe it's a problem of the HTML setup or the CSS, I have no idea anymore, but it's driving me crazy.
Update: Sorry, I did forget to mention that I don't know the dimensions of the image. Is there a possible way to do this without javascript?
I think you just need to add a width to the main div (the one that's absolute positioned).
I added a width of 260px (same as the image)
When I did this, it aligned the div to the far right as you have right:0px is this correct?
http://jsfiddle.net/hw7t7xyn/5/
div.photo-wrap {
overflow: hidden;
position: absolute;
text-align: left;
width:260px;
}
img.photo {
position: relative;
display: block;
}
div.caption {
margin-top: 7px;
width: 95%;
position: relative;
display: inline-bock;
}
give width to photo-wrap
For whatever reason I am really beating myself up with this... No doubt because of the lack of support for a real "proper" way of vertically centering anything.
The Goal:
Is to have a set of four images, each inside their own responsive columns. Each image has a white overlay, that when hovered reveals more of the image, as well as a title for each of the 4 images that is horizontally and vertically centered inside the image.
I could easily achieve this if I set specific width/heights and stuck the image inside CSS rather than the HTML. For SEO reasons I want the image to be present in the HTML.
Additionally because of the responsive nature, the images must scale to 100% of the width of the column they reside in. Consequently, because the width scales, the height scales as well.
So the first issue is getting the "caption" as I am calling it in my classes, to appear over the top of the image. Easily done with a simple position: absolute; as well as top: 0; and left: 0; on the caption and position: relative; on the container.
The big problem and second issue, is vertically centering the "Gallery 1" text over the top of the image. I have to use the position: absolute; bit as I mentioned above just to get the text over-top of the image. From there I can't manage to get a display: table; solution to work, nor a -50% margin solution to work.
Here is a JS Fiddle
My HTML:
<div class="container">
<img src="http://lorempixel.com/output/city-q-c-640-480-8.jpg" />
<div class="caption">
Gallery 1
</div>
</div>
Any ideas on how to achieve this? I would like to stay at least IE8 supported, and I am using selectivizr already, so pseudo-classes don't bother me.
First, I wasn't sure about what you mean exactly. But as you mentioned:
The issue is centering the text Gallery 1 vertically over the top of the image. Centering it horizontally is easy with a simple text-align but centering it vertically is what is eluding me.
Here is my attempt to align the text vertically over the image. Actually the concept comes from this approach of a similar topic on SO:
.container { position: relative; }
.container img {
vertical-align: bottom; /* Remove the gap at the bottom of inline image */
max-width: 100%;
}
.caption {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
font: 0/0 a; /* Remove the gap between inline(-block) elements */
}
.caption:before {
content: ' ';
display: inline-block;
height: 100%;
vertical-align: middle;
}
.caption a {
font: 16px/1 Arial, sans-serif; /* Reset the font property */
display: inline-block;
vertical-align: middle;
text-align:center;
background: rgba(255, 255, 255, 0.75);
width: 100%;
padding: 1% 0; /* Added a relative padding for the demo */
}
WORKING DEMO.
This relies on CSS2.1 and it will definitely work on IE8+ (excluding rgba()).
If I understand your issue correctly, this may work for you:
Working Demo
If you need the image to scale when hovered over, then simply adding a :hover on the container and changing it's width should work.
CSS:
.container {
// existing styles
-webkit-transition: all .2s; // needs prefixes for other browsers.
}
.container:hover {
width: 500px;
}
The only issue is that transition has no support for IE9 or earlier. So you'd need to go a JS route if that is an issue.