Bonjour les amis!
Voici ce que je suis en train de faire:
http://www.apprentifinancier.com/p/fin05/if/index2.html
Malheureusement, je n'arrive pas à mettre deux colonnes (voir le carré rouge et jaune).
Est-ce que quelqu'un pourrait me dire comment mettre mes deux colonnes côte à côte?
HTML
CSS
Modifié par Daok (14 Aug 2005 - 02:09)
Voici ce que je suis en train de faire:
http://www.apprentifinancier.com/p/fin05/if/index2.html
Malheureusement, je n'arrive pas à mettre deux colonnes (voir le carré rouge et jaune).
Est-ce que quelqu'un pourrait me dire comment mettre mes deux colonnes côte à côte?
HTML
<STYLE type=text/css>
@import url( ./style.css );
</STYLE>
<BODY>
<div id="bkgnd">
<!-- beginning of header element containing image -->
<div id="hdr">
<center>
<table id="Table_01" width="637" height="110" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<img src="images/topFin05_01.gif" width="319" height="110" alt="apprentifinancier.com titre gauche"></td>
<td>
<img src="images/topFin05_02.gif" width="22" height="110" alt="apprentifinancier.com titre milieu"></td>
<td>
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0" width="296" height="110" id="topRight" align="middle">
<param name="allowScriptAccess" value="sameDomain" />
<param name="movie" value="topRight.swf" />
<param name="quality" value="high" />
<param name="bgcolor" value="#ffffff" />
<embed src="topRight.swf" quality="high" bgcolor="#ffffff" width="296" height="110" name="topRight" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object></td>
</tr>
</table>
</div>
<div id="hdrPub">
<script type="text/javascript"><!--
google_ad_client = "pub-0909660115587797";
google_ad_width = 728;
google_ad_height = 90;
google_ad_format = "728x90_as";
google_ad_channel ="4378231798";
google_color_border = "FFFFFF";
google_color_bg = "FFFFFF";
google_color_link = "006699";
google_color_url = "0033CC";
google_color_text = "0033CC";
//--></script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</center>
</div>
<!-- end of header element -->
<!-- beginning of decorative bar element containing a javascript - you could also use this element for master links -->
<div id="bar">
<!--<strong>Archive des nouvelles boursières :</strong> Décembre - Janvier - Février - Mars - Avril - Mai - Juin - Juillet - Août - Septembre - Octobre - Novembre -->
</div>
<!-- end of decorative bar element -->
<!-- beginning of left column element containing links -->
<div id="l-col">
<label>Menu</label>
<p>
<h3>Les articles de la bourse</h3>
<ul id=nouvelleBoursiere>
<li><a href="#">Accueil</a><br/>
<li><a href="#">Nouvelles</a><br/>
<li><a href="#">Articles</a><br/>
<li><a href="#">Placement</a><br/>
<li><a href="#">Bourse</a><br/>
<li><a href="#">Entreprise</a><br/>
<li><a href="#">Divers</a>
</ul>
<h3>Les cahiers spécials</h3>
<ul id=nouvelleBoursiere>
<li><a href="#">Livres</a><br/>
<li><a href="#">Transactions</a><br/>
<li><a href="#">Documents d'analyse</a><br/>
<li><a href="#">Comment analyser?</a><br/>
</ul>
<h3>Autres</h3>
<ul id=nouvelleBoursiere>
<li><a href="#">Contact</a><br/>
<li><a href="#">Forum</a><br/>
<li><a href="#">Liens boursier</a><br/>
</ul>
</p>
</div>
<!-- ene of left column element -->
<!-- beginning of right column element containing links -->
<div id="r-col">
<label>Nouvelles</label>
<h3>Nouvelles bourse 2005</h3>
<p>
<ul id=nouvelleBoursiere>
<li><a href="#">Janvier</a><br/>
<li><a href="#">Février</a><br/>
<li><a href="#">Mars</a><br/>
<li><a href="#">Avril</a><br/>
<li><a href="#">Mai</a><br/>
<li><a href="#">Juin</a><br/>
<li><a href="#">Juillet</a><br/>
<li><a href="#">Août</a><br/>
<li><a href="#">Septembre</a><br/>
<li><a href="#">Octobre</a><br/>
<li><a href="#">Novembre</a><br/>
<li><a href="#">Décembre</a><br/>
</ul>
</p>
<h3>Nouvelles bourse 2004</h3>
<p>
<ul id=nouvelleBoursiere>
<li><a href="#">Juillet</a><br/>
<li><a href="#">Août</a><br/>
<li><a href="#">Septembre</a><br/>
<li><a href="#">Octobre</a><br/>
<li><a href="#">Novembre</a><br/>
<li><a href="#">Décembre</a><br/>
<li><a href="#">Janvier</a><br/>
</ul>
</p>
<h3>Les 5 derniers commentaires</h3>
<p>
<ul id=dernierCommentaire>
<li><a href="#">Commentaire #1 : Patrick Desjardins - UEX Corporation...</a><br/>
<li><a href="#">Commentaire #2 : Patrick Desjardins - UEX Corporation...</a><br/>
<li><a href="#">Commentaire #3 : Patrick Desjardins - UEX Corporation...</a><br/>
<li><a href="#">Commentaire #4 : Patrick Desjardins - UEX Corporation...</a><br/>
<li><a href="#">Commentaire #5 : Patrick Desjardins - UEX Corporation...</a><br/>
</ul>
</p>
</div>
<!-- end of right column element -->
<!-- beginning of page content element -->
<div id="cont">
<div id="left_col">
Left column Left column Left column Left column Left column Left column
</div>
<div id="right_col">
DROITE DROITE DROITE DROITE DROITE DROITE DROITE DROITE DROITE
</div>
</div>
<!-- end of page content element -->
<!-- beginning of footer element -->
<div id="ftr">Copyright © Apprentifinancier.com 2004-2005</div>
<!-- end of footer element -->
</div>
<!-- end of background container element -->
</BODY>
</HTML>
CSS
/* Three Colum Flexible Head & Footer - Cascading Style Sheet Template */
/* Created by: Keith Post - Post Studio Website Design */
/* type: element selectors */
/*http://www.poststudio.net/res-auth-css-dnlds.htm*/
/*http://www.fu2k.org/alex/css/frames/examples*/
body {
margin:20px 30px 20px 30px;
background-image:url('images/bg_page.gif');
color: #E6E6CC;
text-align:center;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
img {
border: 0px none;
}
h1 {
color: #13618A;
font-size: 0.8em;
font-weight: 900;
display: block;
border-bottom: 2px solid #00476D;
background: #94B6C7;
font-family: Arial, Helvetica, sans-serif;
}
h2 {
color: #13618A;
font-size: 0.8em;
font-weight: 900;
display: block;
border-bottom: 1px solid #00476D;
background: #A6C9DB;
font-style: italic;
font-family: Arial, Helvetica, sans-serif;
font-variant:small-caps;
}
h3 {
color: #13618A;
font-size: 0.8em;
font-weight: 900;
display: block;
border-bottom: 1px solid #00476D;
background: #B7D8E9;
font-family: Arial, Helvetica, sans-serif;
font-variant:small-caps;
}
label {
color: #13618A;
font-size: 0.8em;
font-weight: 900;
display: block;
border-bottom: 2px solid #00476D;
background: #94B6C7;
font-family: Arial, Helvetica, sans-serif;
}
li {
color: #13618A;
font-size: 0.7em;
list-style: circle;
LIST-STYLE-IMAGE: url(images/icon_external.png);
}
#nouvelleBoursiere li {
color: #13618A;
font-size: 0.7em;
list-style: circle;
LIST-STYLE-IMAGE: url(images/icon_placements.png);
}
#dernierCommentaire li{
color: #13618A;
font-size: 0.7em;
list-style: circle;
LIST-STYLE-IMAGE: url(images/icon_admin.png);
margin-bottom:5px;
}
/* type: id = "selector-elements" should be used only once within each page presentation to validate */
#bkgnd {
border:1px solid #13618A;
margin: auto;
text-align: left;
}
#hdr {
background:#FFF;
text-align: center;
padding: 5px;
}
#hdrPub {
background:#FFF;
text-align: center;
padding: 5px;
}
#bar {
height:16px;
background:#13618A;
color: #EBEBEB;
vertical-align: middle;
font: 0.65em Verdana, Arial, Helvetica, sans-serif;
padding: 3px 2px 1px;
text-align: right;
}
#l-col {
float:left;
background:#EBEBEB;
color: #006699;
width:170px;
text-align: left;
margin: 0px 20px 0px 0px;
padding: 20px 0px;
}
#l-col p {
font-size: 0.7em;
line-height: 1.5em;
color: #13618A;
}
#r-col {
float:right;
background:#EBEBEB;
color: #006699;
width:170px;
text-align: left;
margin: 0px 0px 0px 20px;
padding: 20px 0px;
}
#r-col p {
font-size: 0.7em;
line-height: 1.5em;
color: #13618A;
}
#cont {
background: #EBEBEB;
padding: 20px 190px;
color:#13618A;
}
#cont p {
font-size: 0.7em;
line-height: 1.5em;
color: #13618A;
margin-bottom: 0px;
text-align: justify;
text-indent:2em;
}
#left_col{
/*position:relative;*/
float:left;
background:red;
color: #006699;
width:30%;
left:0px;
text-align: left;
/*margin: 0px 20px 0px 0px;*/
padding: 20px 0px;
}
#right_col{
/*float:right;*/
float:left;
background:yellow;
color: #006699;
width:30%;
left:100px;
text-align: left;
margin: 0px 0px 0px 20px;
padding: 20px 0px;
}
#ftr {
background:#13618A;
color: #EBEBEB;
margin:0;
font-size: .6em;
text-align: center;
padding: 2px 5px;
border-top: 1px solid #9F722D;
border-right: 0 solid #9F722D;
border-bottom: 0 solid #9F722D;
border-left: 0 solid #9F722D;
}
/* class = "pseudo-classes" */
a:link {
color: #13618A;
}
a:visited {
color: #89B2C7;
}
a:hover {
color: #000;
}
a:active {
color: #8A4500;
}
Modifié par Daok (14 Aug 2005 - 02:09)
Je sais. Pour les paragraphes et les listes c'est que je voulais les mêmes caractéristiques côtés textes dans ma liste sans avoir à copier coller dans la liste les éléments textes... si c'Est vraiment une faute je vais le corriger. 
