Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

Image positioning

Posted on 2011-03-08
9
Medium Priority
?
494 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
8 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: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

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

Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
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…
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
Suggested Courses

783 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