positionnement d'un div

Invité · 13/02/2009, 17h44

Bonjour.

Je me suis mis en tête la folle idée de développer un site web assez complexe alors que je suis novice.
Résultat : je plante sur des trucs a priori tout bêtes

Désolé donc de poser une question aussi bête, mais je galère pour positionner un div.
J'utilise un fichier CSS, dans lequel j'ai déclaré la classe suivante :

#mtcForgotPassword
{
margin-top: 100px;
float: right;
width: 350px;
}

Le "hic" c'est que mon "width" me donne simultanément un div de 350px de large, mais aussi (et c'est là que je bloque...) un positonnement à 350 px de la droite de ma page.

Comment faire pour dissocier la largeur de la position de mon div ?
Merci d'avance pour votre aide.

**Kenshin86** · 13/02/2009, 17h49

Essayes les attributs "top" et "right"

et rajoutes : position:absolute

**Carabi** · 13/02/2009, 17h53

Ou sinon, tu met cette "div qui pose problème" dans un div général, plus couramment appelée "body"

Tu centre ton body, tu lui met une largeur et normalement ta div n'en sortira pas ! (enfin j'espère

)

**Macmillenium** · 13/02/2009, 17h56

Bonjour,

Merci de poster l'intégralité de ton code html/css

Invité · 13/02/2009, 18h13

Envoyé par Macmillenium

Bonjour,

Merci de poster l'intégralité de ton code html/css

voici le contenu de mon fichier html :

<!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" >

<head>
<title>TITRE</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" media="screen" type="text/css" title="Design" href="Default_design.css" />
<script language="javascript" type="text/javascript" src="Index.js"></script>
<script type="text/javascript" src="BubbleTooltips.js"></script>
<script type="text/javascript">
window.onload=function(){enableTooltips("content")};
</script>
<link href="tooltip.css" rel="stylesheet" type="text/css" media="all">
</head>

<body>
<div id="Header">
</div>

<div id="MembersSection">

<fieldset>
<legend>Déjà inscrit(e) ?</legend>

<form method="post" action="traitement.php">
<p>
<label for="pseudo"></label>
<input type="text" name="pseudo" id="pseudo" value="votre pseudo" onFocus="this.value=''"/>

<label for="pass"></label>
<input type="password" name="pass" id="pass" value="password" onFocus="this.value=''"/>

<img src="Include/bt_ok.gif" name="VALID_BTN" id="mtcBtnForgotPassword" alt="Valider" onMouseover="commuteImg('Include/bt_ok.gif','Include/bt_ok_2.gif','VALID_BTN')" onMouseOut="commuteImg('Include/bt_ok_2.gif','Include/bt_ok.gif','VALID_BTN')"/>

<img src="Include/bt_help.gif" name="HELP_BTN" id="mtcBtnForgotPassword" alt="Pseudo ou mot de passe oublié ?" onMouseover="commuteImg('Include/bt_help.gif','Include/bt_help_2.gif','HELP_BTN')" onMouseOut="commuteImg('Include/bt_help_2.gif','Include/bt_help.gif','HELP_BTN')" onclick="javascript:ExpandCollaps('mtcForgotPassword');"/>
</p>

</form>

</fieldset>

</div>

<div style="display: none;" id="mtcForgotPassword" name="mtc_forgotpassword" class="trans60">
<form name="form_authent_failed" action="http://www.index.php" method="post">
<div class="bulle" >
<blockquote>
<cite>
<img src="Include/bt_exit.gif" name="CLOSE_HELP_BTN" id="mtcBtnForgotPassword" alt="Fermer" onMouseover="commuteImg('Include/bt_exit.gif','Include/bt_exit_2.gif','CLOSE_HELP_BTN')" onMouseOut="commuteImg('Include/bt_exit_2.gif','Include/bt_exit.gif','CLOSE_HELP_BTN')" onclick="javascript:ExpandCollaps('mtcForgotPassword');"/>
</cite>

<p>Vous avez oublié votre pseudo et/ou votre mot de passe ?<br />Indiquez nous l'adresse email que vous avez déclarée lors de l'inscription et vous recevrez vos codes d'accès.<br /></p>

<input type="text" name="prof_email" id="prof_email" value="Votre email" maxlength="50" onFocus="this.value=''" />

<img src="Include/bt_ok.gif" name="VALID2_BTN" id="mtcBtnForgotPassword" onclick="javascript:document.form_authent_failed.submit();" alt="Valider" onMouseover="commuteImg('Include/bt_ok.gif','Include/bt_ok_2.gif','VALID2_BTN')" onMouseOut="commuteImg('Include/bt_ok_2.gif','Include/bt_ok.gif','VALID2_BTN')"/>
<p><br /></p>
</blockquote>
</div>
</form>
</div>

<div id="Footer">
</div>

</body>
</html>

et mon fichier CSS :

#Header
{
width: 1024px;
height: 120px;
background-image: url("Include/header.png");
background-repeat: no-repeat;
margin-bottom: 10px;
}

#MembersSection
{
float: right;
width: 135px;
}

#mtcForgotPassword
{
margin-top: 100px;
float: right;
width: 350px;
}

#prof_email
{
width: 280px;
}

legend
{
font-family: Arial, "Arial Black", Georgia, "Times New Roman", Times, serif;
font-size: 14px;
color: white;
font-weight: bold;
}

fieldset
{
height: 65px;
width: 390px;
}

input
{
margin-left: 10px;
}

body
{
width: 760px;
margin: auto;
margin-top: 20px;
margin-bottom: 20px;
background-image: url("Include/fond2.gif");
}

a img
{
border: none;
}

.trans60
{
filter: alpha(opacity=60);
-moz-opacity: 0.6;
-khtml-opacity: 0.6;
opacity: 0.6;
}

div.bulle
{
width: auto;
font-size: 0.75em;
margin-bottom: 24px;
}

div.bulle blockquote
{
margin: 0px;
padding: 0px;
border: 1px solid #c9c2c1;
background-color: #fff;
}

div.bulle blockquote p
{
font-family: Arial, "Arial Black", Georgia, "Times New Roman", Times, serif;
font-size: 11px;
margin: 10px;
padding: 0px;
}

div.bulle cite
{
position: relative;
margin: 0px;
padding: 7px 0px 0px 15px;
top: 0px;
left: 300px;
background: transparent url("FlecheBulle.gif") no-repeat 20px 0;
font-style: normal;
}

div.bulle input,img
{
position: relative;
}

**Erwan31** · 13/02/2009, 17h55

Envoyé par Kenshin86

Essayes les attributs "top" et "right"
et rajoutes : position:absolute

Un peu vite dit, tout dépend du contexte.

Plastic1st, pourrais tu fournir une page en ligne ou alors la totalité des codes XHTML/CSS.

Invité · 13/02/2009, 18h01

Envoyé par Kenshin86

Essayes les attributs "top" et "right"

et rajoutes : position:absolute

Oui, j'ai essayé (et ça marche, bien sûr !). Merci pour ta reponse super rapide !!!
Par contre, le souci, c'est que j'utilise une autre classe sur ce div : il s'agit d'une bulle opaque qu apparait quand on clique sur un bouton, et a l'interieur de ma bulle, j'ai un input et une img. Le truc, c'est que mon input et mon img ne doivent pas etre opaques, alors que le div, lui, oui.
Quand j'utilise "position:absolute", l'input et l'img deviennent opaques, ce que je ne m'explique pas...
As-tu une solution ?

**Kenshin86** · 13/02/2009, 18h15

Tu ne veut pas décaller cette div un peu plus sur la droite ?

Invité · 14/02/2009, 13h05

Envoyé par Kenshin86

Tu ne veut pas décaller cette div un peu plus sur la droite ?

C'est bien là tout mon problème

Je voudrais aligner ma div sur la droite !

**desert** · 14/02/2009, 15h25

Plusieurs problèmes :

- Tu as ton div MembersSection avec une largeur de 135px et à l'intérieur un fieldset qui lui possède une largeur de 390px.
- Dans ce même div, tu as des input qui n'ont aucune largeur spécifiée donc ils en prennent une par défaut. Et comme tu n'as que 135px de largeur dans ton div...
- Tu spécifies également ton body à 760px de largeur et à l'intérieur, il y a ton div Header avec une largeur de 1024px.

positionnement d'un div

Positionnement en CSS

Vue hybride

Discussions similaires

Partager

Partager