Bonjour.
Adepte de la mauvaise utilisation du float, je reprends le droit chemin et j'utilise désormais inline-block pour placer deux blocks côte à cote.
Par contre j'aimerais que l'on me confirme ceci svp:
- Si dans mon HTML je ne mets pas de <p> à l'intérieur de la balise <aside> et dans le CSS je mets display: inline-block pour les balises <div id="content"> et <aside> les blocks sont cote à cote.
Si je ne mets inline-block que pour le block content, le block aside se positionne en bas et non pas a droite de content, alors que content doit se comporter en inline normalement.
- Si je rajoute une balise de type block, ici <p>, alors le block <p> se replace dans le flux principal et le block <aside> se retrouve alors a droite et en dessous du block <content>, et ceci malgré les deux inline-block.
Voila donc je suppose que ce comportement est normal, et pour y remédier je dois mettre le block <p> en position: absolute; (d'aprés vos tuto, il vaut mieux éviter d'utiliser position).
Suis-je obligé de procéder de la sorte, ou y à t-il un autre moyen?
Merci pour votre aide.
Code HTML 5 :
Code CCS 3:
Modifié par Htb (29 Apr 2010 - 13:09)
Adepte de la mauvaise utilisation du float, je reprends le droit chemin et j'utilise désormais inline-block pour placer deux blocks côte à cote.
Par contre j'aimerais que l'on me confirme ceci svp:
- Si dans mon HTML je ne mets pas de <p> à l'intérieur de la balise <aside> et dans le CSS je mets display: inline-block pour les balises <div id="content"> et <aside> les blocks sont cote à cote.
Si je ne mets inline-block que pour le block content, le block aside se positionne en bas et non pas a droite de content, alors que content doit se comporter en inline normalement.
- Si je rajoute une balise de type block, ici <p>, alors le block <p> se replace dans le flux principal et le block <aside> se retrouve alors a droite et en dessous du block <content>, et ceci malgré les deux inline-block.
Voila donc je suppose que ce comportement est normal, et pour y remédier je dois mettre le block <p> en position: absolute; (d'aprés vos tuto, il vaut mieux éviter d'utiliser position).
Suis-je obligé de procéder de la sorte, ou y à t-il un autre moyen?
Merci pour votre aide.
Code HTML 5 :
<!Doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
<title><?php echo $title_page ?></title>
<link rel="stylesheet" media="all" href="../site_css/style_all.css">
</head>
<body>
<div id="wrapper">
<div id="content">
</div>
<aside>
<p>Bonjour</p>
</aside>
</div>
</div>
</body>
</html>
Code CCS 3:
/* remise a zero pour tout les navigateur quel qu'il soit */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td
{
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
}
/* lien */
a
{
text-decoration: none;
}
/* remember to define focus styles! */
:focus
{
outline: 0;
}
body
{
line-height: 1;
color: black;
background: white;
}
ol, ul
{
list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table
{
border-collapse: separate;
border-spacing: 0;
}
caption, th, td
{
text-align: left;
font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after
{
content: "";
}
blockquote, q
{
quotes: "" "";
}
/* --------------------------- FIN REMISE A ZERO --------------------------- */
body
{
margin: auto;
background: yellow;
}
/* Blocks */
header, nav, footer, figure, section, article, aside
{
display: block;
}
/* block wrapper */
#wrapper
{
width: 980px;
margin: auto;
background: blue;
}
/* --------------------------- block content --------------------------------- */
#content
{
display: inline-block;
width: 820px;
height: 500px;
background: green;
}
/* -------------------------- aside ------------------------------------------ */
aside
{
display: inline-block;
width: 100px;
height: 500px;
background: white;
}
aside p
{
position: absolute;
}
Modifié par Htb (29 Apr 2010 - 13:09)
.
) .
, et des tutos alsacréations.
.