Responsive design
azizisamm
Messages postés
1
Statut
Membre
-
animostab Messages postés 3003 Date d'inscription Statut Membre Dernière intervention -
animostab Messages postés 3003 Date d'inscription Statut Membre Dernière intervention -
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;
}
A voir également:
- Responsive design
- Azura home design avis ✓ - Forum Consommation & Internet
- Memup feel design - Forum Disque dur / SSD
- Stb refsw design c'est quoi - Forum MacOS
- Enlever stb refsw design - Forum Ecran
- Home design jeux gratuit - Télécharger - Divers Jeux
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