> Tous les forums > Forum des Webmasters
 Aide pour du CSS
Ajouter un message à la discussion
Page : [1] 
Page 1 sur 1
wacly
  Posté le 30/06/2011 @ 23:44 
Aller en bas de la page 
Petit astucien

Bonsoir

Je sais, certains vont se dire :"regarde-moi ce noob, il ne sait même pas utiliser du CSS" mais c'est pas grave, qui n'a jamais été débutant ?!

J'ai un petit problème, je voudrais arranger cette image :

En fait, je veux que "autres articles sur le même sujet :" soit le premier, on saute une ligne et on retrouve la liste avec des puces (en forme de cercle), et pour l'instant, c'est pas encore ça

Voici le css que j'utilise pour l'instant :

#related-posts{
width: 98%;
margin: 15px auto;
}
/* Widget H2 heading */
#related-posts h2{
font-size: 16px;
font-family: Georgia;
background: #D9E1FA url(http://i26.tinypic.com/6fqi5z.png) no-repeat scroll 3px center;
padding: 10px 0px 10px 40px;
margin: 0 0 5px 0;
border: 1px solid #6F82BF;
}
/* Widget UL list */
#related-posts ul{
list-style: none;
font-size: 12px;
letter-spacing: 0;
}

#related-posts ul li {
background: transparent url(http://i28.tinypic.com/ev762w.jpg) no-repeat scroll 0 5px;
line-height: 140%;
margin: 0;
padding: 0 0 0.8em 20px;
}



Modifié par wacly le 30/06/2011 23:46
Publicité
wacly
 Posté le 30/06/2011 à 23:47 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
Petit astucien

J'ai oublié de dire merci à tous ceux qui vont se pencher sur mon petit problème

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

Et le html, SVP ??

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

Sinon un retour à la ligne suffit ( <br />) et pour tes cercles, tu mets dans ul:

list-style-type:circle; à la place de list-style:none;

kalinka
 Posté le 01/07/2011 à 09:55 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
  Astucienne

si l'encadré est une image, il serait peut etre plus simple de la mettre avec img src directement dans la div puis de mettre en dessous tes liens de sujets dans un paragraphe.En l'absence de float, le paragraphe devrait etre automatiquement renvoyé a la ligne . L'avantage c'est que tu pourras positionner le paragraphe avec précision si tu ajoutes une class et pour la puce c'est comme dreamer te l'a expliqué

<div><img src="tonimage.jpg">
<p>
<ul>
<li> premier lien </li>
<li> premier lien </li>
</ul>

</p>
</div>



Modifié par kalinka le 01/07/2011 09:59
elle
 Posté le 01/07/2011 à 10:08 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
  Grande Maîtresse astucienne

Madame Kali, depuis quand met-on une liste dans un paragraphe?

kalinka
 Posté le 01/07/2011 à 10:55 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
  Astucienne

depuis que je ne relis pas le code que j'écris

evidemment le </p> de fermeture doit etre au dessus de la liste puiqu'il doit jouer le role de tampon entre la liste et l'image

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

Vous trouverez dans ce lien le code html que j'utilise pour mon blog sur blogger

En fait je veux un retour à la ligne avec CSS. La liste que vous voyez n'est pas manuelle, elle est créée à partir d'un script et mise en forme par le CSS que j'essaye d'adapter.

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
99,99 €Lit superposé métal 2x190x90 avec sommiers à 99,99 €
Valable jusqu'au 18 Septembre

Cdiscount fait une promotion sur le lit superposé (2 lits de 190 x 90 cm) Alice en métal qui passe à 99,99 € au lieu de 130 €. Equipé d’une échelle réversible, ce lit superposé convient aussi bien aux adultes, qu’aux enfants, et peut ainsi accueillir jusqu’à 120 kg. Les sommiers sont inclus et la livraison est gratuite.


> Voir l'offre
65,99 €Kit de 16 Go (2 x 8 Go) de mémoire DDR4 Crucial Ballistix 3200 MHz à 65,99 €
Valable jusqu'au 18 Septembre

Cdiscount fait une promotion sur le kit de 16 Go (2x8 Go) de mémoire DDR4 Crucial Ballistix 3200 MHz CL16 qui passe à 65,99 € avec le code promo SEPT. On le trouve ailleurs à plus de 85 €. Une très bonne affaire !


> Voir l'offre
155,89 €Kit de 32 Go (2x16 Go) de mémoire DDR4 Corsair Vengeance RGB Pro 3600 MHz à 155,89 € livré
Valable jusqu'au 19 Septembre

Amazon Allemagne fait une promotion sur le kit de 32 Go (2x16 Go) de mémoire DDR4 Corsair Vengeance RGB Pro 3600 MT/s CL18 à 151,16 € (avec la TVA ajustée). Comptez 4,73 € pour la livraison en France soit un total de 155,89 € livré alors qu'on le trouve ailleurs autour de 190 €. Vous pourrez personnaliser la palette de couleurs directement depuis le logiciel Corsair iCU.

Vous pouvez utiliser votre compte Amazon France sur Amazon Allemagne et il n'y a pas de douane.


> Voir l'offre

Sujets relatifs
Aide pour Gimp !!
besoin d'aide pour Kompozer
Aide pour finaliser le transfert d'un hébergeur gratuit vers 1&1, svp
Aide pour modifications dans le code d'un blog
Aide pour une pagination (SQL/PHP)
aide pour menu déroulant
Besoin d'aide pour achat portable usage pro
Aide pour faire un 360 degré images (animation)
Aide pour galerie d'images
Aide pour creation d'un blog pour classe de neige
Plus de sujets relatifs à Aide pour du CSS
 > Tous les forums > Forum Forum des Webmasters