Bonjour,

impossible de caser mon img en CSS en haut à droite de mon" header"

<header>
            <h1>kriscoinet</h1>

            <p><center>
            Technicien et créateur d'enthousiasme
            </center></p>
    
            <a href="img/mini_tronche.jpg"><img src="img/mini_tronche.jpg" class="imageflottante" alt="Image flottante" title="Cliquez pour agrandir"/></a>
       
        </header>

help svp

Merci

-
Edité par kriscoinet 28 décembre 2018 à 12:08:54

salut pourais tu voir ton code CSS ?

Finalement,

je ferme </p> aprés </a>

elle bouge bien à droite mais reste en dessous de la ligne <p> alors que je souhaite qu'elle soit au top.

.imageflottante
{
  margin-left: 80%;
  margin-top: 0%;
}

-
Edité par kriscoinet 16 décembre 2018 à 16:37:07

<header>
            <h1>kriscoinet</h1>
            
            <a href="img/mini_tronche.jpg"><img src="img/mini_tronche.jpg" class="imageflottante" alt="Image flottante" title="Cliquez pour agrandir"/></a>
            
            <p><center>
            Technicien et créateur d'enthousiasme
            </center></p>
     
            
        
</header>

tu voulais dire quelque chose ?

Hello,

Il sort d'ou ce code ?

Et la balise <center> est obsolète, oublie la, c'est au CSS de s'occuper du centrage, sinon arrête de suite le codage...

Suis le cours html/css comme on l'a dit...

-
Edité par Lucky13 16 décembre 2018 à 18:36:42

SI TU VEUX PAS AIDER FERME TA BOUCHE

kriscoinet a écrit:

SI TU VEUX PAS AIDER FERME TA BOUCHE

Lucky justement t'aide en te disant que ton code n'est pas valide.

Et je te donnerais le même conseil que lui, suit le cours et quand tu fera du code propre on pourra t'aider.

Bonjour,

restons calmes.

Un code valide c'est comme les fondations d'une maison : c'est la base. Ensuite, c'est l'inconvénient du web : il n'oublie rien. Et "centrer en html" renvoie très vite sur la balise <center>. Or, cet élément est obsolète depuis 1999 (vraiment). 

Il faut vraiment penser que "visuel = CSS".

Et dans un premier temps se concentrer sur ce qui est présenté dans le cours d'OC (je suppose que c'est l'exercice du CV qui te pose souci). <center> n'en fait pas partie.

Un outil à utiliser de temps en temps : https://validator.w3.org .

Enfin : inutile d'insulter les gens qui viennent t'aider

DONC TOUJOURS PAS DE REPONSE INNOVANTE

TOUT CE QUE VOUS DITES JE  LE SAIS DEJA

MERCI DE NE PAS REPONDRE JUSTE POUR DONNER UNE MORALE

ET, JE VAIS PAS ABANDONNER LE CODE PARCEQUE TU ME LE DEMANDE

Majuscules abusives

L'écriture en majuscules est considérée comme une parole criée et diminue autant la lisibilité du texte que sa compréhension. Les majuscules abusives sont donc interdites aussi bien dans les titres que dans les messages.

----------

Ensuite : il n'est pas ici question de morale. Tu écris le code que tu veux, hein. Admets donc qu'on t'en fasse la remarque.

Je vous invites tous à venir avec votre bagnole dans ma concession si vous avez un petit soucis de voyant qui s'allume et la voiture qui ne dépasse pas 20 km/h,

Monsieur comment on fait ? => Je vous conseil d'écrire à votre constructeur.com parce que se faire tirer par un âne c'est obsolète (vraiment).

Je veux "entête" au centre du header et "image flottante" à droite.

Html

<header>
            <span class= "entête">
            <h1>kriscoinet</h1>

            <p>
            Technicien et créateur d'enthousiasme
            </p></span>
            
            <a href="img/mini_tronche.jpg"><img src="img/mini_tronche.jpg" class="imageflottante" alt="Image flottante" title="Cliquez pour agrandir"/></a>
            
       
        </header>

Css

header
{
  width: 100%;
  height: 5%;
    display: flex;
    justify-content: space-between;  /* axe horizontale et principal et aussi par défaut  */
     align-items: flex-end;           /* axe secondaire ou ici verticale  */
}

Merci .

Décidément le forum n'est plus ce qu'il était.... j'ai passé l'âge !

Je vais tenter de t'aider une dernière fois.

- un <h1> et un <p> dans un <span> c'est non. Jamais.
- width; 100% non plus. Au mieux ça ne sert à rien, au pire ça casse tout.
- height:5% c'est pas heureux. ça va être trop grand sur grand écran et trop petit sur mobile.
ne mets pas de height, ton élément prendra la hauteur nécessaire pour afficher son contenu. Au mieux rajoute un padding.

Voilà comment je vois les choses, comme tu ne l'a pas précisé, on ne sait pas si tu veux l'image à droite de la page ou à droite du titre, j'ai fait les deux.

- à droite de la page :

<header>
        <a href="img/mini_tronche.jpg"><img src="img/mini_tronche.jpg" class="imageflottante" alt="Image flottante" title="Cliquez pour agrandir"/></a>
        <div class="title">
            <h1>kriscoinet</h1>
            <p>Technicien et créateur d'enthousiasme</p>
        </div>
</header>

header {
    overflow:hidden;
}
header a {
    float:right
}
.title {
    text-align:center
}

- à droite du titre :

    <header>
        <div class="title">
            <h1>kriscoinet</h1>
            <p>Technicien et créateur d'enthousiasme</p>
        </div>
        <a href="img/mini_tronche.jpg"><img src="img/mini_tronche.jpg" class="imageflottante" alt="Image flottante" title="Cliquez pour agrandir"/></a>
    </header>

header {
    text-align:center;
}
header a, .title {
    display:inline-block;
    vertical-align: middle
}

Merci pour le dernier coup de main. J'ai honte de dire que j'ai relu 4 fois le cours, je vais peut être suivre le conseil de dieu et arrêter le code.

La photo c'est bien à droite de la page,

J'avais obtenu le même résultat en ajoutant <div></div> au début du <header>,

Je ne savais pas qu'on pouvait écrire "header a".

Quand je regarde de prés, "title" n'est pas exactement au centre de l'écran.

J'ai beau chercher je ne vois pas d'incidence avec ou sans "overflow:hidden"

Encore merci pour ton aide.

Joyeux Noël !!

Salut,

si tu regarde ici le titre est pourtant bien centré :

http://www.frogweb.fr/demos/aide.html

Quelque chose ailleurs dans ta CSS doit perturber le code que je t'ai fourni.

Pour le overflow:hidden teste avec un background sur header avec et sans le overflow.
Ou bien mets du contenu après ton header.

Merci j'en attendais pas tant,

body
{    
  background-image: url('img/fond.jpg');
  background-repeat:no-repeat;
  background-attachment:fixed;
  background-position:center center;
  width: 90%;
  height: 90%;
}

j'ai supprimer le width et height et maintenant, je suis bien centré

mais, il y a un mais... je suis a un éternel insatisfait => la photo se retrouve trop à droite.

Je relis le cours sur flex box et je m'arrache les cheveux !!

Et, dans

 <header>
           
            <a href="img/mini_tronche.jpg"><img src="img/mini_tronche.jpg" class="imageflottante" alt="Image flottante" title="Cliquez pour agrandir"/></a> 
            <div class="title">
            <h1>kriscoinet</h1>
            <p>Technicien et créateur d'enthousiasme</p>

        </div>
        </header>

je vois bien la différence a l’exécution mais je ne comprends pas pourquoi <a> doit passer avant <div>

merci pour ton temps

Et donc depuis le 21 décembre, aucune action n'a été faite. Mon message n'était pas là pour faire joli, hein.

La nétiquette demande à ce qu'on évite les majuscules, dans le texte comme dans le titre. Ça équivaut à crier. Et personne n'aime ça.

Donc : kriscoinet, merci de bien vouloir modifier ton titre, comme demandé.

La netiquette !! la règle quoi... Ok

comment on fait ?

Ah, mais c'est un vrai mot, "nétiquette" un néologisme ("étiquette du net / d'Internet")… enfin peut-être que le terme est ringard maintenant (chuis vieille, que voulez-vous).

Pour modifier ton titre : il faut aller éditer le premier message.

Peu être je suis plus vieux que toi !

Il ne faut pas "éditer" il faut le "modifier" en fait.

C'est un peu ce pourquoi mes réponses peuvent paraître un peu criante, lorsque vous répondez à un novice soyez clair et précis sinon, on comprends rein à ce que vous semblez vouloir expliquer.

Je n'ai pas utilisé flexbox mais float:left.
Et c'est pour ça que le <a> est avant. Un flottant doit toujours être avant le non flottant.
Si tu veux que ton image ne soit pas collée à droite tu peux lui mettre un margin-right.

-
Edité par Frogweb 28 décembre 2018 à 13:44:03

kriscoinet a écrit:

Il ne faut pas "éditer" il faut le "modifier" en fait.

Au temps pour moi.  J'avoue ne pas avoir vérifié le mot exact dans l'interface. Je pensais que "éditer" serait un terme suffisamment courant pour comprendre son sens…

Encore merci.

Si je mets un margin-left au header a, tout les blocs du header se décalent, exemple à 15%:

Et aussi, j'ai due mettre 4% de margin-left à ma section pour retrouver mes articles (eux en space-arround) centrés alors qu'ils sont tous de la même taille.

Ça ressemble à du bricolage !

On en voit peut être pas mais il y a aussi une petite bande blanche à droite comme à gauche.

-
Edité par kriscoinet 30 décembre 2018 à 15:11:34

Est-ce que tu pourrais redonner ton code modifié ?

Ce que tu peux faire aussi c'est poster ton code sur https://codepen.io/pen pour qu'il soit interprété (par contre on n'aurait pas les images).

Ici,

header {
    overflow:hidden;   
}
header a {
    float:right;
    margin-right: 3%;
}
body
{    
  background-image: url('img/fond.jpg');
  background-repeat:no-repeat;
  background-attachment:fixed;
  background-position:center center;
}
h2
{
  border-radius: 20px / 20px ;
  box-shadow:  4px 4px 8px black;
  text-align:center;
}

section
{
   position: relative; 
   margin-left:3.5%;
   z-index: 2;
}
article
{
   vertical-align: top;
   display: inline-block;
   justify-content: space-around;
   width: 30%;
   margin: 1%;    
}
nav
{
  position: absolute;
  top: 4px;
  left: 9px;
  width: 10%;
  height: 98%; 
  background-color: #c4b797;
  border-radius: 20px / 10px ;
  box-shadow:2px 4px 12px black;
  z-index: 1;
}
footer p
{
  text-align: right;
  margin-right: 10%;
}

Ça marche très bien sur codepen.io sans margin-right, cela peut il venir de la dimension de l'image ?

Merci à toi.

Évite à tout prix les marges en pourcentages, car elles dépendront de la taille du conteneur, qui peut donc varier, et donc mener à des incongruités.