Faire passer le contenu avant la sidebar dans le code

[SpeedAirMan]

Bonjour,

je suis en train de faire un design web en partant du template libre Sinorcaish.

Problèmes :

1. la colonne est à gauche > je la veux à droite

2. la colonne arrive avant le contenu dans le code, je veux inverser ceci. (mettre le contenu avant la sidebar)

Pour mon premier problème, j'ai trouvé la solution :

1. j'ai changé "float: left" en "float: right" pour le bloc sidebar

#sidebar {			/* Warning: not printed out on paper */
   width:		   12.5em;
   border-left:	1px solid #999999;
   float:		   right;
   clear:		   both;
}

2. j'ai inversé le margin pour le bloc de contenu "main"

#main {
   text-align:	  justify;
   line-height:	 1.5;
   color:		   black;
   background:	  white;
   margin:		  0 12.5em 0 0/*0 0 0 12.5em*/;
   padding:		 0.25em 1.5em 0.5em 1em;
   border-right:	 1px solid #999999;
}

Il me reste le soucis de la priorité au contenu. Je veux que le contenu soit présent avant la sidebar dans le code.

Actuellement, le code HTML ressemble à ça :

<!-- ======== Left Sidebar ======== -->

<div id="sidebar">
  <div>
	<p class="title"><a href="index.html">Other</a></p>
	<ul>
	  <li><a href="index.html">Overview</a></li>
	  <li class="highlight"><a href="template.html">Template</a>
		<span class="hidden">(this page)</span></li>
	  <li><a href="sample.html">Sample Page</a></li>
	  <li><a href="logo.html">Logo Images</a></li>
	</ul>
  </div>
</div>


<!-- ======== Main Content ======== -->

<div id="main">

<div id="navhead">
  <hr />
  <span class="hidden">Path to this page:</span>
  <a href="index.html">Home</a> »
  <a href="index.html">Other</a> »
</div>


<h1>Template for the Sinorcaish Stylesheet</h1>

<p>This template file allows you to use the <a
href="index.html">Sinorcaish stylesheet</a> quickly and easily.  Simply
replace the contents of the title and level-1 heading, modify the header,
sidebar and footer (yes, even the copyright notice!) to suit your
site’s needs and remove this paragraph.  Happy coding!</p>


<br id="endmain" />
</div>

et je veux obtenir ça :

<!-- ======== Main Content ======== -->

<div id="main">

<div id="navhead">
  <hr />
  <span class="hidden">Path to this page:</span>
  <a href="index.html">Home</a> »
  <a href="index.html">Other</a> »
</div>


<h1>Template for the Sinorcaish Stylesheet</h1>

<p>This template file allows you to use the <a
href="index.html">Sinorcaish stylesheet</a> quickly and easily.  Simply
replace the contents of the title and level-1 heading, modify the header,
sidebar and footer (yes, even the copyright notice!) to suit your
site’s needs and remove this paragraph.  Happy coding!</p>


<br id="endmain" />
</div>


<!-- ======== Right Sidebar ======== -->

<div id="sidebar">
  <div>
	<p class="title"><a href="index.html">Other</a></p>
	<ul>
	  <li><a href="index.html">Overview</a></li>
	  <li class="highlight"><a href="template.html">Template</a>
		<span class="hidden">(this page)</span></li>
	  <li><a href="sample.html">Sample Page</a></li>
	  <li><a href="logo.html">Logo Images</a></li>
	</ul>
  </div>
</div>

Le style est présent ici : sinorcaish-screen.css.

J'ai fait quelques essais peu concluants et je bloque... Pourtant je suis sûr que ça doit être assez simple. Quelqu'un peut m'aider svp ?

[SpeedAirMan]

Bon, finalement j'ai résolu l'affaire en utilisant un tableau. Non seulement ça résoud le problème du contenu avant la sidebar, mais ça résoud également un soucis de couleur de fond.

Problème résolu donc, je regrette simplement de devoir passer par un tableau, mais je pense que ça vaut le coup.

[Sarc]

Hum, si jamais tu veux revenir en arrière, je peux te donner un petit bout du chemin :

#main : rajouter

position:relative; 
padding-right :14em;

#sidebar : rajouter

position:absolute; top:0; right:13em;

Ca te permet de placer de manière absolue ta #sidebar... Après, pour les couleurs de fond je ne sais pas ce qui te pose problème, parfois faut savoir placer au pixel près tes cadres pour qu'ils se chevauchent au bon endroit...

Bonne chance