INTELLIGENT WORK FORUMS
FOR COMPUTER PROFESSIONALS

Log In

Come Join Us!

Are you a
Computer / IT professional?
Join Tek-Tips Forums!
  • Talk With Other Members
  • Be Notified Of Responses
    To Your Posts
  • Keyword Search
  • One-Click Access To Your
    Favorite Forums
  • Automated Signatures
    On Your Posts
  • Best Of All, It's Free!

*Tek-Tips's functionality depends on members receiving e-mail. By joining you are opting in to receive e-mail.

Posting Guidelines

Promoting, selling, recruiting, coursework and thesis posting is forbidden.

Jobs

strange div positioning

RE: strange div positioning

And the "subFooter" would be .... Which one exactly, bearing in mind that we don't actually know what your intended layout is supposed to look like, and we can only see what it currently looks like.

Chris.

Indifference will be the downfall of mankind, but who cares?
Time flies like an arrow, however, fruit flies like a banana.
Webmaster Forum

RE: strange div positioning

(OP)
Apologies Chris, the subfooter should appear under the footerbar and the associated CSS seems to work, but when I add a border to the subFooter class it shows the div as being just off the top of the page not at the bottom.

Greg Griffiths
Livelink Certified Developer & ECM Global Star Champion 2005 & 2006
http://www.greggriffiths.org/livelink/

RE: strange div positioning

You miss my point, what is the content or identifying features of the "subfooter" div as it stands right now?

Currently it sounds like you are using absolute positioning incorrectly or have not cleared a float plane but I don't want to get bogged down in somebody else's source code until I have verified what I am actually looking for.

Chris.

Indifference will be the downfall of mankind, but who cares?
Time flies like an arrow, however, fruit flies like a banana.
Webmaster Forum

RE: strange div positioning

The page you link to does not have a subfooter div anywhere at all in the html code or css. Either as a class or ID

So not sure what it is you are describing here. We don't know what you are calling a subfooter.

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Web & Tech

RE: strange div positioning

(OP)
The content of the DIV (the icons under the footer bar) all appear where I need them to, but when I set the border on for the subFooter DIV using

CODE

border:2px red solid 
it appears near the top of the page rather than where I expect it to be, i.e. under the footer navigation bar.

its this DIV :

CODE

<div id="subFooter">
			<span id="subFooterLeft">
				<a href="http://www.adservio-consulting.co.uk/" title="Website Designed by Adservio Consulting">
					<img src="http://www.adservio-consulting.co.uk/images/adservio_01.gif" alt="Website Designed by Adservio Consulting" width="40%">
				</a>
				    
				<a href="http://www.addthis.com/bookmark.php?v=250" onmouseover="return addthis_open(this, ', '[URL]', '[TITLE]')" onmouseout="addthis_close()" onclick="return addthis_sendto()">
					<img src="http://s7.addthis.com/static/btn/lg-share-en.gif" width="125" height="16" alt="Bookmark and Share" style="border:0;align:right;">
				</a>
			</span>
			<span id="subFooterRight" class="opaqueImg">
				<a href="http://validator.w3.org/check?uri=referer" title="Valid HTML 4.01 Strict">
					<img src="http://www.w3.org/Icons/valid-html401" alt="Valid HTML 4.01 Strict" height="31" width="88">
				</a>
				  
				<a href="http://jigsaw.w3.org/css-validator/" title="Valid CSS!">
					  <img style="border:0;width:88px;height:31px" src="http://jigsaw.w3.org/css-validator/images/vcss" alt="Valid CSS!">
				</a>
				  
				<a href="http://www.w3.org/WAI/WCAG1A-Conformance" title="Explanation of Level A Conformance">
					<img height="32" width="88" src="http://www.w3.org/WAI/wcag1A" alt="Level A conformance icon, W3C-WAI Web Content Accessibility Guidelines 1.0">
				</a>
			</span>
		</div> 

that appears in the linked page, with the following CSS :

CODE

#footerHomeLink{float:left;width:30%;display:block;margin-left:0.5%;}
.footerLastMod{text-align:right;float:right;color:#000;font-size:70%;width:25%;padding-top:0.3%;}
.footer{width:100%;background-color:#ADDAE6;float:left;clear:left;padding:0%;border-bottom:solid teal 2px;border-top:solid teal 2px;}
#subFooter{text-align:center;margin-top:3em;}
#subFooter img{vertical-align:middle;}
#subFooterLeft{width:25%;margin-right:1%;float:left;margin-bottom:0%;}
#subFooterRight{width:30%;float:right;margin-bottom:0%;} 

Greg Griffiths
Livelink Certified Developer & ECM Global Star Champion 2005 & 2006
http://www.greggriffiths.org/livelink/

RE: strange div positioning

Quote:

it appears near the top of the page rather than where I expect it to be, i.e. under the footer navigation bar.

Okay, the only element on the 'page' with a red border around that I see is located on the left edge below the 'blog roll' and has a 'title' of "Feature" and contains an 'advert' for "ECM2010".

Is this the element you have dubbed 'sub-footer'?


If not, please, please, tell us what is in the 'sub-footer' element that can be used to identify then visible element on the rendered page?

Chris.

Indifference will be the downfall of mankind, but who cares?
Time flies like an arrow, however, fruit flies like a banana.
Webmaster Forum

RE: strange div positioning

Oh by the way, I get an error of xmlDoc.load is not a function in Opera (Linux Mint 17.2 OS)

Chris.

Indifference will be the downfall of mankind, but who cares?
Time flies like an arrow, however, fruit flies like a banana.
Webmaster Forum

RE: strange div positioning

I just used Mozila Firefox 'Inspector' tool to see what the issue was Matt. The issue is with the footer to begin with. It has no declaration or styling, which informs the browser that its a 'block level' element of any sort.

This is why I ommitted the 'float:left and clear:left' rules and applied 'display:inline-block' for footer.

Having done the above, it goes into the position you want, but we still have problems.

The subfooter items ( the graphic images ) overlap the border somewhat. I had to apply 'padding' to them to bring them lower and stop them overlapping, HOWEVER instead, I just applied 'margin-top:1em' to subFooter left, and margin-top:3em to the subFooter right.


Here are step-by-step screenshots which make what I've just said above, more clearer for you. Oh and with explanations of how to make it work, and showing you what css rules I edited/deleted to achieve what you were seeking:

1. http://www.imagebam.com/image/79cfa8491986309



2. http://www.imagebam.com/image/24c069491986310



3. http://www.imagebam.com/image/1b1b18491986311



4. http://www.imagebam.com/image/196d4e491986315



5. http://www.imagebam.com/image/2432ed491986317



6. http://www.imagebam.com/image/d5cc25491986320 ( what you're gunning for I'm guessing..)



RE: strange div positioning

(OP)
thanks with a little tweaking I got it where I needed it on my personal site :)

Greg Griffiths
Livelink Certified Developer & ECM Global Star Champion 2005 & 2006
http://www.greggriffiths.org/livelink/

Red Flag This Post

Please let us know here why this post is inappropriate. Reasons such as off-topic, duplicates, flames, illegal, vulgar, or students posting their homework.

Red Flag Submitted

Thank you for helping keep Tek-Tips Forums free from inappropriate posts.
The Tek-Tips staff will check this out and take appropriate action.

Reply To This Thread

Posting in the Tek-Tips forums is a member-only feature.

Click Here to join Tek-Tips and talk with other members!

Resources

Close Box

Join Tek-Tips® Today!

Join your peers on the Internet's largest technical computer professional community.
It's easy to join and it's free.

Here's Why Members Love Tek-Tips Forums:

Register now while it's still free!

Already a member? Close this window and log in.

Join Us             Close