Bonjour,
je n'arrive pas à mettre 2 sections à côter une à gauche et l'autre juste à côter à droite.
Ici je veux mettre la section avec l'id=moi à gauche de la section avec l'id=infos
HTML :
CSS :
Merci d'avance
je n'arrive pas à mettre 2 sections à côter une à gauche et l'autre juste à côter à droite.
Ici je veux mettre la section avec l'id=moi à gauche de la section avec l'id=infos
HTML :
Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/style.css" />
<link rel="icon" type="image/png" href="favicon.png" />
<title>Accueil</title>
</head>
<body>
<!-- Menu de navigation -->
<nav>
<ul id="navbar">
<li><a href="index.html">Accueil</a></li>
<li><a>A propos</a>
<ul class="submenu">
<li><a href="contact.html">Me contacter</a></li>
<li><a href="prq.html">Pourquoi ce site ?</a></li>
</ul>
</li>
</ul>
</nav>
<!------------------------->
<section class="section_centrale" id="moi">
<article>
<h2>Qui suis-je ?</h2>
<p>
Etudiant passioné d'informatique qui ne cesse d'évoluer au fil du temps. Curieux, patient, jeune et dynamique. Peut-être trop bavard, qui sait ?
</p>
<p>
Je fais actuellement des cours sur internet pour apprendre le développement web.
</p>
<p>
Mes objectifs sont :
</p>
<p>
- Connaître le <span class="span_bold">HTML / CSS</span> pour créer la base d'un site web et pouvoir ensuite le styliser.
</p>
<p>
- Apprendre le <span class="span_bold">PHP / SQL</span> pour pouvoir proposer plus de fonctionnalités côté réseau.
</p>
<p>
- Apprendre le <span class="span_bold">JavaScript</span> pour rendre un site web dynamique.
</p>
</article>
</section>
<section class="section_droite" id="infos">
<p>
Matthieu
</p>
<p>
Dieppe
</p>
<p>
13 ans
</p>
</section>
<section class="section_centrale" id="mesprojets">
<h2>Mes projets</h2>
<img src="images/seely.png" alt="Logo de Seely" id="logo_seely"/>
<h3>Seely :</h3>
<p>
Je suis actuellement fondateur du projet que j'ai nommé Seely. Seely propose ses services de Développement web, graphisme et rédaction à des prix raisonnables.
</p>
<br/>
<a href="https://skilldev.be/fr/" target="_blank"><img src="images/skilldev.png" alt="Logo skilldev" id="logo_skilldev"/></a>
<h3>SkillDev :</h3>
<p>
Je vais peut-être rentrer dans l'équipe de SkillDev en tant que développeur web. Je suis en train de créer le site web qui leur servira d'exemple pour voir mes capacités de développeur.
</p>
</section>
<section class="section_centrale">
<h3>Mes compétences</h3>
<p>
- Je suis en train d'apprendre le <span class="span_bold">HTML / CCS</span> qui sont les languages de développement web basiques. Le <span class="span_bold">HTML</span> permet de créer le squellette du site web et le <span class="span_bold">CSS</span> permet de styliser ce squelette. Je connais le <span class="span_bold">HTML / CSS</span> à 70%.
</p>
<p>
- Je suis très bon rédacteur surtout sur les actualités ciblant les jeux-vidéos ou les objets high-tech en général.
</p>
<p>
- J'ai des bases solides sur le logiciel Photoshop. Tous mes logos sont créer par moi-même.
</p>
</section>
<!-- Footer -->
<footer>
<p>
Site entièrement crée par <a href="https://www.twitter.com/WooszFR" target="_blank">Woosz</a>.
</p>
</footer>
<!-- ------ -->
</body>
</html>CSS :
Code:
body{
margin: 0px;
padding: 0px;
font-family: "Tahoma";
background-color: #DFECE9;
}
/*/ ----- Menu de navigation ----- /*/
nav
{
width: 100%;
background-color: white;
}
nav ul
{
margin: 0px;
padding: 0px;
}
nav ul li
{
float: left;
position: relative;
list-style-type: none;
font-family: "Verdana";
}
nav ul li a
{
padding: 20px 30px;
color: black;
}
nav ul::after
{
content: "";
display: block;
clear: both;
}
.submenu
{
display: none;
}
nav a
{
display: inline-block;
text-decoration: none;
}
nav li:hover .submenu
{
display: inline-block;
position: absolute;
background-color: white;
top: 100%;
left: 0px
padding: 0px;
z-index: 1000;
}
nav li:hover{
background-color: white;
font-size: 15px;
}
nav li:hover .submenu{
font-size: 12px;
}
.submenu li
{
border-bottom: 1px solid #CCC;
}
.submenu li a
{
padding: 15px 30px;
font-size: 13px
color: #222538;
width: 270px;
}
/*/ ------------------------------------- /*/
.section_centrale{
background-color: white;
display: table;
padding: 12px;
padding-left: 20px;
margin-top: 30px;
margin-left: 30px;
margin-right: 500px;
margin-bottom: 30px;
}
.section_droite{
background-color: white;
display: table;
padding: 12px;
margin-top: 1px;
margin-bottom: 30px;
margin-left: 900px;
padding-right: 300px;
margin-right: 50px
}
.section_droite:after{
content:".";
display:block;
clear:both;
height:0;
visibility:hidden;
}
#moi{
float: left;
}
.span_bold{
font-weight: bold;
}
section{
color: black;
opacity: 0.9;
}
#logo_seely{
width: 90px;
height: 90px;
float: left;
margin-right: 15px;
}
#logo_skilldev{
width: 90px;
height: 90px;
float: left;
margin-right: 15px;
margin-top: 15px;
}
/*/ ---- Footer ----- /*/
footer{
background-color: white;
padding: 3px;
}
footer p{
text-align: center;
}
footer p a{
text-decoration: none;
color: black;
font-weight: bold;
}
footer p a:hover{
opacity: 0.5;
}
/*/ ---------------- /*/Merci d'avance
