[Problème] probleme de placement

[vincent2459]

Bonjour j'ai un soucis a vous soumettre, je pense que pour un pro du css, cela ne posera pas de probleme.

voila sur ce site http://joffre.vezere-informatique.com

le titre rencontre de coeur a coeur, je voudrais le placer plus haut.

Probleme j'ai beau le tourner dans tous les sens, je n'arrive pas a le remonter, j'ai l'impression que c'est la div logo qui bloque mon textLogo

merci a vous.
Vincent

[lefabdu51]

Re : probleme de placement

Si c'est le logo uniquement, il faut mettre une marge négative :
#logo {
margin: -50px;
}

Si c'est remonter tout le contenu :
.base {
max-width: 960px;
margin: -50px;
}

[lomart]

Re : probleme de placement

Pour remonter le texte, il faut modifier cette règle
.textLogo {
font-family: Georgia,Serif;
font-size: 45px;
line-height: 2px;
margin: 50px;
padding: 0;
position: relative;
top: -80px;
}
supprimer le rouge, ajouter le vert

Sinon, je verrais plus le slogan sous le texte du logo en modifiant
.slogan {
font-family: Georgia,Serif;
font-size: 20px;
margin: 20px;
position: relative;
left: 220px;
top: -60px;
}

C'est du bricolage, l'idéal est de reconstruire le code du header pour être responsive. Il ne manque pas grand chose.

[vincent2459]

Re : probleme de placement

Bonjour et merci pour vos reponse

effectivement lomart, bravo c'est exactement ce que je veux faire .
quand je fais la manip dans firebug ca marche ****l, mais le soucis je ne sais pas qu'elle fichier modifier.

j'ai fait les modifs firebug comme cela

.slogan {
font-family: Georgia,Serif;
font-size: 24px;
left: 220px;
margin: 20px;
position: relative;
top: -60px;


mais le nom de l'emplacement correspondant a ce slogan est
joffre.vezere-informatique.com #2 (ligne146)

et au survol de cette ligne j'ai http://joffre.vezere-informatique.com

je m'exprime peut etre mal mais par exemple pour d'autres fichiers on a template.css et au survol ca te donne le chemin sur ton serveur pour aller a ton fichier.

la je ne sais pas quoi faire..

merci a vous
bonne journée
vincent

[lomart]

Re : probleme de placement

Bonjour,

je m'exprime peut etre mal mais par exemple pour d'autres fichiers on a template.css et au survol ca te donne le chemin sur ton serveur pour aller a ton fichier.

C'est parce que ton css est dans le head de la page. C'est à toi de trouver comment ce code y arrive. Directement dans index.php, par un module, dans les paramètres du template, ...

A ta place, je ferais un module HTML personnalisé avec un code et du css propre

[vincent2459]

Re : probleme de placement

merci du coup de main lomart, je vais me permettre de t'embeter encore

pour le header dans mon index.php j'ai cela

<div id="header"><!--header starts here-->
<div id="logo"><!--logo starts here-->
<?php if (($showDefaultLogo) !=0) : ?>
<a class="defaultLogo" href="<?php echo $this->baseurl; ?>/"><img src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/images/logo/<?php echo htmlspecialchars($defaultLogo);?>" style="border:0;" alt="" /></a>
<?php endif;?>
<?php if (($showMediaLogo) !=0) : ?>
<a class="mediaLogo" href="<?php echo $this->baseurl; ?>/"><img src="<?php echo $this->baseurl ?>/<?php echo htmlspecialchars($mediaLogo);?>" style="border:0;" alt="" /></a>
<?php endif;?>
<?php if (($showTextLogo) !=0) : ?>
<a class="textLogo" href="<?php echo $this->baseurl; ?>/"><?php echo htmlspecialchars($textLogo);?></a>
<?php endif;?>
<?php if (($showSlogan) !=0) : ?>
<div class="slogan"><?php echo htmlspecialchars($slogan);?></div>
<?php endif;?>
</div><!--logo ends here -->
<?php if ($this->countModules('bookmarks')) { ?>
<div id="bmc">
<jdoc:include type="modules" name="bookmarks" />
</div>
<?php } ?>
<?php if ($this->countModules('nav')) { ?><!--nav starts here-->
<div id="nav">
<jdoc:include type="modules" name="nav" style="xhtml" />
<div style="clear:both;"></div>
</div>
<?php } ?><!--nav ends here -->
</div><!--header ends here -->


sinon le style du template au niveau du logo et du slogan est definit dans la gestion du template, une photo ci dessous pour visualiser




merci encore

vincent

[lomart]

Re : probleme de placement

La pièce jointe n'est pas lisible

Ce n'est pas une bonne idée d'inclure le texte du logo dans l'image
Il faut avoir un bloc flottant à gauche avec le logo, puis 2 blocs texte pour qu'il passe sur smartphone.

Je met une page test pour s'en inspirer.

<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
    .logoimg {float:left; margin-right:10px;}    
    .logotext {font-size:36px;}
    .slogan {font-size:24px;}
    @media (max-width: 480px) { 
        .header {text-align:center;}
        .logoimg{float:none;margin-right:0;}
    }
    </style>
</head>
<body>
    <div class="logo">
        <div class="logoimg"><img src="http://lorempixel.com/200/200" /></div>
        <div class="logotext">LOGO TEXTE</div>
        <div class="slogan">Slogan</div>
    </div>
</body>
</html>

Dans la pratique, Il faut remplacer le code du index.php par

<div id="header"><!--header starts here-->
    <div id="logo"><!--logo starts here-->
        <jdoc:include type="modules" name="monHeader" />
    </div><!--logo ends here -->
    <?php if ($this->countModules('bookmarks')) { ?>
        <div id="bmc">
            <jdoc:include type="modules" name="bookmarks" />
        </div>
    <?php } ?>
    <?php if ($this->countModules('nav')) { ?><!--nav starts here-->
        <div id="nav">
            <jdoc:include type="modules" name="nav" style="xhtml" />
            <div style="clear:both;"></div>
        </div>
    <?php } ?><!--nav ends here -->
</div><!--header ends here -->

Puis de créer un module perso avec le code en position monHeader

        <div class="logoimg"><img src="http://lorempixel.com/200/200" /></div>
        <div class="logotext">LOGO TEXTE</div>
        <div class="slogan">Slogan</div>

et enfin d'ajouter le css au fichier css du site

[vincent2459]

Re : probleme de placement

re bonjour ok je vois un peu, mais qu'appelle tu creer un module perso ?

tu vas dans module puis nouveau puis contenu personnalisé?

ou alors il faut creer une nouvelle position de module dans le xml ?


merci encore

[vincent2459]

Re : probleme de placement

ok j'ai creer le nouveau module et tout s'affiche.

maitenant dans le css je cree un style monheader ? c'est cela

desole mais je suis novice la dedans

merci encore

[vincent2459]

Re : probleme de placement

Bonjour lomart, je crois que j'ai pas mal avance et compris beaucoup de chose, si tu veux aller voir avec un petit coup de friebug, tu verras les modifs.

encore une petite question, comment faire pour mettre le logotext centré par rapport a l'image c'est a dire a droite de l'image, en gros remonte le logo text ?

merci encore et desole du derangement.
vincent

[lomart]

Re : probleme de placement

maitenant dans le css je cree un style monheader ? c'est cela

Non, c'est le nom de la position pour le module HTML personnalisé. Il suffit de la taper au lieu de le choisir dans la liste. Ce qui évite de l'indiquer dans le xml.

Pour le css, tu commences par mettre exactement ce que j'ai indiqué.

.logoimg {float:left; margin-right:10px;} 
.logotext {font-size:36px;} 
.slogan {font-size:24px;} 
@media (max-width: 480px) { 
  .header {text-align:center;}         
  .logoimg{float:none;margin-right:0;}
}

Ensuite, tu pourras l'adapter.
Pour le nom du site, reste en texte. C'est tout bénef pour le référencement

encore une petite question, comment faire pour mettre le logotext centré par rapport a l'image

centré en hauteur ? il faut ajouter un margin-top à .logotext et l'annuler dans la mediaquerie

[vincent2459]

Re : probleme de placement

ok encore un grand merci lomart,
derniere petite question, mon logotext lorsque je le passe sur un smartphone est bien responsif sur pluseiurs lignes mas elles se chevauchent comment faire pour eviter cela ?

merci encore

Vincent

[vincent2459]

Re : probleme de placement

re bonjour lomart

je progresse enormement grace a tes conseils et a google

j'ai donc fixe une taille de font-size en rem comme ca pas de soucis ca s'adapte.


autre petite question

comment je peux faire pour mettre une police Monotype Corsiva Italic uniquement pour le titre, j'ai essaye avec un font-family: Monotype Corsiva Italic

mais rien ne se passe.

merci
vincent

[lomart]

Re : probleme de placement

derniere petite question, mon logotext lorsque je le passe sur un smartphone est bien responsif sur pluseiurs lignes mas elles se chevauchent comment faire pour eviter cela ?

Mettre les mediaqueries que j'ai indiqué

[vincent2459]

Re : probleme de placement

RE.....

bon voila les modifs que j'ai apporte au fichier et ca ne marche pas pour le chevauchement des lettres

/* monheader-------------------------------------------------------------------------------------------------------*/
.logoimg {float: left; margin-right:10px; }
.logotext{max-width: 100%; margin-left: 220px; margin-bottom: 0px; padding-bottom: 0px; font-size:3rem;}
.slogantext {max-width: 100%; font-size: 1.2rem; margin-top: 40px; }
@media (max-width: 480px) {
.header {text-align:right;}
.logoimg{float:left;margin-right:0;}
}


merci encor a toi

vincent