Responsive design
azizisamm
Messages postés
1
Date d'inscription
Statut
Membre
Dernière intervention
-
animostab Messages postés 2829 Date d'inscription Statut Membre Dernière intervention -
animostab Messages postés 2829 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
- Memup feel design ✓ - Forum Disque dur / SSD
- Maeva vient de créer son entreprise de design à montréal ✓ - Forum Loisirs / Divertissements
- Disque dur multimédia memup - Forum Disque dur / SSD
- Stb refsw design c'est quoi - Forum MacOS
- Enlever stb refsw design ✓ - Forum Matériel & Système
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
#banner img {
width: 100%;
max-width: 960px;
}
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
#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