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
CODE
#sidebar { /* Warning: not printed out on paper */
width: 12.5em;
border-left: 1px solid #999999;
float: right;
clear: both;
}
width: 12.5em;
border-left: 1px solid #999999;
float: right;
clear: both;
}
2. j'ai inversé le margin pour le bloc de contenu "main"
CODE
#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;
}
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 :
CODE
<!-- ======== 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>
<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 :
CODE
<!-- ======== 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>
<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 ?
