DIV reponsive selon image contenue
kriscka
Messages postés
313
Statut
Membre
-
ReDLoG Messages postés 393 Statut Membre -
ReDLoG Messages postés 393 Statut Membre -
Bonjour,
Je dois créer mon book numérique en HTML/CSS et j'ai une question à propos de l'entête que j'essai de mettre en place. En fait je fais un single page portfolio la première "page" est une image en width 100% pour qu'elle s'adapte à la taille de la fenêtre, donc ça ça fonctionne, le problème c'est que la div dans laquelle est inclue l'image ne change pas de hauteur en fonction de l'image ce qui décalle tout.
J'ai voulu mettre un screen de mon code mais l'image importé devient illisible du coup si vous j'vous mets ça là :
$(document).ready( function() {
$('.subMenu').smint({
'scrollSpeed' : 1000
});
});
</script>
</head>
<body>
<div class="subMenu" >
<div class="inner">
<a href="#s1" class="subNavBtn">Home</a>
<a href="#s2" class="subNavBtn">Portoflio</a>
<a href="#s3" class="subNavBtn">About me</a>
<a href="#s4" class="subNavBtn">Contact</a>
</div>
</div>
<div class="section s1">
<div class="inner ">
<div id="baclkgroundheader">
<img class="backgroundheader" src="images/background.jpg" alt="Fond du header" />
</div>
</div>
</div>
.section {
width: 100%;
max-width: 1600px;
min-width: 960px;
z-index: 10;
position: relative;
margin: 0 auto;
padding: 0 0 20px 0;
height: 600px;
}
.inner {
width: 100%x;
margin: 0 auto;
position: relative;
min-height: 50px;
/*padding:30px 0;*/
font-size: 18px;
font-family: 'Open Sans', sans-serif;
font-weight: 300;
}
.s1 .inner {
background:#184764;
margin : 0 auto;
width: 100%;
}
.backgroundheader{
margin : 0 auto;
width: 100%;
}
C'est un peu compliqué parce que déjà j'suis naze lol et puis je me base sur une partie de code c'est jQuery : http://www.outyear.co.uk/smint/
Enfin si quelqu'un à une idée de ce qui pourrait fonctionner, ça serait génial, merci d'avance ! =)
Je dois créer mon book numérique en HTML/CSS et j'ai une question à propos de l'entête que j'essai de mettre en place. En fait je fais un single page portfolio la première "page" est une image en width 100% pour qu'elle s'adapte à la taille de la fenêtre, donc ça ça fonctionne, le problème c'est que la div dans laquelle est inclue l'image ne change pas de hauteur en fonction de l'image ce qui décalle tout.
J'ai voulu mettre un screen de mon code mais l'image importé devient illisible du coup si vous j'vous mets ça là :
$(document).ready( function() {
$('.subMenu').smint({
'scrollSpeed' : 1000
});
});
</script>
</head>
<body>
<div class="subMenu" >
<div class="inner">
<a href="#s1" class="subNavBtn">Home</a>
<a href="#s2" class="subNavBtn">Portoflio</a>
<a href="#s3" class="subNavBtn">About me</a>
<a href="#s4" class="subNavBtn">Contact</a>
</div>
</div>
<div class="section s1">
<div class="inner ">
<div id="baclkgroundheader">
<img class="backgroundheader" src="images/background.jpg" alt="Fond du header" />
</div>
</div>
</div>
.section {
width: 100%;
max-width: 1600px;
min-width: 960px;
z-index: 10;
position: relative;
margin: 0 auto;
padding: 0 0 20px 0;
height: 600px;
}
.inner {
width: 100%x;
margin: 0 auto;
position: relative;
min-height: 50px;
/*padding:30px 0;*/
font-size: 18px;
font-family: 'Open Sans', sans-serif;
font-weight: 300;
}
.s1 .inner {
background:#184764;
margin : 0 auto;
width: 100%;
}
.backgroundheader{
margin : 0 auto;
width: 100%;
}
C'est un peu compliqué parce que déjà j'suis naze lol et puis je me base sur une partie de code c'est jQuery : http://www.outyear.co.uk/smint/
Enfin si quelqu'un à une idée de ce qui pourrait fonctionner, ça serait génial, merci d'avance ! =)
A voir également:
- DIV reponsive selon image contenue
- Image iso - Guide
- Légender une image - Guide
- Reduire taille image - Guide
- Acronis true image gratuit - Télécharger - Sauvegarde
- Image gratuite - Guide
1 réponse
Bonsoir,
Il faut déjà corriger cette portion de code pour vérifier que le problème ne vient pas de là. Tu as un sélecteur identifiant de DIV incorrecte de par la syntaxe (baclkgroundheader) et de plus dans le CSS il n'existe pas de sélecteur identifiant backgroundheader mais seulement une classe qui est appliquée à l'image de fond!
En résumé :
Cordialement.
Il faut déjà corriger cette portion de code pour vérifier que le problème ne vient pas de là. Tu as un sélecteur identifiant de DIV incorrecte de par la syntaxe (baclkgroundheader) et de plus dans le CSS il n'existe pas de sélecteur identifiant backgroundheader mais seulement une classe qui est appliquée à l'image de fond!
En résumé :
/* Classe appliquée à l'image de fond */
.backgroundheader {
margin : 0 auto;
width: 100%;
}
<div id="baclkgroundheader"><!-- Sélecteur identifiant inexistant dans le CSS-->
<img class="backgroundheader" src="images/background.jpg" alt="Fond du header" />
</div>
Cordialement.
