Problème de code HTML/CSS + Hébergement chez soi

Problème de code HTML/CSS + Hébergement chez soi - HTML/CSS - Programmation

Marsh Posté le 20-05-2017 à 17:23:45    

Bonjour à tous,
Je débute dans le HTML/CSS et, pour m'entrainer, j'ai voulu reproduire une page banale (photos ci-contre).
 
http://nsa38.casimages.com/img/2017/05/20/170520041224878890.png
 
Page que j'ai moi-même créé :  
 
http://nsa38.casimages.com/img/2017/05/20/170520041458464705.png
 
Or, n'étant que débutant, j'ai rencontré plusieurs problèmes lors de la création de la page :
 
• Problème n°1 : Comme vous pouvez le voir sur la photo ci-contre, j'ai codé cette page en HTML et CSS. Or, le problème rencontré est que je n'arrive pas à coller la ligne blanche ainsi que le rectangle (de couleur rose/violet clair) au bord gauche et au bas de la page (regarder les croix rouge qui correspondent à la zone à supprimer).
 
http://nsa38.casimages.com/img/2017/05/20/17052004154149206.png
 
De plus près :
 
http://nsa38.casimages.com/img/2017/05/20/170520041625130240.png
 
http://nsa37.casimages.com/img/2017/05/20/170520041640405977.png
 
Connaissez-vous le code qui permet de coller les deux images aux bords de la page ?

• Problème n°2 : Le second problème que je rencontre est que lorsque je change d'appareil, la page ne s'adapte pas aux dimensions de l'écran. Par exemple, lorsque je suis sur mon PC portable la page est normale :
 
http://nsa38.casimages.com/img/2017/05/20/170520041458464705.png
 
En revanche, quand je vais sur un PC fixe avec un écran beaucoup plus grand, la page est comme cela :
 
http://nsa37.casimages.com/img/2017/05/20/170520041658812621.png
 
Connaissez-vous un code qui adapte la page à tous les types d'appareils ? Que ce soit portable, PC, Ordinateur fixe, tablette etc... ?
 
• Problème n°3 : Enfin, le dernier problème que je rencontre est que je voudrais héberger un site chez moi, mais je ne sais pas comment faire...  
Savez vous comment il faut s'y prendre ? Connaissez-vous des logiciels fais pour ?
 
PS : ci dessous le lien de téléchargement du code et des images
 
https://mega.nz/#F!lUMT1DYQ!ssE2Ecy6CilG7_COTrOIpg
 
PPS : si vous avez la flemme de télécharger le fichier voici le code que j'ai utilisé pour faire la page : (il est fort probable qu'il y est des fautes, je suis débutant... :whistle: )
 
Code HTML :
 
<html>
 
 <head>
 
  <meta charset-"utf-8" />
  <link rel="stylesheet" type="text/css"  
  href="style.css" />
   
  <title>Instagram Account</title>
     
 </head>
 
 <body background="images/Capture.jpg">  
 
   <br />
   <br />
   <br />
   <br />
   <br />
 
  <div align="center">
  <img src="images/instagram.png">
  </div>
   
  <br />
  <br />
  <br />
         
  <form class-"form_demo">
 
   
   <p>     <label for="nom">-</label><input type ="text" placeholder="Identifiant" size="30" class="inputbasic"  autofocus="" required="" type="tel" /></p>
 
   <br />
 
 
   <label for="nom">-</label><input type ="password" name="password" placeholder="Mot de passe" size="30" class="inputbasic" />
 
 
   <br />
 
   </form>
 
   <form class-"connexion">
   
   <p>        <label2 for="nom">-</label2><input type ="submit" value="Connexion" size="30" /></p>
 
  </form>  
 
   <br />
   <br />
   <br />
   <br />
   <br />
   <br />
   <br />
   <br />
   <br />
   <br />
   <br />
   <br />
   <br />
   <br />
   <br />
   <br />
   
  <div align="center">
  <img src="images/trait.png" width="1592" height="1">
  </div>  
 
  <div align="center">
  <img src="images/rose.png" width="1592" height="40">
  </div>
   
 </body>  
 
</head>  
 
 
Code CSS :
 
.form_demo input {
 display: block;  
 margin-bottom: 5px;
}
 
.inputbasic {
 border: 0px solid transparent;
 border-radius: 7px;
 padding: 5px;
 
}
 
@font-face {
    font-family: 'Billabong';
    src: url('polices/Billabong.ttf');
}
 
 
body
{
    background-image: url("images/Capture.jpg" ); /* imporation du background */
    background-repeat: no-repeat; /* pour ne pas répéter le background */
    background-size: cover; /* pour que le background s'adapte automatiquement à la page */
 
}
 
 
h1 {
 font-size: 32px;
}
 
.connexion {
 
}
 
label
{
 display: block;
 width: 666px;
 float: left;
}
 
label2
{
 display: block;
 width: 750px;
 float: left;
}
 
 
Merci d'avance
Julien ;)  :na:

Reply

Marsh Posté le 20-05-2017 à 17:23:45   

Reply

Marsh Posté le 09-06-2017 à 19:56:31    

Bonsoir
 
pour avoir une page qui s'adapte automatiquement a tous types d'ecrans, de navigateurs et de supports,
 
il faut obligatoirement ajouter du javascript.
et c'est pas une partie de plaisir, surtout a cause des tablettes et autres appareils mobiles.
 
en ce qui concerne les navigateurs, tu as aussi quelques heures de prises de tete en perspective.
 
===
 
pour ce qui est de ton code, tu utilise des balises et des attributs obsoletes.
 
non -> <body background="images/Capture.jpg">  
oui -> <body> (code css : body{background-image:url('./images/Capture.jpg');})
 
non -> <div align="center">  
oui -> <div class="centrer"> (code css : .centrer{text-align:center;})
 
non -> <form class-"form_demo">  
oui -> <form class="form_demo">  
(tu en as plusieurs des comme sa)
 


---------------
Mon feedback
Reply

Marsh Posté le 14-07-2017 à 16:04:12    

Bonjour !
 
Concernant ton problème de bordure, tu peux mettre ta bordure entre </body> et </html> pour que celle ci prenne la totalité de l'espace ;)
 

pyrogoto a écrit :

Bonsoir
 
pour avoir une page qui s'adapte automatiquement a tous types d'ecrans, de navigateurs et de supports,
 
il faut obligatoirement ajouter du javascript.
et c'est pas une partie de plaisir, surtout a cause des tablettes et autres appareils mobiles.
 
en ce qui concerne les navigateurs, tu as aussi quelques heures de prises de tete en perspective.
 


 
Faux, il faut juste batailler sur le css et travailler en responsive (Cf : https://openclassrooms.com/courses/ [...] -queries).
 

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed