28173 sujets

CSS et mise en forme, CSS3

Ajouter une colonne : Comment faire ?

Bonjour à tous,

Je viens de regarder cette rubrique mais je n'ai pas trouvé la réponse à la question qui me préoccupe.

J'ai un blog avec une colonne à droite et je souhaiterais y ajouter une colonne à gauche.

Une petite colonne à gauche, une grande colonne au milieu et une petite colonne à droite.

Les 2 petites colonnes ayant exactement les mêmes dimension, présentation ....

Je n'y arrive pas du tout. Smiley biggol


a écrit :
<head>

<style type="text/css">
/*
-----------------------------------------------
Blogger Template Style
Name: Minima Blue
Designer: Douglas Bowman + kscades pour les modifications
URL: www.stopdesign.com
Date: 28 Feb 2004
----------------------------------------------- */


body {
background:#135;
margin:0;
padding:40px 20px;
font:x-small "Trebuchet MS",Trebuchet,Verdana,Sans-Serif;
text-align:center;
color:#ccc;
font-size/* */:/**/small;
font-size: /**/small;
}
a:link {
color:#9bd;
text-decoration:none;
}
a:visited {
color:#a7a;
text-decoration:none;
}
a:hover {
color:#ad9;
text-decoration:underline;
}
a img {
border-width:0;
}


/* Header
----------------------------------------------- */
@media all {
#header {
width:700px;
margin:0 auto 10px;
border:1px solid #468;
}
}
@media handheld {
#header {
width:90%;
}
}

#blog-title {
margin:5px 5px 0;
padding:20px 20px .25em;
border:1px solid #357;
border-width:1px 1px 0;
font-size:200%;
line-height:1.2em;
color:#eee;
text-transform:uppercase;
letter-spacing:.2em;
}
#blog-title a {
color:#eee;
text-decoration:none;
}
#blog-title a:hover {
color:#ad9;
}
#description {
margin:0 5px 5px;
padding:0 20px 20px;
border:1px solid #357;
border-width:0 1px 1px;
font:78%/1.4em "Trebuchet MS",Trebuchet,Arial,Verdana,Sans-serif;
text-transform:uppercase;
letter-spacing:.2em;
color:#79b;
}


/* Content
----------------------------------------------- */
@media all {
#content {
width:700px;
margin:0 auto;
padding:0;
text-align:left;
}
#main {
width:440px;
float:left;
}
#sidebar {
width:200px;
float:right;
}
}
@media handheld {
#content {
width:90%;
}
#main {
width:100%;
float:none;
}
#sidebar {
width:100%;
float:none;
}
}




/* Headings
----------------------------------------------- */
h2 {
margin:1.5em 0 .75em;
font:bold 78%/1.4em "Trebuchet MS",Trebuchet,Arial,Verdana,Sans-serif;
text-transform:uppercase;
letter-spacing:.2em;
color:#777;
}


/* Posts
----------------------------------------------- */
@media all {
.date-header {
margin:1.5em 0 .5em;
color:#579;
}
.post {
margin:.5em 0 1.5em;
border-bottom:1px dotted #357;
padding-bottom:1.5em;
}
}
@media handheld {
.date-header {
padding:0 1.5em 0 1.5em;
}
.post {
padding:0 1.5em 0 1.5em;
}
}

.post-title {
margin:.25em 0 0;
padding:0 0 4px;
font-size:140%;
line-height:1.4em;
color:#fc6;
}
.post-title a {
text-decoration:none;
color:#fc6;
}
.post-title a:hover {
color:#fff;
}
.post div {
margin:0 0 .75em;
line-height:1.6em;
}
p.post-footer {
margin:-.25em 0 0;
color:#357;
}
.post-footer em, .comment-link {
font:78%/1.4em "Trebuchet MS",Trebuchet,Arial,Verdana,Sans-serif;
text-transform:uppercase;
letter-spacing:.1em;
}
.post-footer em {
font-style:normal;
color:#579;
margin-right:.6em;
}
.comment-link {
margin-left:.6em;
}
.post img {
padding:4px;
border:1px solid #222;
}
.post blockquote {
margin:1em 20px;
}
.post blockquote p {
margin:.75em 0;
}


/* Comments
----------------------------------------------- */
#comments h4 {
margin:1em 0;
font:bold 78%/1.6em "Trebuchet MS",Trebuchet,Arial,Verdana,Sans-serif;
text-transform:uppercase;
letter-spacing:.2em;
color:#579;
}
#comments h4 strong {
font-size:130%;
}
#comments-block {
margin:1em 0 1.5em;
line-height:1.6em;
}
#comments-block dt {
margin:.5em 0;
}
#comments-block dd {
margin:.25em 0 0;
}
#comments-block dd.comment-timestamp {
margin:-.25em 0 2em;
font:78%/1.4em "Trebuchet MS",Trebuchet,Arial,Verdana,Sans-serif;
text-transform:uppercase;
letter-spacing:.1em;
}
#comments-block dd p {
margin:0 0 .75em;
}
.deleted-comment {
font-style:italic;
color:gray;
}


/* Sidebar Content
----------------------------------------------- */
.sidebar-title {
color:#579;
}
#sidebar ul {
margin:0 0 1.5em;
padding:0 0 1.5em;
border-bottom:1px dotted #357;
list-style:none;
}
#sidebar li {
margin:0;
padding:0 0 .25em 15px;
text-indent:-15px;
line-height:1.5em;
}
#sidebar p {
line-height:1.5em;
}


/* Profile
----------------------------------------------- */
#profile-container {
margin:0 0 1.5em;
border-bottom:1px dotted #357;
padding-bottom:1.5em;
}
.profile-datablock {
margin:.5em 0 .5em;
}
.profile-img {
display:inline;
}
.profile-img img {
float:left;
padding:4px;
border:1px solid #357;
margin:0 8px 3px 0;
}
.profile-data {
margin:0;
font:bold 78%/1.6em "Trebuchet MS",Trebuchet,Arial,Verdana,Sans-serif;
text-transform:uppercase;
letter-spacing:.1em;
}
.profile-data strong {
display:none;
}
.profile-textblock {
margin:0 0 .5em;
}
.profile-link {
margin:0;
font:78%/1.4em "Trebuchet MS",Trebuchet,Arial,Verdana,Sans-serif;
text-transform:uppercase;
letter-spacing:.1em;
}


/* Footer
----------------------------------------------- */
#footer {
width:660px;
clear:both;
margin:0 auto;
}
#footer hr {
display:none;
}
#footer p {
margin:0;
padding-top:15px;
font:78%/1.6em "Trebuchet MS",Trebuchet,Verdana,Sans-serif;
text-transform:uppercase;
letter-spacing:.1em;
}
</style>

</head>



Qu'est ce que je dois changer là dedans ?

Et dois-je changer aussi qque chose dans la partie <body> ?

Merci

Anne
Modifié par kscades (28 Aug 2006 - 20:45)
Bonsoir Anne
Pour t'aider à avancer un peu dans cette recherche, je te conseillerais de:
- Fournir le code html avec tes essais de réalisation, la situation actuelle, ce qui ne fonctionne pas, l'identification du problème.
- Fournir si possible une page de test en ligne. Ca accélère généralement le délai de réponse à des sujets de ce type.
Merci Dom

A vrai dire j'ai réussi à avancer en ajoutant dans "Content"

<--- CONTENT -->
#rightbar {
width:185px;
float:left;
padding:10px;
margin-left:10px;
border:2px solid #cc00cc;
font-size:9pt;
color:#fff;
}
#leftbar {

width:185px;
float:left;
padding:10px;
margin-right:10px;
margin-left:7px;
border:2px solid #cc00cc;
font-size:8pt;
color:#fff;


et après <-- begin content -->

j'ai mis mes colonnes dans l'ordre souhaité.

J'arrive à avoir de "l'à peu près" mais comme je change aussi la résolution d"écran 1024*768 au lieu de 800*600), je n'arrive pas trop à gérer mes tailles de colonne et mes marges ainsi que mes paddings !
J'ai le même problème que toi. Et puis, en table, tr et td, ça se fait en 5 minutes; ça fait trois jours et je ne trouves pas.
Salut

Anne a écrit :
J'arrive à avoir de "l'à peu près" mais comme je change aussi la résolution d"écran 1024*768 au lieu de 800*600), je n'arrive pas trop à gérer mes tailles de colonne et mes marges ainsi que mes paddings !
Qu'entends-tu par changement de résolution ? Vu que tes largeurs sont définies en px, il ne devrait pas y avoir de changement qd on redimensionne la fenêtre Smiley ohwell

Comme l'a souligné dom, il faudrait fournir le code de la page html pour qu'on puisse se faire une idée (l'exemple en ligne restant l'idéal).

PS : utilise les balises [ code] & [ /code] pour le code, quote ce sont les citations Smiley cligne
Sujet clos
Aller à