Forum |  HardWare.fr | News | Articles | PC | Prix | S'identifier | S'inscrire | Aide | Shop Recherche
1978 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  espace entre ligne de texte et haut du cadre

 



 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

espace entre ligne de texte et haut du cadre

n°2214774
PCnovice
Posté le 02-01-2014 à 12:22:53  profilanswer
 

Bonjour,
 
Je m'essaie à la construction d'un site très simple mais je cale :
J'ai 2 cadres accolés (j'imagine qu'ils sont totalement indépendants ?) :
cadre 1 : <th class="style1" valign="top" style="border: 3px groove #008000;">
cadre 2 : <th class="style2" align="center" valign="top" style="border: 3px groove #008000; ">
1) dans le cadre de gauche, j'ai un espace entre une image et le haut du cadre avec le code *position: relative; top: 40px;*
<img class="" src="xxxxx.gif" style="height: 109px; width: 200px; text-align: center; position: relative; top: 40px;" />
- ce que je ne comprends pas, c'est qu'en augmentant la mesure "top", l'image descend et empiète sur le titre/texte d'en-dessous, comme si l'ordre "top" s'appliquait uniquement à l'image et pas à l'ensemble de la page ?
Question : faut-il construire un cadre dans un cadre (ce dernier recevant alors l'ensemble de la page) pour pouvoir régler correctement les marges droite/gauche/hautes/basse ?
- autre chose : y a-t-il une autre façon de donner des espaces entre des titres qu'à multiplier des <br /> ?  
 
2) dans le cadre de droite (accolé au premier donc), je commence tout de suite avec du texte (le sommaire : les boutons/liens pour naviguer d'une page à l'autre) mais j'aimerais un espace entre le bord haut et le début du texte - or le code que j'ai utilisé pour "descendre" l'image ne donne rien pour du texte ...
 
D'avance je vous suis très reconnaissant pour votre aide !
Bonne journée à tous.

mood
Publicité
Posté le 02-01-2014 à 12:22:53  profilanswer
 

n°2214796
bingojm
Posté le 02-01-2014 à 14:33:36  profilanswer
 

Salut.
 
Essayons d'être clairs...
1. Sais-tu bien que les TH ce sont des cellules de tableau. Pas vraiment des cadres... Je pense que tu devrais découvrir les DIV pour construire ton site. Evite les tableaux si tu n'en as pas réellement besoin.
2. C'est normal que l'image descende vu que ta mesure top s'applique à ton image (img = image). Pour que ce soit à l'ensemble de la page. Tu commendes ca en CSS avec body{margin:20px} par ex.
Pour les espaces tu as les margin et le padding (évite les <br> ). Mais oublie tes tableaux et travaille avec les div. Y a plein de tuto pour ça!
3. Pour décaler ton texte, tu appliques un padding à ton cadre ou un margin à ton texte...
 
Sincèrement, ca te prendra une petite heure pour découvrir les bases. Ne t'embarque pas dans n'importe quoi sinon tu ne comprendras plus rien après.
 
Bonne chance

n°2214822
PCnovice
Posté le 02-01-2014 à 16:55:35  profilanswer
 

Bonjour Bingojm,
merci bien pour ces tuyaux ! ok d'accord, je vais voir ça sérieusement, j'ai tout perdu simplement parce que je n'en ai plus fait depuis 15 ans comme "déjà" bricoleur non averti (sur le vieux frontpage) - avec le VWD je suis largué, et comme je ne connais pas l'anglais (plutôt le langage germanique) !!!
- j'ai fouillé pas mal de pages d'aide mais je ne trouve pas d'exemples qui ressemble "exactement" à ma disposition  :-\  
Pour ta réponse 3, pourrais-tu stp me donner un exemple de ligne de code ? (pour que titre de page à ~3 cm du bord supérieur d'un cadre) je ne sais vraiment pas où intégrer la "marge" -
mon "cadre de droite" commence ainsi : (ouh la la ! tous les <br> en trop ! :??: )
 
<th class="style2" align="center" valign="top" style="border: 3px groove #008000; ">
        <span class="style21" style="color: #0000FF ; ">Page d'accueil</span><br /><br /><br />
        <span class="style6" style="text-decoration: underline">LISTE DES ARTICLES</span><br />
        <br />
        <br />
         <span class="style20">(lien vers) article numéro 1<br /><br />
          (lien vers) article numéro 2<br /><br />
          (lien vers) article numéro 3<br /><br />
           etc etc etc
 
******************************************************************
style2    { width: 273px; height: 0 auto;}            
.style20 { font-size: medium; font-family: Arial; color: #006600; }
.style21 { font-size: large; font-family: Arial; color: #006600; text-align: center; }
.style6   { font-size: medium; font-family: Arial; color: #006600; text-align: left; }
*******************************************************************
 
MERCIIIIIIIIIIIIIII  ! :-)

n°2214827
Pablo Escr​obarbe
Le gros nigaud
Posté le 02-01-2014 à 17:54:37  profilanswer
 
n°2214834
PCnovice
Posté le 02-01-2014 à 19:16:38  profilanswer
 

bonjour et merci Petitpois, mais ça reste du jargon absolument incompréhensible pour moi ; si je n'ai pas du concret du genre "pour faire ceci tu écris cela" je n'y arriverai jamais - merci quand même pour les adresses intéressantes ... éventuellement pour plus tard  ;)

n°2214837
bingojm
Posté le 02-01-2014 à 21:15:53  profilanswer
 

Oh là là que ce n'est pas beau tout ça...
 
Bon, malgré tout, voici une aide.
 
Pour appliquer à tout l'intérieur du cadre:

Code :
  1. <th class="style2" align="center" valign="top" style="border: 3px groove #008000; padding-top: 20px ">


 
Pour appliquer à une ligne en particulier:

Code :
  1. <span class="style21" style="color: #0000FF; margin-top: 20px ">Page d'accueil</span><


 
Une fois que tu auras avancé comme tu le souhaites, envoie moi ta page. Je te donnerai un coup de main pour la mettre en page correctement. Ca t'aidera à voir les bonnes bases. Mais ce ne sont pas les tutos qui manquent...
 
Bonne soirée

n°2214896
PCnovice
Posté le 03-01-2014 à 17:25:26  profilanswer
 

Bonjour Bingo,
Merci à toua ! je vais pouvoir simplement recopier tes codes et surtout me les mettre quelque part en mémoire, vu que je ne peux plus compter tout à fait sur la mienne ;-) je suis d'accord avec toi concernant les tutos qui ne manquent pas, mais comme je n'ai  été, avec les outils informatiques, qu'un (petit) dessinateur de circuits imprimés et pour d'autres jobs sur des logiciels plutôt "techniques" comme aide-technicien/méthode en électronique (années 90), j'y pige que couic  au langage informatique pur et dur.
 
Il y a encore quelque chose qui m'embrouille, c'est que les termes dans les fenêtres  "style" et autres du même genre concernant la mise en forme des "textes/paragraphe/bordures/etc..." dans le logiciel VWD sont en anglais. Je vais en recopier qques-uns :  
- Bloc : line-height = ok hauteur de ligne) / vertical-align = ? avec 9 options au choix) / text-align = ok je devine / text-indent = ? chépo / white-space = ? chépo, sauf qu'il y a du "blanc" dedans / word/spacing = ? distance entre les mots ?  / leter-spacing = ? distance entre les lettres ?(ok comme "espacement dans word alors ?) - une autre fenêtre : Disposition ; visibility, display,float,clear,cursor ? et à côté, top,right,bottom,left - il y en a de pareils dans le montage de CI, mais pas tous quand même - et 2 autres tableaux qui s'appellent liste et tableau - marrant ! les noms à gauche sont en français et pour les réglages c'est tout en anglais  :-\ ... y z'étaient fatigués de traduire :lol:
 
J'ai essayé de comprendre avec les pages du Net :   http://www.zonecss.fr/style_css/fe [...] splay.html - désolé de choquer mais ceux qui rédigent ces pages ne se mettent pas à la place d'un novice, et puis ce n'est peut-être pas le but de ce genre de cours ? Je suis sûr que les petits jeunots du collège comprennent parce qu'ils ont grandi "dedans", mais pour nous les anciens, c'est macache-boni-besef.
Merci pour le coup de clavier ;) cordialement


Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

  espace entre ligne de texte et haut du cadre

 

Sujets relatifs
Optimisation lecture fichier texteDécalage du dernier div de la première ligne en float left
Problème Création fichier texte via vbs[PowerShell] Compte le nombre de ligne d'un fichier
Compter le nombre de 1 dans une ligne[Résolu]Activation Office 2010 en ligne de commande
[CSS] Cacher / afficher ligne tableautexte dans image à écrire en bas de celle-ci [résolu]
Programmation d'un éditeur de texteVidéo conférence en ligne
Plus de sujets relatifs à : espace entre ligne de texte et haut du cadre


Copyright © 1997-2018 Hardware.fr SARL (Signaler un contenu illicite) / Groupe LDLC / Shop HFR