Board index PBase HTML and Style Sheets Centering Gallery Header

HTML and Style Sheets

Centering Gallery Header

Customize your galleries.
teresa124
 
Posts: 2

Centering Gallery Header

Post Tue Aug 26, 2008 8:13 am


I have been working on this for three days, I read all through the forums and I read the css guide for stylesheets and I still can not center this heading. It looks fine through the firefox browser but it is still aligned to the left on ie. Help Please!!!! I tried align in the body but it did not work.....http://www.pbase.com/teresa124/americas_next_top_model
Thanks in advance...

dang
 
Posts: 3780

Re: Centering Gallery Header

Post Tue Aug 26, 2008 10:36 am


There's several things that are a bit untidy. You might try changing the "width" statement in this section and see if it helps:

original code:
h2
{
border: #FFFFFF 3px ridge;
border-left: ##FFFFFF 3px ridge;
border-right: ##FFFFFF 3px ridge;
border-top: ##FFFFFF 3px ridge;
font-size: 35px;
font-family: Harlow Solid Italic;papyrus,Enviro, lucida handwriting,verdana,andy,duchess;
font-weight: bold;
text-align: center;
letter-spacing: 10px;
padding-top: 10px;
padding-bottom: 10px;
width : 700px;
margin-left: auto;
margin-right: auto;


To:
Code: Select all
width: 80%;
position: relative;

If all fails, you can always change this to 100% and the text should center with the box going all the way across.


Then...
In the div statement (div,th,tr,td,table,font,li,ul,form,blockquote,font,span,center,P,b,i,H1,h2,h3,h4,h5) Change it as such:
Code: Select all
DIV,TH,TR,TABLE,FONT,LI,UL,form,
BLOCKQUOTE,P,B,I,H1,H2,H3,H4,H5,font,CENTER

EDIT: Never mind on this, I overlooked you'd added the center within it....

I'll keep looking as time permits, or maybe someone else (Flemming, maybe :-)) will check too.
Note- be sure and keep a copy of your original in case something goes wrong. Sometimes we have to compromise, since IE reads coding differently.
Hope it helps,
tom

flemmingbo
 
Posts: 435
Location: Denmark, Copenhagen

Re: Centering Gallery Header

Post Tue Aug 26, 2008 1:00 pm


Hello :D

There's a way to do it; read this thread and see if this helps you: http://form.pbase.com/viewtopic.php?f=8&t=38462

If not, let me know I'll try and explain in more detail

regards,

Flemming
Flemming Bo Jensen Photography
Gallery: http://www.pbase.com/flemmingbo
My photography blog: http://flemmingbo.wordpress.com

dang
 
Posts: 3780

Re: Centering Gallery Header

Post Tue Aug 26, 2008 1:16 pm


Thanks Flemming,

The only problem is, it's already added in this section of their code and doesn't seem to help:
width : 700px;
height: 494px;
margin-right : auto;
margin-left : auto;


Is it because of the way it's been added?

flemmingbo
 
Posts: 435
Location: Denmark, Copenhagen

Re: Centering Gallery Header

Post Tue Aug 26, 2008 2:18 pm


You need to add text-align:center; to the BODY div - this will then (due to an IE bug) center all child div's

The margin-right and left auto bit only works in Firefox and Safari so that is still needed, don't remove that. Just add text-align:centeR; to BODY div and that should do it.

Flemming
Flemming Bo Jensen Photography
Gallery: http://www.pbase.com/flemmingbo
My photography blog: http://flemmingbo.wordpress.com

dang
 
Posts: 3780

Re: Centering Gallery Header

Post Tue Aug 26, 2008 2:40 pm


Thanks Flemming,
That did it, maybe I'll remember next time. :)

the code I ended up with (including other changes, which might be untidy, but working):

Code: Select all
DIV.galleryheader
{
margin-right : auto;
margin-left : auto;
}

IMG.thumbnail {
VERTICAL-ALIGN: middle;
BACKGROUND-COLOR:  white;
horizontal-align: middle;
border:  #FFF6FF 1px solid
}
a.thumbnail {
border:  #FFFFFF 3px double;
DISPLAY: block;
/*BACKGROUND:  #23002E;*/
background-image: ;
MARGIN-BOTTOM: -16px;
WIDTH: 200px;
PADDING-TOP: 18px;
HEIGHT: 200px

}

a.thumbnail:hover {
border:  #FF6666 3px ridge
display: block;
background-image: url(http://www.pbase.com/teresa124/image/102193160/medium.jpg);
}
.caption {
FONT-SIZE: 10pt;
color:  #B5AABF;
FONT-STYLE: italic
}

BODY {
MARGIN-TOP: 0px;
BACKGROUND:  #EED8AE
url(http://www.pbase.com/teresa124/image/102193166/original.jpg)
repeat fixed;
text-align:center;

}
SCROLLBAR-FACE-COLOR:  #EED8AE;
SCROLLBAR-HIGHLIGHT-COLOR:  #DCDCDC;
SCROLLBAR-SHADOW-COLOR:  #646464;
SCROLLBAR-3DLIGHT-COLOR:  #ffffff;
SCROLLBAR-ARROW-COLOR:  #ffffff;
SCROLLBAR-TRACK-COLOR:  #646464;
SCROLLBAR-DARKSHADOW-COLOR:  #000000
}
.message_body {
PADDING: 0px;
FONT-SIZE: 10pt;
COLOR:  #FFFFFF;
FONT-FAMILY: verdana, arial, sans-serif;
FONT-STYLE: italic;
LETTER-SPACING: 1px;
text-align: left;
BACKGROUND-COLOR: transparent
}

DIV,TH,TR,TABLE,FONT,LI,UL,FORM,
BLOCKQUOTE,P,B,I,H1,H2,H3,H4,H5,FONT, CENTER

border: 0px; padding: 0px;
LETTER-SPACING: 1px;
color:  #FFFFFF;
font: 10pt verdana, arial, sans-serif;
}
h1,H2,h3,h4,h5 {

}
h2
{
border:  #FFFFFF 3px ridge;
border-left:  ##FFFFFF 3px ridge;
border-right:  ##FFFFFF 3px ridge;
border-top:  ##FFFFFF 3px ridge;
font-size: 35px;
font-family: Harlow Solid Italic;papyrus,Enviro, lucida handwriting,verdana,andy,duchess;
font-weight: bold;
text-align: center;
letter-spacing: 10px;
padding-top: 10px;
padding-bottom: 10px;
width : 70%;
margin-left: auto;
margin-right: auto;
position: relative;
color:  ##FFFFFF;
}
{
  width : 700px;
  height: 494px;
margin-right : auto;
margin-left : auto;
}

p {
PADDING: 0px;
FONT-SIZE: 10pt;
FONT-STYLE: italic;
text-align: center
}
b {
PADDING: 0px;
FONT-SIZE: 10pt;
text-align: right
}
font {
PADDING: 0px;
FONT-SIZE: 10pt;
text-align: center;
FONT-STYLE: italic;
LETTER-SPACING: 1px;
}

A:link, A:visited, A:active {
FONT-SIZE: 10pt;
FONT-FAMILY: verdana, arial, sans-serif;
COLOR:  #FFFFFF;
TEXT-DECORATION: none
}

A:hover {
FONT-FAMILY: verdana, arial, sans-serif;
FONT-SIZE: 10pt;
COLOR:  #AAAA32;
TEXT-DECORATION: underline
}

.current {
FONT-SIZE: 14pt;
FONT-FAMILY: verdana, arial, sans-serif;
COLOR:  #008395;
TEXT-DECORATION: none;
FONT-STYLE: bold;
}

BODY TABLE A IMG {
   DISPLAY: inline
}
HR {
   POSITION: relative
}
.display {
        border:  #000000 2px solid;
        margin-top: 1em;
        background:  #000000;
        }
.lid{
        background:  #C8C8C8;
        color:  #000000;
        font: 12pt verdana, arial, sans-serif;
        text-decoration: none;
}

.sb{
border:  #C8C8C8 2px solid;
        border-left: 1px none;
        border-right: 1px none;
        border-top: 1px none;
}

flemmingbo
 
Posts: 435
Location: Denmark, Copenhagen

Re: Centering Gallery Header

Post Tue Aug 26, 2008 4:08 pm


Glad it worked mate :D

I am off to Australia for a month tomorrow so won't be around on the forums that much, see ya in october :)

Flemming
Flemming Bo Jensen Photography
Gallery: http://www.pbase.com/flemmingbo
My photography blog: http://flemmingbo.wordpress.com

dang
 
Posts: 3780

Re: Centering Gallery Header

Post Tue Aug 26, 2008 4:11 pm


flemmingbo wrote:Glad it worked mate :D

I am off to Australia for a month tomorrow so won't be around on the forums that much, see ya in october :)

Flemming

Thanks! You'll be missed but hope you have a great trip, Flemming. I'll be looking forward to the new shots you return with. :)

teresa124
 
Posts: 2

Re: Centering Gallery Header

Post Tue Aug 26, 2008 11:29 pm


Hey guys, thanks alot for your help. It works perfectly..... :P


Board index PBase HTML and Style Sheets Centering Gallery Header

Who is online

Users browsing this forum: No registered users and 2 guests

cron