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
Solved

Image positioning

Posted on 2011-03-08
9
480 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
  • 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
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.

 
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: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering 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

CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
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 Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…
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).

809 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