Forum |  HardWare.fr | News | Articles | PC | Prix | S'identifier | S'inscrire | Aide | Shop Recherche
1312 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

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

 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

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

n°2300987
julienveyr​at
Posté le 20-05-2017 à 17:23:45  profilanswer
 

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:

mood
Publicité
Posté le 20-05-2017 à 17:23:45  profilanswer
 

n°2301849
pyrogoto
Posté le 09-06-2017 à 19:56:31  profilanswer
 

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)
 


---------------
Mes achats / ventes - Mon feedback
n°2303379
alek678
Posté le 14-07-2017 à 16:04:12  profilanswer
 

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).
 


Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

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

 

Sujets relatifs
Formulaire de calcul en HTML/JavaScript[C] Problème de compilation entre emcc et OpenSSL (Résolu)
problème avec dialobox sur condition (JS)Récupérer des informations dans un tableau HTML
Problème utilisation librairie externeChamps email en code qui renvoi vers formulaire d'inscription
[Résolu] Problème curieux sur bouton PartagerProblème d'encodage de liste chainée
aide code source c++[HTML/PHP/JS] Afficher x pages en alternances sur timer
Plus de sujets relatifs à : Problème de code HTML/CSS + Hébergement chez soi



Copyright © 1997-2016 Hardware.fr SARL (Signaler un contenu illicite) / Groupe LDLC / Shop HFR