Solved

Some CSS help to centralises an variably sized image with no effect on surrounding divs.

Posted on 2011-09-05
8
200 Views
Last Modified: 2012-08-14
Hi,

I am creating a dynamic front cover for a report as part of a web application. The front cover has:

a) A Title
b) A centralised image which can be any size.
c) Right, bottom aligned text block containing name and address details.

I need the image layer to take any size of image without it impacting the other text blocks. So I guess I need the image layer to be central to the page and it to be on top of the other divs.

So I guess I will have the following:

<div id="title">My Title</div>
<div id="Image" style="position:absolute;z-index:100.... centralise css ??? etc etc"><img src.../></div>
<div id="AddressBlock" style="bottom, right ???>Address data....</div>

Thanks for any help,

Sam
0
Comment
Question by:SamJolly
  • 3
  • 3
  • 2
8 Comments
 
LVL 17

Accepted Solution

by:
OmniUnlimited earned 250 total points
ID: 36485109
If you have separate title and AddressBlock div's, there is no need to use absolute positioning (and indeed is not desirable if you have an image that can be any size.

If you want the title, image and AddressBlock to be centralized in your page, simply place everything in a containing div and center that div in your window.

It would be best to set the AddressBlock in a containing div as well so that it can be floated to the right like you wanted it.

Your HTML would be something like this:
 
<div id="container" style="width: 500px;">
<div id="title" style="width: 100%; text-align: center;">My Title</div>
<div id="Image" style="width: 100%; text-align: center;"><img src="http://mysite.com/images/image.jpg" alt="image" style="margin: 0 auto;" /></div>
<div id="address_container" style="width: 100%;"><div id="AddressBlock" style="float: right;>Address data...</div>
</div>
</div>

Open in new window


To center it perfectly in the middle of your window, you would need a couple more containing div's.  See http://www.gobdg.com/blog/2009/05/vertical-horizontal-centering-w-3-lines-of-css/
0
 
LVL 21

Assisted Solution

by:Kim Walker
Kim Walker earned 250 total points
ID: 36485239
Vertical alignment is tricky. There is no "height: 100%." Something must give it height. I recommend you give the div for your image a height greater than the tallest possible image and using your image as a background image which actually can be vertically centered. Something like this:

<div id="title" style="position: absolute; top: 0;">My Title</div>
<div id="Image" style="background: transparent url(images/image.jpg) scroll no-repeat center center; width: 100%; height: 1200px; margin: -600px 0 0; position: absolute; z-index: 100; top: 50%;">
</div>
<div id="AddressBlock" style="position: absolute; top: 100%; text-align: right; width: 100%; height: 24px; margin: -24px 0 0;">Address data....</div>

Open in new window

0
 
LVL 21

Expert Comment

by:Kim Walker
ID: 36485245
I forgot to mention that "width: 100%" equals the window width PLUS margin and padding. Be sure your body doesn't have any margins or padding.
0
 

Author Comment

by:SamJolly
ID: 36485533
Thanks folks,

Can you confirm whether any of these solutions will enable the image to be any size and not affect the positioning of the address block. With my "layer" example I designing for the image to overlay the address block due to its "Z-Order". The "Title" and "Address" blocks are fixed in location.

Thanks,

Sam
0
How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

 
LVL 21

Expert Comment

by:Kim Walker
ID: 36486023
Yes. The image will be centered regardless of size and will be clipped to 1200 pixels in height in my example. You can increase the height if you want, just be sure to increase the negative top margin to half the height. The image will cover up the title and address block since it has a higher z-index.
0
 
LVL 17

Expert Comment

by:OmniUnlimited
ID: 36486346
I am not understanding what you are saying.  If you fix the title and the address blocks so that they never move from the page, and you set the image in an element that will expand to whatever size the image is, if your image exceeds the distance between the title and the address block it will cover up the address block.  Is this the effect you are looking for?
0
 

Author Comment

by:SamJolly
ID: 36599832
Hi,

I have resolved this now. A big thank you to all.

Sam
0
 

Author Closing Comment

by:SamJolly
ID: 36599836
thnks
0

Featured Post

Enabling OSINT in Activity Based Intelligence

Activity based intelligence (ABI) requires access to all available sources of data. Recorded Future allows analysts to observe structured data on the open, deep, and dark web.

Join & Write a Comment

When writing CSS, there are a few simple rules that will make your life easier.    1. Using ‘* {box-sizing:border-box;}’. Using this will wrap all your elements in a nice little compact box-model that will give you the width you want, like so... …
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

757 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

20 Experts available now in Live!

Get 1:1 Help Now