Solved

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

Posted on 2011-09-05
8
211 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 22

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 22

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
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 
LVL 22

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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
jquery add something to a div 4 38
convert publisher file to an outlook email template 8 40
Split in Javascript 5 31
Capture logon name 13 46
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
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…
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.

867 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

22 Experts available now in Live!

Get 1:1 Help Now