5545 sujets

Sémantique web et HTML

Diviser une page HTML en 2.

Bonjour,

j'aimerais pouvoir séparé ma page HTML en deux, de manière à pouvoir mettre le "sommaire" de ma page sur la gauche et le contenu de la page en elle même sur la partie de droite.
Le truc c'est que : J'ai réussi à séparé la page en deux mais je n'arrive pas à mettre le texte sur la partie de gauche.
Es ce que vous pourriez m'aider ?

J'espère avoir étais claire. Merci à e qui répondrons.


- Voici mon code actuel : 

<html>
   <style type="text/css">
html { 
  height: 100%;
  background: #A2A1A1;
} 
head {
  position: absolute;
  top: 100px;
  left: -250px;
} 
body {
  position: relative;
  min-height: 100%;
  margin: 0 0 0 40%;
  padding: 0 20px;
  background: #FFFFFF;
}

</style>

<!--Sommaire-->
<head> 
    <p><font size=5 color="black" face="Sitka Banner">Les droits d'auteurs </font></p>
    <p><font size=5 color="black" face="Sitka Banner">d'&oelig;uvres cin&eacute;matographique.</font></p></p>

<p> <font size=3 color="black" face="Sitka Banner" >
<ul>
	<li> Le droit d'auteur. </li>
	<li> Fan-Vid&eacute;o. </li>
	<li> Fan-Fiction. </li>
	<li> Respect ou infraction du droit d'auteur? </li>
	<li> Bibliographie. </li> 
</p>
</head>

<!--Resume-->
<body>
<font size=4 color="black" face="Sitka Banner" style="text-align:center;">
<p>Nous allons essayer &agrave; travers se site de r&eacutepondre &agrave; la questions suivante: 
" Es ce que les Fan-Vid&eacute;os et les Fan-Fictions respecte ou non le droit d'auteur ? " 
Pour r&eacute;pondre &agrave; cette question, nous allons tout d'abord pr&eacute;senter le droit d'auteur, ensuite nous parlerons des Fan-Vid&eacute;os 
 et des Fan-Fictions et enfin, nous essayerons de porter une r&eacute;ponse &agrave; notre question. </p>
</font>
</body>

Modifié par Raphael (06 Mar 2019 - 15:04)
Administrateur
Hello Utah et bienvenue,

J'allais commencer par te dire qu'il est préférable de ne pas opter pour des positionnements absolute et relative pour faire des "choses simples" comme tu le souhaites, mais en survolant ton HTML j'ai vu bien pire que cela.

J'ai peur que tu le prennes mal mais je me dois de te dire que le code (HTML et CSS) est vraiment obsolète et déconseillé.

Par exemple, cet extrait "<font size=5 color="black" face="Sitka Banner">" est dépassé depuis plus de 15 ans, depuis que CSS existe en fait.

Je pourrais te donner la réponse à ta question, mais est-ce que cela te servira vraiment puisqu'il semble qu'il y ait énormément de bases qu'il te faudrait (ré)apprendre pour véritablement comprendre ce que tu produis ?
Raphael a écrit :
Hello Utah et bienvenue,

J'allais commencer par te dire qu'il est préférable de ne pas opter pour des positionnements absolute et relative pour faire des "choses simples" comme tu le souhaites, mais en survolant ton HTML j'ai vu bien pire que cela.

J'ai peur que tu le prennes mal mais je me dois de te dire que le code (HTML et CSS) est vraiment obsolète et déconseillé.

Par exemple, cet extrait "&lt;font size=5 color="black" face="Sitka Banner"&gt;" est dépassé depuis plus de 15 ans, depuis que CSS existe en fait.

Je pourrais te donner la réponse à ta question, mais est-ce que cela te servira vraiment puisqu'il semble qu'il y ait énormément de bases qu'il te faudrait (ré)apprendre pour véritablement comprendre ce que tu produis ?


Bonjour. Je comprend tout à fait. En rélité je dois faire un cite pour mes études [L'informatique étant un option obligatoire, je ne m'y connais pas du tout en HTML et CSS.]
Et J'ai essayer de faire cette page selon ce que mon professeur m'a appris, c'est à dire que du code HTML. D'où l'utilisation du : "&lt;font size=5 color="black" face="Sitka Banner"&gt;". Qui nous à était montré en cours.

Mais ça serait vraiment gentil de votre part si vous pouviez m'indiquer comment faire. Car ayant une dead-line je n'ai pas le temps d'apprendre tout les rouage de ces codes...
J'épère que vous comprendrez.
Administrateur
Utah a écrit :
D'où l'utilisation du : "&amp;lt;font size=5 color="black" face="Sitka Banner"&amp;gt;". Qui nous à était montré en cours.
Un professeur vous a montré ça en 2019 ? Smiley sweatdrop

Pour commencer, tu ne peux pas te servir des éléments <head> et <body> ainsi.
<head> est très particulier : son but est de contenir des informations de page qui ne doivent pas être affichées.

Ta page visible doit se trouver *dans* <body>. C'est hallucinant que l'on ne t'ai pas enseigné cela.

Bref, voici une façon de faire : https://codepen.io/raphaelgoetter/pen/drNJMN?editors=1100
Modérateur
Raphael a écrit :
Un professeur vous a montré ça en 2019 ? Smiley sweatdrop
[...]
C'est hallucinant que l'on ne t'ai pas enseigné cela.


Le fossé qu'il y a souvent entre la théorie enseigné par un prof qui ne bosse pas avec ce qu'il enseigne et le monde pro / réel. Smiley sweatdrop
Sujet clos
Aller à