miigou
Reputation: 11
An item doesn't want to stay in place
So i'm doing a one-page website and my problem is the next:
On my homepage I want to have the title from the site and 2 decorations, but the problem is that they don't want to stay in their place.
I want the first to be in the top left corner and the second in the bottom right corner. I've tried to deal with it with top: 0px;, bottom: 0px; and a position: absolute; but they dont want to stay in place.
Please help me.
/* RÉGLAGES GÉNÉRAUX */
body {
font-family: 'Roboto', sans-serif;
color: #222222;
background-color: beige;
}
/* RÉGLAGES DES SECTIONS */
section {
height: 100vh;
width: 90%;
overflow: auto;
vertical-align: middle;
display: flex;
justify-content: center;
align-items: center;
margin-left: auto;
margin-right: auto;
padding: 50px auto 50px auto;
font-size: 1.5em;
position: relative;
}
.home{
width: 100%;
height: 100%;
position: relative;
}
/* Style des déco */
#3rectangles {
top: 0px;
left: 0px;
position: absolute;
}
#3rectanglesUD {
right: 0px;
bottom: 0px;
position: absolute;
}<!DOCTYPE html>
<html>
<head>
<title>Comprendre l'Intelligence Artificielle</title>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" type="text/css" href="css/nav.css">
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<script src="js/jquery-3.3.1.slim.min.js"></script>
<script src="js/script.js"></script>
</head>
<body>
<div id="nav" class="container">
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>
<div class="overlay-content">
<a href="#home" onclick="closeNav()">Accueil</a>
<a href="#iaCestQuoi" onclick="closeNav()">L'IA c'est quoi?</a>
<a href="#iafaible" onclick="closeNav()">L'IA faible</a>
<a href="#iaforte" onclick="closeNav()">L'IA forte</a>
<a href="#iahier" onclick="closeNav()">L'IA d'hier</a>
<a href="#iaauj" onclick="closeNav()">L'IA d'aujourd'hui</a>
<a href="#iademain" onclick="closeNav()">L'IA de demain</a>
<a href="#aPropos" onclick="closeNav()">À propos de nous</a>
<a href="#contact" onclick="closeNav()">Contact</a>
</div>
</div>
<span style="font-size:30px;cursor:pointer" onclick="openNav()" id="openNav">☰</span>
<section id="home">
<div class="home">
<img id="3rectangles" src="https://imgur.com/a/7aSMZis/">
<h1>
Comprendre<br> l'Intelligence
<br> Artificielle
<br>
</h1>
<img id="3rectanglesUD" src="https://imgur.com/a/jiyXKj7/">
</div>
</section>
<section id="iaCestQuoi">
<div>
<h1>
L'intelligence artificelle c'est quoi?
</h1>
<p>
L’ordinateur dépasse déjà l’humain dans les tâches répétitives telles que le calcul ou encore la mémorisation. Mais ce n’est pas de l’intelligence.<br> Jacques Attali définit l’intelligence lors d’une conférence avec le chercheur en intelligence artificielle Jean Ponce “comme la faculté du cerveau humain à faire des liens entre des choses qui n’en avaient apparemment pas”.<br> Les chercheurs en IA veulent développer – artificiellement donc – cette intelligence. Ils cherchent donc le moyen de faire en sortes que les ordinateurs puissent accomplir les mêmes tâches que l’homme et puissent développer une capacité intellectuelle comparable ou supérieure à celle de l’homme.<br> Le but des chercheurs est d’optimiser pour au rentabiliser au mieux les performances de l’algorithme afin qu’il puisse égaler l’humain dans toutes ses capacités intellectuelles jusqu’à même avoir des sentiments. Les algorithmes simples ne font pas partie de l’IA comme le mode conduite automatique de Tesla qui se base sur un GPS et une caméra.<br> L’importance et l’utilité de l’IA ne sont plus à démentir car elles aident déjà beaucoup dans le secteur médical, automobile ou encore l’exploration spatiale et ses petits robots.<br> Cette technologie a déjà largement démontré qu’elle peut surpasser l’humain autant sur le plan physique que sur le plan intelligent.
</p>
</div>
</section>
<section id="iafaible">
<div>
<h1>
IA faible
</h1>
<p>
L’intelligence artificielle faible reproduit le plus fidèlement possible un comportement ou un système de réflexion préprogrammé, mais ne comprend pas son fonctionnement.<br> Le principe de compréhension ne s’effectue pas là car elle imite sa cible.<br> Même si elle paraît intelligente, elle ne fait que lire l’algorithme elle n’est donc intelligente que pour un regard extérieur.<br> L’intelligence artificielle faible n’est pas fait pour évoluer seule par ce n’est qu’un assemblage de programmes et d’algorithmes informatiques qui ne servent qu’à la tâche précise et spécifique pour laquelle ils ont été conçus.
</p>
</div>
</section>
<section id="iaforte">
<div>
<h1>
IA forte
</h1>
<p>
L’IA forte, aussi appelée ascendante, est au contraire de l’IA faible une intelligence au sens plein ; la machine fait preuve d’anticipation, d’adaptation et peut atteindre les capacités intellectuelles humaines.<br> Elle peut non seulement effectuer des actions rationnelles et réfléchies en analysant des situations, mais également être consciente et comprendre ses choix.<br> Actuellement, programmer une conscience semble impossible. Cependant, les chercheurs se penchent déjà dessus et les recherches avancent vitesse grand V.
</p>
</div>
</section>
<section id="iahier">
<div>
<h1>
L'IA d'hier
</h1>
<h2>
Sa naissance
</h2>
<p>
De nombreuses légendes racontent que des êtres artificiels auraient déjà vu le jour, créés par des maîtres artisans et ayant une conscience propre.<br> L’homme a simplement toujours rêvé d’immortalité, peu importe la sorte.<br> Ce qui l’a conduit à divers projets ayant pour but de le copier.<br> Cette méthode lui permettrait d’être maître de l’évolution et de prendre le contrôle de la nature en essayant de tracer sa propre destinée.<br> Les premières machines à calculer apparaissent par exemple dès l’antiquité. Ces inventions, qui ont été perfectionnées au cours des siècles, ont présagé l’existence de technologies accompagnant ou reproduisant les capacités humaines qui tendent à se développer de façon exponentielle aujourd’hui.
</p>
<h2>
De 1950 à nos jours
</h2>
<p>
La première forme de démocratisation de l’intelligence artificielle est lancée par Alan Turing, que l’on considère souvent comme un père de l’I.A., au travers de son article « Computing Machinery and Intelligence » en 1950 qui porte sur les fondamentaux des machines intelligentes.<br> Dans cette avancée d’esprits et de technologies, John McCarthy inventera plus tard la technique du temps partagé, qui permettait aux ordinateurs qui coutaient un bras à l’époque de s’optimiser en effectuant plusieurs tâches simultanées. Il inventa aussi le premier langage de programmation, le LISP, qui fut le langage de référence de l’IA des années 70-80 et qui est encore utilisé sur le web ou en finance.<br> Après de longues années d’espérance à la création d’intelligences artificielles, se suivirent de longues années de désillusions étant donné que les technologies passées n’étaient pas assez puissantes pour en créer de réelles. C’est seulement grâce à internet au début des années 2000 et au partage de connaissance qu’elle offre que le projet put continuer à se développer, ainsi que grâce aux avancées technologiques sur la puissance des ordinateurs. Actuellement on peut retrouver des I.A. partout pour effectuer les tâches les plus simples et répétitives des hommes en les exécutant même mieux grâce à la puissance de calcul et l’efficacité informatique.
</p>
</div>
</section>
<section id="iaauj">
<div>
<h1>
L'IA d'aujourd'hui
</h1>
<p>L’I.A. rentre aujourd’hui dans une phase de croissance exponentielle grâce à l’optimisation et au développement des technologies qui sont de plus en plus rapides. Mais tout cela n’aurait pas eu lieu si vite si de nombreux chercheurs n’auraient pas fait évoluer le sujet théorique des années au par avant. Même les entreprises les plus influentes en ont compris les enjeux et y investissent.
</p>
<h1>Les apps</h1>
<p>L’Intelligence Artificielle est désormais utilisée partout comme dit au-dessus, comme par exemple :</p>
<ul>
<li>Le traitement d’images et de vidéos (reconnaissance d’images)</li>
<li>Le traitement du langage (reconnaissance vocale et Chatbots)</li>
<li>Les analyses prédictives (basées sur une grande base de données)</li>
<li>La programmation des jeux (surtout grâce aux adversaires qui ont un comportement de plus en plus réaliste)</li>
<li>L’automatisation intelligente (développée dans l’industrie)</li>
<li>La conception de robots humanoïdes</li>
<li>La santé et la bio-informatique</li>
<li>L’art où la machine peut concevoir des chefs-d’œuvre</li>
<li>La simulation de systèmes complexes</li>
</ul>
<h1>Les techniques</h1>
<p>L’Intelligence Artificielle se base sur diverses disciplines scientifiques comme par exemple :</p>
<ul>
<li>Les systèmes experts</li>
<li>Le machine learning</li>
<li>Le deeplearning</li>
<li>La résolution de problèmes</li>
<li>Le traitement automatique du langage</li>
</ul>
</div>
</section>
<section id="iademain">
<div>
<h1>
L'IA de demain
</h1>
<p>Aujourd’hui et surtout dans les prochaines années, les programmes intelligents sont et seront en pleine voie d’extension. Les progrès se font surtout dus à une pression économique et politique des états Américains et Chinois.<br> La période de l’avancée technologique dans ce domaine n’en est donc qu’à son début étant donné qu’il nous manque encore des connaissances même si elles seront vites acquises afin de construire de vrais robots humanoïdes ayant leur propre conscience et fonctionnement. Les experts disent que la découverte de cette technologie pousserait toutes les autres à évoluer par un effet boule de neige.<br> L’hypothèse de la technologie qui prend le dessus sur l’humanité et souvent vue et revue par Hollywood comme par exemple dans le film Transendance ou encore I-Robot qui met en avant les 3 lois de la robotique d’Isaac Asimov qui sont :</p><br>
<ol>
<li>Aucun robot ne peut faire de mal à un humain ou le laisser exposé à un danger</li><br>
<li>Tout robot doit obéir aux ordres de l’humain sauf si l’ordre est contraire à la loi n°1</li><br>
<li>Le robot doit protéger son existence sauf si cette protection entraîne une contradiction avec les règles n°1 et n°2</li><br>
</ol>
<p>Le fait qu’une intelligence artificielle s’améliore toute seule semble n’être que fiction comme la fin de l’humanité qui se ferait dominer par cette dernière. Quelles que soient les conjectures, l’IA va avoir une influence considérable sur notre quotidien et va sans nul doute révolutionner la conduite du monde.</p>
</div>
</section>
<section id="aPropos">
<div>
<h1>
À propos de nous
</h1>
</div>
</section>
<section id="contact">
<div>
<h1>
Contact
</h1>
</div>
</section>
</body>
</html>Upvotes: 0
Views: 68
Answers (3)
user7148391
Reputation:
I don't fully understand your end result, but if i may suggest a few minor things.
Rather than having two <img> and using them like background images, you can use the background property to achieve your desired layout.
You can set more than one image to the background property. You just need to separate each by comma, same thing for the other properties.
like this :
background-image: url('first alink') , url('second image link');
To position them how you like you can use background-position this :
background-position: top left, right bottom;
Also resize them how you like, also you can have just one declaration and it will repeat for the images if you have a lot
/* This */
background-size: 100% 15%;
/* Is equivalent to This */
background-size: 100% 15% , 100% 15%;
And as always don't forget no-repeat
background-repeat: no-repeat;
/* RÉGLAGES GÉNÉRAUX */
/* You Might wanna add this, to remove unwanted white space. */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Roboto', sans-serif;
color: #222222;
background-color: beige;
}
/* RÉGLAGES DES SECTIONS */
section {
height: 100vh;
width: 90%;
overflow: auto;
vertical-align: middle;
display: flex;
justify-content: center;
align-items: center;
margin-left: auto;
margin-right: auto;
padding: 50px auto 50px auto;
font-size: 1.5em;
position: relative;
}
.home {
width: 100%;
height: 100%;
position: relative;
background-image: url(https://i.imgur.com/qpP5rKO.png), url(https://i.imgur.com/qUGXcWz.png);
background-position: top left, right bottom;
background-size: 100% 15%;
background-repeat: no-repeat;
}<section id="home">
<div class="home">
<h1>
Comprendre<br> l'Intelligence
<br> Artificielle
<br>
</h1>
</div>
</section>Upvotes: 1
D3nj1
Reputation: 105
The easiet way to do it is by adding this to your CSS elements.
<style>
Position: absolute;
Top: 0px;
Left: 0px;
</style>
This locks it to the top left corner.
This will make it possible to move around, exactly as you like.
<style>
Transform: Translate(1px, 1px);
</style>
All you have to do is change the parameters in Transform: Translate(1px, 1px);
To make it fit in with your code. I recommend the vw/vh format (Viewport-width and Viewport-height, Viewport being the monitor, this will make it very scaleable if needed)
Upvotes: 0
zgood
Reputation: 12571
You can't start id's with a number so the styles you write will not be applied. So rename the elements to something like three-rectangles
/* RÉGLAGES GÉNÉRAUX */
body {
font-family: 'Roboto', sans-serif;
color: #222222;
background-color: beige;
}
/* RÉGLAGES DES SECTIONS */
section {
height: 100vh;
width: 90%;
overflow: auto;
vertical-align: middle;
display: flex;
justify-content: center;
align-items: center;
margin-left: auto;
margin-right: auto;
padding: 50px auto 50px auto;
font-size: 1.5em;
position: relative;
}
.home{
width: 100%;
height: 100%;
position: relative;
}
/* Style des déco */
#three-rectangles {
top: 0px;
left: 0px;
position: absolute;
}
#three-rectanglesUD {
right: 0px;
bottom: 0px;
position: absolute;
}<!DOCTYPE html>
<html>
<head>
<title>Comprendre l'Intelligence Artificielle</title>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" type="text/css" href="css/nav.css">
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<script src="js/jquery-3.3.1.slim.min.js"></script>
<script src="js/script.js"></script>
</head>
<body>
<div id="nav" class="container">
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>
<div class="overlay-content">
<a href="#home" onclick="closeNav()">Accueil</a>
<a href="#iaCestQuoi" onclick="closeNav()">L'IA c'est quoi?</a>
<a href="#iafaible" onclick="closeNav()">L'IA faible</a>
<a href="#iaforte" onclick="closeNav()">L'IA forte</a>
<a href="#iahier" onclick="closeNav()">L'IA d'hier</a>
<a href="#iaauj" onclick="closeNav()">L'IA d'aujourd'hui</a>
<a href="#iademain" onclick="closeNav()">L'IA de demain</a>
<a href="#aPropos" onclick="closeNav()">À propos de nous</a>
<a href="#contact" onclick="closeNav()">Contact</a>
</div>
</div>
<span style="font-size:30px;cursor:pointer" onclick="openNav()" id="openNav">☰</span>
<section id="home">
<div class="home">
<img id="three-rectangles" src="https://imgur.com/a/7aSMZis/">
<h1>
Comprendre<br> l'Intelligence
<br> Artificielle
<br>
</h1>
<img id="three-rectanglesUD" src="https://imgur.com/a/jiyXKj7/">
</div>
</section>
<section id="iaCestQuoi">
<div>
<h1>
L'intelligence artificelle c'est quoi?
</h1>
<p>
L’ordinateur dépasse déjà l’humain dans les tâches répétitives telles que le calcul ou encore la mémorisation. Mais ce n’est pas de l’intelligence.<br> Jacques Attali définit l’intelligence lors d’une conférence avec le chercheur en intelligence artificielle Jean Ponce “comme la faculté du cerveau humain à faire des liens entre des choses qui n’en avaient apparemment pas”.<br> Les chercheurs en IA veulent développer – artificiellement donc – cette intelligence. Ils cherchent donc le moyen de faire en sortes que les ordinateurs puissent accomplir les mêmes tâches que l’homme et puissent développer une capacité intellectuelle comparable ou supérieure à celle de l’homme.<br> Le but des chercheurs est d’optimiser pour au rentabiliser au mieux les performances de l’algorithme afin qu’il puisse égaler l’humain dans toutes ses capacités intellectuelles jusqu’à même avoir des sentiments. Les algorithmes simples ne font pas partie de l’IA comme le mode conduite automatique de Tesla qui se base sur un GPS et une caméra.<br> L’importance et l’utilité de l’IA ne sont plus à démentir car elles aident déjà beaucoup dans le secteur médical, automobile ou encore l’exploration spatiale et ses petits robots.<br> Cette technologie a déjà largement démontré qu’elle peut surpasser l’humain autant sur le plan physique que sur le plan intelligent.
</p>
</div>
</section>
<section id="iafaible">
<div>
<h1>
IA faible
</h1>
<p>
L’intelligence artificielle faible reproduit le plus fidèlement possible un comportement ou un système de réflexion préprogrammé, mais ne comprend pas son fonctionnement.<br> Le principe de compréhension ne s’effectue pas là car elle imite sa cible.<br> Même si elle paraît intelligente, elle ne fait que lire l’algorithme elle n’est donc intelligente que pour un regard extérieur.<br> L’intelligence artificielle faible n’est pas fait pour évoluer seule par ce n’est qu’un assemblage de programmes et d’algorithmes informatiques qui ne servent qu’à la tâche précise et spécifique pour laquelle ils ont été conçus.
</p>
</div>
</section>
<section id="iaforte">
<div>
<h1>
IA forte
</h1>
<p>
L’IA forte, aussi appelée ascendante, est au contraire de l’IA faible une intelligence au sens plein ; la machine fait preuve d’anticipation, d’adaptation et peut atteindre les capacités intellectuelles humaines.<br> Elle peut non seulement effectuer des actions rationnelles et réfléchies en analysant des situations, mais également être consciente et comprendre ses choix.<br> Actuellement, programmer une conscience semble impossible. Cependant, les chercheurs se penchent déjà dessus et les recherches avancent vitesse grand V.
</p>
</div>
</section>
<section id="iahier">
<div>
<h1>
L'IA d'hier
</h1>
<h2>
Sa naissance
</h2>
<p>
De nombreuses légendes racontent que des êtres artificiels auraient déjà vu le jour, créés par des maîtres artisans et ayant une conscience propre.<br> L’homme a simplement toujours rêvé d’immortalité, peu importe la sorte.<br> Ce qui l’a conduit à divers projets ayant pour but de le copier.<br> Cette méthode lui permettrait d’être maître de l’évolution et de prendre le contrôle de la nature en essayant de tracer sa propre destinée.<br> Les premières machines à calculer apparaissent par exemple dès l’antiquité. Ces inventions, qui ont été perfectionnées au cours des siècles, ont présagé l’existence de technologies accompagnant ou reproduisant les capacités humaines qui tendent à se développer de façon exponentielle aujourd’hui.
</p>
<h2>
De 1950 à nos jours
</h2>
<p>
La première forme de démocratisation de l’intelligence artificielle est lancée par Alan Turing, que l’on considère souvent comme un père de l’I.A., au travers de son article « Computing Machinery and Intelligence » en 1950 qui porte sur les fondamentaux des machines intelligentes.<br> Dans cette avancée d’esprits et de technologies, John McCarthy inventera plus tard la technique du temps partagé, qui permettait aux ordinateurs qui coutaient un bras à l’époque de s’optimiser en effectuant plusieurs tâches simultanées. Il inventa aussi le premier langage de programmation, le LISP, qui fut le langage de référence de l’IA des années 70-80 et qui est encore utilisé sur le web ou en finance.<br> Après de longues années d’espérance à la création d’intelligences artificielles, se suivirent de longues années de désillusions étant donné que les technologies passées n’étaient pas assez puissantes pour en créer de réelles. C’est seulement grâce à internet au début des années 2000 et au partage de connaissance qu’elle offre que le projet put continuer à se développer, ainsi que grâce aux avancées technologiques sur la puissance des ordinateurs. Actuellement on peut retrouver des I.A. partout pour effectuer les tâches les plus simples et répétitives des hommes en les exécutant même mieux grâce à la puissance de calcul et l’efficacité informatique.
</p>
</div>
</section>
<section id="iaauj">
<div>
<h1>
L'IA d'aujourd'hui
</h1>
<p>L’I.A. rentre aujourd’hui dans une phase de croissance exponentielle grâce à l’optimisation et au développement des technologies qui sont de plus en plus rapides. Mais tout cela n’aurait pas eu lieu si vite si de nombreux chercheurs n’auraient pas fait évoluer le sujet théorique des années au par avant. Même les entreprises les plus influentes en ont compris les enjeux et y investissent.
</p>
<h1>Les apps</h1>
<p>L’Intelligence Artificielle est désormais utilisée partout comme dit au-dessus, comme par exemple :</p>
<ul>
<li>Le traitement d’images et de vidéos (reconnaissance d’images)</li>
<li>Le traitement du langage (reconnaissance vocale et Chatbots)</li>
<li>Les analyses prédictives (basées sur une grande base de données)</li>
<li>La programmation des jeux (surtout grâce aux adversaires qui ont un comportement de plus en plus réaliste)</li>
<li>L’automatisation intelligente (développée dans l’industrie)</li>
<li>La conception de robots humanoïdes</li>
<li>La santé et la bio-informatique</li>
<li>L’art où la machine peut concevoir des chefs-d’œuvre</li>
<li>La simulation de systèmes complexes</li>
</ul>
<h1>Les techniques</h1>
<p>L’Intelligence Artificielle se base sur diverses disciplines scientifiques comme par exemple :</p>
<ul>
<li>Les systèmes experts</li>
<li>Le machine learning</li>
<li>Le deeplearning</li>
<li>La résolution de problèmes</li>
<li>Le traitement automatique du langage</li>
</ul>
</div>
</section>
<section id="iademain">
<div>
<h1>
L'IA de demain
</h1>
<p>Aujourd’hui et surtout dans les prochaines années, les programmes intelligents sont et seront en pleine voie d’extension. Les progrès se font surtout dus à une pression économique et politique des états Américains et Chinois.<br> La période de l’avancée technologique dans ce domaine n’en est donc qu’à son début étant donné qu’il nous manque encore des connaissances même si elles seront vites acquises afin de construire de vrais robots humanoïdes ayant leur propre conscience et fonctionnement. Les experts disent que la découverte de cette technologie pousserait toutes les autres à évoluer par un effet boule de neige.<br> L’hypothèse de la technologie qui prend le dessus sur l’humanité et souvent vue et revue par Hollywood comme par exemple dans le film Transendance ou encore I-Robot qui met en avant les 3 lois de la robotique d’Isaac Asimov qui sont :</p><br>
<ol>
<li>Aucun robot ne peut faire de mal à un humain ou le laisser exposé à un danger</li><br>
<li>Tout robot doit obéir aux ordres de l’humain sauf si l’ordre est contraire à la loi n°1</li><br>
<li>Le robot doit protéger son existence sauf si cette protection entraîne une contradiction avec les règles n°1 et n°2</li><br>
</ol>
<p>Le fait qu’une intelligence artificielle s’améliore toute seule semble n’être que fiction comme la fin de l’humanité qui se ferait dominer par cette dernière. Quelles que soient les conjectures, l’IA va avoir une influence considérable sur notre quotidien et va sans nul doute révolutionner la conduite du monde.</p>
</div>
</section>
<section id="aPropos">
<div>
<h1>
À propos de nous
</h1>
</div>
</section>
<section id="contact">
<div>
<h1>
Contact
</h1>
</div>
</section>
</body>
</html>Upvotes: 0
Related Questions
- How to make element stay in the same position using css?
- How to get images and other elements to stay in place
- Div not staying in position
- How to keep a div stayed in same position css
- Items in div not staying in position
- Div doesn't stay at the right place
- Why won't this div stay in place?
- Div won't stay in place
- Force a <div> to stay in one place
- How to keep elements in place