Responsive design
azizisamm
Messages postés
1
Statut
Membre
-
animostab Messages postés 3003 Statut Membre -
animostab Messages postés 3003 Statut Membre -
Bonjour ;
j ai une page HTML je veux la rendre Responsive , voila le code ci-dessous
HTML :
<div id="banner"><p>skyscraping</p></div>
CSS :
div#banner {
width:960px;
height:200px;
margin:auto;
background:url(../images/fotogrph-skyscraping.jpg) repeat 0 0;
}
div#banner p {
font: 15px Arial, Helvetica, sans-serif;
color:white;
position:relative;
left:20px;
top:120px;
width:305px;
padding:20px;
background:black;
text-align:center;
text-transform:uppercase;
letter-spacing:20px;
zoom: 1;
filter: alpha(opacity=50);
opacity: 0.5;
}
j ai une page HTML je veux la rendre Responsive , voila le code ci-dessous
HTML :
<div id="banner"><p>skyscraping</p></div>
CSS :
div#banner {
width:960px;
height:200px;
margin:auto;
background:url(../images/fotogrph-skyscraping.jpg) repeat 0 0;
}
div#banner p {
font: 15px Arial, Helvetica, sans-serif;
color:white;
position:relative;
left:20px;
top:120px;
width:305px;
padding:20px;
background:black;
text-align:center;
text-transform:uppercase;
letter-spacing:20px;
zoom: 1;
filter: alpha(opacity=50);
opacity: 0.5;
}
2 réponses
Salut
Je ne sais pas si on peut appeller ça "page html", tu n'as qu'un seul élément avec une image de fond.
Pour rendre ça adaptable, tu peut utilisé media querie et appeler une image différente selon les largeurs de page. images qui seront différentes taille de fotogrph-skyscraping.jpg
Je ne sais pas si on peut appeller ça "page html", tu n'as qu'un seul élément avec une image de fond.
Pour rendre ça adaptable, tu peut utilisé media querie et appeler une image différente selon les largeurs de page. images qui seront différentes taille de fotogrph-skyscraping.jpg
il n'y a pas d'image dans #banner c'est un background donc ca ne sert a rien de faire un #banner img
#banner {
width:90%;
max-width:960px;
height:200px;
margin:auto;
background:url(../images/fotogrph-skyscraping.jpg) repeat 0 0;
background-size:cover;
}
ca c'est responsive après tu peux aussi utiliser mediaquerie comme le dit Pierrecastor
#banner {
width:90%;
max-width:960px;
height:200px;
margin:auto;
background:url(../images/fotogrph-skyscraping.jpg) repeat 0 0;
background-size:cover;
}
ca c'est responsive après tu peux aussi utiliser mediaquerie comme le dit Pierrecastor
j'ai le mm probleme ici