Mise en forme des boîtes
Résolu
Utilisateur anonyme
-
Utilisateur anonyme -
Utilisateur anonyme -
Bonjour,
J'essaye de faire un petit site et pour l'instant, je fais la mise en forme.
J'ai un problème :
Je souhaiterait mettre ma zone de navigation à côté de mon contenu mais elle se place automatiquement en-dessous :
Y a-t-il moyen de la faire remonter ?
Cordialement
J'essaye de faire un petit site et pour l'instant, je fais la mise en forme.
J'ai un problème :
Je souhaiterait mettre ma zone de navigation à côté de mon contenu mais elle se place automatiquement en-dessous :
Y a-t-il moyen de la faire remonter ?
Cordialement
A voir également:
- Mise en forme des boîtes
- Mise en forme conditionnelle excel - Guide
- Appliquez à tous les paragraphes du document à télécharger, à l’exception des titres et des sous-titres, la mise en forme suivante : - Guide
- Mise en forme tableau croisé dynamique - Guide
- Mise a jour chrome - Accueil - Applications & Logiciels
- Mise a jour windows 10 - Accueil - Mise à jour
9 réponses
Utilisation des float, tu met un float: left sur ta barre de navigation, et un float: right sur ton contenu et c'est bon. Après ne pas oublié de faire une div de clear: fix ou de mettre un overflow: hidden sur ton contenu et ta nav pour éviter tout problème.
Merci !
C'est mieux mais il me donne ça :
Je voudrais la nav à gauche et retirer la ligne bleue au-dessus
Est-ce que c'est possible ?
C'est mieux mais il me donne ça :
Je voudrais la nav à gauche et retirer la ligne bleue au-dessus
Est-ce que c'est possible ?
Bonjour,
Un exemple très basique, à retravailler pour le rendu voulu
pour le HTML
pour le CSS
Un exemple très basique, à retravailler pour le rendu voulu
pour le HTML
<div id="blockone"> <h1>Titre</h1> <h2>sous-titre</h2> </div> <div id="content-wrapper"> <div id="blocknavigation"> <!-- ici la navigation --> </div> <div id="blockcontent"> <!-- ici le contenu --> </div> </div>
pour le CSS
#blockone, #content-wrapper {width:90%; margin:auto}
#blocknavigation {width:25%; float:left}
#blockcontent {width:75%; float:left}
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
Ah non désolé je croyais qu'il n'y avait qu'une boîte pour la nav et le contenu.
Merci !
Qu'est-ce que je dois changer dans mon code html :
Et dans le CSS :
Merci !
Qu'est-ce que je dois changer dans mon code html :
<header>
<h1>Titre</h1>
<h2>Sous-titre</h2>
</header>
</br>
</br>
</br>
<div>
<h4>Contenu</h4>
</div>
<nav class="navigation">
<h3>Navigation :</h3>
<br />
<br />
<ul>
<li><a href="acceuil_titre.html">Acceuil</a></li><br />
<li><a href="/Test/test.html">Les tests</a></li><br />
<li><a href="me_contacter.html">Me contacter</a></li><br />
</ul>
</nav>
<footer></footer>
<br />
</body>
Et dans le CSS :
html
{
background-color: #83A9EA;
}
h3
{
font-weight: bold;
}
h2
{
text-indent: 25px; /*alinéa*/
}
h1
{
color: black;
font-weight: strong;
text-decoration: underline;
}
nav
{
height: 100%;
width: 20%;
background-color: #0C5DE8;
float: left;
}
div
{
float: right;
height: 50%;
width: 74%;
}
header
{
height: 140px;
width: 96%;
background-color: #0C5DE8;
}
header, div, nav, footer
{
border-radius: 10px;
padding-left: 10px; /*marge intérieure gauche*/
margin-left: 10px; /*marge extérieur gauche*/
padding-top: 1px;
background-color: #0C5DE8;
}
ul
{
list-style-type:none; /* suppr les puces*/
}
ul
{
list-style-type : none; /* éviter que les puces se placent n'importe où */
}
a:link, a:visited
{
color: #83A9EA;
font-weight: bold;
font-size: 20px;
}
a:hover
{
color: red;
}
C'est bon, j'ai réussi à mettre à droite mais j'ai toujours la ligne !
J'ai remarqué qu'elle disparaît quand j'enlève les "<br />" mais j'en ai besoin pour sauter une ligne!
SOS!!!
J'ai remarqué qu'elle disparaît quand j'enlève les "<br />" mais j'en ai besoin pour sauter une ligne!
SOS!!!
Un petit effort tout de meme !
tu as le code, essaie de l'intégrer seul sinon tu n'avancera pas dans la maitrise.
Pour la ligne bleu:
utilise Firefox
F12
Selectionne l'élément et analyse le CSS
perso je pense que ca vient de
header, div, nav, footer
en passant, je ne vois pas la raison d'un padding-top de 1px sur toutes les div ...
tu as le code, essaie de l'intégrer seul sinon tu n'avancera pas dans la maitrise.
Pour la ligne bleu:
utilise Firefox
F12
Selectionne l'élément et analyse le CSS
perso je pense que ca vient de
header, div, nav, footer
{
border-radius: 10px;
padding-left: 10px; /*marge intérieure gauche*/
margin-left: 10px; /*marge extérieur gauche*/
padding-top: 1px;
background-color: #0C5DE8;
}
en passant, je ne vois pas la raison d'un padding-top de 1px sur toutes les div ...
