Help CSS

23 sept. 2009, 19:09

Bonjour,

un coup de main svp sur ce template css.

Sur ce site (http://www.businessclub-caz.com), je voudrais ajouter une colonne à droite pour insérer une bannière verticale.
Dans le css joint

Code : Tout sélectionner

/*
Design by Free CSS Templates
http://www.freecsstemplates.org
Released for free under a Creative Commons Attribution 2.5 License
*/

* {
	margin: 0;
	padding: 0;
}

body {
	background: #662C14 url(images/img01.gif) repeat-x;
	text-align: justify;
}

body, input, textarea, select {
	font: normal small "Trebuchet MS", Arial, Helvetica, sans-serif;
	color: #666666;
}

h1, h2, h3 {
	margin-bottom: 1em;
	font-weight: normal;
	color: #333333;
}

h1 {
	font-size: 2.2em;
}

h2 {
	font-size: 1.7em;
}

h3 {
	font-size: 1.3em;
}

p, blockquote, ul, ol, form {
	margin-bottom: 1.5em;
}

blockquote, ul, ol {
	margin-left: 3em;
}

blockquote {
	margin-right: 3em;
	font-style: italic;
}

ul {
	list-style-type: square;
}

a {
	color: #3366FF;
}

a:hover {
	text-decoration: none;
	color: #FF6600;
}

hr {
	display: none;
}

.hr {
}

img.left {
	float: left;
	margin: 0 15px 15px 0;
}

img.right {
	float: right;
	margin: 0 0 15px 15px;
}

/* Wrapper */

#wrapper {
	width: 750px;
	margin: 0 auto;
	background: url(images/img02.gif) no-repeat;
}

/* Header */

#header {
	background: url(images/fond2.jpg) no-repeat;
; clip:      rect(   )
; height: 190px
; width: 750px
}
#header h2 {
	margin: 0;
	text-transform: lowercase;
	font-weight: bold;
}

#header h1 {
	padding: 0 0;
}

#header h2 {
	margin-top: -5px;
	padding: 0 0 0 22px;
	font-size: 1em;
}

#header a {
	text-decoration: none;
	color: #FFFFFF;
}

/* Content */

#content {
	background: #FFFFFF url(images/img04.gif) repeat-y;
}

/* Blog */

#blog {
	float: left;
	width: 520px;
	margin-top: -5px;
	padding-left: 5px;
}

/* Post */

.post {
}

.post .title {
	height: 40px;
	margin: 0;
	padding: 7px 0 0 15px;
	background: url(images/img06.gif) repeat-x;
}

.post .title a {
	text-decoration: none;
	color: #FFFFFF;
}

.post .title a:hover {
	text-decoration: underline;
}

.post .date {
	margin-top: -30px;
	padding-right: 15px;
	text-align: right;
	font: bold x-small Arial, Helvetica, sans-serif;
	color: #FFFFFF;
}

.post .entry {
	padding: 20px 15px 10px 15px;
	background: url(images/img07.gif) repeat-x;
	line-height: 1.8em;
}

.post .meta {
	margin-bottom: 2em;
	padding: 0 15px;
	text-align: right;
	font-size: x-small;
}

/* Sidebar */

#sidebar {
	float: right;
	width: 220px;
	margin-top: -5px;
}

#sidebar ul {
	margin: 0;
	list-style: none;
}

#sidebar li {
}

#sidebar li ul {
	margin: 0 5px;
	padding: 15px 15px 15px 30px;
	background: url(images/img07.gif) repeat-x;
	list-style-type: square;
}

#sidebar li li {
}

#sidebar h2 {
	height: 32px;
	margin: 0 0;
	padding: 24px 5px 0 20px;
	background: url(images/img08.gif) no-repeat;
	text-transform: uppercase;
	font-size: 1em;
	font-weight: bold;
	color: #FFFFFF;
}

#sidebar a {
	text-decoration: none;
}

/* Search */

#search {
}

#search h2 {
	height: 27px;
	padding-top: 13px;
	background-position: left bottom;
}

#search form {
	margin-left: 5px;
	margin-right: 5px;
	padding: 15px 15px 0 15px;
	background: url(images/img07.gif) repeat-x;
}

#search #inputtext1 {
	width: 110px;
	padding: 1px 2px;
	background: url(images/img5.gif) repeat-x;
	border: 1px solid #C4C3C4;
}

#search #inputsubmit1 {
	background: url(images/img6.gif) repeat-x left bottom;
	border: 1px solid #C4C3C4;
}

/* Archives */

#archives {
left: 10px; clip:  rect(   )
}

/* Categories */

#categories {
left: 10px; clip:  rect(   )
}

/* Blogroll */

#blogroll {
left: 10px; clip:  rect(   )
}

/* Meta */

#meta {
left: 10px; clip:  rect(   )
}

/* Footer */

#footer {
	background: url(images/img05.gif) no-repeat;
}

#footer p {
	margin: 0;
	padding: 5px 10px;
	font-size: x-small;
	color: #FFFFFF;
}

#footer a {
	color: #FFFFFF;
}

#header h1 { 
	margin: 0 0;
 } h4 { font-weight: bold; color: #FFFFFF;; font-size: 14px; ; background-image: url(images/img06.gif); font-variant: normal; text-transform: none}
h5 { font-weight: bold; color: #FFFFFF;; font-size: 14px; ; font-variant: normal; text-transform: none ; height: 600px; width: 300px; left: 500px; clip:   rect(   )}
#sidebar h5 {
	height: auto;
	margin: 0 0;
	text-transform: uppercase;
	font-size: 1em;
	font-weight: bold;
; width: 180px; clip:            rect(   )
; background-color: #FFFFFF; border: thin #0000FF dotted; left: 750px
}

j'ai ajouté 2 balises #sidebar h5 et h5

Dans la page php, ça se passe comme prévu sauf que la colonne reste désespéremment en bas de page. Je n'arrive pas à la placer à droite.

Je suis sûr qu'un coup d'oeil suffira à un expert. Pour info, voici ce qui est inséré dans la page :

Code : Tout sélectionner

<div id="sidebar">
<h5>EXEMPLE</h5>
</div>

Merci pour votre aide.

24 sept. 2009, 11:17

personne pour m'aider ??

J'ai avancé en modifiant ainsi :

Code : Tout sélectionner

#sidebar2 {
	float: right;
	width: 0px;
	margin-top: -2247px;
}

La colonne est créée et positionnée. Mais sa hauteur varie, je ne comprends pas pourquoi. Pour s'en rendre compte : http://www.businessclub-caz.com/index2.php

Question subsidiaire : quel est le code (javascript je crois) pour que la pub insérée dans la colonne suive le mouvement de la page, monte et descende ?

24 sept. 2009, 12:40

Avant ton div #sidebar2, il y a ça :

<div style="clear: both; height: 1px;"></div>

Il est donc normal que ton bloc ne flotte pas au bon endroit. Pour y remédier, déplace ce div après le div #sidebar2.

De plus, je te conseille de mettre tes deux sidebars en float: left.

Soit dit en passant, le tableau de ton div #sidebar2 se trouve à l'intérieur de h5. Or, les éléments h1 à h6 ne peuvent pas être parents d'un élément de type bloc comme table.

<!-- Incorrect -->
<h5>
  <table>
    <!-- Reste de la structure du tableau -->
  </table>
</h5>
<!-- Correct -->
<h5>Intitulé</h5>
<table>
  <!-- Reste de la structure du tableau -->
</table>

24 sept. 2009, 12:41

Ca serait beaucoup plus simple de t'aider si tu nous donner du code html pour appliquer le style.
En effet on n'a pas le css infus en nous.
Après comme tu veux mais tu auras plus de réponse si on avait du code html pour t'aider.

24 sept. 2009, 12:45

Ca serait beaucoup plus simple de t'aider si tu nous donner du code html pour appliquer le style.
En effet on n'a pas le css infus en nous.
Après comme tu veux mais tu auras plus de réponse si on avait du code html pour t'aider.

Cela dit, il a donné une URL en guise d'exemple de code HTML.

24 sept. 2009, 15:04

Avant ton div #sidebar2, il y a ça :
<div style="clear: both; height: 1px;"></div>

Si je déplace ce div, la colonne ne s'affiche plus du tout. Je suis obligé de la laisser là.
J'ai sorti le tableau des balises h5.
Pour l'instant, à chaque rechargement de la page, l'emplacement de la colonne varie.

quant aux 2 sidebar, si je les passe en left (au lieu de right), ils vont à gauche. Logique !

Donc en css, ça donne :

Code : Tout sélectionner

#sidebar2 {
	float: right;
	width: 0px;
	margin-top: -2247px;
	color: #FFFFFF;
}
h5 { font-weight: bold; color: #FFFFFF;; font-size: 14px; ; font-variant: normal; text-transform: none ; height: 600px; width: 180px; clip:    rect(   ); float: right}
#sidebar2 h5 {
	margin: 0 0;
	text-transform: uppercase;
}

et en html

Code : Tout sélectionner

<div id="sidebar2">
    <div align="left"><i><font face="Verdana, Arial, Helvetica, sans-serif" size="1" color="#333333"><span 
            style="COLOR: rgb(0,61,128); BACKGROUND-COLOR: rgb(255,204,51)">publicit&eacute;s</span></font></i></div><a href="http://www.businessclub-caz.com"><img src="bcca2.jpg" border="0"></a>
</div>

Help CSS

Qui est en ligne