2017-10-10 4 views
0

Comment faire pour que la case "À propos" se déplace vers le bas, pour être encore avec la boîte "E-mail". J'ai essayé avec height = "quelque chose" mais il ne bouge pas vers le bas, donc ça gâche ma page.Basic répondre à la page de l'équipe

Donc, fondamentalement, je veux que la boîte "A propos de" soit de la même taille que les boîtes "Photo, Email, WhatsApp, etc." En hauteur.

code:

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<body> 
 
    <canvas id="Photo" width="200" height="230" style="border:1px solid #000000;"> 
 
    Your browser does not support the HTML5 canvas tag. 
 
    </canvas> 
 
    <script> 
 
    var canvas = document.getElementById("Photo"); 
 
    var ctx = canvas.getContext("2d"); 
 
    ctx.font = "30px Arial"; 
 
    ctx.fillText("Photo Here",20,110); 
 
    </script> 
 
    <canvas id="About" width="500" height="230" style="border:1px solid #000000;"> 
 
    Your browser does not support the HTML5 canvas tag. 
 
    </canvas><br> 
 
    <script> 
 
    var canvas = document.getElementById("About"); 
 
    var ctx = canvas.getContext("2d"); 
 
    ctx.font = "30px Arial"; 
 
    ctx.fillText("About Page",150,110); 
 
    </script> 
 
    <canvas id="Real_Name" width="200" height="30" style="border:1px solid #000000;"> 
 
    Your browser does not support the HTML5 canvas tag. 
 
    </canvas> 
 
    <script> 
 
    var canvas = document.getElementById("Real_Name"); 
 
    var ctx = canvas.getContext("2d"); 
 
    ctx.font = "15px Arial"; 
 
    ctx.fillText("Real Name",60,20); 
 
    </script><br> 
 
    <canvas id="Role" width="200" height="30" style="border:1px solid #000000;"> 
 
    Your browser does not support the HTML5 canvas tag. 
 
    </canvas> 
 
    <script> 
 
    var canvas = document.getElementById("Role"); 
 
    var ctx = canvas.getContext("2d"); 
 
    ctx.font = "15px Arial"; 
 
    ctx.fillText("Role",81,20); 
 
    </script><br> 
 
    <canvas id="WhatsApp" width="200" height="30" style="border:1px solid #000000;"> 
 
    Your browser does not support the HTML5 canvas tag. 
 
    </canvas><br> 
 
    <script> 
 
    var canvas = document.getElementById("WhatsApp"); 
 
    var ctx = canvas.getContext("2d"); 
 
    ctx.font = "15px Arial"; 
 
    ctx.fillText("WhatsApp",60,20); 
 
    </script> 
 
    <canvas id="Email" width="200" height="30" style="border:1px solid #000000;"> 
 
    Your browser does not support the HTML5 canvas tag. 
 
    </canvas> 
 
    <script> 
 
    var canvas = document.getElementById("Email"); 
 
    var ctx = canvas.getContext("2d"); 
 
    ctx.font = "15px Arial"; 
 
    ctx.fillText("Email",77,20); 
 
    </script> 
 

 
</body> 
 
</html>

+0

Je vous conseille de faire un tutoriel html/css de base comme la fabrication de boîtes simples avec du texte en utilisant des toiles est pas très efficace dans la performance pour le rendu et si vous n » t savoir une chose simple comme la façon de placer des boîtes les uns à côté des autres, vous bénéficieriez vraiment d'un peu de connaissances – Pete

+0

Quel tutoriel recommandez-vous? @Pete –

+0

Faites une recherche, il y a des centaines de bonnes - c'est à vous et ce que vous trouvez facile à utiliser – Pete

Répondre

0

La raison pour laquelle les tailles ne correspondent pas est que vous avez manqué de une étiquette BR après/toile pour "A propos" - il devrait donc être:

<canvas id="About" width="200" height="30" style="border:1px solid #000000;"> 
    Your browser does not support the HTML5 canvas tag. 
    </canvas> <br> 
    <script> 

Ensuite, vous les aurez tous dans une rangée.

Vous devez également fermer correctement vos balises d'en-tête et HTML, donc au fond

</body> 
</head> 
</html> 

Si vous voulez mettre tout ce contenu dans votre tête bien sûr.

Voici le code modifié, en plein:

<!DOCTYPE html> 
<html> 
<head> 
<body> 
<canvas id="Photo" width="200" height="230" style="border:1px solid #000000;"> 
Your browser does not support the HTML5 canvas tag. 
</canvas> 
<script> 
var canvas = document.getElementById("Photo"); 
var ctx = canvas.getContext("2d"); 
ctx.font = "30px Arial"; 
ctx.fillText("Photo Here",20,110); 
</script><br> 
<canvas id="About" width="200" height="230" style="border:1px solid #000000;"> 
Your browser does not support the HTML5 canvas tag. 
</canvas><br> 
<script> 
var canvas = document.getElementById("About"); 
var ctx = canvas.getContext("2d"); 
ctx.font = "30px Arial"; 
ctx.fillText("About Page",150,110); 
</script><br> 
<canvas id="Real_Name" width="200" height="30" style="border:1px solid #000000;"><br> 
Your browser does not support the HTML5 canvas tag. 
</canvas> 
<script> var canvas = document.getElementById("Real_Name"); 
var ctx = canvas.getContext("2d"); 
ctx.font = "15px Arial"; 
ctx.fillText("Real Name",60,20); 
</script><br> 
<canvas id="Role" width="200" height="30" style="border:1px solid #000000;"> 
Your browser does not support the HTML5 canvas tag. 
</canvas> 
<script> 
var canvas = document.getElementById("Role"); 
var ctx = canvas.getContext("2d"); 
ctx.font = "15px Arial"; 
ctx.fillText("Role",81,20); 
</script><br> 
<canvas id="WhatsApp" width="200" height="30" style="border:1px solid #000000;">  
Your browser does not support the HTML5 canvas tag. 
</canvas><br> 
<script> 
var canvas = document.getElementById("WhatsApp"); 
var ctx = canvas.getContext("2d"); 
ctx.font = "15px Arial"; 
ctx.fillText("WhatsApp",60,20); 
</script> 
<canvas id="Email" width="200" height="30" style="border:1px solid #000000;"> 
Your browser does not support the HTML5 canvas tag. 
</canvas> 
<script> 
var canvas = document.getElementById("Email"); 
var ctx = canvas.getContext("2d"); 
ctx.font = "15px Arial"; 
ctx.fillText("Email",77,20); 
</script> 

</body> 
</head> 
</html> 
+0

C'est la même chose. –

+0

Si vous avez changé la largeur pour toutes les mêmes valeurs pour chaque entrée de toile, elle s'affichera correctement, bien que vous puissiez définir un style en utilisant CSS pour vous éviter d'avoir à changer la largeur cinq fois. –

+0

Difficile à expliquer mais, je veux que la boîte «À propos de» soit de la même taille que les boîtes «Photo, Email, WhatsApp, etc." En hauteur. Je ne sais pas comment expliquer. –