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

antistress · janvier 2010

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

Gzyg · janvier 2010

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

antistress · janvier 2010

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 ?

antistress · janvier 2010

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+ !

Gzyg · janvier 2010

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

antistress · janvier 2010

cool, je cherchais ce genre de liens merci !

gcyrillus-nomade · janvier 2010

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

antistress · janvier 2010

merci,

gcyrillus-nomade a écrit:

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;

}

?

gcyrillus-nomade · janvier 2010

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

++

antistress · janvier 2010

ç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...

antistress · janvier 2010

ç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

antistress · janvier 2010

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...

m1ckros · janvier 2010

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;
	...
}

antistress · janvier 2010

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 :-)

gcyrillus-nomade · janvier 2010

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

antistress · janvier 2010

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

gcyrillus-nomade · janvier 2010

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

antistress · janvier 2010

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 ?

gcyrillus-nomade · janvier 2010

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 .

antistress · janvier 2010

ok merci bien pour la leçon instructive :-)

m1ckros · janvier 2010

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.

antistress · janvier 2010

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 ?

m1ckros · janvier 2010

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.

gcyrillus-nomade · janvier 2010

Bonsoir,

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

antistress · janvier 2010

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 ;-)

m1ckros · janvier 2010

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. ;-)

antistress · janvier 2010

merci encore :-)

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

Réponses