Board index PBase HTML and Style Sheets Help : center a photograph

HTML and Style Sheets

Help : center a photograph

Customize your galleries.
guillaume
 
Posts: 59

Help : center a photograph

Post Wed Jun 16, 2010 11:08 am


Hi,

somebody can help me and tell me what needs to be changed in the CSS code I use, in order to have a horizontal photograph centered in the page (especially when using Mozilla Firefox) ?

For such a photograph for example :
http://www.pbase.com/guillaume/image/121464456

The gallery is :
http://www.pbase.com/guillaume/volleyball_indoor

Thank you in advance for your help, best regards,

Guillaume

mardoli
 
Posts: 589

Re: Help : center a photograph

Post Thu Jun 17, 2010 1:48 pm


Bonjour, Guillaume!
Je ne sais pas si je peux vous aider, mais j’ai un peu bricolé votre CSS
et maintenant pour moi les photos sont centrées et c’est bon soit dans FF soit dans IE.
Si vous voulez, vous pouvez essayer….

Code: Select all
a, a:link,a:visited,a:active, #localmenu a, #localmenu a:link,#localmenu a:visited,#localmenu a:active {
   color:  #5B5B65;
   font: 11px Verdana, Tahoma, Helvetica, sans-serif;
   text-decoration: none;
}

a.thumbnail, a.thumbnail:link, a.thumbnail:visited, a.thumbnail:active {
   border:  #000000 1px solid;
   margin-bottom: -45px;
   padding-top: 5px;
   width: 172px;
   display: block;
   background:  #232323;
   height: 197px;
   -moz-border-radius-bottomright: 10px;
   -moz-border-radius-topleft: 10px;
}

a.thumbnail:hover {
   border-bottom:  #cccc99 1px solid;
   background:  #191919;
}

a:hover img.thumbnail {
   border:  #000000 1px solid;
   background:  #2d2d37;
}

a:hover, #localmenu a:hover {
   color:  #ffff99;
   text-decoration: none;
}

body{
   
   margin-bottom: 10px;
   padding-bottom:10px;
   background:  #2D2D2D;
        text-align:center;
}

div,th,tr,table,li,ul,form, blockquote,p,b,i,h4,h5,center,title
{
border: 0px; color:  #797983;
font: 11px Verdana, Tahoma, Helvetica, sans-serif;
}

font {
   margin-left: 4px;
   margin-right: 4px;
   width: 170px;
   display: block;
   color:  #797983;
   font: 9px Verdana, Tahoma, Helvetica, sans-serif;
   letter-spacing: 0px;
}




/* ##############vire le titre h2##############*/
h2 {
   
   
   margin-left: auto;
        margin-right:auto;
   width: 742px;
   background:  #2d2d2d;
   color:  #2d2d2d;
   font: bold 0px verdana;
   letter-spacing: 4px;
   text-align: right;
   position: relative;
   display:none;
   }

/* ##############vire le titre h2##############*/
h2:first-letter ,h1:first-letter {
   color:  #2d2d2d ;
   font: 0px Tahoma;
}

/* ##############vire le titre h2##############*/
h2 i {
   font: 0px Tahoma;
}
/* ##############vire le titre h2##############*/

h1 i {
   font: 18px Tahoma;
}

/* ##############h3 titre de l image##############*/
h3 .title {
   border:  #000000 1px solid;
   padding: 8px;
   width: 742px;
   margin-left:auto;
        margin-right:auto
   display: block;
   background:  #343434;
   color:  #5B5B65;
   font: bold 11px verdana;
   letter-spacing: 4px;
   text-align: center;
   position: relative;
   }

h5 {
   padding-left: 2px;
   width: 150px;
   display: block;
   color:  #ffff99;
   font-size: 11px;
   font-weight: normal;
   }

i, body table img{}

img{
   border:  #000000 1px none;
}

img.thumbnail {
   border:  #000000 1px solid;
   margin: 0px; padding: 0px;
   background:  #2D2D2D;
   vertical-align: middle;
}

table.thumbnail {
   width: 10%;
}

td {
   border: 1px none;
   background: none;
   border-collapse: collapse;
   empty-cells: show;
}

td.message_body {
   padding: 6px 6px 6px 6px;
   border-bottom:  #232323 1px dotted;
   background:  #343434;
}

p.message_body {
   color:  #797983;
   background:  #343434;
   font: 10px Verdana, Tahoma, Helvetica, sans-serif;
}

td.thumbnail {
   padding: 2px; height: 207px;
}

.camera{
   color:  #cccc99;
}

.caption {
   color:  #cccc99;
   font-size: 11px Verdana, Tahoma, Helvetica, sans-serif;
   font-style: italic;
}



.exif{
   color:  #B3B3DE;
}

.galleryheader{
   margin-left:auto;
        margin-rigth:auto;
   width: 100%;
   position: relative;
   
}

.lid{
   background:  #373737;
   color:  #666666;
   font: 11px Verdana, Tahoma, Helvetica, sans-serif;
   text-decoration: none;
}

.sb{
   background:  #797983;
   color:  #ffff99;
   font: 11px Verdana, Tahoma, Helvetica, sans-serif;
   text-decoration: none;
}

.thumbnails{
   border:  #000000 1px solid;
   padding: 4px 4px 4px 4px;
   margin: 4px 0px 0px 0px;
   margin-left: -370px;
   width: 742px;
   background:  #343434;
   position: relative;
   left: 50%;
   -moz-border-radius-bottomright: 10px;
   -moz-border-radius-topleft: 10px;
}

.thumbnails table,.thumbnails table img, .display{
   display: inline; filter: none;
}

.display{
   border:  #000000 1px solid;
   padding: 0px;
}

.imagetable{
   border:  #000000 1px solid;
   padding: 8px 2px 8px 2px;
   margin-left: auto;
        margin-right:auto;
   background:  #343434;
   position: relative; }
ImageImage
"Arguments are to be avoided; they are always vulgar and often convincing."
~Oscar Wilde~

guillaume
 
Posts: 59

Re: Help : center a photograph

Post Thu Jun 17, 2010 3:56 pm


Bonjour Marisa,

merci pour ton aide,
globalement le code est mieux que celui que j'avais arrangé (je n'y connais rien), mais il subsiste un probleme avec Internet Explorer (au moins les versions 6 et 8 sur lesquelles je l'ai testé) : tous les thumbnails sont decales sur la droite de la page.
Est ce que tu sais d'ou ca peut venir ?
(La suite en anglais pour les non francophones)
-------------------------------------------------------------------------------

Thank you for your help Marisa,
the code is much better and provide a solution to my need, but from what I've seen on Internet Explorer 6 and 8, there is a problem with thumbnail in the gallery page : all the thumbnails are moved on the right side of the page, do somebody know what may be changed in the code provided by Marisa in order to put the thumbnails in the middle of the page ?

Thank you in advance for your help,

Guillaume

mardoli
 
Posts: 589

Re: Help : center a photograph

Post Thu Jun 17, 2010 7:59 pm


je vais voir....
ImageImage
"Arguments are to be avoided; they are always vulgar and often convincing."
~Oscar Wilde~

mardoli
 
Posts: 589

Re: Help : center a photograph

Post Thu Jun 17, 2010 8:08 pm


guillaume wrote:Bonjour Marisa,

merci pour ton aide,
globalement le code est mieux que celui que j'avais arrangé (je n'y connais rien), mais il subsiste un probleme avec Internet Explorer (au moins les versions 6 et 8 sur lesquelles je l'ai testé) : tous les thumbnails sont decales sur la droite de la page.
Est ce que tu sais d'ou ca peut venir ?
(La suite en anglais pour les non francophones)
-------------------------------------------------------------------------------

Thank you for your help Marisa,
the code is much better and provide a solution to my need, but from what I've seen on Internet Explorer 6 and 8, there is a problem with thumbnail in the gallery page : all the thumbnails are moved on the right side of the page, do somebody know what may be changed in the code provided by Marisa in order to put the thumbnails in the middle of the page ?

Thank you in advance for your help,

Guillaume

Ah oui, il te faut simplement changer la section
.thumbnails
Comme ici de suite
Code: Select all
    .thumbnails{
       border:  #000000 1px solid;
       padding: 4px 4px 4px 4px;
       margin-left: auto;
      margin-right:auto;
       width: 742px;
       background:  #343434;
       position: relative;
       -moz-border-radius-bottomright: 10px;
       -moz-border-radius-topleft: 10px;
    }

ça devrait marcher... aussi dans IE
ImageImage
"Arguments are to be avoided; they are always vulgar and often convincing."
~Oscar Wilde~

guillaume
 
Posts: 59

Re: Help : center a photograph

Post Fri Jun 18, 2010 9:56 am


Bonjour Marisa,

oui ca marche merci, j'avais consacré du temps à ce probleme il y a quelques mois mais n'avais pas trouve la solution (je n'y connais pas grand chose).
Ca semble simple quand on lit un code qui marche :D .

J'aurais peut etre une question supplementaire, sais tu ce qu'il faudrait rajouter pour faire disparaitre le bandeau PBase qu'il y a en haut des pages : "PBase, Galleries, Forum, Search...".
Avec une autre feuille de style je décalais toutes les pages vers le haut, mais j'avais essaye de faire la meme chose avec celle ci et ca decalait aussi toutes les photos, certains textes...

Par exemple dans cette galerie :
http://www.pbase.com/guillaume/nightlife
qui suit j'avais mis dans le CSS "MARGIN-TOP: -27px; MARGIN-BOTTOM: 22px;" qui me permettait de decaler et de ne plus voir la banniere :
TABLE {
BORDER-RIGHT: 0px; BORDER-TOP: 0px; MARGIN-TOP: -27px; MARGIN-BOTTOM: 22px;
FONT: 12px verdana, arial, sans-serif; BORDER-LEFT: 0px;
COLOR: rgb(91,91,101); BORDER-BOTTOM: 0px
}
mais ca ne marche pas bien avec la feuille de style de la galerie : http://www.pbase.com/guillaume/volleyball_indoor

Sais tu ce qu'il faudrait mettre ?

A bientot,

Guillaume

mardoli
 
Posts: 589

Re: Help : center a photograph

Post Fri Jun 18, 2010 4:33 pm


Me voila avec la réponse qu’il te faut, j’espère...
Un membre de PBase, Arjun Roychowdhury, a crée un code pour cacher la barre de PBase comme tu désire.
Personnellement je suis un peu dérangée dans la navigation dans des pages de PBase avec ce code, mais c’est très subjectif, en tous cas dans mes galeries j’ai préféré laisser la barre de PBase visible.
Voilà le code de Arjun
Code: Select all

/* --- simple code to hide the menu -- */
/* -- by arjun -- */
body table td a img { display:none;}
.thumbnails table img {display:none;}
table img {display:block;}
.display,.display img {display:block;}
.thumbnails table,.thumbnails table img, .display,p.small{
display: inline; }
body div.galleryheader table td a img {display:inline;}
body table#inline_slideshow td a img {display:inline;}

/* ----------------------------------- */

A +!
Marisa
ImageImage
"Arguments are to be avoided; they are always vulgar and often convincing."
~Oscar Wilde~

guillaume
 
Posts: 59

Re: Help : center a photograph

Post Fri Jun 18, 2010 9:41 pm


Merci Marisa pour toutes les solutions que tu m'as apporté.
Ca m'evitera des codes approximatifs que j'aurais bricolé...
Bon week end,
Guillaume


Board index PBase HTML and Style Sheets Help : center a photograph

Who is online

Users browsing this forum: No registered users and 2 guests