28234 sujets

CSS et mise en forme, CSS3

[ Résolu ] Cadre et position absolute

Hi tous Smiley cligne
Suite de l'essai avec NVU, je souhaite positionner une "div class/id" dans la "div centrale" de facon à y placer une photo que je puisse changer à volonté or apparement la position absolute de l'enssemble me perturbe cela, qqun à une tite idée ? donc ce que je souhaite, c'est mettre un cadre à l'interieur de la "div centrale" centré H/V pouvoir avoir un titre au dessus et du texte en dessous.... mais "absolute" me rejette....

Voici le code complet de la page (sans la photos BGI de la "div centrale" évidement...) Smiley cligne 
<!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">
<head>
  <meta
 content="text/html; charset=ISO-8859-1"
 http-equiv="content-type" />
  <title>nvu1</title>
  <style type="text/css">
  body { margin: 0px;
    padding: 0px;
    font-family: Verdana,Arial,Helvetica,sans-serif;
    font-size: 0.8em;
    }

  #contenu { position: absolute;
    width: 100%;
    background-color: rgb(0, 0, 0);
    }

  #header { background-color: rgb(204, 203, 117);
    font-family: Dingbats;
    text-align: center;
    font-weight: bold;
    font-style: normal;
    color: rgb(102, 0, 204);
    font-size: xx-large;
    height: 50px;
    }

  #cadreg { background-color: rgb(0, 0, 0);
    width: 15em;
    left: 0pt;
    color: rgb(255, 255, 255);
    position: absolute;
    text-align: center;
    font-family: Arial,Helvetica,sans-serif;
    font-weight: bold;
    text-transform: uppercase;
    }

  #cadreg2 { background-color: rgb(0, 0, 0);
    width: 15em;
    left: 0pt;
    color: rgb(255, 255, 255);
    position: absolute;
    text-align: center;
    font-family: Arial,Helvetica,sans-serif;
    font-weight: bold;
    text-transform: uppercase;
    margin-top: 20em;
    }

  .menug { margin: 0pt;
    padding: 0pt;
    list-style-type: none;
    }

  .menug li { margin-bottom: 5px;
    }

  #centrale { background-color: rgb(255, 204, 0);
    background-image: url(file:///home/chris/Images/loulou800600.png);
    background-repeat: no-repeat;
    background-position: center;
    margin-left: 15em;
    height: 700px;
    }

  #pied { border: 0.2em outset rgb(102, 0, 204);
    background-color: rgb(204, 203, 117);
    height: 45px;
    }

  .p1 { margin: 0pt 0pt 20px;
    font-weight: bold;
    text-decoration: none;
    line-height: normal;
    font-size: large;
    }

  #menug { text-decoration: none;
    background-color: rgb(0, 0, 0);
    color: rgb(255, 255, 255);
    }

  #pied a { font-weight: bold;
    font-family: Arial,Helvetica,sans-serif;
    color: rgb(255, 255, 204);
    }


  </style>
</head>
<body>
<div id="contenu">
<div id="header">Bienvenue
sur notre site [cligne]
</div>
<div id="cadreg">
<p class="p1">Menu du site</p>
<ul class="menug">
  <li><a
 href="">Visite Guid&eacute;e</a></li>
  <li><a
 href="">Albums</a></li>
  <li><a
 href="">Menu 3</a></li>
  <li><a
 href="">Menu 4</a></li>
  <li><a
 href="">Menu 2</a></li>
  <li><a
 href="">Menu 2</a></li>
  <li><a
 href="">Menu 3</a></li>
  <li><a
 href="">Menu 4</a></li>
</ul>
</div>
<div id="cadreg2">
<p class="p1">Album Photos</p>
<ul class="menug">
  <li><a
 href="">Visite Guid&eacute;e</a></li>
  <li><a
 href="">Albums</a></li>
  <li><a
 href="">Menu 3</a></li>
  <li><a
 href="">Menu 4</a></li>
  <li><a
 href="">Menu 2</a></li>
  <li><a
 href="">Menu
2</a></li>
  <li><a
 href="">Menu 3</a></li>
  <li><a
 href="">Menu 4</a></li>
</ul>
</div>
<div id="centrale">
</div>
<div id="pied">
<p>Ce site est
valide <a
 href="http://validator.w3.org/check?uri=referer">
XHTML.1</a> | Copyright de nous [cligne] |
<br />
</p>
</div>
</div>
</body>
</html>

Merçi de votre coup de main Smiley sweatdrop
Modifié par Express (11 May 2005 - 19:51)
Salut,

Evite les acronymes, s'il te plait parce que H/V j'ai compris que cela voulais dire Horizontalement/Verticalement mais NVU ? Smiley eek

J'ai pitète pas compris ton pb parce que j'ai ajouté un calque dans #centrale : 
  <div id="centrale">
    <div id="centrage">IMAGE</div>
  </div>
auquel j'ai appliqué le style suivant :
#centrage {
position: relative;
height: 150px;
width: 150px;
top: 50%;
left: 50%;
margin-left: -75px;
margin-top: -75px;
border: solid 1px blue;
}


Et mon calque est centré sous Firefox et IE6...
Merçi de ta réponse, pour NVU ( Module d'edition HMTL de Mozilla....), pour ce qui concerne le code,ce n'est pas bon cela crée les mêmes problèmes que moi, le résultat est que cela fait disparaître mon "Header" et mon "pied" de page.Ci joint le résultat avec ton code en plus, moi ce que je desir pouvoir faire,c'est la photo du chien la mettre dans un cadre (elle fait 800*600) au millieu de la div "centrale" mais aussi pouvoir ajouter du teste au-dessus et au-dessous de ctte image, donc je suppose qu'il faut créer 2 div supplémentaire, 1 au-dessus et 1 au-dessous mais là est le problème, car je n'arrive pas les créer sans mettre le "bordel" Smiley rolleyes dans la page. D'ailleur comme tu peux le constater, au-dessus du menu tu appercois une partie du "header" qui devrai prendre 100% en Horizontale et le "pied" (de même couleur" n'est plus là . Ai-je été plus clair ? Smiley smile

EDIT par Raphael : merci de ne pas afficher des images immenses sur le forum, utilisez la case "vignette"
Modifié par Raphael (10 May 2005 - 18:04)
Raphael -->Merci pour l'info mais tu aurai pu me mettre aussi l'IMG en vignette Smiley decu Comment veux-tu que l'on puisse m'aider ? Je parcours depuis la Pologne là et j'attendais quelques réponses pour ce week-end il m'est impossible de faire cela d'ici Smiley confus ...
Me montré que je fais des erreurs je suis d'accord avec toi bien au contraire,mais supprimer une partie du message,euh ! là ,un peux moins Smiley fache .
SLTS.
Administrateur
Express a écrit :
Raphael -->Merci pour l'info mais tu aurai pu me mettre aussi l'IMG en vignette Smiley decu .
Non malheureusement je ne peux pas Smiley decu
C'est une option à cocher au moment de transférer ton image sur le forum.
Je ne peux donc pas la créer après coup Smiley ohwell

De plus, je ne retrouve pas ton fichier original sur le forum. Tu l'as transféré ou était-ce une image en ligne ?
C'est bizarre. En effet, j'ai une partie du header qui est bouffée par le cadre #centrale qui semble remonter. Aucun pb sous IE.
Si on met le calque #centrage en absolute, l'image semble plutot centrée sur la page entière. Je crois que c'est parce que le calque #centrale n'est pas "positionné" (pas de position: quelque chose). Dans ce cas, le fait de "positionner" #centrage, oblige le navigateur à chercher "par rapport à quel calque" il doit "positionner" et donc à remonter la hiérarchie jusqu'à trouver un calque positionné ou body s'il n'en trouve pas. Et c'est ce qui doit se passer.
Les gars, si je dis des conneries, arrêtez-moi de suite parce que, là, je suis chaud et lancé... Smiley lol

C'est d'autant plus bizarre que si je rajoute 
 border: solid 0px red;
au calque #centrale, le pb d'affichage disparait (j'ai mis cette bordure, à l'origine, pour voir la déformation de ce calque lors du bug)
Merçi Ricou13Grace à ton info j'ai pu corriger mon probleme en positionnant effectivement ma div centrale en Relative
Et voilà Smiley ravi Smiley ravi
Sujet clos
Aller à