+- N-PN White-Hat Project (https://dev.n-pn.fr/forum)
+-- Forum : Programmation (https://dev.n-pn.fr/forum/forumdisplay.php?fid=72)
+--- Forum : Langages interprétés (https://dev.n-pn.fr/forum/forumdisplay.php?fid=27)
+--- Sujet : [Html/Css] Positionnement de textes (/showthread.php?tid=1940)
[Html/Css] Positionnement de textes - P4ND4 - 27-02-2012
Bonsoir,
Alors voila je suis en train de faire un site web avec du html et du css. Le probleme c'est que je n'arrive pas à mettre ma sidebar à gauche et mon contenu à droite! Je sais très bien comment on positionne en css mais là... Sa ne marche pas, mon contenu est à droite mais ma sidebar est à gauche en bas. Et je veut quel sois a la même hauteur que mon contenu! Help Me Please!
Bonne Soirée A bientot!
PS: Désolé pour les fautes d'orthographes!
RE: Positionnement de textes. - supersnail - 27-02-2012
Bonjour,
Un bout de code (html/css) serait pas de refus
RE: Positionnement de textes. - P4ND4 - 27-02-2012
CSS :
Code :
.sidebar_item
{ padding: 0 0 0 15px;
width: 201px;}
.sidebar_item h1
{ padding: 20px 0 10px 0;
margin: 0;}Code :
<div style="width:250px; float:top; margin-left:20px;">
<div style="width:200px; float:top;"></div>
<br style="clear:both;" />
<h3>Actualité du projet</h3>
<div style="width:50px; float:top;"></div><p>Rejoingnez le projet Véganisation sur Facebook, <a href="http://www.facebook.com/pages/Projet-Veganisation/263832010355376">Cliquez ici</a></p>
<div style="width:200px; float:top;"><h2>Useful Information</h2></div>
<br style="clear:both;" />
<div style="width:50px; float:top;"><img src="images/icons/info.png" alt="info"/></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque cursus tempor enim. Aliquam facilisis neque non nunc posuere eget volutpat metus tincidunt</p>
<div style="width:50px; float:top;"><img src="images/icons/info.png" alt="info"/></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque cursus tempor enim. Aliquam facilisis neque non nunc posuere eget volutpat metus tincidunt</p>
</div>
<br style="clear:both;" />
</div>
</div>
</div>RE: Positionnement de textes. - (Y/n) - 27-02-2012
Salut P4NDA
Tout d'abord je te conseil de bien assimiler le cour sur HTML5/CSS3 de Matéo21 sur le site du zéro (http://www.siteduzero.com/tutoriel-3-13666-apprenez-a-creer-votre-site-web-avec-html5-et-css3.html)
Ensuite, personnellement, je mettrais mon un id à ma sidebar et mon contenu :
Code HTML:
Code :
<div id="sidebar"><!-- Ta sidebar ici --></div>
<div id="corps"><!-- Ton contenu ici --></div>Ensuite positionner les block en position absolut ou relative (j'avoue préférer le positionnement absolut) donc :
Code CSS:
Code :
#sidebar
{
position:absolute;
margin-top:/* Tu mets une valeur en pixel comme par exemple : 120px*/;
margin-bottom:/* Tu mets une valeur en pixel comme par exemple : 120px*/;
margin-left:/* Tu mets une valeur en pixel comme par exemple : 120px*/;
margin-right:/* Tu mets une valeur en pixel comme par exemple : 120px*/;
}
#corps
{
position:absolute;
margin-top:/* Tu mets une valeur en pixel comme par exemple : 120px*/;
margin-bottom:/* Tu mets une valeur en pixel comme par exemple : 120px*/;
margin-left:/* Tu mets une valeur en pixel comme par exemple : 120px*/;
margin-right:/* Tu mets une valeur en pixel comme par exemple : 120px*/;
}margin signifie la marge extérieur de ton block mais tu peux utilisé padding pour la marge intérieur, top veux dire haut, bottom c'est bas, right c'est droite et left gauche (logique
)Voila avec ça tu devrais t'en sortir
Cordialement,
(Y/n)
Edit : Tu devrais pas mettre trop de CSS dans ton HTML
Question de lisibilité pour toi Et fais des commentaires dans ton code ! :p
RE: Positionnement de textes. - supersnail - 27-02-2012
Bonjour,
Je suis d'accord concernant ce que dit (Y/n) concernant le html (au sujet des ID), par contre ne JAMAIS (sauf cas particuliers) utiliser le position pour mettre en place un site !
Tout simplement parce que chaque navigateur interprétant la page "à sa façon", les positions peuvent être toutes décalées d'un navigateur à l'autre.
L'utilisation des float:left (ou float:right) accompagnés de margin sont à préférer pour ce genre de choses.
RE: Positionnement de textes. - (Y/n) - 27-02-2012
Je n'ai jamais eu de problème pour le moment
Mais je vais pas attendre d'en avoir pour agir, merci
Cordialement,
(Y/n)
RE: Positionnement de textes. - Venoa - 27-02-2012
Personnellement j'utiliserai un float: left pour ce qui va à gauche puis un Margin pour garder le reste espacer ...
Est-ce bien ce que tu demandais ?