Problème en CSS

Résolu

BabaRock Messages postés 167 Date d'inscription Statut Membre Dernière intervention -
Dalida Messages postés 6728 Date d'inscription Statut Contributeur Dernière intervention - 22 juil. 2008 à 17:36

Bonjour,

Je suis en train de designer une page web, entièrement en HTML /CSS. Dans la page il y a une sidebar. Dans cette sidebar, je veux mettre une section "Recommandations" où je propose des livres à lire.

J'ai utilisé pour cela des balises <ul> où dans chaque <li> je mets la photo de la couverture du livre <img>, ainsi que le titre du livre en <p>. Ce qui donne environ ça:

<div class="recommendation">
<h2>En ce moment je lis</h2>
<ul class="module_list">
<li> <img .../><p>...</p> </li>
<li> <img .../><p>...</p> </li>
<li> <img .../><p>...</p> </li>
<li> <img .../><p>...</p> </li>
<li> <img .../><p>...</p> </li>
</ul>
</h2>
</div>

Le problème est au niveau du CSS:
J'aimerais positionner les images et le titre d'une manière bien précise. Le titre (qui comprend le nom de l'auteur aussi) s'étale sur 3 à 4 lignes et je veux le mettre directement à droite des images, histoire de faire une liste. J'ai essayé d'utiliser float, mais le résultat a été catastrophique, le texte commence au niveau du milieu de l'image, et la quatrième ligne va carrément en-dessous. En utilisant position, le rendement varie tellement d'un navigateur à l'autre que ça devient vraiment difficile.

Enfin si quelqu'un a quelque chose à proposer ce serait cool.
Merci

A voir également:

Problème en CSS
Background color css ✓ - Forum CSS
Css download - Télécharger - HTML
Enlever le soulignement d'un lien css ✓ - Forum Réseaux sociaux
Enlever le soulignage des lien. - Forum CSS
Enlever soulignement lien css ✓ - Forum CSS

8 réponses

Réponse 1 / 8

widi70 Messages postés 649 Date d'inscription Statut Membre Dernière intervention 65

Bonjour, pourquoi ne pas faire un tableau ça pourrais te simplifier la vie.
Bon courage

BabaRock Messages postés 167 Date d'inscription Statut Membre Dernière intervention 8

tableau? connais pas ...

Réponse 2 / 8

widi70 Messages postés 649 Date d'inscription Statut Membre Dernière intervention 65

ben au lieu de faire ça en css tu crée simplement un tableau
par exemple
<table><tr><td>Auteur commentaire </td><td><img src='chemin'></td></tr>
<tr><td>Auteur2 commentaire2</td><td><img src='chemin2'></td></tr>
</table>

Je pense que ça va te simplifier la vie
Bon courage

Réponse 3 / 8

BabaRock Messages postés 167 Date d'inscription Statut Membre Dernière intervention 8

Excellent!
Merci infiniment ...(larmes et soupirs de joie!)...

Réponse 4 / 8

Kc' Messages postés 123 Date d'inscription Statut Membre Dernière intervention 24

Je ne suis pas trop calé en CSS mais: ça ne viens pas de ton block recommandation qui est trop petit ?
Je comprend pas pourquoi le titre s'étale sur 3/4 ligne, s'il a la place il devrait ce mettre direct à la suite de l'image.

ps: y'a un </h5> qui se balade en bas ?

BabaRock Messages postés 167 Date d'inscription Statut Membre Dernière intervention 8

Le problème est que le block est situé dans une sidebar assez étroite et donc oui <p>Chris Anderson: La Longue Traîne : La nouvelle économie est là !</p> s'étale sur 4 lignes. Mais le tableau règle parfaitement l'affaire.

Par contre pour le CSS j'ai une petite question: comment réduire l'espace entre deux colonnes?

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question

Réponse 5 / 8

Kc' Messages postés 123 Date d'inscription Statut Membre Dernière intervention 24

https://openclassrooms.com/fr/courses

Tout (ou presque) ce qu'il faut savoir sur les tableau et leur css

Réponse 6 / 8

macgawel Messages postés 664 Date d'inscription Statut Membre Dernière intervention 89

Bonjour.

Si j'ai bien compris, en fait quand tu parles de "Titre", tu parles du contenu de tes paragraphes ?

Il vaut mieux éviter de mettre des paragraphes à l'intérieur d'une liste.

Par contre, ce que tu veux faire (toujours si je comprends bien) correspond très bien aux listes de définitions :
- L'image (et éventuellement le titre) en Terme de Définition dt
- Le titre, l'auteur, les commentaires en Description de Définition dd
(tu peux même en profiter pour "styler" l'auteur, le titre, etc. en donnant des classes à tes dd)

Exemple.
Le html :

<h2>En ce moment je lis</h2>
<dl class="lectures">
<dt><img src="test.jpg" alt="test" title="test" /></dt>
<dd class="titre">Test</dd>
<dd class="auteur">par moi</dd>
<dd>Un très bon livre.
Et je le dis sans fausse modestie !!!</dd>

Le CSS :

dt {
	width: 100px;
	float: left;
}
dt img {
	width:100px;
}
dd.titre {
	font-weight:bold;
}
dd.auteur {
	font-style:italic;
}

Réponse 7 / 8

BabaRock Messages postés 167 Date d'inscription Statut Membre Dernière intervention 8

Est-ce que c'est très différent des tableaux?

macgawel Messages postés 664 Date d'inscription Statut Membre Dernière intervention 89

Il n'y a aucun rapport...

L'avantage des tableaux, c'est que :
- Tu as déjà mis en place la solution (je ne l'avais pas vu quand j'ai répondu :-o )
- C'est un moyen simple de faire une mise en page de ce genre.

Inconvénient :
- Si tu veux changer la présentation, il faut revoir les tableaux, voire refaire complétement ta page (en tout cas, la partie correspondante...).

Jacobéo Messages postés 304 Date d'inscription Statut Membre Dernière intervention 79

Bonjour BabaRock,

Voilà un de mes CSS pour un menu déroulant .

/* CSS Menu déroulant J Images J In Conception */

#menuDeroulant {
font-size : 0.6em;
width : 644px;
list-style-type : none;
margin : 0;
padding : 0;
border : 0;
}
#menuDeroulant li {
float : left;
margin : 0;
padding : 0;
border : 0;
}
#menuDeroulant .sousMenu {
border : 0;
font-size : 1em;
list-style-type : none;
margin : 0;
padding : 0;
}
#menuDeroulant .sousMenu li {
float : none;
margin : 0;
padding : 0;
border : 0;
}
#menuDeroulant li {
float : left;
margin : 0;
padding : 0;
border : 0;
}
#menuDeroulant li a:link {
display : block;
height : 1%;
color : #ff3300;
background : rgb(34, 34, 34);
margin : 0;
padding : 4px 8px;
border-bottom : 20px solid transparent;
border-right : 1px solid rgb(255, 255, 255);
text-decoration : none;
font-family : Arial, Helvetica, sans-serif;
font-weight : bold;
font-variant : small-caps;
}
#menuDeroulant li a:visited {
display : block;
height : 1%;
background : rgb(110, 134, 158);
margin : 0;
padding : 4px 8px;
border-right : 1px solid rgb(255, 255, 255);
text-decoration : none;
}
#menuDeroulant li a:hover {
background-color : rgb(72, 70, 46);
font-size : 1em;
}
#menuDeroulant li a:active {
background-color : rgb(95, 135, 157);
color : rgb(255, 255, 255);
}
#menuDeroulant .sousMenu li a:link {
display : block;
color : rgb(255, 255, 255);
margin : 0;
border : 0;
text-decoration : none;
background : transparent url(../../structure/png/fond1.png) repeat;
}
#menuDeroulant .sousMenu li a:visited {
font-size : 1.5em;
font-family : Arial, Helvetica, sans-serif;
font-style : italic;
font-weight : bold;
display : block;
color : rgb(191, 169, 22);
margin : 0;
border : 0;
text-decoration : none;
background : url(../../structure/png/fondTRRR.png) repeat;
}
#menuDeroulant .sousMenu li a:hover {
background-image : none;
background : transparent url(../../structure/png/fondTRR.png) repeat;
}
#menuDeroulant .sousMenu li {
float : none;
margin : 0;
padding : 0;
border : 0;
width : auto;
border-right : 1px solid transparent;
border-bottom : 1px solid transparent;
}
#menuDeroulant .sousMenu {
display : none;
list-style-type : none;
margin : 0;
padding : 0;
border : 0;
}
#menuDeroulant li:hover > .sousMenu {
display : block;
}
#menuDeroulant {
width : 617px;
list-style-type : none;
margin : 0;
padding : 0;
border : 0;
position : absolute;
top : 221px;
left : 301px;
z-index : 3;
}

Dalida Messages postés 6728 Date d'inscription Statut Contributeur Dernière intervention 922 > macgawel Messages postés 664 Date d'inscription Statut Membre Dernière intervention

salut,

le principal inconvénient c'est que c'est techniquement incorrect.

BabaRock Messages postés 167 Date d'inscription Statut Membre Dernière intervention 8 > Dalida Messages postés 6728 Date d'inscription Statut Contributeur Dernière intervention

Pourquoi? Les tableaux ne sont pas aux normes de la w3c ?

Dalida Messages postés 6728 Date d'inscription Statut Contributeur Dernière intervention 922 > BabaRock Messages postés 167 Date d'inscription Statut Membre Dernière intervention

Les tables ne devraient pas représenter simplement un moyen de disposer le contenu d'un document car cela peut entraîner des problèmes de restitution sur les médias non-visuels. En outre, quand on les utilise avec des graphiques, ces tables peuvent forcer l'utilisateur à effectuer un défilement horizontal pour voir une table qui aura été conçue sur un système avec une surface d'affichage plus grande. Afin de minimiser ces problèmes, les auteurs devraient employer des feuilles de style pour le contrôle de la disposition plutôt que des tables.

Spécification HTML 4.01

Réponse 8 / 8

BabaRock Messages postés 167 Date d'inscription Statut Membre Dernière intervention 8

Ben je pense bien que pour le moment je vais rester avec les tableaux (j'ai honnêtement la flemme d'essayer les listes de définitions tout de suite là, ça fait 4 semaines que je travaille sur ce site et là je commence à saturer).
Mais sinon merci beaucoup pour ton aide, je garderai ton conseil en tête pour la prochaine fois que je suis dans un cas pareil.

Discussions similaires

Enlever le soulignement sous les liens en HTML/CSS

indice et exposant en css ?

Enlever trait sous un lien href

CSS/Comment enlever couleur liens ?

trait horizontal avec du css

Votre réponse

Discussions similaires