Vertical align mais toujours pas aligné ?

pabouguim Messages postés 96 Date d'inscription   Statut Membre Dernière intervention   -  
animostab Messages postés 2829 Date d'inscription   Statut Membre Dernière intervention   -
Bonjour,
En ce moment j'essaye de me familiariser un peu avec le HTML et pour cela j'essaye de créer un faux blog pour m'entraîner.
Ce que je voudrais réussir c'est avoir :
| Titre avec image de fond | | Autre image de la même hauteur que celle d'à côté |
Sauf que ces deux blocs ne s'alignent pas
J'ai suivi les conseils de Openclassrooms et mis mes 2 blocs en display: inline-block puis vertical-align: top mais ils ne sont toujours pas alignés.
Morceau de mon HTML: 

<body>
  <header>
   <h1>A blog with random stuff</h1>
   <img class="banside" src='llama.png'/>
  </header>


Et le CSS qui va avec : 

@font-face { /*nouvelle police*/
    font-family: 'aaarghnormal';
    src: url('Aaargh-webfont.eot');
    src: url('Aaargh-webfont.eot?#iefix') format('embedded-opentype'),
         url('Aaargh-webfont.woff') format('woff'),
         url('Aaargh-webfont.ttf') format('truetype'),
         url('Aaargh-webfont.svg#aaarghnormal') format('svg');
    font-weight: normal;
    font-style: normal;

}

body
{
 background-image: url('background.png');
 background-attachment: fixed;
 background-repeat: repeat-x;
 font-family: Arial;
}

h1, h2, h3
{
 font-family: 'aaarghnormal', Arial, serif;
 color: white;
 text-shadow: 2px 2px 5px black;
}


/*////////////////////////////HEADER//////////////////////*/


header h1 /*comporte titre+photo en arrière plan*/
{
 background-image: url('headerkeepsmiling.png');
 background-repeat: no-repeat;
 display: inline-block;
 width: 800px;
 height: 137px;
 vertical-align: top;
}

.banside /*la photo d'à côté*/
{
 width: 281px;
 height: 137px;
 display: inline-block;
 vertical-align: top;
}


Sauf que cela me donne un décalage comme celui-ci


Lorsque je mets vertical-align: 106px les deux blocs sont alignés mais j'ai dû le faire en testant différentes valeurs et ce n'est sûrement pas la bonne manière

Est-ce que quelqu'un sait ce qui cause ce décalage et aurait peut-être une solution? :s (et aussi comment puis-je faire pour que le titre se mette en bas de la photo la plus large ? toujours en étant dedans je veux dire)

Merci d'avance :)

1 réponse

Réponse 1 / 1
pabouguim Messages postés 96 Date d'inscription   Statut Membre Dernière intervention   4
 
Je pense avoir trouvé!
L'image de droite s'alignait avec la baseline de h1 donc j'ai mis des <div> autour de h1, comme ceci: 

<header>
   <div><h1>A blog with random stuff</h1></div>
   <img class="banside" src='llama.png'/>
  </header>


Et j'ai adapté le CSS comme ceci : 

header div /* div est ici le bloc contenant h1. mais h1 est aussi 
un bloc à la base non ? c'est ce que je trouve bizarre. A moins que 
la taille du bloc h1 ne peut être modifiée et sera toujours de la 
taille du texte qu'il contient ? */
{
 background-image: url('headerkeepsmiling.png');
 background-repeat: no-repeat;
 display: inline-block;
 width: 800px;
 height: 137px;
 vertical-align: top;
}

.banside /* encore notre petite image de droite */
{
 width: 281px;
 height: 137px;
 display: inline-block;
 vertical-align: top;
}

header div h1 /* là c'est le h1 à l'intérieur de div.. enfin ça se voit */
{
 position: relative; /* on va le positionner par rapport à div. 
c'est bien à ça qu'elle sert cette balise ? */
 display: inline; /* ça ne sert plus à rien que ce soit un bloc */
 text-align: left; 
 top: 90px; /* il se positionne à 90px du haut de div */
 left: 10px; /* et à 10px du bord gauche de div */
}


Donc ça c'est ma façon d'arranger les choses, elle convient ? Je me complique pas trop la vie avec ?
Je trouve ça bizarre de mettre des <div> autour de <h1> car je pensais que les 2 étaient des blocs. A moins qu'il aient tout de même des différences importantes pour le placement ?
(soyez indulgents, je suis encore débutante :)

Edit: résultat *assez fière haha*
0
animostab Messages postés 2829 Date d'inscription   Statut Membre Dernière intervention   738
 
salut tu devrais en plus mettre ton img dans la balise <figure> (en html5 figure indique que c'est un bloc contenant une image)
par exemple
<figure class="banside"><img src="llama.png" /></figure>

.banside {
width: 281px;
height: 137px;
display: inline-block;
vertical-align: top;
}
.banside img {
margin:0;
padding:0;
}

dernier truc tu te compliques la vie avec header div h1 fait ca plutot
header div h1 {
text-align: left;
margin: 90px 10px 0 10px;
}
0
pabouguim Messages postés 96 Date d'inscription   Statut Membre Dernière intervention   4
 
Merci beaucoup! C'est vrai que j'ai tendance à alourdir mes codes inutilement ^^
Seulement quand j'utilise <figure> autour de l'image, elle s'écarte des blocs qu'il y a autour, même si margin et padding sont tous les deux à 0
0
animostab Messages postés 2829 Date d'inscription   Statut Membre Dernière intervention   738
 
essaie de faire ca

.banside img {
margin:0;
padding:0;
display: block;
vertical-align: top;
}
0

Discussions similaires

Barre verticale droite sur clavier
k_lou -
Leuide -

41 réponses
le signe " | " dans excel
zed -
Utilisateur anonyme -

4 réponses
Touche du clavier barre verticale
k_lou -
Architecte_300 -

6 réponses
Problème écran tv Samsung bandes verticales
Guig07 -
txiki -

4 réponses
Barre verticale droite sur clavier mac
oui -
jeanbern -

1 réponse