Spreading the Banner

[Scotto]

Not sure if this is possible but here goes..

if you visit my page: http://scottsharman.smugmug.com you will see the top banner fits perfectly across the page. When you visit a gallery, for example http://scottsharman.smugmug.com/gallery/7018063_oruvr#449392725_8tDfz the banner stays in the centre of the screen.

What I would like to do is..

the part of the banner that says: scott sharman photography to be pushed right and the part that says trusted suppliers pushed left.

I am guessing that I would have to chop up the banner to two separate pngs' have one format right the other left.

Here's a mock up image of how I would like it to look

http://idisk.mac.com/scottsharman/Public/Snapshot.jpg

If this is possible please try to explain it a-la-monkey style as I have zero css experience but I can copy and paste really good :)

[Allen]

Not sure if this is possible but here goes..

if you visit my page: http://scottsharman.smugmug.com you will see the top banner fits perfectly across the page. When you visit a gallery, for example http://scottsharman.smugmug.com/gallery/7018063_oruvr#449392725_8tDfz the banner stays in the centre of the screen.

What I would like to do is..

the part of the banner that says: scott sharman photography to be pushed right and the part that says trusted suppliers pushed left.

I am guessing that I would have to chop up the banner to two separate pngs' have one format right the other left.

Here's a mock up image of how I would like it to look

http://idisk.mac.com/scottsharman/Public/Snapshot.jpg

If this is possible please try to explain it a-la-monkey style as I have zero css experience but I can copy and paste really good :)
Split them into two and can easiely be done.

[Scotto]

Split them into two and can easiely be done.

OK two files ready to go, can you please tell me the code to do this.

[jfriend]

Steps to do this:

Split your banner into two images
Add a second banner div to your header (like your first, but give it an ID of "my_banner2".
Put a master div around both of your header divs and give it an ID of "myHeader".
In your CSS, set the background images for both divs (like you did for your current banner)
Give the left banner the style float:left;
Give the right banner the style float:right;
Set the height of the master div to the height of your image.HTML in your custom header:
<div id="myHeader">
<div id="my_banner"></div>
<div id="my_banner2"></div>
</div>

CSS:
#my_banner {float:left; background: xxxx}
#my_banner2 {float:right; background: xxxx}
#myHeader {height:114px;}

You just fill in the background stuff in the CSS just like you already have for your existing banner.

[Scotto]

Before I actually click 'Save' does this look right

#my_banner {float:left; background: http://scottsharman.smugmug.com/photos/450211946_cctPB-O.png}
#my_banner2 {float:right; background: http://scottsharman.smugmug.com/photos/450211937_2hwHn-O.png}
#myHeader {height:114px;}
width: 750px;
height: 114px;
margin: 0 auto;
background: url(http://scottsharman.smugmug.com/photos/447797102_eoxKZ-O.png) no-repeat;
_background: none;
_filter:progid:DXImageTransform.Microsoft.AlphaIma geLoader(enabled=true,sizingmethod=image,src='http ://scottsharman.smugmug.com/photos/447797102_eoxKZ-O.png');
}

[jfriend]

Before I actually click 'Save' does this look right

#my_banner {float:left; background: http://scottsharman.smugmug.com/photos/450211946_cctPB-O.png}
#my_banner2 {float:right; background: http://scottsharman.smugmug.com/photos/450211937_2hwHn-O.png}
#myHeader {height:114px;}
width: 750px;
height: 114px;
margin: 0 auto;
background: url(http://scottsharman.smugmug.com/photos/447797102_eoxKZ-O.png) no-repeat;
_background: none;
_filter:progid:DXImageTransform.Microsoft.AlphaIma geLoader(enabled=true,sizingmethod=image,src='http ://scottsharman.smugmug.com/photos/447797102_eoxKZ-O.png');
}

No, that is not right. Use this:
#my_banner {
background: url(http://scottsharman.smugmug.com/photos/450211946_cctPB-O.png) no-repeat;
float:left;
height:114px;
width:219px;
_background: none;
_filter:progid:DXImageTransform.Microsoft.AlphaIma geLoader(enabled=true,sizingmethod=image,src='http ://scottsharman.smugmug.com/photos/450211946_cctPB-O.png');
}

#my_banner2 {
float:right;
height:114px;
width:542px;
background: url(http://scottsharman.smugmug.com/photos/450211937_2hwHn-O.png) no-repeat;
_background: none;
_filter:progid:DXImageTransform.Microsoft.AlphaIma geLoader(enabled=true,sizingmethod=image,src='http ://scottsharman.smugmug.com/photos/450211937_2hwHn-O.png');
}

#myHeader {height: 114px;}

[Scotto]

Thanks for that John,

On the main screen the graphics are pushed over to the sides I would like them to line up as before so everything is inline.

Is this possible?

[jfriend]

Thanks for that John,

On the main screen the graphics are pushed over to the sides I would like them to line up as before so everything is inline.

Is this possible?

Hmmm. Are you saying you only want this new layout on the gallery pages? And you want it the same as before on the homepage? I didn't understand that from your original posting.

To do that, add this CSS:

.homepage #myHeader,
.category #myHeader,
.subcategory #myHeader {width:750px; margin: 0 auto;}


And change the value in red:

#my_banner2 {
float:right;
height:114px;
width:450px;
background: url(http://scottsharman.smugmug.com/photos/450211937_2hwHn-O.png) no-repeat;
_background: none;
_filter:progid:DXImageTransform.Microsoft.AlphaIma geLoader(enabled=true,sizingmethod=image,src='http ://scottsharman.smugmug.com/photos/450211937_2hwHn-O.png');
}

[Scotto]

Sorry perhaps I didnt explain it well enough

I have it now (almost there) the main gallery (opening page) looks perfect - thanks a million.

On the gallery pages the graphics are pushed hard against the edges, is there a way to get a small gap in-between the graphic and the browser sides??

really, really appreciate your help with this. :thumb

[jfriend]

Sorry perhaps I didnt explain it well enough

I have it now (almost there) the main gallery (opening page) looks perfect - thanks a million.

On the gallery pages the graphics are pushed hard against the edges, is there a way to get a small gap in-between the graphic and the browser sides??

really, really appreciate your help with this. :thumb

Add this line of CSS:

#myHeader {margin: 0 15px;}

right above these lines that you already have:

.homepage #myHeader,
.category #myHeader,
.subcategory #myHeader {width:750px; margin: 0 auto;}

[Scotto]

THANK YOU - THANK YOU - THANK YOU

Can't tell you how happy I am. :clap