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
- Logiciel logo design studio - Télécharger - Divers Photo & Graphisme
- Webacappella responsive - Forum Logiciels
- Design iphone 14 - Guide
- Que veut dire stb refsw design - Forum Téléviseurs
- Comment publier manuellement les pages créées depuis webacapella - Forum Webmastering
2 réponses
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