image banner

[Outdoor World D]

Hi,

we are using Smart layout in Actinic V9, our logo banner stretches across the top of the site. but on some browsers it doesnt fit properly, is there a way of putting the banner into the site so it alters to the width of the internet browser being used.

heres an example - if opened in IE it fits perfectly into the browser window, but when opened in firefox or safari its either too short or too long. this leaves a completely different orange colour behind it which looks unprefessional. is there a way i can embed the logo banner so it adapts to all browsers??

http://www.outdoorworlddirect.co.uk/...indexpage.html

thanks for any responses in advance

David

[jont]

Making the logo fit all screen widths will require a bit of trickery with the logo and the code as you will not know what size of window each user is using (and desktop resolution etc)

The trick is to use 3 parts...

part 1 : part of the image sits to the left margin
part 2 : the bit in the middle expands to fit
part 3 : part of the image sits to the right margin

The "simplest" way to achieve this is via a 3 column table ... the left cell has part of the image and a fixed width ... the middle column is set to a uniform colour (eg green) and the third column has an image and a fixed width. The overall table is set to width="100%"

That way the 2 outer images stay fixed and they appear to slide over the expand to fit centre part ... if you fade your images in and out to the center background colour this improves the effect.

[Darren B]

Jont you and gabe helped me out with something similar a while ago with my old kites r us site.

Using 2 images and replaced the company logo variable code with

<div class="headerouter">
    <div class="headerinner">
    
    </div>
</div>

and the associated css was as follows

                .headerouter {
    height: 100px;
    background-color: #dee9f1;
    background-image: url('kites_right.gif');
    background-repeat: no-repeat;
    background-position: right top;
}
.headerinner {
    height: 100px;
    background-image: url('kites_left.gif');
    background-repeat: no-repeat;
    background-position: left top;
}

As you said this did allow the 2 images to slide over each other so on varying sized screens it looked like one image.

hope this helps

[TraceyHand]

The "simplest" way to achieve this is via a 3 column table

don't let Lee see you say that!

[jont]

Tables are simpler to implement than CSS if you don't know either... note I did not use "best" or "most elegant"

[TraceyHand]

yes, very diplomatic of you with the quotes. I did notice

[Darren B]

Calm down you two, i have a fine example of a 3 column layout without a table insight

[jont]

Would that be the raw air site??

[Darren B]

it might just be, some clever b*****d did it for me

[jont]

Cheers! I think

[TraceyHand]

Cheers! I think

Has such a way with words, doesn't he?

[jont]

Eloquent as ever.