Retour à Forum de site web

Centre d'alignement pour les différents formats d'image

  • purc
  • Born
  • Born
  • No Avatar
  • Inscription: Juin 26, 2008
  • Messages: 1
  • Status: Offline

Message Juin 26th, 2008, 2:30 pm

Salut les gars,

J'ai un énorme problème. Jaimerais mettre mes images au milieu d'une div. Chaque image a une taille différente (il serait d'une galerie).
J'ai essayé plusieurs solutions, mais aucune n'a fonctionné.

Mon plus gros problème est les photos ont une ombre, je dois donc les prendre et de l'ombre également dans le milieu.

Merci

Code: [ Select ]

css

body {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 100%;
    background-color: #000000;
    margin: 0 auto;
    padding: 0 0 0 0em;
}

#container {
    width: 801px;
    height: 600px;
    background-color: #FFFFFF;
    border: 1px solid #9f9e9e;
    margin:0 auto;
}

#body {
    width: 799px;
    height: 460px;
    margin: 1px 1px 1px 1px;
}

#body_left {
    width: 306px;
    height: 458px;
    background-image: url(../images/body_left.jpg);
    border: 1px solid #9d9c9c;
    float: left;
    margin:0px 1px 0px 0px;
}

#body_right {
    width: 488px;
    height: 458px;
    background-color: #d5ded6;
    border: 1px solid #9d9c9c;
    float: left; 
    margin:0px 0px 0px 0px;
}

.img_wrapper {
    background: url("../images/picture_background.gif") no-repeat bottom right;
    float: left;

    
}

.img_wrapper img { 
    background-color: #FFFFFF;
    border: 1px solid #504e4e;
    padding: 4px 4px 4px 4px;
    margin: 0 auto;
    position: relative;
    right: 3px;

}


HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>dora vorosmarty</title>
<link href="css/stylessheet.css" rel="stylesheet" type="text/css" />
</head>

<body>
    <div id="container">
        <div id="body"> 
            <div id="body_left">
            </div>
            <div id="body_right">
                <div class="img_wrapper">
                    <img src="images/img01.jpg" />
                </div>
            </div>
        </div>
    </div>
</body>
  2. css
  4. body {
  5.     font-family: Arial, Helvetica, sans-serif;
  6.     font-size: 100%;
  7.     background-color: #000000;
  8.     margin: 0 auto;
  9.     padding: 0 0 0 0em;
  10. }
  12. #container {
  13.     width: 801px;
  14.     height: 600px;
  15.     background-color: #FFFFFF;
  16.     border: 1px solid #9f9e9e;
  17.     margin:0 auto;
  18. }
  20. #body {
  21.     width: 799px;
  22.     height: 460px;
  23.     margin: 1px 1px 1px 1px;
  24. }
  26. #body_left {
  27.     width: 306px;
  28.     height: 458px;
  29.     background-image: url(../images/body_left.jpg);
  30.     border: 1px solid #9d9c9c;
  31.     float: left;
  32.     margin:0px 1px 0px 0px;
  33. }
  35. #body_right {
  36.     width: 488px;
  37.     height: 458px;
  38.     background-color: #d5ded6;
  39.     border: 1px solid #9d9c9c;
  40.     float: left; 
  41.     margin:0px 0px 0px 0px;
  42. }
  44. .img_wrapper {
  45.     background: url("../images/picture_background.gif") no-repeat bottom right;
  46.     float: left;
  48.     
  49. }
  51. .img_wrapper img { 
  52.     background-color: #FFFFFF;
  53.     border: 1px solid #504e4e;
  54.     padding: 4px 4px 4px 4px;
  55.     margin: 0 auto;
  56.     position: relative;
  57.     right: 3px;
  59. }
  62. HTML
  64. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
  65. <html xmlns="http://www.w3.org/1999/xhtml">
  66. <head>
  67. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  68. <title>dora vorosmarty</title>
  69. <link href="css/stylessheet.css" rel="stylesheet" type="text/css" />
  70. </head>
  72. <body>
  73.     <div id="container">
  74.         <div id="body"> 
  75.             <div id="body_left">
  76.             </div>
  77.             <div id="body_right">
  78.                 <div class="img_wrapper">
  79.                     <img src="images/img01.jpg" />
  80.                 </div>
  81.             </div>
  82.         </div>
  83.     </div>
  84. </body>
  • Anonymous
  • Bot
  • No Avatar
  • Inscription: 25 Feb 2008
  • Messages: ?
  • Loc: Ozzuland
  • Status: Online

Message Juin 26th, 2008, 2:30 pm

  • righteous_trespasser
  • Scuffle
  • Genius
  • Avatar de l’utilisateur
  • Inscription: Mar 12, 2007
  • Messages: 6228
  • Loc: South-Africa
  • Status: Offline

Message Juin 26th, 2008, 11:44 pm

On peut changer "body-droit" text-align s au centre...
Let's leave all our *plum* where it is and go live in the jungle ...

Page 1 sur 1

Afficher de l'information

  • Total des messages de ce sujet: 2 messages
  • Utilisateurs parcourant ce forum: Aucun utilisateur enregistré et 131 invités
  • Vous ne pouvez pas poster de nouveaux sujets
  • Vous ne pouvez pas répondre aux sujets
  • Vous ne pouvez pas éditer vos messages
  • Vous ne pouvez pas supprimer vos messages
  • Vous ne pouvez pas joindre des fichiers
 
 

© 2011 Unmelted, LLC. Ozzu® est une marque déposée de Unmelted, LLC