PDA

View Full Version : Website design - Float Logo



Morgenmuffel
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

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

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

What browser are you testing with?

jwil1
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.

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

Morgenmuffel
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

Erayd
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).

hueybot3000
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

Erayd
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.

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

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

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

http://nigel.geek.nz/test-stuff/index3.php

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

inphinity
19-10-2009, 07:26 AM
http://browsershots.org/http://nigel.geek.nz/test-stuff/index3.php

Morgenmuffel
19-10-2009, 09:18 AM
http://browsershots.org/http://nigel.geek.nz/test-stuff/index3.php

Dammit thats a bit depressing