> Tous les forums > Forum des Webmasters
 Aide sur du CSS: séparer un texte en 2 colonnes?
Ajouter un message à la discussion
Page : [1] 
Page 1 sur 1
Saphostiger
  Posté le 05/01/2011 @ 15:25 
Aller en bas de la page 
Petit astucien

Bonjour à tous (et bonne année!)

Après de longues recherches infructueuses, je m'en remets à vous... J'édite un site construit à partir d'une plateforme de blog, suis pas un pro du CSS mais j'apprends petit à petit! Voilà mon problème: tout allait bien jusqu'à maintenant (mise en forme + menu fonctionnel, même sous IE6...) SAUF que... je voudrais séparer le texte d'un article (qui occupe pour l'instant toute la largeur du container) en deux colonnes, pour insérer un encart (du texte sur background coloré) à droite. Voici l'image, c'est plus parlant:

Résultat recherché

J'ai d'abord pensé à créer une classe spécifique:

.list_actualites li { display: block; float: left; padding: 0px 0px 0px 5px; width: 610px; height: 400px; text-align: justify; overflow: hidden; }
.list_actualites li.normal { width: 450px; margin: 0 50 0 0px; padding: 0 0 0 10px; }
.list_actualites li.decal { margin: 0 0 0 10px; padding: 0 0 0 10px; width: 180px; font-size: 0.9em; }
.list_actualites li a { display: block; width: 220px; cursor: pointer; color: #404040; text-decoration: none; }
.list_actualites li a:hover { text-decoration: none; }

Mais je me retrouve avec 2 colonnes démarrant par des images de puces déjà intégrées à la plateforme web, qui me servent au demeurant dans les articles, donc je ne veux pas en tant que telles les supprimer. Et le résultat n'est pas terrible visuellement. J'ai bien pensé à faire un système de tableau aux bordures invisibles, mais mes connaissances atteignent vraiment leurs limites... Tout coup de pouce sera donc le bienvenu pour m'aider à obtenir le résultat le plus proche de l'idée ci-dessus!

Merci d'avance

Publicité
kalinka
 Posté le 05/01/2011 à 17:59 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
  Astucienne

difficile de t'aider avec seulement 5 lignes de code

est ce que tu as entouré tes <li> avec des <ul> si c'est le cas utilise list-style:none mais suivant comme ton code est imbriqué cela peut enlever toutes les puces y compris celles de tes articles

Dreamer
 Posté le 05/01/2011 à 18:06 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
  Maître astucien

Salut

Tu vas devoir créer 2 <div> distinct dans ce genre:

html

<div id="container">

<div id="gauche"></div>

<div id="droite"></div>

</div>

css

#gauche{

float:left;

width:500px;

}

#droite{

float:left;

width:250px;

}

Saphostiger
 Posté le 06/01/2011 à 12:33 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
Petit astucien

Merci pour vos réponses.

J'avais pensé au principe de créer 2 classes de <li> selon l'emplacement, mais ici, il s'agirait de conserver les <li> originels, utilisés au fil des pages (dans le "content") comme des puces normales dans le texte ET utiliser la fonction <li> dans ce même "content" pour construire 2 colonnes de texte (formatage qui n'apparait que sur une page d'accueil). Est-ce que le fait de mettre des left et right s'applique? Cela ne va-t-il pas affecter les puces déjà utilisées au fil des texte? Désolé si la question est stupide, j'apprends, j'apprends...

Voici le CSS actuel:

body {
margin: 0px 0px 20px 0px;
padding: 0px;
background-color: #E3D1B2;
font-family: Arial, Verdana, Helvetica, sans-serif;
font-size: 100%;
word-spacing: normal;
color: #5B5B5B;
text-align: center;

}
#container {
margin-right: auto;
margin-left: auto;
margin-top: 5px;
text-align: justify;
background: #AAAAAA url("http://static.hautetfort.com/backend/graphics/design/preview/set11/E3D1B2/f_general.gif") repeat-y 0% 0%;
width: 988px;
}
#container .container-decorator1 {
width: 100%;
}
#container .container-decorator1 .container-decorator2 {
width: 100%;

background: transparent ;
no-repeat 0% 100%;
padding-bottom:47px;

}
.container-decorator4 .content-decorator {
padding:12px;
}
.container-decorator4 .content {
padding:0px;
}
#left {
float:left;
overflow: hidden;
width: 221px;
line-height: 100%;
}
#right {
display: none;
}
#center {
width: 760px;
overflow: hidden;
float: left;
background: transparent;
}

/* CENTRE */
.content {
overflow: hidden;
padding: 0px 0px 0px 28px;
font-size: 11px;
}
.content h2 {
margin: 0px 0px 3px 0px;
padding: 10px 0px 3px 0px;
font-size: 20px;
color:#5B5B5B;
line-height:110%;
}
.content h2.date {
margin: 0px 0px 3px 0px;
padding: 10px 0px 3px 0px;
font-size: 17px;
color:#BFBDAC;
line-height:100%;
}
.content h3 {
margin: 0px;
padding: 5px 0px 15px 0px;
font-size: 20px;
color:#5B5B5B;
line-height:110%;
}
.content .posttext,
.content p {
font-size: 12px;
color:#5B5B5B;
margin:14px 10px 0px 0px;
}
.content a img {border:0px;}
.content blockquote {
font-size: 12px;
}
.content ul {
font-size: 12px;
}
.content ul li{
list-style-type:none;
background: url("http://static.hautetfort.com/backend/graphics/design/preview/set11/E3D1B2/puce.gif") no-repeat 0px 6px;
padding: 0px 0px 0px 15px;
line-height:150%;
color:#5B5B5B;

}
.content p.posted {
margin: 15px 0px 30px 0px;
font-size: 11px;
color:#5B5B5B;
clear: both;
border-top: 1px dotted #A0A0A0;
padding: 5px 10px 5px 0px;
}
.content p.posted a {
color: #5B5B5B;
}
.content p.posted a:hover {
color: #927E50;
text-decoration:none;
}

Saphostiger
 Posté le 09/01/2011 à 13:04 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
Petit astucien

Personne n'a d'idées ou de conseils?

Dreamer
 Posté le 09/01/2011 à 13:56 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
  Maître astucien

Il te suffit de mettre une class à tes <li> .....

Page : [1] 
Page 1 sur 1

Vous devez être connecté pour participer à la discussion.
Cliquez ici pour vous identifier.

Vous n'avez pas de compte ? Créez-en un gratuitement !
Recevoir PC Astuces par e-mail


La Lettre quotidienne +226 000 inscrits
Avec l'actu, des logiciels, des applis, des astuces, des bons plans, ...

Les bonnes affaires
Une fois par semaine, un récap des meilleurs offres.

Les fonds d'écran
De jolies photos pour personnaliser votre bureau. Une fois par semaine.

Les nouveaux Bons Plans
Des notifications pour ne pas rater les bons plans publiés sur le site.

Les bons plans du moment PC Astuces

Tous les Bons Plans
28,10 €Clé USB 3.1 SanDisk Extreme Go 128 Go à 28,10 €
Valable jusqu'au 18 Mai

Le vendeur sérieux QUMOX sur Rakuten fait une promotion sur la clé USB 3.1 Sandisk Extreme Go 128 Go qui passe à 28,10 € livrée. On la trouve ailleurs à partir de 40 €. Cette clé USB 3.1 (compatible usb 3.0) est rapide puisqu'elle offre des débits jusqu'à 200 Mo/s en lecture et 150 Mo/s en écriture. Pratique, son connecteur rétractable vous évitera d'avoir à manipuler (et perdre ?) un bouchon. 

Notez que si vous n'avez jamais commandé sur Rakuten, cette offre de parrainage vous permettra de déduire 10 € de votre commande (à partir de 20 € d'achat). La clé USB vous reviendra ainsi à 18,10 € !


> Voir l'offre
13,99 €Clé USB Sandisk Ultra 64 Go à double connectique USB 3.1 Type A et C à 13,99 €
Valable jusqu'au 18 Mai

Amazon fait une promotion sur la clé USB Sandisk Ultra 64 Go à double connectique USB 3.1 Type A et C qui passe à 13,99 € alors qu'on la trouve ailleurs à plus de 25 €. Cette clé USB  dispose d'un connecteur réversible USB Type C et d'un connecteur classique de type A. Grâce à elle, transférez en toute simplicité et rapidement (jusqu'à 150 Mo/s) vos fichiers entre vos smartphones, tablettes et ordinateurs. 


> Voir l'offre
89,99 €Disque dur externe portable Seagate Expansion 4 To USB 3.0 à 89,99 € avec le code AFFAIRE20
Valable jusqu'au 18 Mai

Cdiscount fait une promotion sur le disque dur externe portable Seagate Expansion d'une capacité de 4 To qui passe à 89,99 € avec le code promo AFFAIRE20 alors qu'on le trouve ailleurs à partir de 120 €. Ce disque dur externe portable au format 2,5 pouces dispose d'une interface USB 3.0 compatible USB 2.0. Une excellente affaire pour ce disque dur qui offre des débits de 115 Mo/s. Il n'est pas soudé et est donc démontable si vous souhaitez le réutiliser ailleurs (console, NAS, PC).


> Voir l'offre

Sujets relatifs
Aide pour insérer texte sur une adresse internet
Formatage de l'affichage de texte en colonnes.
aide pour du texte
editeur TinyMCE grande largeur texte dans page
Texte dans tableau
Bulle de texte dans une zone cliquable
Aide pour Gimp !!
besoin d'aide pour Kompozer
Aide pour finaliser le transfert d'un hébergeur gratuit vers 1&1, svp
aide creations de boutons qui donne sur un lien video
Plus de sujets relatifs à Aide sur du CSS: séparer un texte en 2 colonnes?
 > Tous les forums > Forum Forum des Webmasters