GALLERY HEADER

[xcreach]

Hi,

I have spent quite some time re-desiging my root gallery based on Luis Burruel's codes:
http://www.pbase.com/xcreach

I am quite satisfied with the result but remains a pb I can't fix.

The size of black frame which is constituted of the slideshow, the buttons menu and a text (in reality the gallery header) depends on the size of the window of the web browser. When the window is full size, it's fine but if i reduce the browser window so does the black frame and as a result, the text and the rest go out of the frame.

Yr help would be really appreciated...
thanks in advance,
Xavier

[dang]

It would be good to post your complete HTML as added to your gallery. But, you can probably debug by looking through code posted on this thead: http://forum.pbase.com/viewtopic.php?t=36307

[xcreach]

Thanks Dang for your reply. I still didn't find the solution.

the codes of my root gallery are:

DIV.galleryheader {
background: #000000;
MARGIN-TOP: 20px;
MARGIN-BOTTOM: 60px;
MARGIN-RIGHT: 150px;
MARGIN-LEFT: 150px;
border-style : solid;
border-color : #2C2931;
border-width : 2px;
PADDING-TOP: 30px;
PADDING-BOTTOM: px;
PADDING-LEFT: 0px;
PADDING-RIGHT: 0px;
}

TD.thumbnail {
vertical-align : middle;
background: #000000;
min-width : 160px;
height : 160px;
border-style : solid;
border-color : #2C2931;
border-width : 2px;
}

A {
COLOR: #999999;
TEXT-DECORATION: none
}

A:link {
COLOR: #CCCCFF;
TEXT-DECORATION: none
}

A:visited {
COLOR: #CCCCFF;
TEXT-DECORATION: none
}

A:active {
COLOR: #999999;
TEXT-DECORATION: none
}

A:hover {
COLOR: #2c2931;
TEXT-DECORATION: none
}

A.thumbnail {
BORDER-RIGHT: #000000 1px solid;
BORDER-TOP: #000000 1px solid;
DISPLAY: block;
BACKGROUND: #232323;
FILTER: progid:DXImageTransform.Microsoft.Alpha(Opacity=90);
MARGIN-BOTTOM: -45px;
BORDER-LEFT: #000000 1px solid;
WIDTH: 172px;
PADDING-TOP: 5px;
BORDER-BOTTOM: #000000 1px solid;
HEIGHT: 197px
}

A.thumbnail:link {
BORDER-RIGHT: #000000 1px solid;
BORDER-TOP: #000000 1px solid;
DISPLAY: block;
BACKGROUND: #000000;
FILTER: progid:DXImageTransform.Microsoft.Alpha(Opacity=90);
MARGIN-BOTTOM: -45px;
BORDER-LEFT: #000000 1px solid;
WIDTH: 172px;
PADDING-TOP: 5px;
BORDER-BOTTOM: #000000 1px solid;
HEIGHT: 197px
}

A.thumbnail:visited {
BORDER-RIGHT: #000000 1px solid;
BORDER-TOP: #000000 1px solid;
DISPLAY: block;
BACKGROUND: #000000;
FILTER: progid:DXImageTransform.Microsoft.Alpha(Opacity=90);
MARGIN-BOTTOM: -45px;
BORDER-LEFT: #000000 1px solid;
WIDTH: 172px;
PADDING-TOP: 5px;
BORDER-BOTTOM: #000000 1px solid;
HEIGHT: 197px
}

A.thumbnail:active {
BORDER-RIGHT: #000000 1px solid;
BORDER-TOP: #000000 1px solid;
DISPLAY: block;
BACKGROUND: #232323;
FILTER: progid:DXImageTransform.Microsoft.Alpha(Opacity=90);
MARGIN-BOTTOM: -45px;
BORDER-LEFT: #000000 1px solid;
WIDTH: 172px;
PADDING-TOP: 5px;
BORDER-BOTTOM: #000000 1px solid;
HEIGHT: 197px
}

A.thumbnail:hover {
BORDER-RIGHT: #2c2931 0px solid;
BORDER-TOP: #2c2931 0px solid;
DISPLAY: block;
BACKGROUND: #000000;
FILTER: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
MARGIN-BOTTOM: -45px;
BORDER-LEFT: #2c2931 0px solid;
WIDTH: 172px;
PADDING-TOP: 5px;
BORDER-BOTTOM: #2c2931 0px solid;
HEIGHT: 197px
}

BODY {
MARGIN-TOP: 0px;
BACKGROUND-IMAGE: URL();
MARGIN-BOTTOM: 20px
}

DIV {
BORDER-RIGHT: 0px;
BORDER-TOP: 0px;
FONT: 12px verdana, arial, sans-serif;
BORDER-LEFT: 0px;
COLOR: #5B5B65;
BORDER-BOTTOM: 0px
}

TH {
BORDER-RIGHT: 0px;
BORDER-TOP: 0px;
FONT: 12px verdana, arial, sans-serif;
BORDER-LEFT: 0px; COLOR: #5B5B65;
BORDER-BOTTOM: 0px
}

TR {
BORDER-RIGHT: 0px;
BORDER-TOP: 0px;
FONT: 12px verdana, arial, sans-serif;
BORDER-LEFT: 0px; COLOR: #5B5B65;
BORDER-BOTTOM: 0px
}

TABLE {
MARGIN-LEFT: 6px;
BORDER-RIGHT: 0px;
BORDER-TOP: 0px;
MARGIN-TOP: -27px;
MARGIN-BOTTOM: 7px;
FONT: 12px verdana, arial, sans-serif;
BORDER-LEFT: 0px;
COLOR: #5B5B65;
BORDER-BOTTOM: 0px
}

TABLE.luis {
BORDER-RIGHT: 0px;
BORDER-TOP: 0px;
MARGIN-TOP: 40px;
MARGIN-BOTTOM: 40px;
FONT: 12px verdana, arial, sans-serif;
BORDER-LEFT: 0px;
COLOR: #5B5B65;
BORDER-BOTTOM: 0px
}

FONT {
BORDER-RIGHT: 0px;
BORDER-TOP: 0px;
FONT: 12px verdana, arial, sans-serif;
BORDER-LEFT: 0px;
COLOR: #5B5B65;
BORDER-BOTTOM: 0px
}

LI {
BORDER-RIGHT: 0px;
BORDER-TOP: 0px;
FONT: 12px verdana, arial, sans-serif;
BORDER-LEFT: 0px;
COLOR: #5B5B65;
BORDER-BOTTOM: 0px
}

UL {
BORDER-RIGHT: 0px;
BORDER-TOP: 0px;
FONT: 12px verdana, arial, sans-serif;
BORDER-LEFT: 0px;
COLOR: #5B5B65;
BORDER-BOTTOM: 0px
}

FORM {
BORDER-RIGHT: 0px;
BORDER-TOP: 0px;
FONT: 12px verdana, arial, sans-serif;
BORDER-LEFT: 0px;
COLOR: #5B5B65;
BORDER-BOTTOM: 0px
}

BLOCKQUOTE {
BORDER-RIGHT: 0px;
BORDER-TOP: 0px;
FONT: 12px verdana, arial, sans-serif;
BORDER-LEFT: 0px;
COLOR: #5B5B65;
BORDER-BOTTOM: 0px
}

P {
BORDER-RIGHT: 0px;
BORDER-TOP: 0px;
FONT: 13px verdana, arial, sans-serif;
text-align:justify;
BORDER-LEFT: 0px;
COLOR: #BFBFC9;
BORDER-BOTTOM: 0px
}

B {
BORDER-RIGHT: 0px;
BORDER-TOP: 0px;
FONT: 12px verdana, arial, sans-serif;
BORDER-LEFT: 0px;
COLOR: #5B5B65;
BORDER-BOTTOM: 0px
}

I {
BORDER-RIGHT: 0px;
BORDER-TOP: 0px;
FONT: 12px verdana, arial, sans-serif;
BORDER-LEFT: 0px;
COLOR: #5B5B65;
BORDER-BOTTOM: 0px
}

FONT {
BORDER-RIGHT: 0px;
BORDER-TOP: 0px;
FONT: 12px verdana, arial, sans-serif;
BORDER-LEFT: 0px;
COLOR: #5B5B65;
BORDER-BOTTOM: 0px
}

CENTER {
BORDER-RIGHT: 0px;
BORDER-TOP: 0px;
FONT: 12px verdana, arial, sans-serif;
BORDER-LEFT: 0px;
COLOR: #5B5B65;
BORDER-BOTTOM: 0px
}

FONT {
DISPLAY: block;
FONT: 9px Verdana, Tahoma, Helvetica, sans-serif;
MARGIN-LEFT: 4px;
WIDTH: 170px;
COLOR: #5B5B65;
MARGIN-RIGHT: 4px;
LETTER-SPACING: 0px
}

H3 {
FONT-WEIGHT: normal;
FONT-SIZE: 16px;
BACKGROUND: #000000;
PADDING-BOTTOM: 5px;
BORDER-LEFT: 0px;
COLOR: #999999;
PADDING-TOP: 3px;
border-style : solid;
border-color : #2c2931;
border-width : 2px;
}

IMG {
BORDER-RIGHT: #000000 1px;
BORDER-TOP: #000000 1px;
BORDER-LEFT: #000000 1px;
BORDER-BOTTOM: #000000 1px
}

IMG.thumbnail {
BORDER-RIGHT: #000000 1px solid;
PADDING-RIGHT: 0px;
BORDER-TOP: #000000 1px solid;
PADDING-LEFT: 0px;
BACKGROUND: #000000;
PADDING-BOTTOM: 0px;
MARGIN: 0px;
VERTICAL-ALIGN: middle;
BORDER-LEFT: #000000 1px solid;
PADDING-TOP: 0px;
BORDER-BOTTOM: #000000 1px solid
}

INPUT {
BORDER-RIGHT: #000000 1px solid;
BORDER-TOP: #000000 1px solid;
BORDER-LEFT: #000000 1px solid;
BORDER-BOTTOM: #000000 1px solid
}

TABLE.thumbnail {
WIDTH: 10%
}

TD {
BORDER-RIGHT: 1px;
BORDER-TOP: 1px;
BACKGROUND: none transparent scroll repeat 0% 0%;
BORDER-LEFT: 1px;
BORDER-BOTTOM: 1px;
BORDER-COLLAPSE: collapse;
empty-cells: show
}

TD.message_body {
BORDER-RIGHT: 1px;
BORDER-TOP: 1px;
DISPLAY: block;
BACKGROUND: #282828;
BORDER-LEFT: 1px; BORDER-BOTTOM: #000000 1px dotted
}

.caption {
COLOR: #2c2931;
FONT-STYLE: italic
}

.display {
BORDER-RIGHT: #000000 1px solid;
BORDER-TOP: #000000 1px solid;
BACKGROUND: #000000;
FILTER: progid:DXImageTransform.Microsoft.Shadow(color="#141414",Direction=135,Strength=5);
BORDER-LEFT: #000000 1px solid;
BORDER-BOTTOM: #000000 1px solid
}

.lid {
BACKGROUND: #373737;
FONT: 11px Verdana, Tahoma, Helvetica, sans-serif;
COLOR: #666666;
TEXT-DECORATION: none
}

.message_body {
MARGIN: 5px 5px 10px;
FONT: 10px Verdana, Tahoma, Helvetica, sans-serif; COLOR: #5B5B65
}

.sb {
BACKGROUND: #5B5B65;
FONT: 12px Verdana, Tahoma, Helvetica, sans-serif;
COLOR: #CCCCFF;
TEXT-DECORATION: none
}

BODY {
MARGIN-TOP: 0px; TOP: 0px
}

BODY TABLE A IMG {
DISPLAY: inline
}

HR {
POSITION: relative
}


BODY { margin-top: 0px; top: 0px; }
BODY TABLE A IMG { display: inline; }
HR { position: relative; }

[dang]

This is your gallery sheet CSS, what I was asking for was the HTML Code you post in your gallery description.

[xcreach]

sorry for that. the codes are:

<Center><img src="http://i.pbase.com/o6/37/739937/1/83549462.cf2Gfg7k.Banneranthracitecourrier2c.jpg">


<SCRIPT language="JavaScript">

<!--


functions:

//Blending subroutine for pbase home page (C) Luis Borruel 2006

//www.cryer.co.uk © 2004 and http://www.brainerror.net ver 1.3 © June 7,2004

//were reference for the following Javascript slide show code

function changeOpac(opacity, id)

{

var object = document.getElementById(id).style;

object.opacity = (opacity / 100);

object.MozOpacity = (opacity / 101);

object.KhtmlOpacity = (opacity / 100);

object.filter = "alpha(opacity=" + opacity + ")";

}

var slideCache = new Array();


var transition_msecs = 1000; //fading time

var timer = 0;

var displaySecs = 5; //seconds for each picture

var speed = Math.round(transition_msecs / 100);

var imageSeparator = imageFiles.indexOf(";");

var nextImage = imageFiles.substring(0,imageSeparator);

//make image transparent

changeOpac(0, imageid);

//make new image

document.getElementById(imageid).src = nextImage;

//fade in image

for(i = 30; i <= 100; i+=5)

{

setTimeout("changeOpac(" + Math.round(Math.pow(i,2)*0.01) + ",'" + imageid + "')",(speed*timer));

timer+=5;

}

//fade out image

for(i = 100; i >= 0; i-=5)

{

setTimeout("changeOpac(" + Math.round(Math.pow(i,2)*0.01) + ",'" + imageid + "')",(speed*timer)+displaySecs*1000);

timer+=5;

}



//prepare next image

var futureImages= imageFiles.substring(imageSeparator+1,imageFiles.length)+ ';' + nextImage;

imageFiles = futureImages;

setTimeout("blendimage('"+divid+"','"+imageid+"')", (speed*timer)+displaySecs*1000);

imageSeparator = imageFiles.indexOf(";");

nextImage = futureImages.substring(0,imageSeparator);

//cache remaining files

if (slideCache[nextImage] == null)

{

slideCache[nextImage] = new Image;

slideCache[nextImage].src = nextImage;

}

}


-->

</script>
<br>
<br>

<TABLE cellSpacing=0 cellPadding=0 width=800 border=0>

<TBODY>

<TR>

<TD vAlign=bottom colSpan=3>

<!--- menu starts here --->

<TABLE class=luis cellSpacing=0 cellPadding=0 width=800 border=800>

<TBODY>

<TR>

<TD><IMG height=10 src="http://www.pbase.com/image/56552555/original.jpg"></TD></TR>

<TR align=middle>

<TD><A href="http://www.pbase.com/xcreach/profile"><h3>Profile</h3></A></TD>

<TD><IMG src="http://www.pbase.com/image/56552555/original.jpg" width=8></TD>

<TD><A href="http://www.pbase.com/xcreach/guestbook"><h3>Guestbook</h3></A></TD>

<TD><IMG src="http://www.pbase.com/image/56552555/original.jpg" width=8></TD>

<TD><A href="http://www.pbase.com/xcreach/root&view=recent"><h3>Recent</h3></A></TD>

<TD><IMG src="http://www.pbase.com/image/56552555/original.jpg" width=8></TD>

<TD><A href='/xcreach#galerias'><h3>Galleries</h3>

</A></TD><TD><IMG src="http://www.pbase.com/image/56552555/original.jpg" width=8></TD>


</A></TD></TR></TBODY></TABLE></TD></TR><!--- menu ends here --->

<TR>

<TD vAlign=top>

<br><br>

SLIDESHOW(rootslideshow)

</TD>

<TD><IMG src="http://www.pbase.com/image/56552555/original.jpg" width=15></TD>

<TD vAlign=top bgColor=#333333><!--- right column --->

<TABLE cellSpacing=0 cellPadding=19 border=0>

<TBODY>

<TR>

<TD><TD align=text>

<P> <a ="" /a>

<br><br>Appreciation of a photo is sometimes purely aesthetic. Other times, it touches something deeper within. Photography, for me, is not about technical perfection. I see it more as a way of communicating emotions. Emotions can be drawn from the subject of the photo or from the photographer who projects his own feelings. Emotions can also come from the viewer interpreting the image. A mix of all three should make a great photo.

<br><br><br>

Be informed of gallery updates via: <br><a href="http://feeds.feedburner.com/xcreach-pbase"><img src="http://i.pbase.com/o6/37/739937/1/74153173.sw6PPY8Q.feedicon16x16.jpg" /> RSS feed</a>.

</TD></TR></TBODY></TABLE></TD><!--- end right column --->

</TR>

<TR>
<TD colSpan=5><IMG onload='javascript:blendimage("divid","imgid")' height=8 src="http://www.pbase.com/image/56552555/original.jpg"></TD></TR><!--- Elated credit http://www.elated.com --->

<TR>

<TD align=middle colSpan=5>

</TD></TR><!--- end elated credit---></TBODY></TABLE></CENTER>

<a name="galerias"></a>

<br><br>

[dang]

Hi,
No Problem...
Is this the actual code you add into the description, or is this the code from "view source"?
I'd like to see the actual code, and not the generated source (which is different)

If you view the other thread I linked too, you'll see why I ask.

[xcreach]

this is the real code that I have taken from the description box of my root gallery. Thanks

[dang]

You need to read the thread I originally pointed you to. I'm not quiet sure how you've managed to get your code working, since Pbase disabled our using Java sometime back. The code you've posted is the Luis Code that's not working properly, and should be replaced with the newer Pbase Supported code. You can see the original post from admin concerning it here:
http://forum.pbase.com/viewtopic.php?t= ... c&start=60

[xcreach]

Thanks Dang. I have adapted the codes accordingly, much more simple, thanks for that. My pb remains the same, the size of the black frame (which includes the banner, slideshow, small text...) still depends on the size of the window of the web browser which is not the case of the rest.

My new codes are:

<Center><img src="http://i.pbase.com/o6/37/739937/1/83549462.cf2Gfg7k.Banneranthracitecourrier2c.jpg">

</script>
<br>
<br>

<TABLE cellSpacing=0 cellPadding=0 width=800 border=0>

<TBODY>

<TR>

<TD vAlign=bottom colSpan=3>

<!--- menu starts here --->

<TABLE class=luis cellSpacing=0 cellPadding=0 width=800 border=800>

<TBODY>

<TR>

<TD><IMG height=10 src="http://www.pbase.com/image/56552555/original.jpg"></TD></TR>

<TR align=middle>

<TD><A href="http://www.pbase.com/xcreach/profile"><h3>Profile</h3></A></TD>

<TD><IMG src="http://www.pbase.com/image/56552555/original.jpg" width=8></TD>

<TD><A href="http://www.pbase.com/xcreach/guestbook"><h3>Guestbook</h3></A></TD>

<TD><IMG src="http://www.pbase.com/image/56552555/original.jpg" width=8></TD>

<TD><A href="http://www.pbase.com/xcreach/root&view=recent"><h3>Recent</h3></A></TD>

<TD><IMG src="http://www.pbase.com/image/56552555/original.jpg" width=8></TD>

<TD><A href='/xcreach#galerias'><h3>Galleries</h3>

</A></TD><TD><IMG src="http://www.pbase.com/image/56552555/original.jpg" width=8></TD>


</A></TD></TR></TBODY></TABLE></TD></TR><!--- menu ends here --->

<TR>

<TD vAlign=top>

<br><br>

SLIDESHOW(rootslideshow)

</TD>

<TD><IMG src="http://www.pbase.com/image/56552555/original.jpg" width=15></TD>

<TD vAlign=top bgColor=#333333><!--- right column --->

<TABLE cellSpacing=0 cellPadding=19 border=0>

<TBODY>

<TR>

<TD><TD align=text>

<P> <a ="" /a>

<br><br>Appreciation of a photo is sometimes purely aesthetic. Other times, it touches something deeper within. Photography, for me, is not about technical perfection. I see it more as a way of communicating emotions. Emotions can be drawn from the subject of the photo or from the photographer who projects his own feelings. Emotions can also come from the viewer interpreting the image. A mix of all three should make a great photo.

<br><br><br>

Be informed of gallery updates via: <br><a href="http://feeds.feedburner.com/xcreach-pbase"><img src="http://i.pbase.com/o6/37/739937/1/74153173.sw6PPY8Q.feedicon16x16.jpg" /> RSS feed</a>.

</TD></TR></TBODY></TABLE></TD><!--- end right column --->

</TBODY></TABLE></CENTER>

<a name="galerias"></a>

<br><br>



Sorry to keep on asking for help.
Thanks

BTW, I have visited yr site and congrats. You have done an amazing work.

[dang]

You're welcome, and thanks!

It's been awhile since I used the slide show, so I'm pretty rusty with it. But hopefully we'll figure it out, or someone else will jump in to offer help.

Looking back over your work, there's a couple of things that you might look at. I just viewed with an 800x600 resolution, and see what you're talking about now... The left margin is forcing the viewer to scroll (which might be in the CSS style sheet after all). Be sure and make a hidden gallery for changes, and save the original CSS/HTML, just in case.

In your CSS, try reducing the right & left margins in this section:

Code: Select all

DIV.galleryheader {
background: #000000;
MARGIN-TOP: 20px;
MARGIN-BOTTOM: 60px;
MARGIN-RIGHT: 150px;
MARGIN-LEFT: 150px;
border-style : solid;
border-color : #2C2931;
border-width : 2px;
PADDING-TOP: 30px;
PADDING-BOTTOM: px;
PADDING-LEFT: 0px;
PADDING-RIGHT: 0px;
}

I didn't try it in my browser at low res. And found that sometimes changes can have adverse affects to whats intended. Much to do, of course, with the way IE works.

If this doesn't take care of it, check other sections for right/left padding/margins and see what you come up with.


Next, you might also be expanding the black box too far in your HTML by adding additional padding in your navigation links, or in this section:

Code: Select all

</TD>

<TD><IMG src="http://www.pbase.com/image/56552555/original.jpg" width=15></TD>

<TD vAlign=top bgColor=#333333><!--- right column --->

<TABLE cellSpacing=0 cellPadding=19 border=0>


You can play with the image width, and cell Spacing, which could be forcing link space to be too wide. This would also allow you to add more navigation to the top section (if you want too) such as your RSS link to the top. Basically, just check over these type things and you should debug it.

Now, you'll find the black box is all the way across the screen. If you want to keep some of the background, you'll need to reduce the table size to less than 100%. You might also want to make your banner a little smaller in width too (for low res. screens), and possibly add it at the very top of the html outside of the box. These type things give you a little different look, and you'll need to decide what you like best and still have something that works with all resolutions and browsers.

I know... it can be a pain, and takes time. But hope this helps. Let me know what you come up with, and I'll pop back in.

Have fun!

[xcreach]

thanks Dang, your suggestions have given me some ideas that I will try later.

regarding the original pb meaning the black frame (which is not only with IE but also firefox, safari and which doesn't depend on the resolution of the screen), yes, to reduce the margins has an effect, the pb is less visible but remains. The size of the box still depends on the size of the window browser... (there must be a solution!). As you had guessed, the pb then is that the black box almost entirely hides the background. you tell me to reduce the table size to less than 100% but not sure how to do that.

Two other questions related yo your suggestions:
- how to put my banner outside the black box?
- regarding the navigation buttons that i have taken from luis, there is this code: <TD><IMG src="http://www.pbase.com/image/56552555/original.jpg" for each button which is not a link to my images. What is that for? is it for the design of the buttons?


probably basic questions...
cheers and thanks

[dang]

Okay...
Actually, your banner image is already at the top of the html, so I'm guessing it's being auto coded into the box. So, not much to worry about with it. I'd still make the banner smaller though, to around 600 pixels wide so as not to cover the entire background in low res. Just a thought.

Xcreach wrote:

regarding the navigation buttons that i have taken from luis, there is this code: <TD><IMG src="http://www.pbase.com/image/56552555/original.jpg" for each button which is not a link to my images. What is that for? is it for the design of the buttons?

This image number is a transparent spacer that's necessary for positioning. Without it, your buttons would run together, and you couldn't control space between frames in your design.

how to reduce the table size to less than 100%?

In the Luis code you'll see the table sections as such:

</script>
<br>
<br>
<TABLE cellSpacing=0 cellPadding=0 width=800 border=0>

If you're using a table width of 800, this expands the entire length of an 800 wide screen res. Add margin to it, and thats the reason you're scrolling. Once you reduce table width, then you can add margin to get your background back.

Also, the "</script> tag doesn't need to be in your code here, since there's no script to read. This could cause problems depending on how a browser reads it. So it's best to add the top section as such:

Code: Select all

<html lang="en-US"><head>
<p align="center"><img src="Image URL/original.jpg">
<br><center>
<table border="0" cellpadding="3" cellspacing="0" width="600">


Now, you can adjust the width larger than 600, but less than 800 depending on amount of margin you want. It's about finding an average that works for all resolutions. And hopefully, by adding margin back in, you'll find a balance you like.

One last thing.... Your banner is using the "property" url, which isn't suggested. Sometimes images are moved to different servers, and if this happens you'll end up with a red x. It's best to use the image url that you see in your browser, since it remains constant.

The difference in your sheet and whats added on the other thread, is your wanting the background to display as a wrapper. It's easier without it, since the table isn't obvious. For example, you could actually remove the black background entirely, by removing the color code "background: #000000;" in this section, and then left/right margin to 0:

Code: Select all

DIV.galleryheader {
background: #000000;
MARGIN-TOP: 20px;
MARGIN-BOTTOM: 60px;
MARGIN-RIGHT: 150px;
MARGIN-LEFT: 150px;
border-style : solid;
border-color :  #2C2931;
border-width : 2px;
PADDING-TOP: 30px;
PADDING-BOTTOM:  px;
PADDING-LEFT: 0px;
PADDING-RIGHT: 0px;

Okay, now the background would display even in 800 res. without changing the table width.

Over time, with the updates being done things change. So it's good to poke your head into the forum regularly to keep up with whats taking place. And maybe not for some people, but I usually find it easier to remake a style sheet than to debug one.
Hopefully this will give you a bit more understanding into how it works. The more you play with it, the easier it gets. So, keep at it and try different things. If you'll copy before changes, you can always go back.

[xcreach]

Many thanks Dang. It sounds clear to me. I will try to work on this tonight or this WE and keep you posted.
Many thanks for taking the time

[dang]

You're very welcome, just hope you get something you like.

I had another thought on a simple way of how you might go too. By changing the CSS in this section (as shown) should keep it within low res. also. Here again, you can make the width smaller than 800, but it's only going to affect Firefox, and not IE. But anything from 1024 up should give you your background wrapper.

Code: Select all

DIV.galleryheader {
    width: 800px;
    margin-left: auto;
    margin-right: auto;
background: #000000;
MARGIN-TOP: 20px;
MARGIN-BOTTOM: 60px;
border-style : solid;
border-color :  #2C2931;
border-width : 2px;
PADDING-TOP: 30px;
PADDING-BOTTOM:  px;
PADDING-LEFT: 0px;
PADDING-RIGHT: 0px;

[xcreach]

you got it. great and thanks. this last option works perfectly with mozilla. the pb with IE is that the black frame is now not at the center of the page but totally on the left. any solution?
many thanks