Forums Développement Multimédia

Aller au contenu

Décalage de mon ombre par rapport à mon div conteneur

CODE HTML CSS

3 réponses à ce sujet

#1 yagrasdemonde

    Ceinture Marron

  • Members
  • PipPipPipPipPipPip
  • 101 messages

Posté 22 June 2010 - 11:13 AM

Bonjour à tous,

Je suis confronté à un problème que seul Firefox n'affiche pas : le positionnement de mon ombre par rapport à un div.

J'ai un bloc div avec un contour, dans lequel je place mon contenu. En dessous je colle un autre dans lequel je place une image qui me fait une ombre portée. Ce dernier est décalé d'1px sur la gauche dans Chrome, Safari et IE.

Je ne comprend pas pourquoi.

Mon bloc conteneur

<div id="content">  
             <div id="content_left"></div>  
             <div id="content_right">
                 <h1></h1>
                   <div id="content_description">
                   
               </div>
             </div>  
        </div>
 


Le CSS associé

#content{
    margin: 49px auto 0 auto;
    width:883px;
    height:395px;
    border-top:3px solid #FFF;
    border-left:3px solid #FFF;
    border-right:3px solid #FFF;
    background-color:#edeaeb;
     
}
#content_left{
    float:left;
    width:170px;
    height:395px;
    background:url(../images/content_left_bg.png) top left repeat-y;
}
 
#content_right{
    float:left;
    width:683px;
    padding:18px 0 0 30px;
}
 
#content_description{
    width:447px;
    float:left;
}
 


Mon ombre

<div id="shadow_content"></div>
 


Le CSS associé

#shadow_content{
    margin: 0 auto;
    padding:0px;
    width:936px;
    height:20px;
    background-image:url(../images/shadow_content2.png);
}
 

En vous remerciant
Le problème est visible à la page http://powerwebmax.fr/lab/

#2 Ren

  • Moderateur
  • PipPipPipPipPipPipPipPip
  • 600 messages

Posté 22 June 2010 - 13:02 PM

Bonjour,

une petite question la partie centrale ne dépassera jamais 395px de haut ?

Ren
---------- anonymation - Studio de création ----------
www.anonymation.com - blog.anonymation.com
---------------------- Projets internes ---------------------
www.mavoiturealouer.com - www.cosplay-it.com

#3 yagrasdemonde

    Ceinture Marron

  • Members
  • PipPipPipPipPipPip
  • 101 messages

Posté 22 June 2010 - 14:20 PM

Voir le messageRen, le 22 June 2010 - 13:02 PM, dit :

Bonjour,

une petite question la partie centrale ne dépassera jamais 395px de haut ?

Ren

Dans l'idéal si

#4 Ren

  • Moderateur
  • PipPipPipPipPipPipPipPip
  • 600 messages

Posté 22 June 2010 - 15:53 PM

Bonsoir,

voici la construction qu'il te faut.

Prend un moment pour relire le code et comprendre les modifications que j'ai apporté.
J'ai pas mal commenté la CSS, mais j'ai fais quelques petit changement dans ton HTML.

Je remet pas mal de choses en question, j'espère que tu y décellera toutes les subtilités :neutral:
Mais la souplesse est au rendez-vous.

N'hésites pas à me questionner ici.

HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
        <title>Document sans nom</title>
        <link rel="stylesheet" type="text/css" href="css/reset.css">
        <link rel="stylesheet" type="text/css" href="css/style.css">
    </head>
    <body>
        <!-- MAIN -->
        <div id="main">
            <!-- FEATURE -->
            <div id="feature">
                </div>
            <!-- FIN FEATURE --><!-- CONTENT -->
            <div id="master-content">
                <div id="content">
                    <div id="content_left">
                        <h1>Lorem ipsum dolor</h1>
                        <p>
                            Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.
                            Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
                            Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.
                        <p>
                            Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.
                        </p>
                        <p>
                            Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi.
                        </p>
                            Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a,
                        </p>
                    </div>
                    <div id="content_right">
                        <h1>Lorem Ipsum</h1>
                        <p id="content_description">
                            Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.
                            Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus.
                        </p>
                        <p id="content_description">
                                                        Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi.
                        </p>
                        <p id="content_description">
                            Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc,
                        </p>
                                                               <p id="content_description">
                            Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.
                            Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus.
                        </p>
                        <p id="content_description">
                                                        Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi.
                        </p>
                        <p id="content_description">
                            Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc,
                        </p>
                                                               <p id="content_description">
                            Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.
                            Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus.
                        </p>
                        <p id="content_description">
                                                        Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi.
                        </p>
                        <p id="content_description">
                            Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc,
                        </p>
                                                               <p id="content_description">
                            Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.
                            Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus.
                        </p>
                        <p id="content_description">
                                                        Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi.
                        </p>
                        <p id="content_description">
                            Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc,
                        </p>
                    </div>
                </div>
                <div id="shadow_content"></div>
                <!-- FIN CONTENT -->
            </div>
        </div>
        <!-- FIN MAIN -->
    </body>
</html>


CSS
body{
        font-family:Arial, Helvetica, sans-serif;
        color:#1b1b1b;
        background:url(../images/header_bg.png) #f5f5f5 top left repeat-x;
        text-align:center;
}
/**/
#feature{
        width:100%;
        /* Légèrement trop haut à mon avis 990px serait plus judicieux*/
        min-width:990px;/*1020px;*/
        height:200px;
        background-color:#093;
        border-bottom:1px #FFF solid;
}
#master-content{
        text-align:left;
        /*Pour que le text-align:center du body fonctionne correctement sur ce div*/
        display:inline-block;
        /*un margin pour décoller le tout du header et du footer*/
        margin:30px 0;
        /*pour que le position:absolute du div shadow_content se place par rapport à ce div*/
        position:relative;
}
#content{
        /*Tout ce qui est contenu dans cet element est aligné a gauche*/
        text-align:left;
        /*un margin correspondant au dépassement de l'ombre dans le div shadow-content*/
        margin:0 23px;
        /*Un border blanc sur tout le contour*/
        border: 3px #fff solid;
        /*ou presque <img src='http://forums.mediabox.fr/public/style_emoticons/<#EMO_DIR#>/smile.png' class='bbc_emoticon' alt=':roll:' /> Pas de border en bas ! */
        border-bottom:none;
        /*largeur du content*/
        width:883px;
        /*Une image repété sur toute la hauteur et caler à gauche + une couleur de fond pour occuper l'espace restant : tu peux tester une autre couleur de fond <img src='http://forums.mediabox.fr/public/style_emoticons/<#EMO_DIR#>/wink.png' class='bbc_emoticon' alt=':arrow:' /> */
        background: #EDEAEB url("../images/content-bg.jpg") 0 0 repeat-y;
        /*Pour que le div occupe toute la hauteur des blocs qu'il contient et qui sont positionnés en float*/
        overflow:hidden;
       
}
#shadow_content{
        /*une largueur et une hauteur, celle de l'image qu'il contient si possible*/
        width:936px;
        height:20px;
        background-image:url(../images/shadow_content2.png);
        /*Un position:absolute pour caler l'ombre en bas de notre content*/
        position:absolute;
        bottom:-20px;
}
#content_left{
        float:left;
        width:140px;
        /*un padding pour décoller les textes des bords*/
        padding:15px;
        /*un font size adapté pour que ca en jète !*/
        font-size:0.75em;
        line-height:1.2em;
}
#content_left h1{
        /*Décoller le titre du texte*/
        margin-bottom:5px;}

#content_right{
        /*Un padding et une largeur adapté*/
        padding:30px 30px 30px 0px;
        width:655px;
        text-align:justify;
        /*Toujours collé à droite*/
        float:right;
}
#content_description{
        /*Décoller le texte en haut et en bas*/
        margin:10px 0;
        /*Toujours collé à gauche*/
        float:left;
        /*un font-size adapté*/
        font-size:0.85em;
}

Fichier joint  content-bg.jpg   8.11 Ko   27 téléchargement(s)
Les images sont à mettre dans un dossier "images" et les css dans dossier "css"

Dis moi ce que tu en penses :arrow:

Ren
---------- anonymation - Studio de création ----------
www.anonymation.com - blog.anonymation.com
---------------------- Projets internes ---------------------
www.mavoiturealouer.com - www.cosplay-it.com



1 utilisateur(s) li(sen)t ce sujet

0 membre(s), 1 invité(s), 0 utilisateur(s) anonyme(s)

authorised training centre

Centre de Formation Mediabox - Adobe et Apple Authorised Training Center.

Déclaré auprès de la Direction du Travail et de la Formation Professionnelle

Mediabox : SARL au capital de 62.000€ - Numéro d'activité : 11 75 44555 75 - SIRET : 49371646800035

MEDIABOX, 23, rue de Bruxelles, 75009 PARIS

FFP