chevauchement de <div>

Répondre
Peacock
le 08/11/2006 à 22:22
Peacock
Bonsoir,

J'ai un probleme de positionnement
de <DIV> dans un conteur.
Je souhaiterai qu'elles se chevauchent,
or non...

en absolu : elles sortent du contenur, positionnement par rapport au coin haut-gauche
de l'écran.
en relative : pas de chevauchement tel l'exemple,
retour ligne.

à visualiser ICI

le code :

<html>

<head>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
<title>Chevauchement de DIV</title>


<style type="text/css" media="screen">
<!--

*{
margin:0;
padding:0;
}

* html #footer{
margin:-40px 0 0;
}

* html #nonfooter{
height:100%;
}

body{
background:#cccccc;
color:#666633;
height:100%;
text-align:center;
}

.h1{
color:#ffffff;
font-size:20px;
font-weight: 400;
height:40px;
}

.h5 {
color: white;
font-size: 12px;
font-family: "Times New Roman", Times;
font-weight: 400;
text-decoration: none;
margin: 12px;
border-width: 1px
}

html{
background:#cccccc;
height:100%;
margin-bottom:1px;
}

p{
margin:0 20px 20px;
}

#content{
padding:0 0 30px;
}

#footer{
background:#000000;
margin:0px auto 0;
position:relative;
text-align:left;
width:850px;
}

#nonfooter{
background:#989999;
border-bottom:1px solid #cccccc;/* keep opera happy */
margin:0 auto;
min-height:100%;
text-align:left;
width:850px;
}

#hautgauche { position: relative; background-color: orange; visibility: visible; position: relative; z-index: 1; top: 0; left: 0; width: 83px; height: 82px }
#titre { position: relative; visibility: visible; z-index: 2; align: left; top: 15px; left: 57px; width: 360px; height: 50px; border: 1px solid #FFF; }
#texte { position: relative; visibility: visible; top: 63px; left: 204px; width: 433px }
--></style>


</head>

<body>

<div id="nonfooter">
<div id="content">

<div id="hautgauche">
</div>
<div class="h1" id="titre">
Le titre chevauchant la DIV orange,<br>
et là, ben... ça chevauche pas... </div>
<div id="texte">
Il souriait, donc. Il ne feignait pas la légèreté. Restait fidèle à ses obsessions. Cet homme-là ne mentait pas, il répondait toujours brièvement et mécaniquement aux questions, il les connaissait toutes. Il était enfermé dans la peau d'un gosse de divorcés qui, en rentrant d'un week-end chez son père, apprit que sa mère était morte après avoir été violée. Mère dont son père disait qu'elle était une pute, comme on disait de Betty qu'elle était une fille facile. Le gosse avait vécu sous le toit moisi d'un père à la dérive. Il avait joué les tarés, les fachos, connu la drogue, la défonce, la prison, les alcooliques anonymes et les assistantes sociales, et puis la narration lui avait rendu sa voix, il fit de sa noirceur quelque chose d'utile en littérature.
Ce jour-là, à Deauville, il disait : «Je ne lis pas [là il mentait un tout petit peu], je ne regarde pas la télé, je ne vais pas voir de films. Je m'allonge dans le noir et je pense.
Ñ Et vous pensez à quoi ?
Ñ Je pense à mes livres et je pense aux femmes...»
Imaginons ce moment-là, le décor tout au moins, de cet instant où le cerveau d'Ellroy se mettait en route vers sa part d'ombre. Il avait mis de la musique, classique, puisqu'il détestait toutes les autres. Disons le dernier disque acheté : Bartók, deuxième concerto pour violon, par Pierre Boulez à la tête du Chicago Symphony Orchestra. Il était dans le bureau de son appartement de Los Angeles, ville-théâtre de l'enfance, du meurtre, des cauchemars et des livres, où il était revenu vivre après New York, Kansas City, Carmel, San Francisco, et deux divorces. «C'est un retour.» Il avait eu à Kansas City une magnifique maison dont il n'occupait qu'une partie, puis à Carmel une autre qui avait appartenu à Clark Gable, et maintenant il revenait dans un appartement simple, pas loin du quartier coréen.<BR><BR><BR>
</div>
</div>
</div>



<div id="footer">


<table width="850" border="0" bgcolor="black">
<tr>
<td class="h5" height="20" align="right" valign="bottom">
Signature<br> <br>
</span>
</td>

</tr>
</table>

</div>
</body>

</html>
LupusMic
le 09/11/2006 à 09:55
LupusMic
Peut-être utiliser des marges négatives ?
Développeur récurrent, procédural et relationnel. Caustique soupe-au-lait.
Keika
le 10/11/2006 à 16:22
Keika
hop hop

#hautgauche   { 
position: relative;
background-color: orange;
visibility: visible;
position: relative;
z-index: 1;
top: 0;
left: 0;
width: 83px;
height: 82px ; }
#titre {
position: relative;
visibility: visible;
z-index: 2;
align: left;
top: -82px;
left: 0px;
width: 360px;
height: 50px;
border: 1px solid #FFF; }
#texte { position: relative; visibility: visible; top: 63px; left: 204px; width: 433px }
Le PHP --> C'est dur !
Répondre

Ecrire un message

Votre message vient d'être créé avec succès.
LoadingChargement en cours