Titre qui sort du header HTML et CSS Résolu/Fermé

Question

Bonjour, tout est dans le tire, voici mon code: .titre { display: inline-block; height: 100px; width: 700px; color: blue; font-size: 90px; margin: 0px; vertical-align: top; overflow: hidden; } .insigne { display: inline-block; height: 100px; width: 100px; margin-left: 25%; vertical-align: top; } .texte { display: inline-block; height: 100px; width: 400px; margin-left: 20px; position: absolute; left: 0px; top: 110px; } header { position: absolute; left: 0px; top:0px; width: 100%; height:100px; background-color: grey; border: 1px solid black; padding: 1px; } body { background-color: white; } ------------------------------------------------------------------- One Minute Show

One Minute Show

The oneminuteshow.com is a fabulous and futur website!

--------------------------------------------------------- ------------------------------------------------------------- Quelle est la cause de mon problème, je n'ai rien pu trouver sur internet sauf une solution en javascript, mais je ne m'y connais pas encore. Configuration: Windows 7 / Firefox 38.0

bernier111 · Answer

Le problème en image:

animostab · Answer

salut
le problème est le suivant
25% + 100px + 700px + white-space (inline-block) donne en affichage suivant la largeur de la fenêtre un résultat supérieur a cette largeur donc titre en poussé en dessous de insigne

tu peux faire

header
{
position: relative;
margin:0
width: 100%;
height:auto;
min-height:100px;
background-color: grey;
border: 1px solid black;
} 
.insigne
{
display: inline-block;
height: 100px;
width: 30%;
text-align:right;
vertical-align: top;
} 
.titre
{
display: inline-block;
height: 100px;
width: 60%;
color: blue;
font-size: 90px;
margin: 0px;
padding:0;
vertical-align: top;
overflow: hidden;
} 

mets aussi texte en position relative
les position absolute sont a éviter car cela sort l'élément du flux 
 
Un petit merci vaut mieux qu'une grande ignorance !
Donc si votre sujet est résolu une réponse avec merci c'est pas de refus.

Titre qui sort du header HTML et CSS

2 réponses

Discussions similaires