Sujet Précédent Sujet Suivant

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

Réponse 1 / 2
Pierrecastor Messages postés 41467 Date d'inscription mercredi 5 novembre 2003 Statut Modérateur Dernière intervention 30 mai 2024 4 133
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
hamaisamm
3 avril 2014 à 19:32
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
Réponse 2 / 2
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

Discussions similaires

Avis site azura home design / Azurahomedesign
sandra -
Zaza -

6 réponses
je cherche un logiciel gratuit de stylisme
orianne -
titoursonmimi -

115 réponses
Bonjour je souhaite qu'on me traduise cette phrase
Vanille_3410 -
Utilisateur anonyme -

3 réponses
sharp aquos + prise HDMI
gainsborough -
Olomonke -

6 réponses
Probleme Sharp TV
ooxpgoo -
technotv -

9 réponses