Titre qui sort du header HTML et CSS
Résolu
bernier111
Messages postés
123
Date d'inscription
Statut
Membre
Dernière intervention
-
bernier111 Messages postés 123 Date d'inscription Statut Membre Dernière intervention -
bernier111 Messages postés 123 Date d'inscription Statut Membre Dernière intervention -
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;
}
-------------------------------------------------------------------
<!DOCTYPE html>
<html>
<head>
<!--[if lt IE 9]>
<script src="https://github.com/aFarkas/html5shiv/blob/master/dist/html5shiv.js"></script>
<![endif]-->
<meta charset="utf-8" />
<link rel="stylesheet" href="style.css" />
<!--[if lte IE 7]>
<link rel="stylesheet" href="style_ie.css" />
<![endif]-->
<title>One Minute Show</title>
</head>
<body>
<header>
<div class = "insigne">
<a href="index.html"><img src="insigne.png" alt="" /></a>
</div>
<h1 class = "titre">One Minute Show</h1>
</header>
<p class = "texte">The <em>oneminuteshow.com</em> is a fabulous and futur website!</p>
</body>
<footer>
</footer>
</html>
---------------------------------------------------------
-------------------------------------------------------------
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.
.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;
}
-------------------------------------------------------------------
<!DOCTYPE html>
<html>
<head>
<!--[if lt IE 9]>
<script src="https://github.com/aFarkas/html5shiv/blob/master/dist/html5shiv.js"></script>
<![endif]-->
<meta charset="utf-8" />
<link rel="stylesheet" href="style.css" />
<!--[if lte IE 7]>
<link rel="stylesheet" href="style_ie.css" />
<![endif]-->
<title>One Minute Show</title>
</head>
<body>
<header>
<div class = "insigne">
<a href="index.html"><img src="insigne.png" alt="" /></a>
</div>
<h1 class = "titre">One Minute Show</h1>
</header>
<p class = "texte">The <em>oneminuteshow.com</em> is a fabulous and futur website!</p>
</body>
<footer>
</footer>
</html>
---------------------------------------------------------
-------------------------------------------------------------
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.
A voir également:
- Titre qui sort du header HTML et CSS
- Trouver un film sans le titre - Télécharger - Divers TV & Vidéo
- Editeur html - Télécharger - HTML
- Appliquez à tous les paragraphes du document à télécharger, à l’exception des titres et des sous-titres, la mise en forme suivante : chaque paragraphe doit être espacé de 0,42 cm ou 12 pt du paragraphe qui suit les textes ne doivent pas être en retrait à droite et à gauche après ces modifications, sur quelle page se trouve le titre « la cheminée » dans le chapitre « informations diverses » ? - Guide
- Aucun son ne sort de mon pc - Guide
- Je cherche une chanson dont je ne connais pas le titre - Guide
2 réponses
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
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.
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.
