Sujet Précédent Sujet Suivant

Probleme de css ! help please

Résolu/Fermé
isis59 - 8 oct. 2007 à 23:03
 isis59 - 11 oct. 2007 à 19:03
Bonjour,

voila, j'ai ma page qui est divisée en 4 acadres, et le cadre col-right s'est retrouvé en dessous de col-left au lieu d'en etre a la droite ! es ce que quelqu'un reussirais a me dire d'ou viens le probleme?? merci

voila mon script :

<body bgcolor="#FF0000" background="http://cfw.webou.net/brnbck72.gif" onload="namosw_init_menu();" onresize="namosw_ns_resize();">
<div id="content">
<div class="header">
<center>
<h1>
<a href="http://cfw.webou.net/"><font face="Gargoyles Normal" size="7" color="#FFF300">
<i>Bienvenue sur le site de la CFW</i></font></a>
</h1>
</center>
</div>
<div class="col-left">
<p align="center">
<img src="http://cfw.webou.net/combat.gif" border="0" width="240" height="93" />
</p>
<p>

</p>
<p>
<font color="red"> </font>
</p>
<div id="layer1" style="width:198px; height:61px; position:absolute; left:17px; top:248px; z-index:1;">
<p>

</p>
</div>
<p align="center">
<font face="Gargoyles Normal" color="red"><span style="font-size:36pt;">
</span></font>
</p>
<div id="layer2" style="width:198px; height:60px; position:absolute; left:18px; top:145px; z-index:1;">
<p align="center">
<font color="blue"> </font>
</p>
</div>
<div id="layer3" style="width:198px; height:189px; position:absolute; left:16px; top:360px; z-index:1;">
<p>

</p>
<p>

</p>
</div>
</div>
<p>

</p>
<p>
<font face="Gargoyles Normal" color="red"><span style="font-size:36pt;">
</span></font>
</p>
<p>

</p>
</div>
<div class="col-right">
<p align="center">

<font color="#FFFFCC" face="Chiller" size="7"><i><b><img src="https://i19.servimg.com/u/f19/11/21/74/33/12345611.jpg" border="0" /></b></i></font>
</p>
<p>

</p>
<p>

</p>
<p>

</p>
<p>

</p>
<div id="layer5" style="width:607px; height:438px; position:absolute; left:232px; top:66px; z-index:1;">
<p align="center">
<span style="COLOR: rgb(158,193,255)"><font color="#0066FF" size="4">
Vous voulez integrer la cfw?</font></span>
</p>
<p align="center">
<span style="COLOR: rgb(158,193,255)"><font color="#0066FF" size="4">
merci de nous laisser un petit message sur</font></span>
</p>
<p align="center">
<span style="COLOR: rgb(158,193,255)"><font color="#0066FF" size="4">
</font>
<a href="javascript:na_open_window('le_forum_de_la_cfw', 'http://forumcfw.forumactif.com', 0, 0, 800, 600, 0, 1, 0, 0, 1)" target="_self">
<i><u><font color="red" size="4">le
forum</font></u></i></a>
<font color="white" size="4">ET</font>
<font color="#0066FF" size="4">d'envoyer un message a
zentrix59</font></span>
</p>
<p align="center">
<span style="COLOR: rgb(158,193,255)"><font color="#0066FF" size="4">
en precisant votre nombre de point,</font></span>
</p>
<p align="center">
<span style="COLOR: rgb(158,193,255)"><font color="#0066FF" size="4">
votre type de jeu (mineur ou raideur)</font></span>
</p>
<p align="center">
<span style="COLOR: rgb(158,193,255)"><font color="#0066FF" size="4">
apres vous etre enregistré!</font></span>
</p>
<p align="center">
<span style="COLOR: rgb(158,193,255)"><br />
<font color="#0066FF" size="5">A BIENTOT !!</font></span>
</p>
</div>
</div>
<div>
<br />

<p>

</p>
<br />
</div>
<div class="footer">
<p>
<font color="white" face="Blackadder ITC" size="7"> </font>
<a href="javascript:na_open_window('le_forum_de_la_cfw', 'http://forumcfw.forumactif.com', 0, 0, 800, 600, 0, 1, 0, 0, 1)" target="_self">
<font color="#FFFFCC" face="Chiller" size="7"><i><b>Le
forum</b></i></font></a>
</p>
<p align="center">

</p>
</div>
</body>
</html>

merci d'avance ! ^^
A voir également:

27 réponses

  • 1
  • 2
Réponse 1 / 27
isis59
11 oct. 2007 à 06:20
gihef, lorsqu'on fait une citation, je peux comprendre que tu ne la mettes pas entière, mais tu serait prié d'y inserer la partie a laquelle on s'interesse :

"sinon, merci pour le script modifié" ! et oui, il faut lire !

Apres, ton petage de plomb, bin je trouve ça malheureux de se trouver sur un forum d'entraide, sans avoir la patience de comprendre le probleme des personnes qui s'y trouvent.{j'en passe pasqu' il y aurait trop de choses a dire et je ne suis pas la pour ça!}
pour la mise en forme de mon CODE :D, je ne peux pas modifier alors une fois que c'est envoyé, ça reste comme ça! depuis ta remarque, j'ai bien l'intention de le faire ton simple clic, il faut juste que j'en aie l'occasion !! pour en revenir au "il faut lire" , ta remarque :

“je demande [pas] que vous me fassiez le code”.si tu me relis bien, j'ai bien inscrit "je NE demande que vous me fassiez le code" ! j'aurais pu passer la nuit a te prouver que tes "arguments" (si l'on peut considerer cela comme tels ) ne sont que foutaises, mais franchement, j'ai pas envie de m'amuser.Je suis ici pour chercher des reponses et non pour me faire insulter (et toi qui ose faire reference a la charte ^^ c'est l'hopital qui se fou de la charité !! ). Puisque, apparemment, vou etes les 2 seuls a survoler ce sujet et que vous etes legerement macho sur les bords, voir sexistes, disons que je ne vais pas rentrer dans votre jeu et j'en resterais là !
1
Réponse 2 / 27
s.spark Messages postés 2485 Date d'inscription vendredi 29 octobre 2004 Statut Contributeur Dernière intervention 13 février 2018 618
8 oct. 2007 à 23:28
Salut,

Un lien ou un code avec l'indentation (dans la balise code donc) c'est quand même mieux pour lire ...

C'est quoi col-left ? Ca serait pas plus pratique avec un position absolute avec left: 0 pour ton div de gauche et right: 0 avec ton div de droite ?

Enfin j'ai du mal à imaginer ce que ton code fait.
0
Réponse 3 / 27
isis59
9 oct. 2007 à 06:30
mdr il est pourtant tres basique. ^^ voila le lien : http://cfw.webou.net/avec_css/index.htm

comme tu peux le voir l'encadré vert (appelé col right) devrait se trouver a droite mais je ne comprend pas pourquoi et il passsé en dessous ! snif
0
Réponse 4 / 27
spidag
9 oct. 2007 à 07:36
Bonjour,
.col-right {position:relative; float:right; width:800px; height:434px; border:solid 1px #00ff00;}

Déjà, puis corrige les erreurs html de ton code.
Mon navigateur en detecte 14.
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 27
isis59
9 oct. 2007 à 19:15
quelle erreur?? car quand je lance une verif, j'ai ce mess :

"Aucune avertissement ou erreur detecté" et le fait de mettre float right ne resoud pas le probleme !! car je n'ai pas touché a ça ! ça a toujours été comme ca, et avant que j'ajoute le defilement du texte, qui d'ailleur ne defile plus mdr, le cadre vert été au bon endroit !

avec float right, il se decale vers la droite mais il n'est toujours pas bien mis ! ^^
0
Réponse 6 / 27
ilan27 Messages postés 394 Date d'inscription mardi 25 septembre 2007 Statut Membre Dernière intervention 15 juin 2009 36
9 oct. 2007 à 19:28
Bonjour, après lecture attentive de ton code en haut, je peux me tromper mais entre le layer 3 et <div id="col-right"...>, tu as 3 fois </div>... Essaye de n'en mettre que deux, en enlevant un des deux consécutifs.
0
Réponse 7 / 27
isis59
9 oct. 2007 à 21:14
j'ai fait quelques modif mais c'est pas encore ça ! snif
0
Réponse 8 / 27
ilan27 Messages postés 394 Date d'inscription mardi 25 septembre 2007 Statut Membre Dernière intervention 15 juin 2009 36
9 oct. 2007 à 21:53
Euh... peut-etre qu'il faut voir le code css auxquels tous les id font référence...
Et c'est quoi cette histoire de défilement?
0
Réponse 9 / 27
isis59
9 oct. 2007 à 22:20
bin normalement, le texte défile de bas en haut. et le css, c'est simple de l'avoir ! il suffit d'ouvrir le lien que j'ai donné, et de faire clic droit, code source de la page et on obtiens :

<style>
#content{position:relative; float:left; width:1100px; border:solid 1px #0000ff;}
.header {position:relative; float:left; width:1100px; border:solid 1px #000000;}
.col-left {position:relative; float:left; width:245px; border:solid 1px #ff0000;}
.col-right {position:relative; float:left; width:800px; height:434px; border:solid 1px #00ff00;}
.footer {position:relative; float:left; width:1100px; border:solid 1px #aaaaaa;}
</style>
0
Réponse 10 / 27
s.spark Messages postés 2485 Date d'inscription vendredi 29 octobre 2004 Statut Contributeur Dernière intervention 13 février 2018 618
9 oct. 2007 à 23:00
Il y beaucoup de chose inutile

Commence par mettre des id ou il faut des id et des class là ou il faut des class

Tu as mis dans ton header: 
<div class="header">
<center>
...
</center>
</div>


C'est inutile il te faut mettre : 

<div id="header">
...
</div>


#header {text-align:center; width:100%; border:solid 1px #000;}


Ensuite ton conteneur "content" ne doit pas contenir le header.

Toute cette portion de code est inutile : 

            <p>
               &nbsp;
            </p>
            <p>

               <font color="red">&nbsp;</font>
            </p>
            <div id="layer1" style="width:198px; height:61px; position:absolute; left:17px; top:248px; z-index:1;">
               <p>
                  &nbsp;
               </p>
            </div>
            <p align="center">
               
               <font face="Gargoyles Normal" color="red"><span style="font-size:36pt;">&nbsp;</span></font>

            </p>
            <div id="layer2" style="width:198px; height:60px; position:absolute; left:18px; top:145px; z-index:1;">
               <p align="center">
                  <font color="blue">&nbsp;</font>
               </p>
            </div>
            <div id="layer3" style="width:198px; height:189px; position:absolute; left:16px; top:360px; z-index:1;">
               <p>
                  &nbsp;

               </p>
               <p>
                  &nbsp;
               </p>
            </div>


Ensuite pareil avec ce morceau là : 

         <p>
            &nbsp;
         </p>

         <p>
            
            <font face="Gargoyles Normal" color="red"><span style="font-size:36pt;">&nbsp;</span></font>
         </p>
         <p>
            &nbsp;
         </p>



Enfin je vais arrêté là a ce rythme on ne garde rien.

Je te conseil de te mettre au codage web sans utiliser d'éditeur qui génère le code, c'est très caca.

Voilà des mise en page structuré :
http://css.alsacreations.com/Modeles-de-mise-en-page-en-CSS

Et un site indispensable :
https://openclassrooms.com/fr/
0
Réponse 11 / 27
Gihef Messages postés 5150 Date d'inscription mercredi 20 juillet 2005 Statut Contributeur Dernière intervention 20 février 2023 2 776
9 oct. 2007 à 23:52
Bonjour,

Je vais en rajouter une couche.

Mais avant un rappel : utilise ce bouton pour présenter ton code ici.
Ou, mieux, donne directement l'adresse de la page qui pose problème.
Ça rentre ? (-;

Tu n'utilises pas de cadres.
Cadre est la traduction de frame. C'est quelque chose de précis.
Dans ton cas, on parle plutôt de blocs.

Utilise un DOCTYPE correct.

Mets des commentaires <!-- --> dans tes pages. Ils t'aideront à t'y retrouver.

Et, en effet, le code de la page c'est un peu n'importe quoi.
Mélange de feuille de styles, de styles dans les balises, de mise en forme HTML.
Comment veux-tu qu'on s'y retrouve ?
Sois un peu plus stricte avec ton éditeur, contrains-le à t'obliger à créer des styles.
Et donne des noms clairs à tes styles.

Il n'y a pas que le CSS qui te pose problème.
Si tu places des “choses inutiles” (voir s.spark et “<SPAN style="COLOR: rgb(158,193,255)"><font color="#0066FF" size="4">” qui se répètent et se contredisent) un peu n'importe où, elles influent sur le contenu.
Par exemple, les <p> en dehors de tes <div> les repoussent.

Essaye des margin (pas en cm) plutôt que des espaces pour… espacer.

Le texte est dans le layer5, pas dans col-right.

Quant à tes styles, ne choisis le float qu'en connaissance de causes. Ne le pose pas au petit bonheur…
Et, après du float, du clear.
Les polices que tu utilises, je ne les connais même pas, je ne les vois pas. Fais autrement.

Le header peut avoir sa place dans le content.

Alors, essaye ça (j'ai viré les scripts) :
<?xml version="1.0" encoding="ISO-8859-15"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  <title>Document sans nom.  On peut trouver autre chose.</title>
<style type="text/css"> /* le type est obligatoire */
#content {
  position:relative;
  width:1100px;
  border:solid 1px #00f;
  }
.header {
  width:1100px;
  border:solid 1px #000;
  }
.col-left {
  float:left;
  width:245px;
  border:solid 1px #f00;
  }
.col-right {
  float:left;
  width:800px;
  height:434px;
  border:solid 1px #0f0;
  }
.footer {
  clear : left;
  width:1100px;
  border:solid 1px #aaa;
  }
</style>
    <meta name="generator" content="Namo WebEditor v5.0" />
</head>
  <body bgcolor="#FF0000" background="http://cfw.webou.net/brnbck72.gif" onload="namosw_init_menu();" onresize="namosw_ns_resize();">
<!-- content -->
    <div id="content">
<!-- header -->
      <div class="header">
        <center>
          <h1>
            <a href="http://cfw.webou.net/"><font face="Gargoyles Normal" size="7" color="#fff300"><i>Bienvenue sur le site de la CFW</i></font></a>
          </h1>
        </center>
      </div>
<!-- fin de header -->
<!-- col-left -->
      <div class="col-left">
        <p align="center">
          <img src="http://cfw.webou.net/combat.gif" border="0" width="240" height="93" />
        </p>
        <div id="layer1" style="width:198px; height:61px; position:absolute; left:17px; top:248px; z-index:1; border : 1px dashed #fff; color : #fff;">
          layer1
        </div>
        <div id="layer2" style="width:198px; height:60px; position:absolute; left:18px; top:145px; z-index:1; border : 1px dashed #fff; color : #fff;">
          layer2
        </div>
        <div id="layer3" style="width:198px; height:189px; position:absolute; left:16px; top:360px; z-index:1; border : 1px dashed #fff; color : #fff;">
          layer3
        </div>
      </div>
<!-- fin de col-left -->



<!--    </div>
     fin de quoi ?
     De content !   -->




<!-- col-right -->
    <div class="col-right">
      <p align="center">
        &nbsp;
        <font color="#FFFFCC" face="Chiller" size="7"><i><b><img src="https://i19.servimg.com/u/f19/11/21/74/33/12345611.jpg" border="0" /></b></i></font>
      </p>
      </p>
      <div id="layer5" style="width:607px; height:438px; position:absolute; left:232px; top:66px; z-index:1; border : 1px dashed #fff; color : #fff;">
      layer5
        <p align="center">
          <SPAN style="COLOR: rgb(158,193,255)"><font color="#0066FF" size="4">Vous voulez integrer la cfw?</font></SPAN>
        </p>
        <p align="center">
          <SPAN style="COLOR: rgb(158,193,255)"><font color="#0066FF" size="4">merci de nous laisser un petit message sur</font></SPAN>
        </p>
        <p align="center">
          <SPAN style="COLOR: rgb(158,193,255)"><font color="#0066FF" size="4">&nbsp;</font>
          <a href="javascript:na_open_window('le_forum_de_la_cfw', 'http://forumcfw.forumactif.com', 0, 0, 800, 600, 0, 1, 0, 0, 1)" target="_self"><i><u><font color="red" size="4">le
          forum</font></u></i></a>
          <font color="white" size="4">ET</font>
          <font color="#0066FF" size="4">d'envoyer un message a
          zentrix59</font></SPAN>
        </p>
        <p align="center">
          <SPAN style="COLOR: rgb(158,193,255)"><font color="#0066FF" size="4">en precisant&nbsp;votre nombre de point,</font></SPAN>
        </p>
        <p align="center">
          <SPAN style="COLOR: rgb(158,193,255)"><font color="#0066FF" size="4">votre type de jeu (mineur ou raideur)</font></SPAN>
        </p>
        <p align="center">
          <SPAN style="COLOR: rgb(158,193,255)"><font color="#0066FF" size="4">apres vous etre enregistré!</font></SPAN>
        </p>
        <p align="center">
          <span style="COLOR: rgb(158,193,255)"><br />
           <font color="#0066FF" size="5">A BIENTOT !!</font></SPAN>
        </p>
      </div>
    </div>
<!-- fin de col-right -->
<!-- footer -->
    <div class="footer">
      <p>
        <font color="white" face="Blackadder ITC" size="7">        
        <a href="javascript:na_open_window('le_forum_de_la_cfw', 'http://forumcfw.forumactif.com', 0, 0, 800, 600, 0, 1, 0, 0, 1)" target="_self"><font color="#FFFFCC" face="Chiller" size="7"><i><b>Le
        forum</b></i></font></a>
      </p>
    </div>
<!-- fin de footer -->


<!-- pas de fin de content alors j'ajoute -->
  </div>


  </body>
</html>
C'est compliqué, hein ? (-;


++
spidag devrait trouver moins d'erreurs (-;
“Aidez-moi” on comprend aussi (-;

--
0
Réponse 12 / 27
isis59
10 oct. 2007 à 06:52
lol t'aime bien faire le malin toi ! ptdr ! sache qu'ily aura toujours quelqu'un de meilleur que toi quelque part !! ensuite, si tu veux t'amuser a chercher la ptite bete, tes "émo" se lisent (normalement, é oui moi francais ! ) de gauche a droite et non le contraire donc;-) serait plus aprecié !
ensuite, j'ai utilisé un exemple http://tomleskeud.free.fr/test_css01.html je n'ai fait que remplacé ses textes par les miens rien de plus !
Sa mise en page et son code etant bons, alors le mien (en tout cas le css ! ) l'est aussi !! sinon, merci pour le script modifié mais bon j'aurais preferé le faire seul ! je pense que c'est ce que je vais faire ! ^^ et si je n'y arrive pas, j'utiliserai ta page que je modifirai !

et je ne repondrai pas a s.spark car je vois qu'il s'amuse a jouer sur la mise a forme du script...! bon merci a tous ! ^^ et, au passage, est ce qu'il est possible de faire pour que le col-left reste fixé au fond et que lorsqu'on clique sur un lien du col-left, il s'ouvre dans col-right ? ceci sans utiliser les frames?? ou frames obligatoires?
0
Gihef Messages postés 5150 Date d'inscription mercredi 20 juillet 2005 Statut Contributeur Dernière intervention 20 février 2023 2 776
10 oct. 2007 à 15:09
smiley
--
0
Réponse 13 / 27
isis59
10 oct. 2007 à 14:18
ya pas mal de monde en ce moment chez les webmasters ! mais bon, ya de tout et du n'importe quoi ! ^^

up svp
0
Réponse 14 / 27
warlix Messages postés 1201 Date d'inscription mercredi 25 juillet 2007 Statut Contributeur Dernière intervention 21 février 2009 288
10 oct. 2007 à 15:16
salut

il y a surtout des gens qui t apportent leurs experiences et une aide précieuse :) (:
le" tout" est une bonne chose , le" n importequoi" n est que l interpretation que tu en fais.

J ai regardé aussi ton code , et quand bien même si à ce niveau je n arrive pas à la cheville de ghief

Je lui trouve trop de défauts , maitenant s il marche chez celui à qui tu la piqué , tant mieux le pb ne viens donc pas du code reécupéré , mais du code travaillé....

Pourquoi faire simple lorsque c est meux quand c est compliqué , j avoue..

0
isis59
10 oct. 2007 à 16:36
euh.........intérêt du message?? j'ai un problème à résoudre alors le flood évite merci !! quand j'aurais envie de m'amuser avec toi, je te ferai signe !( main n'y compte pas trop ! ^^ )
0
Réponse 15 / 27
warlix Messages postés 1201 Date d'inscription mercredi 25 juillet 2007 Statut Contributeur Dernière intervention 21 février 2009 288
10 oct. 2007 à 16:48
l interet c est d expliquer , mais je vois que ton seul souci c est de chercher d autres gens pour t amuser , alors que ceux qui passent ici tente de t aider.

Amuses toi bien quand même , et tu peux me faire signe quand tu à pris le temps de réflechir et comprendre , j ai le temps moi de mon coté pas de soucis .

Have fun
0
Réponse 16 / 27
isis59
10 oct. 2007 à 18:45
enfin bref, ça ne repond pas a ma question ! ^^
0
Réponse 17 / 27
s.spark Messages postés 2485 Date d'inscription vendredi 29 octobre 2004 Statut Contributeur Dernière intervention 13 février 2018 618
10 oct. 2007 à 21:54
Apparemment tu ne comprends pas alors je vais faire simple, ton code est crade, super faut, c'est de la soupe, enfin tu choisie le terme que tu préfère, on ne va donc pas s'amuser à débuguer cette "chose" qui sert code.

Je t'ai donné des liens très utilises, maintenant si t'en rien à faire et que tu veux qu'on apporte la cuillère à la bouche comme un bébé bonne chance pour trouver cette personne ...
0
Réponse 18 / 27
isis59
10 oct. 2007 à 22:31
lol tu n'as pas l'air de comprendre ce que je veux !! a aucun moment, je ne demande que vous me fassiez le code ( et j'ai meme dit a ghief, apres l'avoir remiercié, que j'essayerai de le faire par moi meme) je voulais juste savoir s'il est possible de garder le meme systeme ( c'est a dire le menu fixe a gauche et chaque lien du menu s'ouvrant dans la partir de droite) en utilisant les blocs de css et non les frames. t'enerve pas ! ^^
0
Réponse 19 / 27
s.spark Messages postés 2485 Date d'inscription vendredi 29 octobre 2004 Statut Contributeur Dernière intervention 13 février 2018 618
10 oct. 2007 à 22:34
Si tu a regardé mon 1er lien tu as ta réponse.
0
Réponse 20 / 27
isis59
10 oct. 2007 à 22:49
je ne comprends pas désolé ! ne t'inquiete pas, ton lien je l'ai visité puisque j'ai refait ma page en utilisant ces modèles mais ce lien ne parle que des positionnement des blocs ! quel rapport avec ma question?
0

Discussions similaires

trait horizontal avec du css
tipi75 -
tipi75 -

8 réponses
Enlever le soulignement sous les liens en HTML/CSS
baissaoui -
baissaoui -

0 réponse
[CSS] Forcé retour à la ligne
aKuma59 -
zigoss -

33 réponses
HTML - définir taille bouton
Diva -
Utilisateur anonyme -

14 réponses
CSS/Comment enlever couleur liens ?
alexou1984 -
Tonio -

6 réponses