Solved

Image positioning

Posted on 2011-03-08
9
475 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
Do You Know the 4 Main Threat Actor Types?

Do you know the main threat actor types? Most attackers fall into one of four categories, each with their own favored tactics, techniques, and procedures.

 
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

Why You Should Analyze Threat Actor TTPs

After years of analyzing threat actor behavior, it’s become clear that at any given time there are specific tactics, techniques, and procedures (TTPs) that are particularly prevalent. By analyzing and understanding these TTPs, you can dramatically enhance your security program.

Join & Write a Comment

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 tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
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…

705 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

18 Experts available now in Live!

Get 1:1 Help Now