Marisa
asked on
Porbably easy CSS question about overlapping and offset images
http://wovenpatches.com/test/
In the blue section, there are two overlapping, round images. I want to have three, have them centered in the space, and have the content on the right removed. Obviously I know how to remove the content on the right, but I want to show the starting point before I get in there and screw up any code.
Anyway, I originally messed around with the css and html in a way that I thought would produce the desired result, but I wasn't even close.
In the blue section, there are two overlapping, round images. I want to have three, have them centered in the space, and have the content on the right removed. Obviously I know how to remove the content on the right, but I want to show the starting point before I get in there and screw up any code.
Anyway, I originally messed around with the css and html in a way that I thought would produce the desired result, but I wasn't even close.
ASKER
I DO what them to be overlapping.
I tried the 4,4,4 thing. It was the first thing I tried before I ever asked the question, and while that does make three images, it also makes them smaller and still shoved over to the left. So I made the container they're in a 12 instead of a 6, but then they're no longer overlapping.
i want three of them, overlapping and centered in the space.
I tried the 4,4,4 thing. It was the first thing I tried before I ever asked the question, and while that does make three images, it also makes them smaller and still shoved over to the left. So I made the container they're in a 12 instead of a 6, but then they're no longer overlapping.
i want three of them, overlapping and centered in the space.
You can try something like this
The text block on the right is removed and the container for the images increased to be 10 columns wide with a 1 column offset either side.
I removed the about_img_2_col class from the third (old second) column and put the margin adjustment inline - you can choose to leave inline or move to style sheet.
<div class="col-md-10 col-sm-10 col-md-offset-1">
<div class="row">
<div class="col-md-4 col-sm-4 col-xs-4" style="margin-right: -80px;">
<div class="about_img_1">
<div class="about_img_inner"> <img src="images/caretta_caretta.jpg" class="img-responsive" alt="Image" style="width: 100%;"> </div>
</div>
</div>
<div class="col-md-4 col-sm-4 col-xs-4" style="border: 1px solid red;">
<div class="about_img_1">
<div class="about_img_inner"> <img src="images/caretta_caretta.jpg" class="img-responsive" alt="Image" style="width: 100%;"> </div>
</div>
</div>
<div class="col-md-4 col-sm-4 col-xs-4" style="margin-left: -80px">
<div class="about_img_2">
<div class="about_img_inner"> <img src="images/zakynthos.jpg" class="img-responsive" alt="Image"> </div>
</div>
</div>
</div>
</div>
The text block on the right is removed and the container for the images increased to be 10 columns wide with a 1 column offset either side.
I removed the about_img_2_col class from the third (old second) column and put the margin adjustment inline - you can choose to leave inline or move to style sheet.
ASKER
Yes, that did work with a couple oddities.
Refresh the page.
Are you seeing a red box around the middle circle?
Also, I have a 27" screen, and when I maximize the window completely, they're no longer overlapping. That's not the end of the world. But when you reduce the window to tablet size, the circles are no longer centered in the space; they're left.
Refresh the page.
Are you seeing a red box around the middle circle?
Also, I have a 27" screen, and when I maximize the window completely, they're no longer overlapping. That's not the end of the world. But when you reduce the window to tablet size, the circles are no longer centered in the space; they're left.
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Those solutions did work. Thanks. The only other issue it caused is that adding three images made them all smaller than when there were two. These images are 446px, but they look like they're about 200. Where is the resizing being controlled from? Sorry for my ignorance. I do know css, but I don't know weird fancy stuff like this.
ASKER
about_style_2 only has this stuff. None of that seems like it controls size.
Plus, there's a double border on those images, which that code also doesn't seem to control. But I see where it applies a single border.
padding: 0px;
margin-top: 25px;
display: inline-block;
border: 10px solid #1dc2f8;
border-radius: 50%;
overflow: hidden;
Plus, there's a double border on those images, which that code also doesn't seem to control. But I see where it applies a single border.
ASKER
I just uploaded my changes.
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
I think that actually makes sense. But does that mean that it's not actually possible to have them big and also centered? Because removing the offset and changing it to 12 did make them bigger, but it also pushed them back to the left.
You can define the imagesize in img tag.
Example <img src="img.png" class="img-responsive" width="250px"/>
Example <img src="img.png" class="img-responsive" width="250px"/>
ASKER
Pankaj,
I already tried that, but it's being overwritten by something else, likely what Julian explained in his last comment.
I already tried that, but it's being overwritten by something else, likely what Julian explained in his last comment.
ASKER
Maybe I should go the easy route and just make it one solid image in Photoshop.
Can you please just share in simple words that what you wants? you wants to show full picture or what?
ASKER
I want the images to be centered in the space and also overlapping each other no matter the screen size.
And I want the overall size of the three of them together to be as wide as the other content on the page.
And I want the overall size of the three of them together to be as wide as the other content on the page.
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
That does control the size, but they're still not centered, and it makes them overlap too much, especially at smaller screen sizes. I am just going to make the three overlapping images in Photoshop into one image so that I'll have full control. There's no need making this into a Rube Goldberg machine with css ( https://upload.wikimedia.org/wikipedia/commons/a/a9/Rube_Goldberg's_%22Self-Operating_Napkin%22_(cropped).gif )
I will still assign points accordingly. And thanks, everybody, for all your help.
I will still assign points accordingly. And thanks, everybody, for all your help.
Okay no issue. You can go ahead.
If they overlap too much then use a % margin on the overlap.
If the images are not big enough then make the width of the images 100% - don't use an absolute value as this will have side effects.
If the images are not big enough then make the width of the images 100% - don't use an absolute value as this will have side effects.
Open in new window
You can remove this to stop overlapping.
For using three images in a row: use "col-md-4 col-sm-4 col-xs-4" 3 times.