Aide rajouter colonne kit graphique

rémoundo Messages postés 439 Date d'inscription   Statut Membre Dernière intervention   -  
rémoundo Messages postés 439 Date d'inscription   Statut Membre Dernière intervention   -
Bonjour,j'ai télécharger le kit graphique suivant : http://www.graphiques-kits.com/vibratorkits/ je voulait rajouter une colonne (en modifiant les image le style.css ...) j'ai réussi ...a moiter =s voila ce que j'ai réussi a faire jusque à présent : http://nintendow.u7n.org/sitewebdesign.png j'ai tout essayer (ou presque =P )je ne sais plus quoi faire ! pour plus de précision dites le moi

ps :si vous voulez faire sa en message privé il n'y a pas de problème ,ce serait même un avantage .

j'attends vos réponse avec impatience

et ... merci d'avance !

--
si vous avez remarque le signe XP désigne un smiley nous tirant la langue .....windows se foutrai ne notre gueule ?
Configuration: Windows XP
Firefox 3.5.3

5 réponses

  1. avion-f16 Messages postés 19182 Date d'inscription   Statut Contributeur Dernière intervention   4 511
     
    Tu as placé ta colonne après le contenu (je parle dans le HTML) : Tu dois d'abord placer ta colonne de gauche, celle de droite puis le contenu. Voici le code source en simplifié :
    ...
    <div id="colonne-gauche">
       Colonne de gauche
    </div>
    <div id="colonne-droite">
       Colonne de droite
    </div>
    <div id="contenu">
       Contenu
    </div>
    ...
    0
  2. rémoundo Messages postés 439 Date d'inscription   Statut Membre Dernière intervention   17
     
    justement sur le kit de base j'ai la colonne a gauche sur mon kit modifier je l'ai mis a gauche aussi

    bref :

    kit modifier par moi :

    <!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" lang="fr">
    <head>
    <SCRIPT LANGUAGE="JavaScript">
    function popup(page) {
    window.open(page,'popup','width=900px,height=600px,toolbar=false,scrollbars=false');
    }
    </SCRIPT>
    <title>Kit graphique Etherack par Graphiques-Kits.com</title>
    <meta http-equiv="Content-Language" content="fr" />
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <link type="text/css" rel="stylesheet" href="style.css" />
    <script language="JavaScript">
    <!--
    //PLF-https://twitter.com/ceosammassey
    function heure () {
    var Maintenant = new Date();
    var heures = Maintenant.getHours();
    var minutes = Maintenant.getMinutes();
    var secondes = Maintenant.getSeconds();
    heures = ((heures < 10) ? " 0" : " ") + heures;
    minutes = ((minutes < 10) ? ":0" : ":") + minutes;
    secondes = ((secondes < 10) ? ":0" : ":") + secondes;
    document.formhorloge.horloge.value = heures + minutes + secondes;
    setTimeout("heure()",1000);
    }
    // -->
    </script>
    </head>
    
    <body>
    
    <body bgcolor="#FFFFFF" background="im/fond.gif" onload="heure()">
    
    <div id="site">
        <div id="header">
    	    <ul id="navbar">
    			<li><a title="Accueil" href="index.html">Accueil</a></li>
    			<li><a title="partenaires" href="partenaires.html">partenaires</a></li>
    			<li><a title="Lien" href="_"><A HREF='javascript:popup("chat.php")'>chat</A></a></li>
    			<li><a title="Lien" href="#">Nom de la rubrique</a></li>
    			<li><a title="Lien" href="#">Nom de la rubrique</a></li>
    	    </ul>
    	</div>
    	<div id="left">
    	    <div id="left_haut2"><h3>Heure</h3></div>
    		<div id="leftbk2">
    		    <center><OBJECT CLASSID="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
    WIDTH="100" HEIGHT="100"
    CODEBASE="http://active.macromedia.com/flash5/cabs/swflash.cab#version=5,0,0,0">
    <PARAM NAME="MOVIE" VALUE="clock8.swf">
    <PARAM NAME="PLAY" VALUE="true">
    <PARAM NAME="LOOP" VALUE="true">
    <PARAM NAME="WMODE" VALUE="Transparent">
    <PARAM NAME="QUALITY" VALUE="high">
    <EMBED SRC="clock8.swf" WIDTH="100" HEIGHT="100" PLAY="true" LOOP="true" WMODE="Transparent" QUALITY="high"
    PLUGINSPAGE="https://get.adobe.com/flashplayer/">
    <form name="formhorloge" onSubmit="0">
    <div align="center">
    <input type="button" name="horloge" value="">
    </div>
    </form>
    </EMBED>
    </OBJECT></center>
    		</div>
    		<div id="left_bas2"></div>
    	    <div id="left_haut2"><h3>Du futur site </h3></div>
    		<div id="leftbk2">
    		    Lorem ipsum dolor sit<br />
    			Lorem ipsum dolor sit<br />
    			Lorem ipsum dolor sit<br />
    			Loremytdolor sit
    		</div>
    		<div id="left_bas2"></div>
    	    <div id="left_haut2"><h3>Du futur site </h3></div>
    		<div id="leftbk2">
    		    Lorem ipsum dolor sit<br />
    			Lorem ipsum dolor sit<br />
    			Lorem ipsum dolor sit<br />
    			Lorem ipsum dolor sit<br />
    			Lorem ipsum dolor sit
    		</div>
    		<div id="left_bas2"></div>
    	    <div id="left_haut2"><h3>Du futur site </h3></div>
    		<div id="leftbk2">
    		    Lorem ipsum dolor sit<br />
    			Lorem ipsum dolor sit<br />
    			Lorem ipsum dolor sit<br />
    			Lorem ipsum dolor sit<br />
    			Lorem ipsum dolor sit
    		</div>
    		<div id="left_bas2"></div>
    	    <div id="left_haut2"><h3>Du futur site </h3></div>
    		<div id="leftbk2">
    		    <object class="dm_videowall logo_left" width="100" height="230" data="https://www.dailymotion.com/flash/dmwall/dmwall.swf?feed=/fr/featured/channel/videogames/1&amp%3Bcols=2&amp%3Bspace=3&referer=" type="application/x-shockwave-flash"><param name="movie" value="https://www.dailymotion.com/flash/dmwall/dmwall.swf?feed=/fr/featured/channel/videogames/1&amp%3Bcols=2&amp%3Bspace=3&referer="></param><param name="allowscriptaccess" value="always"></param><param name="wmode" value="transparent"></param></object>
    		</div>
    		<div id="left_bas2"></div>
    	    <div id="left_haut2"><h3>Rubriques</h3></div>
    		<div id="leftbk2">
    		    Lorem ipsum dolor sit<br />
    			Lorem ipsum dolor sit<br />
    			Lorem ipsum dolor sit<br />
    			Lorem ipsum dolor sit<br />
    			Lorem ipsum dolor sit
    		</div>
    		<div id="left_bas2"></div>
    	    <div id="left_haut2"><h3>Téléchargement</h3></div>
    		<div id="leftbk2">
    			<br />
    			<br />
    			</a>
    		</div>
    		<div id="left_bas2"></div>
    	</div>
    
    	<div id="right">
    	    <div id="right_haut"></div>
    	    <div id="rightbk">
    		    <h2>bienvenue sur ce site !</h2>
    		    <p>salut à t
    			<br />
    			<br />
    			 <h2>ce site ,issu d'un blog </h2>
    <br>
    " />
    	    </div>
    		<div id="right_bas"></div>
    	    <div id="right_haut"></div>
    	    <div id="rightbk">
    		    <h2>les partenaires : </h2>
    		    <p>
    </p>
        </div>
    		<div id="right_bas"></div>
    	    <div id="right_haut"></div>
    	    <div id="rightbk">
    		    <h2>les partenaires : </h2>
    		    <p>00
    000000000000000000000000000000
    000000</p>
        </div>
    		<div id="right_bas"></div>
    	    <div id="right_haut"></div>
    	    <div id="rightbk">
    		    <h2>les partenaires : </h2>
    		    <p>
    
        </div>
    		<div id="right_bas"></div>
    	</div>
    
    
    
    	<div id="right">
    	    <div id="left_haut"><h3>Heure</h3></div>
    		<div id="leftbk">
    
    </div>
    </form>
    </EMBED>
    </OBJECT></center>
    		</div>
    		<div id="left_bas"></div>
    	    <div id="left_haut"><h3>Du futur site </h3></div>
    		<div id="leftbk">
    		    Lorem ipsum dolor sit<br />
    			Lorem ipsum dolor sit<br />
    			Lorem ipsum dolor sit<br />
    			Lorem ipsum dolor sit<br />
    			Lorem ipsum dolor sit
    		</div>
    		<div id="left_bas"></div>
    	    <div id="left_haut"><h3>Du futur site </h3></div>
    		<div id="leftbk">
    		    Lorem ipsum dolor sit<br />
    			Lorem ipsum dolor sit<br />
    			Lorem ipsum dolor sit<br />
    			Lorem ipsum dolor sit<br />
    			Lorem ipsum dolor sit
    		</div>
    		<div id="left_bas"></div>
    	    <div id="left_haut"><h3>Du futur site </h3></div>
    		<div id="leftbk">
    		    Lorem ipsum dolor sit<br />
    			Lorem ipsum dolor sit<br />
    			Lorem ipsum dolor sit<br />
    			Lorem ipsum dolor sit<br />
    			Lorem ipsum dolor sit
    		</div>
    		<div id="left_bas"></div>
    	    <div id="left_haut"><h3>Du futur site </h3></div>
    		<div id="leftbk">
    
    		</div>
    		<div id="left_bas"></div>
    	    <div id="left_haut"><h3>Rubriques</h3></div>
    		<div id="leftbk">
    		    Lorem ipsum dolor sit<br />
    			Lorem ipsum dolor sit<br />
    			Lorem ipsum dolor sit<br />
    			Lorem ipsum dolor sit<br />
    			Lorem ipsum dolor sit
    		</div>
    		<div id="left_bas"></div>
    	    <div id="left_haut"><h3>Téléchargement</h3></div>
    		<div id="leftbk">
    			<br />
    			<br />
    			</a>
    		</div>
    		<div id="left_bas"></div>
    	</div>
    
    	<div id="footer">
    	    <p>nintendox </p>
    	</div>
    </div>
    
    </body>
    </html>
    0
  3. rémoundo Messages postés 439 Date d'inscription   Statut Membre Dernière intervention   17
     
    css :

    /* Kits graphiques par Graphiques-Kits.com */
    /* contact@graphiques-kits.com */
    /* Tous droits réservés 2007 */
    
    body {
        font-family: verdana;
        font-size: 10px;
    	color: #000000;
    	background: #5c8eb1 url(images/fond.png) repeat-x;
    	text-align: center;
        margin: 0 auto 0;
    	position: relative;
    }
    
    div#site {
        text-align:left;
        background: url(images/site.png) repeat-y 0 0;
        width: 1230px;
        margin : auto
    }
    
    div#header {
        background: url(images/header.png) no-repeat 0 0;
        height : 210px;
        margin : 0;
        padding:0
    }
    
    img { border: 0; }
    
    a {
        color : #000000;
        font-family:verdana;
        text-decoration:none;
    }
    
    a:hover , a:active , a:focus {
        color : #0D627E;
        font-weight : bold;
        text-decoration:none;
    }
    
    div#footer {
        background:url(images/footer.png) no-repeat 0 0;
        height : 101px;
    	clear:both;
    }
    
    div#footer p {
        text-align: center;
        font-size: 0.9em;
        padding-top:40px; 
        clear:both;
        color:#666666;
    }
    
    div#footer a {
        color : #666666;
        text-decoration:none;
    }
    
    div#left {
        width:273px;
    	float:left;
    	margin:0px;
    }
    
    div#right {
        margin-left: 273px;
    	margin-right: 61px;
    }
    
    #left_haut {
        margin-left:685px;
    	height: 37px;
    	widht: 211px;
    	position: relative;
    	background: url(images/left-top.png) no-repeat;
    }
    
    #left_haut h3 {
        padding-top:13px;
    	text-align:center;
    	font-size: 1.2em;
    	color:#FFFFFF;
    	margin:0px;
    }
    
    #leftbk {
        margin-left:685px;
    	widht: 211px;
    	background: url(images/left-bk.jpg) repeat-y;
    	padding-left: 15px;
        padding-right: 15px;
        padding-top: 8px;
        padding-bottom: 5px;
    	position: relative;
    }
    
    #left_bas {
        margin-left:685px;
    	height: 15px;
    	widht: 211px;
    	background: url(images/left-bottom.jpg) repeat-y;
    	position: relative;
    }
    
    #right_haut {
        margin-left:0px;
    	height: 20px;
    	widht: 665px;
    	position: relative;
    	background: url(images/right-top.jpg) no-repeat;
    }
    
    #right_bas {
        margin-left:0px;
    	height: 15px;
    	widht: 665px;
    	position: relative;
    	background: url(images/right-bottom.jpg) no-repeat;
    	margin-bottom:3px;
    }
    
    #rightbk {
        margin-left:0px;
    	widht: 665px;
    	background: url(images/right-bk.jpg) repeat-y;
    	padding-left: 15px;
        padding-right: 15px;
        padding-top: 0px;
        padding-bottom: 5px;
    	position: relative;
    }
    
    #right_haut {
        margin-left:0px;
    	height: 20px;
    	widht: 665px;
    	position: relative;
    	background: url(images/right-top.jpg) no-repeat;
    }
    
    #right_bas {
        margin-left:0px;
    	height: 15px;
    	widht: 665px;
    	position: relative;
    	background: url(images/right-bottom.jpg) no-repeat;
    	margin-bottom:3px;
    }
    
    #rightbk {
        margin-left:0px;
    	widht: 665px;
    	background: url(images/right-bk.jpg) repeat-y;
    	padding-left: 15px;
        padding-right: 15px;
        padding-top: 0px;
        padding-bottom: 5px;
    	position: relative;
    }
    
    #rightbk h2 {
        font-size: 1.3em; 
        color: #2366a7;
        margin: 0; 
    	padding: 0;
        margin-bottom: 10px;
    	padding-bottom: 0.3em; 
    	border-bottom: 1px dashed #C0C0C0;
    }
    
    #left h2 { 
        margin-bottom: 10px;
    	padding-left: 0.5em;
    	padding-bottom: 0.3em;  
    	border-bottom: 1px dashed #C0C0C0; 
    	border-left: 3px solid #C0C0C0; 
    }
    
    ul#navbar{
        list-style:none;
        text-align:center;
        padding-left:140px;
        padding-top:180px; 
        font-size:10px;
    	margin:0px;
    }
    
    ul#navbar li{
        float:left;
        width:135px;
        margin:0 14px 0 0;
        text-align:center;
        font-size:9px;
    }
    
    ul#navbar li a, ul#navbar li a:link{
        font-family:Verdana;
        font-size:9px;
        text-decoration:none;
        color:#FFFFFF;
    }
    
    ul#navbar li a:hover, ul#navbar li a:active, ul#navbar li a:focus {
        font-family:Verdana;
        font-size:10px;
        font-weight:bold;
        color:#FFFFFF;
    }
    
    #left_haut2 {
        margin-left:61px;
    	height: 37px;
    	widht: 211px;
    	position: relative;
    	background: url(images/left-top.png) no-repeat;
    }
    
    #left_haut2 h3 {
        padding-top:13px;
    	text-align:center;
    	font-size: 1.2em;
    	color:#FFFFFF;
    	margin:0px;
    }
    
    #leftbk2 {
        margin-left:61px;
    	widht: 211px;
    	background: url(images/left-bk.jpg) repeat-y;
    	padding-left: 15px;
        padding-right: 15px;
        padding-top: 8px;
        padding-bottom: 5px;
    	position: relative;
    }
    
    #left_bas2 {
        margin-left:61px;
    	height: 15px;
    	widht: 211px;
    	background: url(images/left-bottom.jpg) repeat-y;
    	position: relative;
    0
  4. rémoundo Messages postés 439 Date d'inscription   Statut Membre Dernière intervention   17
     
    de l'aide ,personne ?
    0
  5. Vous n’avez pas trouvé la réponse que vous recherchez ?

    Posez votre question
  6. rémoundo Messages postés 439 Date d'inscription   Statut Membre Dernière intervention   17
     
    voila ce que j'ai maintenant :

    http://nintendow.u7n.org/sitewebdesign2.png
    0