Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

Image positioning

Posted on 2011-03-08
9
Medium Priority
?
490 Views
Last Modified: 2012-08-13
The attached image shows a white content area with top horizontal menu, over layed on a decorative background, with black header and footer. A min-height is set for the white content area, but the height will vary depending on content and when it does it correctly pushes the footer down.

My question is how can I position the decorative image that I've circled in red? If I place the image tag in the footer and use css relative positioning it will work except that the presence of the image tag conflicts with other content in the footer, ie it changes the positions of other elements in the footer even though it moves.  Is jquery helpful here or is it just css?
footer-image.jpg
0
Comment
Question by:ncw
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 4
  • 3
9 Comments
 
LVL 5

Expert Comment

by:rucky544
ID: 35068685
Place it as the background for the footer and centre it with no repeating.

With it being for decorative purposes it should be placed as a background anyway.

It will not affect surrounding text and will always be in the correct spot on the footer.
0
 
LVL 1

Author Comment

by:ncw
ID: 35070149
The white content area is repositioned by -33px using relative positioning so that it overlaps the black header. The repositioning correctly leaves a gap between the bottom of the content area and the black footer which is filled by the decorative background. If I set the decorative image (let's call it the leaves) as the footer background then I can only position it within the bounds of the footer div, whereas it needs to go to a negative y-position.
0
 
LVL 6

Expert Comment

by:blueghozt
ID: 35085524
absolute position it, show us your mark-up and css and I am sure it can be explained - without seeing the code I can't suggest where it goes in the mark up (in a relatively positioned footer or relatively positioned content area) either way absolute positioning will not affect your other footer contents.
0
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 
LVL 1

Author Comment

by:ncw
ID: 35085711
The fundamental problem is that when the image is loaded it has a foot print, and when it is moved by absolute or relative positioning the footprint remains. It must be possible to avoid leaving the footprint as dynamic slideout or dropdown menus work ok.
0
 
LVL 1

Author Comment

by:ncw
ID: 35155035
I solved it by wrapping the image in an absolute positioned div and wrapping that in a relative positioned div with top and left settings.
0
 
LVL 6

Expert Comment

by:blueghozt
ID: 35155121
mmm I believe the OP has followed my advice and used absolute positioning within a relative container - without seeing the mark-up and existing div structure (I did ask to see it) no one could possibly give any more specific advice or code than that.
0
 
LVL 1

Accepted Solution

by:
ncw earned 0 total points
ID: 35155189
Absolute positioning on it's own was not the solution. I'm sorry I didn't prepare the code for you to see, it was embedded within a lot of other code which would have been confusing; thank you for offering to look at it though.

This is the article I followed:
http://hubpages.com/hub/Relative-Positioning-Leave-Blank-White-Space-on-Webpage
0
 
LVL 6

Expert Comment

by:blueghozt
ID: 35155279
I am not going to object beyond this, I just thought that without any code to see then the best advice anyone could be expected to give was to absolute position it and this would naturally have to happen within a relatively positioned container, as I eluded to in my qualification of the advice " (in a relatively positioned footer or relatively positioned content area)" - anyway glad you got it sorted.
0

Featured Post

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

When applying CSS to your HTML, there are many different ways to select which element(s) the CSS applies to.  Some of these selectors are more commonly known and used than others - Here are the more common ones: #X - Matches an ID of X .X - Matche…
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... …
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).
Suggested Courses

715 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