Bonjour,
Je suis nouveau sur votre forum, meme si je viens souvent y chercher de l'aide.
A titre perso, pour éviter les post-it j'essaye de développer une espèce d'application php pour les gérer.
Un truc très simple à base de php, mysql et css.
Sur le fonctionnement, cela marche très bien, mais j'ai quelques problèmes sur le positionnement.
En effet, mes notes sont positionnées en 'inline-block', mais j'en ai toujours une décalée par rapport aux autres. Et je ne vois vraiment pas comment remédier à ce probleme. Cela fait plusieurs que je planche dessus et je ne comprends vraiment pas...
Voici un bout du code qui affiche la page :
J'ai inséré du CSS dans un de mes div car il son id est affiché automatiquement et je ne peux donc pas les inclures dans mon *.css
Et concernant mon fichier css, voici le code :
Je code vraiment en amateur, et je ne comprends pas d'où vient mon erreur, je vous joint une capture d'écran du problème pour que vous visualisiez :
[Edit Laurie-Anne : Image trop grande]
http://www.play-files.net/images/1266838419-Sans-titre.JPG
Merci d'avance de votre aide...
Modifié par Laurie-Anne (22 Feb 2010 - 12:38)
Je suis nouveau sur votre forum, meme si je viens souvent y chercher de l'aide.
A titre perso, pour éviter les post-it j'essaye de développer une espèce d'application php pour les gérer.
Un truc très simple à base de php, mysql et css.
Sur le fonctionnement, cela marche très bien, mais j'ai quelques problèmes sur le positionnement.
En effet, mes notes sont positionnées en 'inline-block', mais j'en ai toujours une décalée par rapport aux autres. Et je ne vois vraiment pas comment remédier à ce probleme. Cela fait plusieurs que je planche dessus et je ne comprends vraiment pas...
Voici un bout du code qui affiche la page :
<body>
<center><div id="logo"><a href="../index.php"><img src="../img/blank.png" border="0" id="link"/></a></div>
<center><h2> Notes </h2></center>
<div id="info">
<div id="centrage">
<div style="font-size:0.8em;" id="liens"><a href="note.php"> Ajouter une note</a> - <a href="archives.php">Afficher les archives</a></div>
<?php
$num = mysql_num_rows($req);
if($num == 0) {echo 'Aucune note actuellement'; }
else {
while($data = mysql_fetch_array($req))
{
$datesql = $data['datenote'];
$annee = substr($datesql, 0, 4);
$mois = substr($datesql, 5, 2);
$jour = substr($datesql, 8, 2);
$date = $jour.'/'.$mois.'/'.$annee;
echo '<div id="content_notes_'.$data['numeronote'].'" style="width:291px; height:291px; display:inline-block; margin-top:10px;">
<div class="notes">
<div class="content_notes">
<div class="vu" onclick="xajax_Masquer('.$data['numeronote'].')"> </div>
<span class="bold-underline"> Date :</span> '.$date.'<br/><br/>
<span class="contenu_note"><span class="bold-underline"> Message :</span><br/>'.$data['message'].'</span>
</div>
</div>
</div>';
}
}
?>
<div style="clear:both;"> </div>
</div>
</div> </center>
</body>J'ai inséré du CSS dans un de mes div car il son id est affiché automatiquement et je ne peux donc pas les inclures dans mon *.css
Et concernant mon fichier css, voici le code :
@charset "utf-8";
body {
font-family:arial;
margin:auto;
width:1000px;
background:#cdeffa url(../img/bg.jpg) repeat-x;
}
/*Aucune bordure sur les liens*/
a:focus, a:active {
outline: none;
}
h2 {color:#330099; margin-top:10px; margin-bottom:10px; text-decoration:underline;}
span.bold-underline {
text-decoration:underline;
font-weight:bold;
}
#logo {
height:142px;
width:100%;
background:url(../img/logo.png) no-repeat center;
margin-top:5px;
}
#info {
width:95%;
background-color:#FFFFFF;
margin-left:auto;
margin-right:auto;
margin-top:3%;
padding-top:10px;
-moz-border-radius:10px;
border: 1px solid #00b5ee;
}
#centrage {
margin:auto;
}
.notes {
width:291px;
height:291px;
background:url(../img/note.png) no-repeat center;
position:relative;
padding-top:1px;
}
.content_notes {
margin:15px;
text-align:justify;
}
.contenu_note {
margin:0;
padding:0;
display:inline;
}
.vu {
position:absolute;
top:13px;
right:10px;
width: 25px;
height: 25px;
background-image: url(../img/vu.png);
background-position:center;
border:none;
}
.vu:hover {
cursor:pointer;
}
#message {
border:2px solid #02b0e6;
margin-top:10px;
margin-bottom:5px;
width:50%;
-moz-border-radius:10px;
padding:5px 5px 5px 5px;
}
#envoyer {
margin-bottom:5px;
}
#liens a {
text-decoration:none;
padding:3px;
-moz-border-radius: 3px;
display:inline-block;
background-color: rgba(0,0,0,0.1);
font-weight:bold;
color:#039;
}
#liens a:hover {
text-decoration:none;
padding:3px;
-moz-border-radius: 3px;
display:inline-block;
background-color: rgba(0,0,0,0.5);
font-weight:bold;
color:#FFF;
}Je code vraiment en amateur, et je ne comprends pas d'où vient mon erreur, je vous joint une capture d'écran du problème pour que vous visualisiez :
[Edit Laurie-Anne : Image trop grande]
http://www.play-files.net/images/1266838419-Sans-titre.JPG
Merci d'avance de votre aide...
Modifié par Laurie-Anne (22 Feb 2010 - 12:38)
