Responsive design
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
-
ModérateurSalut
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 -
#banner img {
width: 100%;
max-width: 960px;
}-
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
-
