Center main picture (css)

[phild]

Bonjour,
I need some help !
I'm building a pixelpost blog there :
http://frompariswithlove.philippedurand.com
I would like to center the main picture, so that it stays centered as you change the width of the browser. I also want to keep the left column on the left. Whatever I try, the main picture remains on the left. What am I doing wrong ?
Any idea ?
Merci
phild
from paris with love

css code :


/* CSS Document */

body {
/* dans le fichier html, marges mises ? z?ro*/
margin:0;
padding:0;
color:#000000;
font-family: Georgia, "Times New Roman", Times, serif;
background-color: #ffffff;
background-image: url(images/airmail-frise.gif);
background-repeat:repeat-x;
}

/* pour le logo du site, inutile car valeurs idem body
.index {
margin: 0px;
padding: 0px;
}
*/
/*le tableau*/
#container {
float: left;
margin: 2px auto 10px;
padding: 2px 10px 10px 5px;
}
/*les lignes*/
#principal {
}
#legende {
}
#vignettes {
}
#commentaires {
}
/*les colonnes*/
.menu {
width: 80px;
text-align: left;
vertical-align: top;
padding-top: 10px;
padding-left: 15px;
}
.menu a:link, .menu a:visited {
font-weight: bold;
text-decoration: none;
color: navy;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
text-transform: uppercase;
}
.menu a:link#current, .menu a:hover {
color: #cc0000;
}
.content {
text-align: center;
padding-left: 10px;
}

/*image principale*/
.shadow {
background: url(images/shadowAlpha.png) no-repeat right bottom!important;
background: url(images/shadowlarge.gif) no-repeat bottom right;
float: left;
margin: 10px 0 0 10px!important;
margin: 10px 0 0 5px;
}
.shadow img {
display: block;
position: relative;
background-color: #ffffff;
border: solid 1px #a9a9a9;
margin: -6px 6px 6px -6px;
padding: 25px;
}

/*pied de page*/
#footer {
clear: both;
padding: 5px;
margin-top: 5px;
text-align: justify;
color: #705048;
}
#footer a:link, #footer a:visited {
font-weight: bold;
text-decoration: none;
color: #000000;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px; text-transform: uppercase;
}

#footer a:link#current, #footer a:visited#current, #footer a:hover {
color: #cc0000;
}
.title {
font-size: 12px;
font-weight: bold;
text-transform: uppercase;
}

.exif {
color: gray;
}

[Connie]

Philipp,

here comes my mantra:

go to validator and validate your html

http://validator.w3.org/check?verbose=1&uri=http%3A//frompariswithlove.philippedurand.com/

you will get 16 errors!

after cleaning the HTML-errors you can start to edit your CSS, because with faulty HTML-code you will never know how CSS will result...

basically, you mix CSS-attributes with HTML-attributs, body for instance has not HTML-attribute "left-margin", but CSS has

you must go a little bit deeper into the basics of webdesign, go to

http://fr.selfhtml.org/

that is a perfect page for learning and understanding the Web! (I am one of the oldest HTML-friends of the author... so I know how good this work is!)

[phild]

Thank you Connie,

Keep repeating your mantra, you already sent me there once, next time I won't forget to check there before pulling my hair out. Thanks also for the selfhtml web site, it's really well done. I've been looking for something like this for some time and I found nothing as clear and useful (translated into French, on top of that).

Indeed I got mixed up between some CSS and HTML attributes, plus some XHTML / HTML mistakes (the "/>" close tag).

I'm now clean on the HTML side, but the problem remains as mentioned. I'll keep looking in the selfhtml site, but if anyone has an idea…

philippe

[raminia]

css like this would help:
#main-image{
text-align:center;
margin-left:auto;
margin-right:auto;
}
and use it as
<div id='main-image'>
<img src='filename' />
</div>

[phild]

Thanks Raminia,
There is already a text-align=center instruction somewhere above, so this does not change anything. The problem seems to come from the display=block intruction, which is part of the css used to build the shadow. I've managed to get the picture centered, but I loose the shadow. Maybe there is an other way to build a shadow ?

[raminia]

margin-left:auto;
margin-right:auto;
surely you have some unclosed or badly written tags

[Connie]

Philippe,

viens là: http://www.simplebits.com/notebook/2004/09/08/centering.html

je crois qu'il y'à là des examples très pratiques...

well, I could not mix more accents into that small phrase;=)

[phild]

Well, the page passes the W3C XHTML and CSS tests... So it's something else.

I tried to implement the drop shadow css from
http://www.alistapart.com/articles/cssdropshadows/

This is the css code

.shadow {
float: left;
background: url(images/shadowAlpha.png) no-repeat bottom right !important;
background: url(images/shadow.gif) no-repeat bottom right;
margin: 10px 0 0 10px !important;
margin: 10px 0 0 5px;
}

.shadow img {
display: block;
position: relative;
background-color: #fff;
border: 1px solid #a9a9a9;
margin: -6px 6px 6px -6px;
padding: 20px;
}


But it has the consequence of flushing the picture on the left (except on IE 5 for mac where it's centered, don't know about pcs). If I take out this bit of code to get the shadow, the picture is centered. If I take out the "float: left" line, the picture is centered, but the shadow takes the whole page width.

Has anyone some experience with drop shadows ?

[phild]

well, I could not mix more accents into that small phrase;=)

Thanks for all these accents Connie ! All your recommendations are very useful resources.
I fixed one of my initial problem by defining the width of the table columns in % rather than pixels : the consequence was that the picture stays centered whatever the size of the browser window.
That is until I try to put in that drop shadow…

[pcadv]

Hello Phild,

I saw your posting and realized that the problem you were facing is similar to mine so was wondering if you could let me know how you solved it.I would like to center the main picture, so that it stays centered as you change the width of the browser. However, the main picture leaves the required amount of space on the left side but fills the right side of the page.

css code:

.centering
{
margin-left: 10%
width: 80%
margin-top: 0px
text-align: center;
padding: 0px
}

html code:

<div class="centering">
<img src="picture.jpg">
</div>

It would be great if you could help me.

thanks,
pcadv

[pcadv]

Hello Phild,

I saw your posting and realized that the problem you were facing is similar to mine so was wondering if you could let me know how you solved it.I would like to center the main picture, so that it stays centered as you change the width of the browser. However, the main picture leaves the required amount of space on the left side but fills the right side of the page.

css code:

.centering
{
margin-left: 10%
width: 80%
margin-top: 0px
text-align: center;
padding: 0px
}

html code:

<div class="centering">
<img src="picture.jpg">
</div>

It would be great if you could help me.

thanks,
pcadv

[Dennis]

set the margin to the following code:


margin: 0 auto; /* center for now */

and remove other stuff starting with margin (margin-top, margin-left) and the text-align

[sem]

margin: 0 auto; is correct, but for older IE-Versions you should keep the "text-align: center;".

andreas

[Dennis]

Which older version andreas?

[sem]

if i remember correctly than text-align: is necessary for IE < 6.0 and IE 6.0 in quirks mode.