View Full Version : Website design - Float Logo

16-10-2009, 01:22 PM
Hi all

I am having issues with floating a logo on top of a site I am mocking up

Hopefully the attachment should give an idea of what i am trying to do

The site has a 150px orange textured bar running the entire length of the top of the site
Below this are 3 columns
The middle column (content) is a fixed width of 950px and is a very pale yellow
The left and right columns have a brown textured background and they obviously expand to fill in the space either side of the content column.

Unfortunately i cannot seem to get the logo to float where i want it to, the correct location is shown in the attachment.

Anyhelp would be appreciated

16-10-2009, 02:21 PM
ok here is what it should look like-ish
the logo needs cleaning up and the text should be over a bit more to the left, not sure why it isn't

16-10-2009, 02:25 PM
Thats exactly what it looks like in Chrome ? :D

What browser are you testing with?

16-10-2009, 02:31 PM
And Firefox too, except that the image has no shadow, only a white bit where the shadow is in the screenshot.

16-10-2009, 04:10 PM
You need to use css formatting, not tables.

16-10-2009, 04:43 PM
Sorry I should have mentioned the screenshot is what i want to achieve, the page is a mockup using tables rather than CSS, because I can't get the CSS to work, so i thought having an actual page showing what it should look like would help people understand what i was after.

I want to do this in CSS if possible, the page is only designed to show what it should look like and yes the shadow is crap, but that will be sorted out for the actual page

16-10-2009, 06:23 PM
This (http://mirror.erayd.net/pressf1/nigel/) is how to do it with CSS.

Edit: If you don't want the text to wrap around the logo, put it in another container div like this (http://mirror.erayd.net/pressf1/nigel/index2.html).

16-10-2009, 09:31 PM
Id make an image that was square around the oval with the different colours then use divs to "replicate" the table structure

16-10-2009, 09:34 PM
Id make an image that was square around the oval with the different colours then use divs to "replicate" the table structureNo need to do that - that's what transparency and floats are for :). And half the point of using CSS is to avoid the table structure... you simply don't need it. The same effect can be achieved by assigning background images via CSS.

16-10-2009, 09:38 PM
Ive never actually used transperancy, but you would be right

18-10-2009, 01:04 PM
Thanks for that Erayd

I have got it working in most browsers, Amaya, FF, Safari, Opera, Chrome


except IE6, I haven't tested in IE7 or IE8 as i don't have them on this machine.

Anyone know an IE6 hack?, or is it the code I have added doing it?

anyone could check it in IE7 or IE8

Thanks all

19-10-2009, 07:26 AM

19-10-2009, 09:18 AM

Dammit thats a bit depressing