[Html/Css] Positionnement de textes

[P4ND4]

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!

[supersnail]

Bonjour,

Un bout de code (html/css) serait pas de refus

[P4ND4]

CSS :

Code :

.sidebar_item
{ padding: 0 0 0 15px;
  width: 201px;}

.sidebar_item h1
{ padding: 20px 0 10px 0;
  margin: 0;}

HTML :

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>

[(Y/n)]

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

[supersnail]

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.

[(Y/n)]

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)

[Venoa]

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 ?