Responsive design

Fermé
azizisamm Messages postés 1 Date d'inscription jeudi 3 avril 2014 Statut Membre Dernière intervention 3 avril 2014 - 3 avril 2014 à 14:50
animostab Messages postés 2829 Date d'inscription jeudi 10 mars 2005 Statut Membre Dernière intervention 11 novembre 2019 - 4 avril 2014 à 15:41
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;
}

2 réponses

Pierrecastor Messages postés 41467 Date d'inscription mercredi 5 novembre 2003 Statut Modérateur Dernière intervention 30 mai 2024 4 141
3 avril 2014 à 14:55
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
0
il veux dire comment il pourra rendre cet element responsive c a d adaptable sur tous les supports
j'ai le mm probleme ici
0
Marlocq Messages postés 117 Date d'inscription mardi 19 novembre 2013 Statut Membre Dernière intervention 10 septembre 2023
4 avril 2014 à 13:52
#banner img {
width: 100%;
max-width: 960px;
}
0
animostab Messages postés 2829 Date d'inscription jeudi 10 mars 2005 Statut Membre Dernière intervention 11 novembre 2019 738
Modifié par animostab le 4/04/2014 à 15:43
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
0