2 petit bug de marge (je pense)

Sujet résolu

22 décembre 2005 à 19:29:29

Bonsoir!!
J'ai 2 petit bugs!

Voici la première :

Sur ma page de news, mon titre de news n'est pas collé en haut du cadre regardez :
http://bogdanov.free.fr/bug1.JPG

Voici une parti mon code html de ma page de news :

et voici le css :

#centre
{
float: left;
height: 950px;
width: 558px;
border: 2px solid black;
background-color: #191919;
background-repeat: no-repeat;
margin-left: 5px;
}

.news
{
font-size: 14px;
font-family: Arial;
overflow: auto;
}

h3
{
height: 26px;
width: 551px;
padding-left: 7px;
padding-top: 3px;
background-image: url("Images/barretitrenews.jpg");
background-repeat: no-repeat;
font-family: Arial;
color: white;
}

p
{
padding-left: 7px;
padding-right: 7px;
}

Le second bug, beaucoup plus minime, viens de la page "rediger une news"!
En fait la ou je tape mon texte, y a comme si y avait un mots invisible au début! Quand je clic dans le cadre du contenu, le curseur se mets automatiquement 8 caractère en décalage :
http://bogdanov.free.fr/bug2.JPG

voici mon code html de la page "rédiger une news" :

<!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>Rédiger une news</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
h3, form
{
text-align:center;
}
</style>
</head>

<body>

<h3><a href="list_news.php">Retour à la liste des news</a></h3>

<?php
mysql_connect("localhost", "root", "");
mysql_select_db("test");

if (isset($_GET['modifier_news']))
{
$retour = mysql_query('SELECT * FROM news WHERE id=' . $_GET['modifier_news']);
$donnees = mysql_fetch_array($retour);

$titre = $donnees['titre'];
$contenu = $donnees['contenu'];
$id_news = $donnees['id'];
}
else
{
$titre = '';
$contenu = '';
$id_news = 0;
}
?>

<form action="list_news.php" method="post">
<p>Titre : <input type="text" size="30" name="titre" value="<?php echo $titre; ?>" /></p>

<p>
Contenu :<br />
<textarea name="contenu" cols="50" rows="10">
<?php echo $contenu; ?>
</textarea><br />

<input type="hidden" name="id_news" value="<?php echo $id_news; ?>" />
<input type="submit" value="Envoyer" />
</p>
</form>

</body>
</html>

Voila, j'ai chercher longtemps, mais j'ai pas trouver les solutions! :/
Si quelqu'un peu m'aider svp...
thanks!!

Pandore

22 décembre 2005 à 19:39:34

Pour le décalage du titre "news", cela vient surement de la balise "h3" car les navigateurs utilisent des marges par défaut et comme tu n'as pas définit les marges, il applique celles par défaut. Elles sont en plus différentes d'un navigateur à un autre.

Rajoutes donc un margin:0px; au css de h3

yöm

22 décembre 2005 à 19:40:53

Donne nous le code XHTML plutôt que le PHP, c'est plus lisible dans les problèmes de design.

Sinon, je suis partisan de l'ajout d'un *{margin: 0; padding: 0;} au tout début de ton fichier, comme cela tu vérifie que le problème ne vient pas des marges que les navigateurs appliquent par défauts aux éléments.

Et fait sortir la zone de saissie de texte de tes paragraphes, il me semble que c'est incorrect.

atly

22 décembre 2005 à 19:44:18

Citation : yom

Et fait sortir la zone de saissie de texte de tes paragraphes, il me semble que c'est incorrect.

"Pensez à entourer votre balise <input /> par une balise block comme <p></p> car sinon votre page web ne sera pas valide (cela vous est expliqué dans l'annexe "Le W3C et les standards du web")."
Il ne me semble pas à moi.

Ton premier bug vient sûrement des h3. Par contre, si je compte bien, ça fait qu'un bug. Et l'autre ?

Pandore

22 décembre 2005 à 19:50:48

C'est tout à fait exact @lyric, il faut mettre une balise "p" dans la balise "input" lorsqu'il y a du texte sinon c'est pas valide

Tu devrais relire les cours de M@téo21 sur les formulaires yom

Anonyme

22 décembre 2005 à 19:54:34

Pour la page de news c'est parce que le textarea est placée avec une identation : ceci est mieux

yöm

22 décembre 2005 à 19:57:44

Oups, oubli du mot *multiligne* ... finalement j'en suis pas sûr et je n'ai pas trouvé ma solution, en tout cas ce qu'a fait Grichka n'a pas beaucoup de chances d'être faux.

Edtion suite aux moquerie nauséabondes abondantes : j'ai bien lu le cours de Matéo mais aucune instruction propre à textarea n'est donné. J'avais retenu que seul <input /> s'encadrait par des balises de paragraphe.

atly

22 décembre 2005 à 20:04:02

Oups, l'imbécile, j'ai pas lu le post de Grichka jusqu'à la fin... Désolé.
Comme l'a dit Arnaud, les 8 espaces de la textarea proviennent du fait qu'à cause de l'indentation que tu as faite entre les tags <textarea> en écrivant le code, il y a des espaces dans la zone de texte.
Et yom, je te conseilel fortement de relire les cours, et de vérifier ses sources avant de poster

Grichka

22 décembre 2005 à 20:24:17

Merci beaucoup, ca marche nikel!!!!

J'ai un autre souci (je dois les attirer >_<

)!
En fait quand je regarde mon site à partir de mon dd grace à easyphp, no souci y a rien qui cloche!
Mais je viens d'envoyer tous mon site sur mon ftp, et quand j'ouvre la page d'accueil il manque un bloc! Pourtant tous est pareil que sur mon dd et tout à été bien uploadé!
Voici ce que ca donne sur mon dd :
http://bogdanov.free.fr/bug3.jpg
et voila sur mon ftp :
http://bogdanov.free.fr/bug4.jpg

Vous voyez, il manque le bloc "sondage"!

voici le code html de la page d'accueil :

<!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>Bienvenue sur mon site !</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
   <link rel="stylesheet" media="screen" type="text/css" title="Design sombre" href="metalique.css" />
</head>
<body>

<div id="en_tete">
</div>

<div id="menu">
</div>

<div id="menu_gauche">

<div class="menu_ajouts">
</div>

<div class="menu_cds">
</div>

<div class="menu_concerts">
   </div>
</div>

<div id="centre">
<div class="corps">
</div>
</div>

<div id="menu_droit">

   <div class="menu_forum">
</div>

   <div class="menu_sondage">
   </div>

   <div class="menu_style">
   </div>

   <div class="menu_stat">
   </div>

</div>
</html>

et le .css :

body
{
width: 1000px;
height: 1210px;
margin: auto;
margin-top: 20px;
background-color: #151515;
background-image: url("Images/Fond.jpg");
background-repeat: no-repeat;
background-position: center;
}
a img
{
border: none;
}

#en_tete
{
width: 997px;
height: 168px;
margin-left: 2px;
margin-bottom: 5px;
background-image: url("Images/Header.jpg");
background-repeat: no-repeat;
background-position: center;
}

#menu
{
width: 997px;
height: 30px;
background-image: url("Images/Menu.jpg");
margin-bottom: 20px;
margin-left: 2px;
}

#menu_gauche
{
float: left;
width: 206px;
margin-left: 8px;
}

.menu_ajouts
{
width: 206px;
height: 392px;
margin-bottom: 8px;
background-image: url("Images/DerniersAjouts.jpg");
background-repeat: no-repeat;
}

.menu_cds
{
Width: 206;
height: 273px;
margin-bottom: 8px;
background-image: url("Images/SortisCDs.jpg");
background-repeat: no-repeat;
}

.menu_concerts
{
Width: 206px;
height: 273px;
background-image: url("Images/Concerts.jpg");
background-repeat: no-repeat;
}

#centre
{
float: left;
height: 950px;
width: 558px;
border: 2px solid black;
background-color: #191919;
background-repeat: no-repeat;
margin-left: 6px;
}

.news
{
font-size: 14px;
font-family: Arial;
overflow: auto;
}

h3
{
margin-top: 0px;
margin-left: 1px;
margin-right: 0px;
margin-bottom: 0px;
height: 26px;
width: 550px;
padding-left: 7px;
padding-top: 3px;
background-image: url("Images/barretitrenews.jpg");
background-repeat: no-repeat;
font-family: Arial;
color: white;
}

p
{
margin: 0px;
padding-left: 7px;
padding-right: 7px;
}

#menu_droite
{
float: left;
}

.menu_forum
{
width: 206;
height: 392px;
margin-bottom: 8px;
margin-right: 6px;
background-image: url("Images/DerniersMessagesForum.jpg");
background-repeat: no-repeat;
background-position: right;
}

.menu_sondage
{
width: 206;
height: 273px;
margin-bottom: 8px;
margin-right: 6px;
background-image: url("Images/Sondage.jpg");
background-repeat: no-repeat;
background-position: right;
}

.menu_style
{
width: 206;
height: 80px;
margin-bottom: 8px;
margin-right: 6px;
background-image: url("Images/ChangementdeStyle.jpg");
background-repeat: no-repeat;
background-position: right;
}

.menu_stat
{
width: 206;
height: 185px;
margin-bottom: 8px;
margin-right: 6px;
background-image: url("Images/Statistiques.jpg");
background-repeat: no-repeat;
background-position: right;
}

Voili voilou! :/

yöm

22 décembre 2005 à 20:30:44

Remarque HS : tu peux raccourcir la taille de ton fichier CSS, le rendre modifiable plus vite et plus lisible en regroupant des propriétés :

.menu_forum
{
height: 392px;
background-image: url("Images/DerniersMessagesForum.jpg");
}

.menu_sondage
{
height: 273px;
background-image: url("Images/Sondage.jpg");
}

.menu_style
{
height: 80px;
background-image: url("Images/ChangementdeStyle.jpg");
}

.menu_stat
{
height: 185px;
background-image: url("Images/Statistiques.jpg");
}

.menu_forum,
.menu_sondage,
.menu_style,
.menu_stat{
width: 206;
margin-bottom: 8px;
margin-right: 6px;
background-repeat: no-repeat;
background-position: right;
}

Grichka

22 décembre 2005 à 20:34:35

Ah oki j'y penserai!! merki!

Sinon quelqu'un à une solution pour mon nouveau problème (voir mon précédent message)?

Edit => C'est bon c'est réglé! c'était une histoire de majuscule du nom de l'image! (je pige pas comment la majuscule c'est transformé en minuscule vu que j'ai rien touché enfin bon...)!!

Merci à encore à vous tous!!!