Link to home
Start Free TrialLog in
Avatar of Marisa
MarisaFlag for United States of America

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.
Avatar of Pankaj Jangir
Pankaj Jangir
Flag of India image

There is:

#about_style_2 .about_img_2_col {
    margin-left: -80px}

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.
Avatar of Marisa

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.
Avatar of Julian Hansen
You can try something like this
<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>

Open in new window


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.
Avatar of Marisa

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.
SOLUTION
Avatar of Pankaj Jangir
Pankaj Jangir
Flag of India image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
ASKER CERTIFIED SOLUTION
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of Marisa

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.
Avatar of Marisa

ASKER

about_style_2 only has this stuff. None of that seems like it controls size.

padding: 0px;
    margin-top: 25px;
    display: inline-block;
    border: 10px solid #1dc2f8;
    border-radius: 50%;
    overflow: hidden;

Open in new window



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.
Avatar of Marisa

ASKER

I just uploaded my changes.
SOLUTION
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
SOLUTION
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of Marisa

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"/>
Avatar of Marisa

ASKER

Pankaj,
I already tried that, but it's being overwritten by something else, likely what Julian explained in his last comment.
Avatar of Marisa

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?
Avatar of Marisa

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.
SOLUTION
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of Marisa

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.
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.