Bonjou à tous. J'apprends en se moment même le langage Html et Css. Et je rencontre quelques problèmes avec les positions ... Et oui
Donc je vous ais fais un screen pour vous exposer mon problème. J'ai entourer de rouge se qui ne va pas.
http://img89.xooimage.com/files/d/1/f/tggf-36ae376.png
Mon code Html :
Et mon CSS :
Pour info je code en Html5 et Css3.
Donc j'aimerais que le bloc vert soit aligné au bloc rose en haut. ( j'ai essayé de le vertical-align: top; mais sa ne marche pas ).
Et j’aimerai que mon footer ( bloc jaune ) soit positionner juste en dessous de mon bloc vert. Avec la même taille etc.
Je vous remercie d'avance
Modifié par Martin Lestas (28 Jul 2012 - 10:14)
Donc je vous ais fais un screen pour vous exposer mon problème. J'ai entourer de rouge se qui ne va pas.
http://img89.xooimage.com/files/d/1/f/tggf-36ae376.png
Mon code Html :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="style.css" />
<title>Position bloc CSS3</title>
</head>
<body>
<header>
<h1>titre général</h1>
<nav>
<ul>
<li><a href="#">Lien 1</a></li>
<li><a href="#">Lien 2</a></li>
<li><a href="#">Lien 3</a></li>
<li><a href="#">Lien 4</a></li>
<li><a href="#">Lien 5</a></li>
</ul>
</nav>
</header>
<section>
<aside>
<h1>A propos de l'auteur ...</h1>
<p>Martin Lestas dit Aooka estné un 30 avril 1996
une souris dans la main et un clavier dans l'autre.
Il commence dès son plus jeune âge à jouer à counter strike,
puis vers l'âge de 16 ans il attacquera les langages webs tels
que le html et le Css.</p>
</aside>
<article>
<h2>Titre de mon article 1</h2>
<p>Mon article 1 ne sert à rien. Enfin si on réfléchit bien on peu se poser cette question.
Pourquoi l'auteur a-t-il écrit un tel article ? Et bien en fait la réponse est simple. Cet
article sert tout simplement à meubler le site de l'auteur. Car sans texte le site serais
complètement vide et personne ne viendrait le voir. N'est-ce pas ? Et oui...</p>
<h2>Titre de mon article 2</h2>
<p>Mon article 2 ne sert à rien. Enfin si on réfléchit bien on peu se poser cette question.
Pourquoi l'auteur a-t-il écrit un tel article ? Et bien en fait la réponse est simple. Cet
article sert tout simplement à meubler le site de l'auteur. Car sans texte le site serais
complètement vide et personne ne viendrait le voir. N'est-ce pas ? Et oui... c'est tout comme
l'article 1 en fait.</p>
</article>
</section>
<footer>
<h1>Site par Martin Lestas alias Aooka</h1>
<p>Tout droits réservés - 2012</p>
</footer>
</body>
</html>
Et mon CSS :
header h1
{
background-color: red;
padding: 5px;
margin: 0px;
}
header nav
{
background-color: cyan;
padding: 5px;
margin-left: 10%;
margin-right: 50%;
text-align: left;
}
nav li
{
display: inline-block;
margin-right: 25px;
}
section aside
{
background-color: pink;
padding: 5px;
display: inline-block;
width: 15%;
margin-top: 25px;
}
article
{
background-color: green;
width: 80%;
display: inline-block;
}
footer
{
background-color: yellow;
padding: 5px;
width: 70%;
position: absolute;
bottom: 5px;
}
Pour info je code en Html5 et Css3.
Donc j'aimerais que le bloc vert soit aligné au bloc rose en haut. ( j'ai essayé de le vertical-align: top; mais sa ne marche pas ).
Et j’aimerai que mon footer ( bloc jaune ) soit positionner juste en dessous de mon bloc vert. Avec la même taille etc.
Je vous remercie d'avance
Modifié par Martin Lestas (28 Jul 2012 - 10:14)