Prob dans mon CSS..

Moonboy · **Inscription:** Dim 16 Mar 2008 04:09

Coucou,

Je sais c'est étonnant.. mais le premier à demander de l'aide c'est moi :hs284:

Voilà, je suis entrain de refaire l'index du site en vachement plus joli.. et je n'arrive pas à passer un problème :hs289:

..

Après avoir voulu tester pour le 1ere fois une bannière ou un élément dépasse sur une zone transparente.. J'ai le fond de mon central qui s'affiche ( normal à première vue puisqu'il commence sur un plan sous la bannière.. )

Cependant quand j'ajoute un "margin de 10px" ça décale tout >.<

Voici le lien de la page de test : http://etk.design.free.fr/test/
( Regardez que au dessus de la bannière ! Lol ^^ Le reste des bug c'est normal car je fais suivant l'ordre dans le code source de mon CSS )

Le code est :

Code:

body { margin:0; font:12px Tahoma; color:black; background:url(../images/fond.png) 50% 0 #151921 repeat; } 
 
#ev_bg { background:url(../images/ev_fond.gif) repeat-y; width:1064px;  margin:0px auto; }
#everything { width:1000px; margin:10px 32px;  background:url(../images/parchment-light2.jpg); border:1px solid black; border-width:0px 1px; }

#header { height:162px; background:url(../images/header.png) right no-repeat; padding:0 20px; }
#header h1 { padding-top:115px; margin:0; color:white; }

#middle { clear:both; background:url(../images/border.jpg) repeat-x; padding:20px 10px; }   
   
   #left_column { width:195px; float:left; }
   .horizontal #left_column { width:auto; float:none; }
      #navigation a { background:url(../images/button1_bg.gif) no-repeat; width:170px; height:25px; display:block; padding-left:25px; margin:5px 0;
                  font-size:13px; color:white; text-decoration:none; line-height:25px;}
      #navigation a:hover { background-position:0 bottom;  }
      .horizontal #navigation a { float:left; } 
      #more_information { padding-top:15px;}
      
   #middle_column { float:left; width:50%; margin:0px 20px; }

Moonboy · **Inscription:** Dim 16 Mar 2008 04:09

C'est réglé ^^

J'ai comme on dirait.. triché :ugeek:

!

Au lieux de mettre la sélection dépassant dans une zone transparente, j'ai coupé le back-ground pour le mettre sur la bannière ( par effet d'optique on croit qu'on voit le fond.. mais non ^^ )

Pour voir il suffit de faire "afficher l'image sur la bannière =)

Andy.

milod

j'ai rien compris !!! mdrr

Moonboy · **Inscription:** Dim 16 Mar 2008 04:09

Regarde le resultat ! ( la banniere avec les objets qui depassent ^^ )

http://etk.design.free.fr/test/

J'avais fait en mettant en transparent en dessous.. mais comme un objet se plaçait et gâchait tout.. j'ai fait un screen et j'ai collé les ailes sur le fond en dure xD

Garwena · **Inscription:** Mer 19 Mar 2008 22:55

j'ai rien compris car je connais pas bien la programmation mais bon le résultat est super

Moonboy · **Inscription:** Dim 16 Mar 2008 04:09

^^ merci

Je vais poster les 2 images pour vous expliquer ^^ ( ce serait bête de rester sur un je comprends rien :s )

En tout cas vous n'êtes pas au bout de vos surprises.. car étant plus à l'aise niveau codage.. un amis qui au contraire est plus fort dans les constructions graphiques que le codage m'a proposé de faire un thème pour le site

A voir ce que ça donnera.. mais connaissant son style et quelques unes de ses créations.. je vous assure que ça ne pourra qu'être beau ^^

Andy.

Laenan · **Inscription:** Jeu 20 Mar 2008 17:43

Arf Le chinois n'est pas dans mes capacités Andy ^^

bon ce soir on s'attaque au bas ?

Moonboy · **Inscription:** Dim 16 Mar 2008 04:09

Laenan a écrit:

Arf Le chinois n'est pas dans mes capacités Andy ^^

bon ce soir on s'attaque au bas ?

Owi ! Les bas

Euh, le bas... ^^

Je posterais le tout ici, ce sera plus rapide pour les échange.. et ça donnera des réponses a ceux qui trouveront ce sujet sur les moteurs de recherche ^^

Moonboy · **Inscription:** Dim 16 Mar 2008 04:09

Voici l'index ( normalement pas grand chose a mettre sauf le span class et le lien des ajouts ) :

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<head>
<meta name="Title" content="Etk.design.free.fr">
<meta name="Keywords" content="ddl ; divx ; film ; musique ; ost ; bande ; son ; conseil ; aide ; devoir ; bricolage ; coeur ; amour ; sentiment ; séparation ; deprime ; design ; rencontre ; echange ; soutien ; creation graphique ; communauté ; confession ; intime">
<meta name="Description" content="Site publique qui a pour but de répondre à tout ce que les internautes peuvent chercher sur le net, du simple conseil à la répertoriation de liens de telechargement.">
<meta name="Author" content="Moonboy">
<meta name="Subject" content="Site communautaire d'echange de connaissances etc..">
<meta name="Language" content="FR">
<meta name="Robots" content="INDEX,FOLLOW">
<title>Etk.Design le site !</title>
<link href="css/style1.css" rel="stylesheet" type="text/css">
<!-- Eyes Change la ligne suivante en green.css, yellow.css, or red.css -->
<link href="css/blue_tex.css" rel="stylesheet" type="text/css">
<style type="text/css">
<!--
A { color:#0066CC; text-decoration:none; }
A:hover { color:#00CCCC;text-decoration:underline;}
-->
</style>
</head>

<body>
<div id="ev_bg"><div id="everything">

    <div id="header"></div>
    <div id="middle">
      <div id="left_column">
            <div id="navigation">
              <a href="http://etk.design.free.fr/">Index</a>
            <a href="http://etk.design.free.fr/forum/">Forum</a>
            <a href="http://andy1002.skyrock.com/">My blog</a>
            <a href="http://etk.design.free.fr/trombinoscope.html">Trombinoscope</a>
            <a href="http://etk.design.free.fr/#">Archives</a>
       <a href="http://etk.design.free.fr/annexe_01/index.html" onclick="window.open(this.href); return false;"><img style="border:0;" src="images/cadenas-gif-001.gif" width="10" height="10" alt="" title="Zone protegé par mot de passe" /> - Marmotte</a>
          </div>
          <div id="more_information">
            <div class="box">Sondage de la semaine : Rien</div>
          <div class="box">Liens :<br>- <a href="http://omega.ysondre.free.fr/">Guilde Omega-Ysondre</a><br>- <a href="http://omega.ysondre.free.fr/yakuza">Alliance Yakuza( skin test )</a></div>
     <div class="box">Remerciements à :<br><br>- <font color="#0066CC">Hikari</font> pour les nouveaux boutons ;)<br><br>- <font color="#FF66FF">Laenan</font> pour l'aide à la réalisation du "footer"</div>
        </div>
      </div>
        <div id="middle_column" class="two_column">
        <div class="date_break">Bienvenue sur Etk.design =°)</div>
<!--
//Debut post0
-->
          <div class="post">
            <h1>Mise a jour importante</h1>
            <div class="post_body">
                <p>Chers membres du forum,<br><br>Je tenais à vous informer de l'application d'un nouveau disclamer accessible via <a href="http://etk.design.free.fr/forum/viewtopic.php?f=9&t=88">ce lien !</a><br><br>Aussi, quelques modifications ont été faites :<br>- Le style du forum à subit un relooking ( à part la section vidéo ) <br>- La section vidéo ne comporte plu de mot de passe, il faudra poster un message pour voir apparaitre les liens de telechargement !<br>- Modification de certaines catégories non-utilisées..<br><br>Biensur vous pouvez vous tenir au courant des modifications sur <a href="http://etk.design.free.fr/forum/viewtopic.php?f=9&t=56">ce lien !</a><br><br>Bonne journée !</p>
            </div>
          <div class="postedby">Ecrit par: Andy</div><div class="timestamp">23:49 08 Avril 2008</div>
          </div>
<!--
//Debut Post1
-->
          <div class="post">
            <h1>Présentations</h1>
            <div class="post_body">
                <p>Bonjour à tous, et bienvenue sur ce nouveau site que je viens d'ouvrir.<br><br>
         Beaucoup d'entre vous me connaissent sûrement de par le temps que j'ai passé avec vous sur les MMO-RPG et serveur vocale "Teamspeak 2.0". Ayant récemment choisit d'utiliser mes compétences dans une activité qui me plaît de plus en plus, j'ai décidé de faire ce site officiel afin de créer un lieu de rencontre et de discussions entre personnes de tout genre.. Aussi, ce site avait au départ le but de répertorier les sites et forum ou la touche "Etk Design" s'est posée.<br><br>
         Le site comprendra aussi une section destiné à entreposer plusieurs idées de montages en tout genre que l'on postera sur le forum déjà opérationnel.<br><br>
         Bon divertissement : )</p>
            </div>
          <div class="postedby">Ecrit par: Andy</div><div class="timestamp">20:30 20 Mars 2008</div>
          </div>
<!--
//Fin post1
-->
          <div class="post">
            <h1>Le forum</h1>
            <div class="post_body"><p>Le forum est en ligne depuis le dimanche 16 Mars 2008.
      <p>L'ancien forum aussi a été deplacé vers ce nouveau site afin de corriger quelques erreurs agassantes et ainsi ne plus avoir autant d'erreurs à corriger sans arrêt par les administrateurs. Les principales fonctions sont à nouveau disponible, et pour chacune d'entre elle, un tutorial vidéo et un tutorial en image sera posté dans la catégorie adhéquate. Vous avez le droit et même que l'on vous y encourage fortement.. de proposer vos idées d'amélioration ou de modification de tout ce qui se trouve ici.. Une assistance sera disponible pour plus ou moins tout problèmes qu'un humain "normal" peut avoir. En cas de doute, essayez toujours.. cela ne coute rien : )<br><br>
         Cependant, n'abusez pas de l'aide aux devoirs sans avoir fait un réel effort au départ.. Car les administrateurs et les modérateurs pourraient mal le prendre en plus des utilisateurs..<br><br>
         Bonsoir.</p>
       </div>
          <div class="postedby">Ecrit par: Andy</div><div class="timestamp">22:00 20 Mars 2008</div>
          </div>
          <div class="post">
            <h1>Autre</h1>
            <div class="post_body"><p>Si vous avez quoi que ce soit a ajouter, faites le moi savoir.. Cependant n'oublier pas que ce lieu evolura en fonction de la quantité d'utilisateurs :D</p></div>
          <div class="postedby">Ecrit par: Andy</div><div class="timestamp">22:11 20 Mars 2008</div>
          </div>
        </div>
        
    </div>
   <div id="footer">
<center>
    <div id="subnav"><a href="http://etk.design.free.fr/">Index</a> | <a href="http://etk.design.free.fr/forum/">Forum</a> | <a href="http://andy1002.skyrock.com/">My blog</a> | <a href="http://etk.design.free.fr/trombinoscope.html">Trombinoscope</a> | <a href="http://etk.design.free.fr/#">Archives</a><br>

<!-- Histats.com  START  --> 
 <a href="http://www.histats.com" target="_blank" title="counter easy hit" > 
 <script  type="text/javascript" language="javascript"> 
  
 var s_sid = 300926;var st_dominio = 4; 
 var cimg = 205;var cwi =255;var che =27; 
 </script> 
 <script  type="text/javascript" language="javascript" src="http://s11.histats.com/js9.js"></script> 
 </a> 
 <noscript><a href="http://www.histats.com" target="_blank"> 
 <img  src="http://s103.histats.com/stats/0.gif?300926&1" alt="counter easy hit" border="0"></a> 
 </noscript> 
  
<!-- Histats.com  END  --> 

</div>
    <span class="copyright">Etk Design&reg; et Eyes to kill&reg; sont des marques et pseudo commerciales ou des marques déposées de Etk Design en France et/ou dans d'autres pays. <br> Ces termes et tous les matériaux, logos et images liés sont copyright &copy; Etk Design. Ce site est associé et approuvé par Etk Design&reg;.</span></center></div>
    
</div> </div>

</body>
</html>

Et voici le CSS ! la fin est a modifier je pense ^^

Code:

/* Stylesheet 1 -------------------------------*/

body { margin:0; font:12px Tahoma; color:lightgrey ; background:url(../images/fond.png) 50% 0 #151921 repeat; } 
 
#ev_bg { background:url(../images/ev_fond.gif) repeat-y; width:1064px;  margin:0px auto; }
#everything { width:1000px; margin:0px 32px;  background:url(../images/parchment-light2.jpg) ; border:1px solid black; border-width:0px 0px; }

#header { height:162px; background:url(../images/header.png) right no-repeat; padding:0 20px; }
#header h1 { padding-top:115px; margin:0; color:grey; }

#middle { clear:both; background:url(../images/border.jpg) repeat-x; padding:20px 10px; }   
   
   #left_column { width:195px; float:left; }
   .horizontal #left_column { width:auto; float:none; }
      #navigation a { background:url(../images/button1_bg.gif) no-repeat; width:170px; height:25px; display:block; padding-left:25px; margin:5px 0;
                  font-size:13px; color:white; text-decoration:none; line-height:25px;}
      #navigation a:hover { background-position:0 bottom;  }
      .horizontal #navigation a { float:left; } 
      #more_information { padding-top:15px;}
      
   #middle_column { float:left; width:50%; margin:0px 20px; }
   #middle_column.two_column { float:left; width:75%; } 
   .horizontal #middle_column { width:auto; float:none; }
      .date_break { font-size:19px; border-bottom:1px solid #7A0C0C; margin-bottom:10px; }
      .post { background:url(../images/parchment-light3.jpg); border:1px solid #545454; margin-bottom:35px; line-height:18px; } 
      .post h1 { background:url(../images/title_bg1.gif) repeat-x #0d2368; padding:2px 25px; margin:0; font-size:15px; color:lightblue;} 
      .post_body { padding:5px 15px; }
      .post .postedby { float:left; clear:both; }
      .post .timestamp { float:right }

      ul { margin:20px; padding:10px; }
      li { list-style:none; background:url(../images/bullet.gif) 0 5px no-repeat;  padding-left:30px; line-height:25px;  }
      .list_left, .list_right { width:48%; float:left }

      .post_info { clear:both; padding-top:10px; }
   
   #right_column { width:26%; float:left; }
      .box { background:url(../images/parchment-light3.jpg); border:1px solid #545454; margin:10px 0 25px 0; padding:10px; }

#footer { clear:both; padding:20px }
   #subnav { margin:10px 0;}   
   #subnav a { color:#158dc5; }
   #subnav a:hover { color:darkgrey } 
   .copyright { font-size:10px;}
        .footer { height:43px; width:1000px; background:url(../images/footer.png) right no-repeat; padding:0 0px; margin:0px auto; }

Laenan · **Inscription:** Jeu 20 Mar 2008 17:43

Bon a part l'erreur H1 qu'il va falloir que tu me corrige juste après ton début de body ...lisons tout ça :p

j'éditerais au fur et a mesure :p

ya plein de trucs inutiles

bon edit à 1h21 histoire de voir notre avancée :p
le bas commence à s'afficher ^^ courage Andy...ça fait que trois heures que tu cherches :p

EDIT 1h42
Andy raconte n'importe quoi ... il me parle de trucs bizares :p

EDIT 1h48
Andy essaye de tricher mais il sait pas tricher :p
Allez encore un ptit effort !

EDIT 2h02
Andy essaye toujours de trouverune petite triche et moi je regarde cette jolie petite image déconner :p
Maintenant il insulte son CSS ^^

EDIT 2h09
A noter absolument, Andy a fait un truc tout horrible sur la page d'accueil ^^ c'est super marrant :p mais c'est pas du tout ce qu'il veut :p

EDIT 2h30
Andy vois des hallucinations et voit du jaune partout ( je vous assure il n'y a pas de jaune :p )

2h47
Panique à bord quand ce foutu footer refuse d'accepter de recevoir du texte :p à mort !

2h56
Je vais au lit pendant que Andy s'acharne sur son footer ^^ cest pas loin :p courage andy :p

Etk Design !

Prob dans mon CSS..

Qui est en ligne

Panel