18073 sujets

Questions générales et questions de débutants

CSS et logo

Bonjour,
Tout d'abord je debut avec CSS, donc soyer pas dur!
J'ai un souci dans mon fichier HTML j'ai mis ceci pour afficher mon logo :

<body class="fond">
<div class="cadre-page">
<p class="logo"></p>
<h1>Votre titre</h1>
<h2> Votre sous titre</h2>
<p> Votre paragraphe texte image(s)</p>
</div>

Et dans mon CSS la partie qui m'interesse

.logo {
background-image: url(images/haut.gif);
background-position: top;
background-repeat: no-repeat;
}

Le resultat ca me donne une moitié de mon logo et le mot Votre titre viens ce placer sur le logo. upload/6851-img.gif
Bonsoir,
Assez étrange en effet. Ceci dit ton logo est rogné car tu ne donnes pas de propriété de taille a ton <p>
qui devrait avoir un height de la hauteur de ton logo:

.logo {
background: url(images/haut.gif) top no-repeat;  /*propriété raccourci*/
height : ...px
}

Les commentaires sont compris entre /*et */ et ne sont pas interprétés.
Pourquoi ne mets tu pas ton logo directement dans le code html?
(<img src...>)
Si tu dois conserver ton image en background, la balise <p> n'est pas trop adéquat pour ce genre de contenu.
Il vaut mieux utiliser dans ce cas le <div>.
Modifié par Hermann (28 May 2006 - 23:44)
Administrateur
Bonjour et bienvenue parmi nous Smiley smile

En tant que modérateur, je me dois de te faire remarquer que tu n'as malheureusement pas respecté l'une des Règles de base du forum qui est d'afficher les codes et exemples proprement à l'aide des boutons [ code]... ici ton code HTML, CSS ...[ /code] (sans espace).

Je te remercie par avance de bien vouloir éditer ton message afin de le rendre conforme à cette règle. Smiley cligne

D'ailleurs, je rappelle que le lien qui apparaît en bandeau tout en haut du forum ("Nouveau sur le forum ?...") est important. Il contient des pistes de recherche, des indications sur les règles de vie de la communauté, etc.
Il serait courtois de ta part de bien vouloir en prendre connaissance.

Bonne continuation Smiley smile

upload/1-code.gif
Modifié par Felipe (29 May 2006 - 10:43)
Bonjour,
tout d'abord, sache que tu as semantiquement le droit de placer ton logo dans le html, puisqu'il apporte également une information, tu peux donc employer <img />

Ensuite, les balises de titres (H1,H2, etc), sont des de type ligne, et donc tu ne peux en avoir, par defaut, qu'une par ligne. La solution, serai de faire sortir ton image du flux, de la placer en flottant par exemple (float:left), et de bien spécifier hauteur et largeur.


Voilà, tiens nous au courant, a+
Modifié par broadcastor (29 May 2006 - 12:42)
Bonjour,
a écrit :
Ensuite, les balises de titres (H1,H2, etc), sont des de type ligne, et donc tu ne peux en avoir, par defaut, qu'une par ligne. La solution, serai de faire sortir ton image du flux, de la placer en flottant par exemple (float:left), et de bien spécifier hauteur et largeur.


Peut-être est ce une confusion de ta part mais non broadcastor, les titres sont des éléments de type block donc générant un retour chariot aprés la fin du titre, précision pour byters qui s'il débute, n'a pas dû trop comprendre ce dont tu lui parle (flottant, flux).
Ensuite excuse moi mais je trouve ta solution un peu tordu et compliquée
pour ce qu'il souhaite obtenir.
Sujet clos
Aller à