mauvais affichage

Sujet résolu

30 avril 2006 à 23:37:04

Bonjour ou bonsoir

j'ai un problème au niveau de mon css surement car une image ne se met pas en palce correctement regardez par vous même : ==>

<==

voici les codes:

<!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>
<link rel="stylesheet" media="screen" type="text/css" title="desing-ftp" href="style/desing-ftp.css" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Site Gekido - Conseil des ombre -</title>
</head>
<body>
<img class="banniere" src="style/image/banniere.gif" alt="banniere" />
<img class="boutonforum" src="style/image/forumchaine2.gif" alt="forum" />
<img class="menu" src="style/image/menu.gif" alt="menu" />
<div class="Shoutbox">
<h4>Shoutbox</h4>
</div>
</body>
</html>

/* CSS Document */
*
{
margin: 0px; /*pour enlever les marges par défaut qui posent beaucoup de problème*/
padding: 0px;/*pour enlever les marges par défaut qui posent beaucoup de problème*/
}
body
{
margin: auto;
color: #FFFFFF;
background-color: #000000;
margin-top: 20px;
margin-bottom: 20px;
width: 1000px;
}
.boutonforum
{
display: inline;
width: 125px;
height: 100px;
}
.banniere
{
margin: auto;
width: 1000px;
height: 250px;
}
.Shoutbox
{
width: 150px;
height: 300px;
clear: both;
border: 3px outset white;
margin: 25px;
margin-left: 0px;
font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
text-align: center;
}
a:visited , a
{
text-decoration: none;
color: #ff0000;
}
.menu
{
color: #000000;
width: 150px;
height: 400px;
margin: 25px;
margin-left: 0px;
float: left;
}

Donc voilà mon problèmeen mon image Forum devrait se trouver a droite a coter du menu et le menu devrait remonter au nbiveau de l'image Forum.
Voilà j'espére que quelqu'un puisse m'aider. Merci d'avance

edit: j'ai changer ma question aprés avoir réparer l'ancienne erreure

Jashugal

1 mai 2006 à 3:37:27

Je ne sais pas du tout je ne suis pas codeur xhtml/css désolé.
Mais il est possible de faire comme ça au lieu de mettre l'image dans ton xhtml.

.banniere
{
background-image: url("style/image/banniere.gif"); /* On met l'image en fond (pour l'header seulement bien entendu) */
background-repeat: no-repeat; /* L'image ne se répettera pas */
width: 1000px;
height: 250px;
}

Et j'ai viré le margin: auto; car il est déjà dans le body

Si ce n'est pas bon faite le moi savoir je suis nul en css.

Taediosus

1 mai 2006 à 13:01:03

Un peu d'aide svp je suis complétement bloquer...

help

Torajio Bangani

1 mai 2006 à 16:37:03

.boutonforum
{
display: inline;
width: 125px;
height: 100px;
margin-left:160px; /*Il suffit de pousser le bouton sur la droite !*/
}

Voilà !!! C'est tout et c'est pas compliqué

Bilbou

1 mai 2006 à 17:19:43

Hello !

Je passe vite fait, je sais que je ne réponds pas à ta question, mais je trouve que ton code est étrange...

Tu devrais mettre tes images entre des balises de paragraphe <p>.
Et je pense que préciser des display: inline, sur des images dans ton CSS est inutile car les balises d'images sont déjà de type inline... Dites moi si je me trompe !

Bonne continuation !

EDIT : Pour ton problème, outre les choses que je t'ai proposé de changer, il suffirait de changer l'ordre des images du forum et du menu, dans le code XHTML, à mon avis ! En gros, écrit le lien vers l'image du menu avant celui vers l'image du forum !

Sans toucher au CSS. (à part le inline !

)

RE-EDIT : Une petite erreur à "ombres" dans le titre de ta page aussi !

Taediosus

1 mai 2006 à 17:35:37

Voilà j'ai fait les changement mit les img dans un <p></p>
et appliquer le margin-left:200px mais voilà j'ai mon image qui est décaler mais mon menu n'est pas remonter

Torajio Bangani

5 mai 2006 à 1:14:11

J'avais oublié !

Mettre le menu en float:left;