Solved

Image positioning

Posted on 2011-03-08
9
477 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
 
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
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 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

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

"I want to put my photos online, but I don't want them stolen.  What settings should I use?" When You Put Photos Online First and foremost, any digital file published on the WWW can be copied, stored, modified, retransmitted, etc.  Remember Naps…
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... …
In this Micro Tutorial viewers will learn how to create a CSS image sprite (In a later tutorial, viewers will learn how to use CSS and HTML to create a navigation menu using this sprite) Open a new Photoshop document with a width of (Icon width)x(N…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

863 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

28 Experts available now in Live!

Get 1:1 Help Now