28106 sujets

CSS et mise en forme, CSS3

Pages :
(reprise du message précédent)

Ok, je vais détailler.

Le contexte c'est des news.
On a la date de la news et juste à sa droite une info (par exemple la catégorie de la news, le thème) et l'auteur.

Ce que je veux c'est tout simple en théorie :


9 janvier 2005 | photographie
               | littlesam

Ici le texte de la news


Le seul truc prise de tête c'est de faire en sorte que le trait verticale englobe bien les deux lignes de droite. Hors il es attaché à la date qui flotte à droite et qui a une taille de 1.5em. Le texte lui est en 0.8em.
Quand on zoom sur le texte parfois la date est plus petit que les deux lignes et parfois plus grand. Je ne comprends pas du tout comment ça marche.
Modifié le 09 Jan 2005 - 22:42
Je sai pas si c'était cela que tu voulais mais je pense avoir trouvé la solution

  
#content h4 {
    float: left;
    margin: 0px;
    padding: 0px;
    font-family:  georgia, arial, sans-serif;
    font-size: 1.5em;
  }
  #content div {
    margin-left:5px;
    padding-left:5px;
    float: left;
    border-left:1px solid #000;
    font-size: 0.8em;
  }


cela me donne bien

9 janvier 2005 | info
               | auteur


Modifié le 09 Jan 2005 - 23:04
C'est en effet une solution assez proche de ce que je cherche. Reste le problème du zoom du texte : le h4 dépasse par en dessous quand on grossit, comme si il grossisiat plus vite que le texte mis à coté. Quelqu'un sait comment ça fonctionne ?

Edit : ah non je me souviens pourquoi j'ai écraté cette solution ! J'arrive plus à mettre le paragraphe d'en dessous en dessous. Le clear: both; bousille la disposition globale de la page avec le menu flottant de coté Smiley confus

Re-Edit : avec un div de plus c bon, faut que j'arrête de radiner sur les divs.

J'ai l'impression que la marge déconne avec le float... ya 4 ou 5 pixels d'écart sortis de je ne sais ou...
Modifié le 09 Jan 2005 - 23:26
Peut être que la structure HTML utilisée n'est pas des plus adaptée non plus, elle est correcte, mais il y a peut être plus efficace ET laissant une meilleure marge de manoeuvre au niveau de la mise en forme.

Je parle par exemple d'une liste de définition qui serait ici assez adapté.


<dl>
  <dt>date</dt>
  <dd>auteur</dt>
  <dd>categorie</dd>
  <dd>Text de la news</dd>
</dl>


En jouant astucieusement avec les float et le clear et en ajoutant une ou 2 class, il doit y avoir moyen d'obtenir ce que tu recherches sans ajout de code HTML inutile et en utilisant un code élégant et adapté.
Ou une autre possibilité :

<div id="news20050109">
 <h4>09 janvier 2005</h4>
 <h5>categorie <br /><span class="by">par : littlesam</span></h5>
 <p class="news">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
Stephan a écrit :
Très efficace la solution de brice.

En effet Smiley cligne
Par ailleurs, il faudrat ajouter un élément conteneur à tout ceci, en effet le clear pourrait interferer avec les éléments alentour comme littlesam semblait le dire.
D'où avec la même méthode, l'utilisation d'une liste de definition, ou simplement du même code avec un <div> conteneur, au choix.

Pour faire le choix, il pourrait être interessant de voir le rendu sans mise en forme et le rendu dans un navigateur texte pour voir quelle solution est la plus adaptée.
Modifié le 10 Jan 2005 - 00:00
vous me flattez Smiley confused Smiley biggrin ...

bien sur il faut considérer tout cela dans une hiérarchie plus grande (et avec un code un peu plus régulier, j'ai un peu tapé comme ça venait Smiley langue ), même si à vrai dire le clear n'est là que par sécurité. Je crois que tout le "problème" (oui oui, celui à cause duquel les css étaient bons à jeter, ne me remerciez pas...) venait de l'espace interligne, celui ci étant de base souvent plus grand que la police de corps (en typo 120% du corps est souvent utilisé comme base). Si on le ramène à 1em les fûts et les jambages peuvent se toucher, mais ça ramène la hauteur du bloc à celle de son voisin, soit 30px/2em dans ce cas çi (avec un affichage à 100%). D'où aussi les height respectifs des éléments, mais comme j'ai mis un padding...
bref, chipotez que diable Smiley lol
Modifié le 10 Jan 2005 - 00:54
Zut j'ai pas de quoi tester sous la main...
Je ne sais pas si la solution fonctionnera encore avec une taille de font non plsu en pixels mais en em (pour grandir aussi sous IE).

Mais tous ces problèmes de tailles on quelque chose à voir avec les interlignes ou les hauteurs de lignes ou encore le cumul des ems dans la css. N'y aurait-il pas un bon gros tuto sur tout ça que je comprenne pour de bon comment ça fonctionne ?

Sinon pour ce qui est d'utiliser une liste de définition, je ne suis pas convaincue que le résultat sans css soit acceptable. Je préfère avoir un titre et un ou plusieurs paragraphes en dessous, c'est plus proche de ce a quoi que je pense pour une news.
Modifié le 10 Jan 2005 - 12:00
littlesam a écrit :
Mais tous ces problèmes de tailles on quelque chose à voir avec les interlignes ou les hauteurs de lignes ou encore le cumul des ems dans la css. N'y aurait-il pas un bon gros tuto sur tout ça que je comprenne pour de bon comment ça fonctionne ?

A priori tu as lancé le 3 janvier un sujet Taille des polices où il y a déjà quelques liens qui devraient te renseigner.
Oui j'ai appris bien des choses d'ailleurs, mais toutefois nul part je n'ai vu les questions d'interlignes (ou alors j'ai encore lu trop vite).
Bonjour,

Je n'ai probablement rien compris mais...
Dans le code que tu donnes au début, je vois
#content div {

 border: 1px solid #444444;

}
or tu parles d'une ligne verticale.
Alors, pourquoi pas tout simplement
#content div {

 border-left: 1px solid #444444;

}


Smiley confused pas bien réveillée moi... pas vu la 2eme page Smiley rolleyes
Modifié le 10 Jan 2005 - 16:16
Oui j'ai tout entouré pour voir ou le truc se balade, mais seule celle de droite à un intéret graphique. Quand je teste j'aime bien tout entourer pour retrouver mes petits divs perdus Smiley smile
brice a écrit :
http://www.mentalwarp.com/~moob/tmp/sam.htm


Une fois le font-size: 15px; enlevé (sinon pas de zoom pas de problème, je sais aussi le faire) ça ne marche pas. En fait c'est exactement pareil que ce que j'avais au départ...
Modifié le 10 Jan 2005 - 18:48
T'as donc effectivement rien compris eux ems, les ems sont des dimensions relatives, qui dit relatif dit élément de référence.
Mais si je fixe la taille en pixel le zoom ne marche plus sous IE donc les ems n'ont aucun intéret par rapport aux pixels dans ce cas.

Comment faire pour obtenir la même chose sans bloquer le zoom (j'espère que cette fois ci ma question est claire, ça fait quand même 2 pages que j'arrive pas expliquer le pb Smiley sweatdrop )
j'ai changé les px de mon exemple en point, en centimètre, en inches, IE refuse toujours de redimensionner. Je te propose donc de t'en fouttre et de considérer qu'il s'agit simplement là d'un élément en plus à rajouter à l'interminable liste des raisons de ne pas utiliser cette crasse.
Modifié le 10 Jan 2005 - 19:12
Eureka ! J'ai trouvé !

Si je lui dis font-size: 100% (ce qui me parait un peu idiot ça ressemble à une valeur par défaut) il est enfin capable de de calculer les tailles em de façon linéraire et rationnelle. Si quelqu'un sait pourquoi/comment je suis pas contre une explication mais en attendant, ça marche Smiley ravi
Pages :