AccueilAccueil  FAQFAQ  RechercherRechercher  S'enregistrerS'enregistrer  MembresMembres  GroupesGroupes  ConnexionConnexion  

iPhone

 :: Code :: HTML Voir le sujet précédent Voir le sujet suivant Aller en bas
Mar 22 Nov - 16:11
Admin
avatar
Nombre de messages : 40
Localisation : Panneau d'Admin
Date d'inscription : 21/12/2006
Voir le profil de l'utilisateur
HTML:
Code:
<meta charset="utf-8" /><link href="styleI.css" rel="stylesheet" /><title>iPhone</title>
<div class="iphone">
 <div class="idcontact">Nom Prénom</div>
 <div class="messages">
 <div class="time">Date</div>
 <div class="mIB">Message reçu Message reçu Message reçu
 <div class="time">Heure</div>
 </div>
 <div class="mS">Message envoyé Message envoyé Message envoyé
 <div class="time">Heure</div>
 </div>
 </div>
</div>

CSS:
Code:
.idcontact{
  position: absolute;
  top: 110px;
  right: 77px;
  width: 100px;
  height: 22px;
  z-index: 5;
  color:black;
  font-weight:bold;
  font-family: Arial, Calibri, sans-serif;
  font-size: 13px;
  text-align: center;
  padding: 1px;
}

.mIB {
  border-radius: 10px;
  background-color: rgb(229, 228, 233);
  position: relative;
  float: left;
  width: 70%;
  z-index: 4;
  color:black;
  font-family: Arial, Calibri, sans-serif;
  padding:10px;
  margin-bottom:15px;
}

.mS {
  border-radius: 10px;
  background-color: rgb(39, 157, 255);
  position: relative;
  float: right;
  width:70%;
  z-index: 4;
  color:white;
  font-family: Arial, Calibri, sans-serif;
  padding:10px;
  margin-bottom:15px;
}

.messages {
  position: absolute;
  left: 25px;
  top: 136px;
  width: 215px;
  height: 310px;
  z-index: 3;
  overflow:auto;
  padding: 10px;
}

.iphone {
background-image:url(iphone.png);
z-index:1;
position:relative;
width:285px;
height:590px;
margin-left: auto;
margin-right: auto;
}

.mS .time {
position: absolute;
bottom: -15px;
right: 10px;
color: silver;
font-size: 9px;
font-style: italic;
font-family: Arial, Calibri, sans-serif;
}

.mIB .time {
position: absolute;
bottom: -15px;
left: 10px;
color: silver;
font-size: 9px;
font-style: italic;
font-family: Arial, Calibri, sans-serif;
}

.time {
text-align: center;
color: silver;
font-size: 10px;
font-style: italic;
font-family: Arial, Calibri, sans-serif;
margin-bottom: 5px;
}

iPhone
Code:
http://illiweb.com/fa/pbucket.gif
Revenir en haut Aller en bas
Ven 27 Jan - 16:02
avatar
Nombre de messages : 2
Date d'inscription : 24/04/2015
Voir le profil de l'utilisateur

NOM PRENOM
Date
Message reçu Message reçu Message reçu
Heure


Message envoyé Message envoyé Message envoyé
Heure



© Celcius


Pour le téléphone:
Code:
<div style="background-image:url(http://illiweb.com/fa/pbucket.gif);z-index:1;position:relative;width:285px;height:590px;margin-left: auto;margin-right: auto;">
<div style="position: absolute;top: 110px;right: 77px;width: 100px;height: 22px;z-index: 5;color:black;font-weight:bold;font-family: Arial, Calibri, sans-serif;font-size: 11px;text-align: center;padding: 1px;">NOM PRENOM</div><div style="position: absolute;left: 25px;top: 136px;width: 215px;height: 310px;z-index: 3;overflow:auto;padding: 10px;"><div style="text-align: center;color: silver;font-size: 10px;font-style: italic;font-family: Arial, Calibri, sans-serif;margin-bottom: 5px;">DATE</div> INSERER ICI LE CODE MESSAGE ENVOYE OU REÇU</div>
</div><center>© <a href="design-test.superforum.fr">Celcius</a></center>

Pour un message envoyé:
Code:
<div style="border-radius: 10px;background-color: rgb(39, 157, 255);position: relative;float: right;width:70%;z-index: 4;color:white;font-family: Arial, Calibri, sans-serif;padding:10px;margin-bottom:15px;text-align:left;">MESSAGE ENVOYE MESSAGE ENVOYE MESSAGE ENVOYE<div style="position: absolute;bottom: -15px;right: 10px;color: silver;font-size: 9px;font-style: italic;font-family: Arial, Calibri, sans-serif;">Heure</div>
</div>

Pour un message reçu:
Code:
<div style="border-radius: 10px;background-color: rgb(229, 228, 233);position: relative;float: left;width: 70%;z-index: 4;color:black;font-family: Arial, Calibri, sans-serif;padding:10px;margin-bottom:15px;text-align:left;">MESSAGE REÇU MESSAGE REÇU MESSAGE REÇU MESSAGE REÇU MESSAGE REÇU<div style="position: absolute;bottom: -15px;left: 10px;color: silver;font-size: 9px;font-style: italic;font-family: Arial, Calibri, sans-serif;">Heure</div>
</div>
Revenir en haut Aller en bas
Page 1 sur 1

Sauter vers :
Vous ne pouvez pas répondre aux sujets dans ce forum
Design' Test :: Code :: HTML-