28172 sujets

CSS et mise en forme, CSS3

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 Smiley confus

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 Smiley lol
Modifié par Martin Lestas (28 Jul 2012 - 10:14)
Salut et bienvenu ^^
Martin Lestas a écrit :

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 ).

As-tu mis vertical-align:top sur les deux éléments en inline-block ? Sinon j'ai remarqué que tu avais un espace indésirable entre ton aside et ton article peut être cet article pourrait t'intéresser (sinon pour le futur c'est bien aussi).
Martin Lestas a écrit :

Et j’aimerai que mon footer ( bloc jaune ) soit positionner juste en dessous de mon bloc vert. Avec la même taille etc.

Dans ce cas enlève le position:absolute; (et les valeurs associées (bottom ici).

Sinon sur le body un petit

body {
margin: 0 auto;
width: 960px;
}

rendrait le site plus lisible (pour un début), c'est ce qui se fait généralement, mais bon je te laisse explorer de ce côté ^^

En espérant t'avoir éclairé ^^
Merci beaucoup Smiley lol
En fait j'ai réussi à résoudre mon problème mais je ne sais pas si je l'ai bien fais. Car l’apparence est pas mal mais après je ne sais pas bien si c'est bien codé ou pas.

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>
				<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>



& le code 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;
	width: 210px;
	margin-top: 25px;
	padding: 5px;
	display: inline-block;
	position: absolute;
}

article
{
	background-color: green;
	width: 80%;
	margin-left: 240px;
	margin-top: 25px;
	display: inline-block;
}

footer
{
	background-color: yellow;
	width: 80%;
	margin-left: 240px;
}


>> Genre moi je n'ai pas mis de class ou d'id donc je sais pas si c'est bien de pas en mettre ... ?

>> Sinon pas de vertical-align: top; ni de float: left;

>> Et j'ai mis des valeurs en pourcentage et en pixel ... Je sais pas si c'est bien de les mettre comme je les ais mis. Enfin en tout cas le site commence à prendre forme petit à petit. Smiley lol

>> Je n'ai mis qu'une seule position absolue pour l'aside. Et les autres restent dans le flux.

>> <souligne>Mini problème tout de même. Je n'arrive pas à supprimé la marge ( top ) entre mon bloc jaune et le vert. Elle s'est créer seule.</souligne>

Sinon je pense que c'est assez bien codé. Je ferais l'optimisation en fin d'aprèm je pense. ^^

Edit :
http://img86.xooimage.com/files/7/e/6/e-36af8e1.png
Bonjour,

Tu peux faire sans le positionnement en absolu de ton aside :
Aside et article sont en inline-block et donc se positionnent côte à côte si tu leur en laisses la place... Il faut juste retirer (ou diminuer) le margin-left de 240px sur article et enlever le positionnement absolu de aside.

Pour les pourcentages et pixels, ça dépend de ce que tu veux faire... design fixe ou fluide. Mais il me semble difficile d'avoir un design qui s'adapte à tous les écrans si tu mélanges les deux. Par exemple, si tu laisses aside en pixel, pourquoi 80% de largeur pour article ? Essaie de garder tout en pourcentage pour les largeurs de aside et article ainsi que pour tes margin et padding (le tout devant arriver à 100%).

Pour la structure HTML5, à la place de <article>, j'aurais mis un bloc <section> puis chaque article dans des blocs <article> Smiley biggrin ... cohérent !

Pour finir, la bande blanche entre ta zone verte et ton footer est due au fait que le premier élément de ton footer et un <h1> avec un margin-top qui n'est pas pris en compte dans les dimensions du footer ! Pour éviter cela, on peux ajouter, par exemple, un padding-top de 1px au footer qui réintègre le margin du h1 dans le footer. Utilise firebug sur firefox ou les outils de développement de chrome, ils permettent de visualiser les margin et padding des éléments.

Bonne continuation