Décaler le sous-titre du site qui empiète sur le logo...

antistressantistress Member
janvier 2010 modifié dans Entraide et S.A.T
Bonsoir,
J'ai pris le thème par défaut de la version 4.3 dont j'ai changé le logo (le mien fait 60x52 contre 66x50)
http://libre-ouvert.toile-libre.org/
Comment puis-je réduire le retrait du sous-titre pour corriger cela ?

Merci d'avance

Réponses

  • Il faut décaler le margin-left de la balise p du bloc #header.

    par exemple (dans le fichier style.css) :
    #header p {margin: 0 0 0 60px;}
    
    à la place de 60 tu mets la valeur de ton choix...

    tu peux aussi écrire :
    #header p {margin-left: 60px;}
    
    à plus,

    Gzyg
  • antistressantistress Member
    janvier 2010 modifié
    merci beaucoup

    et pour descendre le titre et le sous-titre sans bouger le reste (logo, menu...) quel est le paramètre à modifier ?

    à moins que vous ne trouviez que le titre est à la bonne heuteur actuellement ?
  • autre question : j'aimerais que mon logo touche le menu en dessous comme si le personnage en sortait
    lorsque j'ouvre ma page avec Epiphany c'est le cas, mais avec Mdori et Firefox il y a un espace (je n'ai pas d'autre navigateur sous la main pour tester)
    Le plus étrange est que Epiphany et Midori utilisent la même version de WebKitGTK+ !
  • Le positionnement est la chose la plus délicate à réaliser car justement les navigateurs n'ont pas tous la même interprétation des balises qui permetttent le positionnement.

    Dans ton cas, je te conseille d'abord de comprendre un peu le processus de positionnement :

    http://www.alsacreations.com/article/lire/533-initiation-au-positionnement-en-css.html

    L'article est clair et accessible (sans jeu de mots ;)).



    à plus,

    oh!rocks
  • cool, je cherchais ce genre de liens merci !
  • bonjour,

    sinon , pour le background , il suffit de le positioner en : 30px bottom; pour ne pas avoir a s'inquieter de la hauteur du #header.
    pour h1 et p un padding-left consequent , suffit aussi a eviter que les textes empiete sur l'image de fond , toujours sans avoir a se soucier des dimensions ou fusion des marges externes.

    GC


    Cordialement,
    gcyrillus , simple membre du forum et utilisateur de pluxml

    Mon site PluXml: https://re7net.com | Plugins: https://ressources.pluxopolis.net/banque-plugins/index.php?all_versions | demos sur free http://gcyrillus.free.fr/new | Thèmes: tester et télécharger @ https://pluxthemes.com
    Indiquez [RESOLU] dans le titre de votre question une fois le soucis réglè, Merci

  • merci,
    pour le background , il suffit de le positioner en : 30px bottom; pour ne pas avoir a s'inquieter de la hauteur du #header.
    commet je l'intègre, c'est dans :

    #header {

    width : 900px;

    color : #482018;

    margin : 0 auto; padding : 38px 0 30px 20px;

    background: url("img/logo.png") no-repeat 20px 30px;

    }

    ?
  • comme ceci :
    background: url("img/logo.png") no-repeat bottom 30px;
    
    Tu devrais t'informer sur l'usage des style , par exemple pour background , et via une recherche on trouve ça :
    http://css.mammouthland.net/image-de-fond-background-css.php

    ++


    Cordialement,
    gcyrillus , simple membre du forum et utilisateur de pluxml

    Mon site PluXml: https://re7net.com | Plugins: https://ressources.pluxopolis.net/banque-plugins/index.php?all_versions | demos sur free http://gcyrillus.free.fr/new | Thèmes: tester et télécharger @ https://pluxthemes.com
    Indiquez [RESOLU] dans le titre de votre question une fois le soucis réglè, Merci

  • antistressantistress Member
    janvier 2010 modifié
    ça fait beaucoup à voir d'un coup pour moi, c'est mon premier CMS : déjà je découvre le xHTML ça prend du temps
    CSS c'est ma prochaine étape, merci de votre patience :-)

    bottom 30px; a fait disparaitre mon logo...
  • ça marche avec background: url("img/logo.png") no-repeat 20px 33px; comme expliqué ici http://www.pompage.net/pompe/les-bases-du-background/
    merci pour vos liens
  • antistressantistress Member
    janvier 2010 modifié
    bon alors j'ai compris la propriété background: et padding:
    maintenant si je veux descendre les titre et sous-titre du blogue sans décaler le reste de la page, comment faire ?
    SI j'essaye de modifier le padding du #header p ça me décale l'ensemble vers le bas, et celui du #header h1 { /* Titre et sous-titre du site */ ne change rien...
  • Et en modifiant le padding du header ?
    Tu augmentes le padding en haut et tu réduis d'autant le padding en bas.
    Exemple, tu as
    #header {
    	...
    	padding : 38px 0 30px 20px;
    	...
    }
    
    et tu augmentes de 30px :
    #header {
    	...
    	padding : 68px 0 0 20px;
    	...
    }
    
  • mon hébergeur était HS, me revoilà sur ce fil :

    merci m1ckros, c'est bien ça, il faut changer les deux valeurs selon le principe des vases communicants :-)
  • oui et non :)

    test ctrl + dans firefox ou dans IE , va dans affichage -> taille du texte et selectionne une taille differente , et vois ou ton image va s'afficher .

    Il te reste une donnée qui peut variée: la police affichée par le navigateur qui elle n'est pas forcement fixe et peut induire une hauteur d'interligne différente.

    dans le theme :
    font : 75%/1.7em "Lucida sans unicode", Lucida, Tahoma, Arial, sans-serif;
    
    definie une taille en pourcentage , un interligne en em (tributaire de la taille de la police tributaire de la valeur par defaut du nav (generalement 14px dans IE, je crois et 16px dans firefox) et enfin tributaire des caractéristique de la police utilisée : si pas lucida sans unicode sur le pc , alors le nav tentera lucida , pui tahoma , puis arial.

    Je te conseille donc de fixé le line-height de header a une valeur défini pour finalisé ce réglage et de faire quelques verifs dans IE6 ...

    Je pense quand même que cette solution est hasardeuse , quand un height + line-height et un background-position : regle ça rapidement sans avoir a revenir dessus :)

    GC


    Cordialement,
    gcyrillus , simple membre du forum et utilisateur de pluxml

    Mon site PluXml: https://re7net.com | Plugins: https://ressources.pluxopolis.net/banque-plugins/index.php?all_versions | demos sur free http://gcyrillus.free.fr/new | Thèmes: tester et télécharger @ https://pluxthemes.com
    Indiquez [RESOLU] dans le titre de votre question une fois le soucis réglè, Merci

  • merci mais j'ai rien compris (pourtant lu 3 fois) :-/
  • oki :

    Dans html :
    taille de police:
    font-size:75% .

    si la taille d'affichage du navigateur est 16px , alors ça devient : 16 X 75% = 12px
    1em prend la valeur de 12px .
    si 14px pour le navigateur alors la taille de base est differente . 10px

    hauteur de ligne (interlignage)
    line-height:1.7em correspond alors 12 X 1,7 = 20.4 (arrondi a 20)
    ça c'est valable pour tout les paragraphe par exemple.

    ton h1 est defini a 2.1 em ... on donc 12X2.1 =25.2 (25 pixel pour la taille de la police)
    (le line-height:20px de base ne compresse pas h1 en hauteur).

    Ensuite ces valeur recalculée pour font-size et line-height vont s'adapter aux caractéristique des polices et peuvent donc augmenter trés legerement (prendre 2 pixel sur une ligne , c'est vite fait par exemple avec 'tahoma' et 'verdana' ).


    du coup , ta façon de faire estimerait a la louche le #header a une hauteur de :
    h1 : 25px(la hauteur de police impose la hauteur minimale de cette balise , p : 20px (hauteur minimale d'une ligne imposer par le line-height)
    et les padding verticaux : 52 et 16
    total a la louche : 25 + 20 +52 +16 = 113px

    En fait si tu as suivi , cette valeur est approximative . Selon le navigateur , ses bug ou difference et ses réglage par défauts , la police et la qualité d'affichage . la hauteur va tournée autour de 113px.

    si tu affiche ton background a 30px du haut , le bas lui ne sera pas toujours au même endroit.

    En fixant une hauteur : height a #header , tu as une base qui commence déjà a moins sauté d'un nav a l'autre.

    Cordialement

    GC


    Cordialement,
    gcyrillus , simple membre du forum et utilisateur de pluxml

    Mon site PluXml: https://re7net.com | Plugins: https://ressources.pluxopolis.net/banque-plugins/index.php?all_versions | demos sur free http://gcyrillus.free.fr/new | Thèmes: tester et télécharger @ https://pluxthemes.com
    Indiquez [RESOLU] dans le titre de votre question une fois le soucis réglè, Merci

  • merci j'ai presque compris (très intéressantes ces questions de Xem)

    qu'entends tu par "le bas lui ne sera pas toujours au même endroit. " : quelle partie et par rapport à quoi ?
  • janvier 2010 modifié
    heu ,

    bah si tu fixe ton image a 30 px du haut et que cette image fait 83px de hauteur , la distance entre le bas de l'image et le bas de #header peut oscillé selon la config du visiteur .

    si tu te cale sur une hauteur approximative de #header a 113px , la distance sera elle aussi approximative , un coup 0 un autre 2px .


    Cordialement,
    gcyrillus , simple membre du forum et utilisateur de pluxml

    Mon site PluXml: https://re7net.com | Plugins: https://ressources.pluxopolis.net/banque-plugins/index.php?all_versions | demos sur free http://gcyrillus.free.fr/new | Thèmes: tester et télécharger @ https://pluxthemes.com
    Indiquez [RESOLU] dans le titre de votre question une fois le soucis réglè, Merci

  • ok merci bien pour la leçon instructive :-)
  • m1ckrosm1ckros Member
    janvier 2010 modifié
    Hum oui. Je ne suis pas sûr d'avoir tout suivi mais j'ai au moins retenu que ce qui n'était pas au top et qui, je pense, n'est pas optimal pour toi (antistress), c'est la position du logo par rapport à la barre noire.
    Selon le navigateur et selon le degré de zoom, cette image a tendance à se décoller de la barre.

    Personnellement, je transformerai :
    #header {
    	width : 900px;
    	color : #482018;
    	margin : 0 auto;
    	padding : 52px 0 16px 20px;
    	background: url("img/logo.png") no-repeat 20px 33px;
    }
    
    en :
    #header {
    	width: 900px;
    	color : #482018;
    	margin : 0 auto;
    	padding: 20px 20px 0;
    	background: url("img/logo.png") no-repeat 20px 0;
    	height: 60px; /* taille de l'image moins 20px de padding */
    	clear: both;
    }
    
    et :
    ul#access {
    	margin : 0 auto;
    	padding : 0;
    	width : 900px;
    	list-style-type : none;
    }
    
    en :
    ul#access {
    	margin : 0 auto;
    	padding : 0;
    	width : 900px;
    	list-style-type : none;
    	float: right;
    }
    
    EDIT : D'ailleurs, tu devrais également virer les width: 900px; qui ne servent pas à grand chose à part ajouter un ascenseur horizontal trop tôt.
  • merci beaucoup les gars de votre aide c'est très sympa
    La 1re modif a en effet réglé le pb de rendu sous Epiphany qui cachait une partie du logo sous le menu
    La 2è modif j'ai pas compris ce qu'elle faisait ?
    Sinon il y a d'autres width: 900px dans le fichier que ceux-ci :
    #page {
    #top {
    #menu ul {
    #footer {
    Ils sont aussi à supprimer ?
  • En fin de compte, la 2e modification ne sert à rien.

    Pour ce qui est des width: 900px;, non. Il y a juste ceux de #menu ul, ul#access et #header à supprimer. Si tu changes les autres, ça changera l'apparence de la page.
  • janvier 2010 modifié
    Bonsoir,

    pour la premiere modif , m1ckros tu a tout a fait saisi ce qu'il fallait faire .


    Cordialement,
    gcyrillus , simple membre du forum et utilisateur de pluxml

    Mon site PluXml: https://re7net.com | Plugins: https://ressources.pluxopolis.net/banque-plugins/index.php?all_versions | demos sur free http://gcyrillus.free.fr/new | Thèmes: tester et télécharger @ https://pluxthemes.com
    Indiquez [RESOLU] dans le titre de votre question une fois le soucis réglè, Merci

  • merci pour les infos
    pour l'instant je les ai copiées servilement mais je les mets de côté pour approfondir dès que j'ai fini mes cours accélérés de CSS (merci le siteduzero ;-)
  • Pour la 2e modif, en fait, il n'y a pas besoin de mettre de float: right; parce que les éléments qu'il contient possèdent déjà cette propriété.
    C'est un peu la même chose pour la suppression des width: 900px;. L'élément #menu a déjà sa largeur fixée à 900px, donc mettre une largeur de 900px à un élément qu'il contient, ça ne sert à rien. Pareil avec ul#access (déjà dans #top) et #header (déjà dans #top).

    Voilà pour l'explication. ;-)
  • merci encore :-)
Connectez-vous ou Inscrivez-vous pour répondre.