[RESOLU] Aide sur positionnement Logo-maintitle-subtitle-thème-default

ybagueybague Member
novembre 2013 modifié dans Entraide et S.A.T
Bonjour,

J'ai besoin d'aide... au sujet du placement de mon logo

Pour l'instant, j'ai repris ce fil de discussion http://forum.pluxml.org/viewtopic.php?pid=33849#p33849
Ca m'a déjà bien aidé. :P


J'ai donc intégré dans mon header, comme rockyhorror l'explique,
<div id="header"><!-- Begin header -->
	<div id="logo">
		<h1><?php $plxShow->mainTitle('link'); ?></h1>
		<p><?php $plxShow->subTitle(); ?></p>
	</div>
</div>

puis dans mon css,
#logo
{
	
	background: url(img/logo.png) no-repeat center;	
	overflow: hidden;
	background-size: contain;
}

J'ai bidouillé comme ci comme ça... à savoir je suis vraiment la dernière des quiches pour toucher à quoi que ce soit...

Mais bon, faut bien essayer.

Je voulais initialement mon logo en haut à gauche et en taille initiale (68px - 124px) et que le titre et la baseline soient décalés

Quand je le mets à gauche, le logo est sous le titre et la baseline, pas top. Me suis donc résigné à le mettre au milieu.
J'ai aussi ajouté backgroud-size: contain; car je n'arrive pas à faire apparaître mon logo en entier, il apparaît mais qu'une partie.

Voici l'adresse :

http://www.jmenbranle.fr/


Merci de votre aide

Gaby

Réponses

  • HamtaroHamtaro Member
    novembre 2013 modifié
    J'utilise très peu les div id, je trouve ça lourd, très restrictif. Voilà comment je ferais :

    Encadre la div logo avec 
    <div class="content-header">
<div class ="logo">
</div>
</div>


    .content-header {
background: url("img/logo.png") no-repeat top left;
min-height : 124px; }

.logo {
padding-left : 68px;
}

    Joue avec les propriétés padding de logo pour le déplacer ou tu veux par rapport à ton background.

    Capture%20d%E2%80%99%C3%A9cran%202013-11-22%20%C3%A0%2018.04.16.jpg
  • ybagueybague Member
    Pioufffffff, tout d'abord, un grand merci Hamtaro
    J'utilise très peu les div id, je trouve ça lourd, très restrictif. Voilà comment je ferais :

    Alors là, je ne fais aucune différence, j'ai téléchargé le pdf de classroom pour m'améliorer avec html5 et css et j'avoue que je suis encore bien embrouillé...
    Joue avec les propriétés padding de logo pour le déplacer ou tu veux par rapport à ton background.

    Ha ben oui ! ça marche bien !

    Super, tu viens de faire un heureux :D

    Bonne soirée et bon week-end
  • HamtaroHamtaro Member
    Ravi d'avoir pu aider ;)
  • danielsandanielsan Member
    ybague a écrit:
    Alors là, je ne fais aucune différence
    c'est très simple,
    dans ton cas, si tu supprimes celles qui sont dans ton header,
    tu auras exactement la même chose ... :D

    je suis de l'avis d'Hamtaro, c'est plus amusant d'aller chercher un élément en CSS 8)
  • ybagueybague Member
    novembre 2013 modifié
    Euhhhh, humfffffff
    danielsan a écrit:
    ybague a écrit:
    Alors là, je ne fais aucune différence
    c'est très simple,
    dans ton cas, si tu supprimes celles qui sont dans ton header,
    tu auras exactement la même chose ... big_smile


    Euhhh je remplace quoi ?
    je suis de l'avis d'Hamtaro, c'est plus amusant d'aller chercher un élément en CSS glasses

    C'est vrai que sans m'en rendre compte, j'ai fait un truc que à la base, je comprends pas et sur ce point, ça peut effectivement être amusant ?

    J'ai un doute,

    Header 
    [== HTML ==]


<body id="top">

	<header role="banner">

		<div class="content">
			<div class="content-header">
						<div class="logo">
									<h1><?php $plxShow->mainTitle('link'); ?>
									</h1>
									<h2>	<?php $plxShow->subTitle(); ?>
									</h2>
						</div>
			</div>
		</div>

	</header>


    CSS
    [== CSS ==]
.content-header {
background: url("img/logo.png") no-repeat top left;
min-height : 124px; }

.logo {
padding-left : 90px;
}

    Pour jouer sur la hauteur, j'ai repris l'idée du padding et l'ai ajouté à la balise header h1 et ça se place bien comme je voulais.
    [== CSS ==]
/* ---------- HEADER ---------- */


header {
	background-color:#f9f9f9;
	color: #444;
	padding: 10px 0;
}

body > header h1 {
	font-size: 2.2em;
	margin: 0;
	padding: 12px 0;
}	

header h1 a {
	color: #444;
}

header h2 {
	font-size: 1em;
	margin: 0;
	font-weight: normal;
}

    En tout cas, ça marche.

    et merci pour l'aide. Ca permet de capter au fur et à mesure.

    Je comptais pas mettre trop de temps sur le web pour l'instant, j'ai encore d'autres services auto-hébergés à mettre en place mais du coup, ça fait d'une pierre 2 coups.
    C'est vrai qu'il faut un peu s'y pencher, j'étais sur wordpress via ovh. Ca change.

    ;-)
  • HamtaroHamtaro Member
    novembre 2013 modifié
    Tu peux remplacer le body > header h1 par seulement header h1
    Le sélecteur ">" n'est pas spécialement intéressant ici, ça veut dire qu'il cherche une div header compris dans le body avec un h1, or tu peux le sélectionner direct avec header h1, mais c'est une question de point de vue. ;)

    En effet, le problème et l'avantage des id est de pouvoir aller direct à leurs rencontres, sans passer par "l'arborescence".
  • danielsandanielsan Member
    et tu pourrais aussi supprimer tous les DIV du header par la même occasion ... ainsi l'arborescence aurait plus de sens que les identifiants.
    mais c'est une autre approche :/
Connectez-vous ou Inscrivez-vous pour répondre.