Hey guys, been wracking my brain all afternoon trying to think of a solution to display a footer design correctly.

 

The main portion of it is a 100% width, 50px high block with a transparent background. On the footer they want two bits of text centered, copyright on the left and my 'design by' text. They want them split in the middle however by a small circle logo. Here, this image might help more:

 

 

So how can I get that to display correctly? The transparent background and centered text obviously isn't an issue, but how can I get the circle logo in place over the top as well? I've tried everything I can think but nothing has worked. I keep thinking I've thought of something with positioning then the fact it's 100% width usually scuppers that.

Hey guys, been wracking my brain all afternoon trying to think of a solution to display a footer design correctly.

 

The main portion of it is a 100% width, 50px high block with a transparent background. On the footer they want two bits of text centered, copyright on the left and my 'design by' text. They want them split in the middle however by a small circle logo. Here, this image might help more:

 

 

So how can I get that to display correctly? The transparent background and centered text obviously isn't an issue, but how can I get the circle logo in place over the top as well? I've tried everything I can think but nothing has worked. I keep thinking I've thought of something with positioning then the fact it's 100% width usually scuppers that.

 

Have the 3 elements as a list in a center aligned <ul> tag. Make sure the <li> containing the red circle is postion:relative and that the other 2 <li> have an equal fixed width with the text inside set to text-align:left and right accordingly. Then set the image (of the red circle) inside to postion:absolute to get it to overlap the top of the <ul>

couldnt you create the footer as normal, put a div above the normal footer and put the red circle in the div and then set the position of the div to relative and then use bottom to move the red circle down??

Have the 3 elements as a list in a center aligned <ul> tag. Make sure the <li> containing the red circle is postion:relative and that the other 2 <li> have an equal fixed width with the text inside set to text-align:left and right accordingly. Then set the image (of the red circle) inside to postion:absolute to get it to overlap the top of the <ul>

 

I don't quite follow what you're saying here, could you give a quick working example?

 

couldnt you create the footer as normal, put a div above the normal footer and put the red circle in the div and then set the position of the div to relative and then use bottom to move the red circle down??

 

That does work yes but then the text isn't in the correct position, it's bunched together underneath the circle.

Hi,

 

heres a quick take on what you are wanting... posistioning is not ideal but hopefully you can get the idea of how to do it by this and posistion it how you want it.

 

Link: http://www.digitalwinter.co.uk/test/Untitled-1.html

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="css.css" />
<title>Untitled Document</title>
</head>

<body>
<div id="above">
</div>
<div id="footer">
<div id="footer_left">
<p>Copyright</p>
</div>
<div id="redcircle">
<img src="circle.png" />
</div>
<div id="footer_right">
<p>Design By</p>
</div>
</div>
</body>
</html>

 

* {margin:0; padding:0;}
body {color:#fff}
#above {width:100%; height:400px; background:#333;}
#footer {width:100%; height:30px; margin:0 auto; background:#000;}
#footer_left {width:200px; float:left; text-align:right;}
#redcircle {width:50px; float:left; position:relative; bottom:25px;}
#footer_right {width:200px; float:left;}

Edited April 15, 201115 yr by Anth Winter

I don't quite follow what you're saying here, could you give a quick working example?

 

See Anth's example above, that's pretty much what I was getting at.

Thanks. Now is just the problem of centering it.....

Thanks. Now is just the problem of centering it.....

 

put it in a separate div and just move the div around using position set to relative and move using top bottom left and right should position it, i dont know why that wouldnt work :s

Here's a simple solution, replace you footer div with this..

 

<div id="footer"> 
<div style="margin:0 auto;width:480px">
 <p class="smalltext">
<span style="margin-right:40px;width:200px;display:block;float:left;text-align:right;">Copyright © 2010 FooFightersLive </span>

<span style="margin-left:40px;width:200px;display:block;float:left;text-align:left;">Website by: <a href="http://www.simonkilmore.co.uk">Simon Kilmore</a></span> 
 </p>
 <div style="clear:both"></div>
</div>
</div> 

Edited April 20, 201115 yr by itodd

There you go, this should do the trick:

http://jsfiddle.net/3VMwn/2/

Edited April 20, 201115 yr by Pedro