18041 sujets

Questions générales et questions de débutants

Div englobant les autres div

Bonjour
J'ai une page qui fonctionne très bien qui contient des div entourées par une div globale, cependant ça ne focntionne pas sur firefox, pouvez-vous m'aider a comprendre ?
Merci

ci-joint le code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<title>wise-new</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
    img {
	display: block;
    }
    .global {
        position: relative;
        width: 750px;
        margin: 0 auto;
        padding: 15px;
        padding-top: 20px;
        background-color:white;
        align: center;
        border: 1px solid black;
    }
    .o1 {
	float:right;
	width: 450px;
	background: url(shadow2.gif) right 100%;
	margin: 0 20px 50px 0;
	margin-top: 50px;
    }
    .o2 {
	background:url(corner_bl.gif) no-repeat bottom left;
    }
    .o3 {
	padding:0 6px 60px 0;
	background:url(corner_tr.gif) no-repeat top right;
	padding: 20px;
    }                                                                   a
    .contour {
        background-color: white;
        padding: 10px;
    }
    .contenu {
	padding: 35px;
        margin: 15px;
        background-color: green;
        text-align:center;
            }
    #menu {
        position: absolute;
        width: 600px;
        background-color: #fcf4ce;
        border: 1px solid black;
        margin-top: 5px;
    }
    #photo {
        position: absolute;
        align: left;
        /*background:url(test.gif);*/
        margin-top: 220px;
        margin-left: 40px;
    }
    #tete {
        position: relative;
        width: 750px;
        margin: 0 auto;
        background-color:white;
        align: left;
        border: 0px solid black;
    }
    #pied {
        position: relative;
        width: 750px;
        margin: 0 auto;
        background-color:white;
        text-align: right;
        border: 0px solid black;
    }    
    #menugauche {
        list-style-type: none;
        margin: 0;
        padding:0;
        align: center;
    }
    #menugauche li {
        margin-bottom: 5px;
        display: inline;
        text-align: center;
    }
    #menugauche ul {
        text-align: center;
        margin: 0;
        padding-bottom: 5px;
        padding-top: 5px;
    }
    #menugauche a {
        margin: 0 2px;
        color: #000000;
        text-decoration: underline;
    }
    #menugauche a:hover {
        text-decoration: none;
    }
</style>
</head>

<body>

<div id="tete">
   <p> My logo+photo</p>
</div>

<div class="global">
  <div class="o1">
     <div class="o2">
        <div class="o3">
	   <p>Bienvenue chez moi ...</p>
	   <div class="contour">
             <div class="contenu">
                 <p> blablablewwxcvwv<br>qsdfqsdfqsfqsdf qsdf qsdf<br>
                 qsdfqsdfqsdfqs fqsdfq <br>ksldfglsdgjsdlf sdfg sdf sdfsdf<br>
                 sdfg sdfgsd fgsdglksdfkmjh <br>sldkghkldjgh skldjgfsdkgh <br>
                 sdjkfghksjdgsjkl dhklsdjgh jkls </p>
                 qsdfqsdfqsdfqs fqsdfq <br>ksldfglsdgjsdlf sdfg sdf sdfsdf<br>
                 qsdfqsdfqsdfqs fqsdfq <br>ksldfglsdgjsdlf sdfg sdf sdfsdf<br>
	     </div>
           </div>
        </div>
     </div>
  </div>

  <div id="menu">
    <ul id="menugauche">
        <li><a href="index.htm">Accueil</a></li>
        <li><a href="presa.htm">Présentation</a></li>
        <li><a href="">Produits</a></li>
        <li><a href="">Horaires</a></li>
        <li><a href="">Contact</a></li>
    </ul>
  </div>

  <div id="photo">
     <img alt="" src="test.gif">
  </div>

</div>

<div id="pied">
   <p> Réalisation 2007</p>
</div>

</body>

Modifié par rdidier (22 Oct 2007 - 14:16)
Modérateur
Bonjour rdidier et bienvenue parmi nous Smiley smile

En tant que modérateur, je me dois de te faire remarquer que tu n'as malheureusement pas respecté l'une des Règles de base du forum qui est d'afficher les codes et exemples proprement à l'aide des boutons [ code]... ici ton code HTML, CSS, PHP, etc.[ /code] (sans espace).

Je te remercie par avance de bien vouloir éditer ton message afin de le rendre conforme à cette règle. Smiley cligne

D'ailleurs, je rappelle que le lien qui apparaît en bandeau tout en haut du forum ("Nouveau sur le forum ?...") est important. Il contient des pistes de recherche, des indications sur les règles de vie de la communauté, etc.
Il serait courtois de ta part de bien vouloir en prendre connaissance.

Bonne continuation Smiley smile

upload/1-code.gif
Bonjour,

J'ai l'impression que nombreuses sont les notions qui ne sont pas claires pour toi, et j'aurais tendance à te conseiller vivement de reprendre quelques bons tutos pour repartir sur de bases saines.

Tes styles présentent plusieurs incohérences, notamment au niveau de propriétés inexistantes et de positionnements non justifiés. As-tu bien compris l'utilité des position relatives et absolues?

Par ailleurs, n'oublie pas qu'avec le doctype que tu utilises, toute balise ouverte doit être fermée, ceci inclus les retours à la ligne forcés ainsi que les images.

Bonne continuation!
merci benjamin mais peux-tu me donner quelques piste de recherche, je complique tjrs le code a cause des navigateurs qui ne fonctionnent pas tous pareil, j'avoue que plus j'avance moins c'est clair.
Merci d'avance
ok en mettant les div dans le bon ordre ça va mieux...
mais où puis-je trouver une doc clair expliquant la différence entre les navigateurs ? merci
rdidier a écrit :
où puis-je trouver une doc clair expliquant la différence entre les navigateurs ?

Tout l'intérêt des standards, c'est justement de s'affranchir de ces éventuelles différences: on crée une page bien formée et on est assuré de son rendu sur l'ensemble des navigateurs.
Il est évident que ceci est purement théorique. Quoique… En pratique, c'est plus ou moins cette démarche que l'on suivra:
• on crée un document valide respectant les normes récentes du W3C,
• on ajuste les quelques différences d'interprétation d'Internet Explorer 6 (la dernière version étant assez respectueuse des standards) grâce à une feuille de style adressée uniquement à ce dernier par commentaires conditionnels
ça n'empeche que je n'arrive pas a faire une div englobant les autres sans mettre une hauteur a la div globale, quel est le truc ? merci
T'as une page (une page, pas un screenshot) qui montre le pb ?

(pour un débutant qui essaye d'apprendre en aidant les autres ça aide Smiley cligne )
Modifié par Yorick (22 Oct 2007 - 15:26)
ça change quoi en fait Transitionel ou strict ?
merci, mais je lis plein de doc et je fini par m'embrouiller....
A+
Sujet clos
Aller à