Aide rajouter colonne kit graphique
rémoundo -  
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.  rémoundo Auteur
    voila ce que j'ai maintenant :

    http://nintendow.u7n.org/sitewebdesign2.png
    2. rémoundo Auteur
      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;
      1.  rémoundo Auteur
        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>
        2.  avion-f16
          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>
...